《UI设计-AIGC驱动赋能界面完美设计》课件 6.3 技能提升

066.3技能提升UI设计——AIGC驱动赋能界面完美设计6.3.1任务概述6.3.1

任务概述

依托AIGC打造活动视觉内容，围绕自驾出游路线推荐，引导用户出游实拍晒图，联动抽奖与免费流量听歌福利，整体图标统一采用玻璃质感3D设计，借此引流拉新、提升用户参与度。自驾出行路线板块，右上方使用小汽车图标，下方配文“自驾出游精心推荐路线，绝不踩雷”。鼓励用户晒图板块，右上方使用相机图标，下方配文“图片分享晒出风景照片，即可参与抽奖”。抽奖板块，右上方使用礼物盒图标，下方配文“有礼抽奖推荐商家晒单有礼，中奖率高”。参与免费流量听歌活动板块，右上方使用音乐符号图标，下方配文“音乐随享受在线申请，免费流量听歌”。6.3技能提升6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素根据任务概述，使用即梦AI生成图标，再配合PS或Figma进行排版优化。（1）打开即梦AI，选择“智能画布”，选择“文生图”，输入描述词“小汽车，蓝色，蓝紫色点缀，3D艺术，C4D，磨砂玻璃质感，透明感，UI设计风格，光线追踪，干净白色背景，参考Pinterest、Dribbble风格，使用OC渲染器，Blender渲染，减少细节，16K分辨”，选择生图模型“图片3.0”，默认尺寸，点击“立即生图”，如图6-37所示。6.3技能提升图6-37

描述词、参数设置6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（2）从生成的图片中选择合适的，选择消除笔工具，将车头部字母消除，如图6-38所示。6.3技能提升图6-38选择消除笔6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（3）消除后，选择抠图，去除背景，完成抠图编辑后导出并下载，如图6-39所示。6.3技能提升图6-396.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（4）相机、礼物、音乐图标按以上办法生成，导出下载即可，如图6-40所示。6.3技能提升图6-40生成6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（5）接着在Figma中进行排版编辑。在Figma中新建一个175×220大小的矩形，设置圆角数值为20，如图6-41所示。6.3技能提升图6-41新建矩形6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（6）将汽车图标复制粘贴到figma中，调整汽车图标的大小和位置，设置矩形填充为线性渐变填充，如图6-42所示。6.3技能提升图6-42渐变填充、汽车元素大小6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（7）绘制两个圆形，装饰丰富背景。填充颜色，两个圆形ctrl+G编组，通过ctrl+向下移动图层，调整大圆形位于汽车下方，调整后效果如图6-43所示。6.3技能提升图6-43绘制渐变形状并编组6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（8）复制矩形，同时选中矩形和圆形编组，鼠标右键选择“uesamas将两个圆形嵌入矩形中，如图6-44所示。效果如图6-45所示。6.3技能提升图6-44设置蒙版

图6-45设置蒙版后效果6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（9）添加文本，设置“自驾出游”字号、色、字重分别为20号、白色、加粗。设置行间距为20，字间距为26%，如图6-46所示。设置“精心推荐路线，绝不踩雷”参数如图6-47所示。6.3技能提升图6-46“自驾出游”文本设置图6-47“精心推荐路线，绝不踩雷”文本设置6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（10）继续调整优化画面。可调亮汽车图标颜色，双击汽车图标设置调色参数，如图6-48所示。6.3技能提升图6-48设置调色6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（11）其他三个模块可按此方法进行制作，最终效果如图6-49所示。6.3技能提升图6-49最终效果6.3巩固测练巩固测练实战项目：儿童启蒙教育类App设计项目背景：随着经济发展的不断提高，国民收入水平日益提升，现在“80后”“90后”家长群体的教育理念不断转变，家庭教育投入比重加大。同时科技水平的不断提高，也促进着线上教育的蓬勃发展，对教育的需求也进一步扩大。项目需求：此App是一款0～12岁线上儿童启蒙教育类App，提供线上儿童启蒙课程、绘本精读、哄睡儿歌、练习绘画以及益智游戏等为一体的启蒙教育平台，旨在为宝宝良好的早教环境并增加亲子间的情感交流。基础参数：iPho