AIGC辅助美妆APP界面设计实操面向人工智能的UI界面设计90课件讲解.pptxVIP

面向人工智能的UI界面设计UIDesignforArtificialIntelligenceAIGC辅助美妆APP界面设计实操主讲人：何坚

AI-orientedUIDesign面向人工智能的UI界面设计

AIGC辅助美妆APP界面设计实操

案例导入以“HelloMakeup”这个美妆APP为例，完整地走一遍从0到1的界面设计流程。运用即梦AI这个工具，来高效生成高保真布局、图标至产品图等核心视觉素材，最终在AdobeXD中完成设计的整合、优化与交付。界面布局设计快速获得高保真布局灵感使用即梦AI生成界面初稿

提示词美妆购物APP界面，手机屏幕展示商品瀑布流布局，简洁图标导航栏，淡紫色渐变主题色，卡片式商品展示，购买按钮悬浮动画，高清渲染，科技感UI设计。界面布局设计1

界面布局设计可以多次生成，之后我们得到了一些界面初稿，我们可以预览并下载合适的图片，作为后续设计的参考。

提示词极简主义风格的UI设计，标题为“HelloMakeup”。画面由多个完整的手机屏幕界面组成，左侧两个界面展示化妆品品类和相关色彩的列表，中间两个界面展示一张带有紫色风格化妆品和几何线条装饰的化妆品照片，右侧界面展示真实模特精修图和化妆品ins风广告。整体配色以白色、紫色和浅灰色为主，氛围现代简约且富有科技感。画面底部有多个图标和文字信息用作交互按钮。界面布局设计1

界面布局设计使用即梦AI生成美妆APP的核心视觉素材，包括APP图标、导航图标和产品渲染图。

第一步：APP图标的生成与精修LOGO品牌标志，极简，图型设计，花朵与树叶融合，下面HelloMakeup，国际化，丝印冷烫，高级感，扁平化，设计感，淡紫色与粉色结合。生成核心视觉素材以“HelloMakeup”为例，明确设计方向：极简、清新、紫色系、毛玻璃质感。1在即梦AI中输入提示词，生成APP图标初稿。

生成核心视觉素材第二步：导航图标的生成与标准化1

第三步：产品渲染图的生成生成核心视觉素材以“栀子花香沐浴露”为例，输入详细的摄影风格提示词，生成高质量产品图。1提示词需包含产品描述、拍摄角度、光影、场景要素。

提示词一瓶渐变绿色的植物平衡沐浴露，配白色按压泵头，瓶身标签印有商品名“Shampoo”，容量“Net:17fl.oz500ml”，仰视角度放置在台面上（台面上有白色的丝绸），产品左边旁边有一些花朵（茉莉花、栀子花），背景是好看的蓝天白云景色，简单的绿植，光线柔和通透，色调偏暖色，以产品摄影风格突出细节，浅景深聚焦主体，体现自然纯净的质感，画面层次丰富，氛围光强，居中构图，使用110毫米镜头,8K,高分辨率。界面布局设计1

生成核心视觉素材为什么要生成产品图呢？1在现实情况下不论是现场拍摄还是建模产品图都会耗时耗力，AI生成美妆产品渲染图能极大降低成本。设计优化与交付走查、动效设计与交付准备将设计稿导出为图片，使用豆包AI进行用户体验审查，检查色彩对比度、可读性、布局逻辑等。

通过即梦AI生成了美妆APP界面布局与视觉素材。再使用XD进行精细化整合与动效设计。课堂小结