《UI设计-AIGC驱动赋能界面完美设计》课件 3.2 任务实施

033.3任务实施UI设计——AIGC驱动赋能界面完美设计3.2.1思路解析本项目为“校缘通”App设计制作的图标主要包含应用图标、金刚区图标、标签栏图标三类。其中应用图标以“校缘通”中“通”字的首字母T做倾斜设计，搭配圆形组合构成，视觉上形成简约的人物抽象视感，也契合该App年轻化校园服务类的产品定位。金刚区图标采用毛玻璃设计风格，整体以面型图标为核心设计形式，配色上统一色彩的明度与饱和度，整体营造出明快活泼的视觉氛围，与App的目标受众群体特征相契合。本次所有图标均使用AdobeIllustrator软件制作，主要运用了软件的形状工具、路径查找器等功能完成设计与制作。3.2.2应用图标设计与制作苹果商店上架应用程序的图标尺寸要求为1024 px*1024 px。这是因为在不同的设备上，需要不同尺寸的图标，例如，在iPhone上，图标大小为180 px*180 px，而在iPad上，图标大小为167 px*167 px。苹果要求开发者提供1024 px*1024 px的高清图标，以便在不同设备上适配。应用图标应该保持简洁、明了，不要过于复杂或拥有过多的细节。简洁的设计可以更容易地吸引用户的注意力，并且在各种不同尺寸的屏幕上都能够清晰显示。3.1相关知识3.2任务实施3.2.2应用图标设计与制作iOS系统图标的栅格系统严格按照黄金分割比例进行设计，绘制时需借助栅格系统保证整套图标在视觉占比上达到相对平衡。（1）打开Illustrator，新建画布，"预设详细信息"为"启动图标"，宽度1024px，高度1024px，分辨率72像素，颜色模式RGB，如图3-8所示。（2）载入PNG格式iOS栅格系统文件。选择"圆角矩形工具"，填充蓝色（R=19,G=127,B=254），描边无，1024×1024px，圆角半径180px，绘制圆角矩形，如图3-9~3-11所示。图3-8参数设置图3-11圆角矩形图3-9栅格系统图3-10参数设置3.1相关知识3.2任务实施3.2.2应用图标设计与制作（4）选择工具箱中的“圆角矩形工具”，设置“填充”为白色（R=255，G=255，B=255），“描边”为无，“宽度”为890像素，“高度”为180像素，圆角“半径”为90像素，如图3-12所示。在画布中绘制一个圆角矩形，如图3-13所示。（5）选择工具箱中的“矩形工具”，设置“填充”为白色（R=255，G=255，B=255），“描边”为无，“宽度”为183像素，“高度”为429像素，如图3-14所示。（6）在画布中绘制一个矩形，如图3-15所示。选择工具箱中的“直接选择工具”，选择下方两个“锚点”向上方拖拽“边角构件”至最大圆角“半径”，如图3-15所示。图3-12参数设置图3-13添加圆角矩形图3-14高度宽度设置图3-15调整圆角3.1相关知识3.2任务实施3.2.2应用图标设计与制作（7）用快捷键“ctrl+shift+F9”调出“路径查找器”面板，如图3-16所示。按住“shift”键选择圆角矩形和矩形工具，点击“路径查找器”中的“联集”，将两个形状联合为一个整体，如图3-17所示。（8）选择工具箱中的“椭圆工具”，设置“填充”为白色（R=255，G=255，B=255），“描边”为无，“宽度”为200像素，“高度”为200像素，如图3-18所示。在画布中绘制一个正圆形，如图3-19所示。图3-16路径查找器面板图3-17形状组合图3-18参数设置图3-19绘制正圆3.1相关知识3.2任务实施3.2.2应用图标设计与制作（9）将图标全部选中，按住shift键进行45°倾斜，最终图标效果如图3-20所示。图3-20最终效果3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作金刚区是banner下方的功能入口导航区域，通常以“图标+文字”的宫格导航的形式出现。之所以叫“金刚区”，是因为该区域会随着业务目标的改变，展示不同的功能图标，就像“变形金刚”一样可百变。“金刚区”图标占据首页核心区域，通常位于首屏头部，是各项功能或业务的导航入口，设计样式有线性图标、面型图标、线面结合图标、实景图类图标、节日/活动主体图标。“校缘通”App界面的整体图标设计以面型+线性图标为主，金刚区图标风格为毛玻璃风格，图标内部添加渐变用来丰富界面色彩、吸引用户关注。各分类按钮采用同色系线性渐变方法设计。图标整体设计效果如图3-21所示。图3-21金刚区图标图3-21

金刚区图标3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作1.图标“游戏开黑”实现过程（1）打开Illustrator，打开菜单栏中的“文件”—“新建”命令，新建一个空白画布，“预设详细信息”为“金刚区图标”，设置画布的“宽度”为200像素，“高度”为200像素，“分辨率”为72像素，“颜色模式”为RGB颜色，如图3-22所示。（2）选择工具箱中的“圆角矩形工具”，设置“填色”为无，“描边”为黑色。在画布中绘制一个形状，设置“宽度”为，“高度”为，“圆角”为，如图3-23所示。选择图层面板，双击圆角矩形对象重命名为“圆角矩形1”，如图3-24所示。效果如图3-25所示。图3-22参数设置图3-23参数设置图3-24重命名图3-25效果3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作1.图标“游戏开黑”实现过程（3）选择“钢笔”工具，在“圆角矩形1”下方线段上添加“锚点”，如图3-26所示。选择“直接选择”工具，选择添加的“锚点”，将所选“锚点”向上移动，如图3-27所示。选择属性栏“将所选锚点转换为平滑”，选择下方“锚点”，选择“直接选择”工具，拖拽“边角构件”为圆角，如图3-28所示。效果如图3-29所示。图3-26添加锚点图3-27向上拖动锚点图3-28设置平滑圆角图3-29圆角效果3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作1.图标“游戏开黑”实现过程（4）选择画布中的“圆角矩形1”，将“描边”属性关闭，将描边置后，点击颜色设置“渐变填充”，调出“渐变”面板，如图3-30所示。双击左侧色块弹出“拾色器”面板，将左侧色块颜色修改为（R=254，G=138，B=216），如图3-31所示。双击右侧色块弹出“拾色器”面板，将右侧色块颜色修改为（R=254，G=31，B=186），如图3-32所示。最终效果如图3-33所示。图3-30渐变面板图3-31设置左侧参数图3-32设置右侧参数图3-33渐变效果3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作1.图标“游戏开黑”实现过程（5）选择“圆角矩形1”，按住alt键拖拽移动复制新的“圆角矩形”，选择图层面板，双击圆角矩形对象，重命名为“圆角矩形2”，选择菜单栏“效果”→“模糊”里面“高斯模糊”，如图3-34所示。设置“高斯模糊”的数值为3.461像素，如图3-35所示。最终效果如图3-36所示。图3-34选择高斯模糊图3-35高斯模糊参数图3-36模糊效果3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作1.图标“游戏开黑”实现过程（6）继续复制“圆角矩形1”，选择图层面板，双击圆角矩形对象，重命名为“圆角矩形3”，选中“圆角矩形3”，选择互换填充和描边工具，如图3-37所示，选择“圆角矩形3”，按住shift键加选“圆角矩形2”，属性栏点击“水平居中对齐”和“垂直居中对齐”，如图3-38所示。对齐效果如图3-39所示。选择“圆角矩形2”，加选“圆角矩形3”，使用快捷键“ctrl+7”创建剪切蒙版，最终效果如图3-40所示。图3-37填充和描边互换图3-38对齐方式图3-39对齐效果图3-40创建剪切蒙版最终效果3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作1.图标“游戏开黑”实现过程（7）继续复制“圆角矩形1”，选择图层面板，双击圆角矩形对象，重命名为“圆角矩形3”，选中“圆角矩形3”，选择互换填充和描边工具，加选“剪切组”图层，属性栏点击“水平居中对齐”和“垂直居中对齐”，最终效果如图3-41所示。（8）选择画布中所有的“圆角矩形”，错位摆放，如图3-42所示。（9）制作“圆角矩形”上方的小图标，选择“矩形工具”，设置“描边”为无，“填色”为白色。在画布中绘制矩形，设置“高度”为，“宽度”为，如图3-43所示。复制矩形，按住shift键旋转90°，两个矩形十字摆放，如图3-44所示。图3-41复制转换描边后效果图3-42位置摆放图3-43参数设置图3-44添加元素3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作1.图标“游戏开黑”实现过程（10）继续制作“圆角矩形”上方的小图标，选择“椭圆工具”，设置“描边”为无，“填色”为白色。在画布中绘制圆形，设置“高度”为，“宽度”为，如图3-45所示。复制“椭圆”，按住shift键向下移动摆放，最终效果如图3-46所示。（11）选择工具箱中的“文字工具”，在图标下方添加文本“游戏开黑”。设置字体为苹方、Regular，“字体大小”为16像素，颜色设置为（R=40，G=40，B=40），如图3-47所示。“游戏开黑”图标制作完成，整体效果如图3-48所示。图3-45参数设置图3-46添加圆形元素图3-47字符面板图3-48添加字体3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作2.图标“校园通告”实现过程（1）打开Illustrator，打开菜单栏中的“文件”—“新建”命令，新建一个空白画布，“预设详细信息”为“金刚区图标二”，设置画布的“宽度”为200像素，“高度”为200像素，“分辨率”为72像素，“颜色模式”为RGB颜色，如图3-49所示。（2）选择工具箱中的“多边形工具”，设置“填色”为无，“描边”为黑色。在画布中绘制一个形状，设置“宽度”为，“边数”为，如图3-50所示。选择图层面板双击圆角矩形对象重命名为“三角形1”，如图3-51所示。效果如图3-52所示。图3-49新建画布图3-50参数设置图3-51重命名图3-52三角形效果3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作2.图标“校园通告”实现过程（3）选择“直接选择工具”，选择“三角形1”最上方锚点，键盘下方向键移动到合适位置，拖拽“边角构件”调整合适的圆角弧度。使用“直接选择工具”框选左侧锚点，利用键盘左方向键将其移动到合适位置。使用“直接选择工具”框选右侧锚点，利用键盘右方向键移动到合适位置。使用“直接选择工具”选择左侧锚点，按住shift键加选右侧锚点，调整合适的圆角弧度，如图3-53所示。（4）选择“圆角矩形工具”，设置“填色”为无，“描边”为黑色。在画布中绘制一个形状，设置“宽度”为，“高度”为，“圆角半径”为7px，如图3-54所示。选择图层面板，双击圆角矩形对象，重命名为“圆角矩形1”，如图3-55所示。绘制效果如图3-56所示。图3-53设置三角形圆角弧度图3-54参数设置图3-55重命名图3-56绘制效果3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作2.图标“校园通告”实现过程（5）选择画布中的“圆角矩形1”按住shift加选“三角形1”，将“描边”属性关闭，将描边置后，点击颜色设置“渐变填充”，调出“渐变”面板，双击左侧色块弹出“拾色器”面板，将左侧色块颜色修改为（R=105，G=232，B=246），如图3-57所示。双击右侧色块弹出“拾色器”面板，将右侧色块颜色修改为（R=9，G=206，B=246），如图3-58所示。最终效果如图3-59所示。（6）“选择工具”框选“三角形1”和“圆角矩形1”，使用快捷键“ctrl+G”进行编组。选择图层面板，双击“编组”对象重命名为“组1”，如图3-60所示。图3-57设置左侧渐变参数图3-58设置右侧渐变参数图3-59渐变效果图3-60编组并重命名组13.1相关知识3.2任务实施3.2.3金刚区图标设计与制作2.图标“校园通告”实现过程（7）复制“ctrl+C”粘贴“ctrl+V”，选择图层面板双击“编组”对象重命名为“组2”，如图3-61所示。设置“高斯模糊”的数值为3.461像素，如图3-62所示。最终效果如图3-63所示。图3-61编组并重命名组2图3-62选择高斯模糊图3-63模糊效果3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作2.图标“校园通告”实现过程（8）选择“组1”复制，选择图层面板双击“编组”对象重命名为“线框”，选中“线框”，选择互换填充和描边工具，如图3-64所示。选择“线框”，按住shift键加选“组2”，属性栏点击“水平居中对齐”和“垂直居中对齐”，如图3-65所示。对齐效果如图3-66所示。（9）选择“线框”加选“组2”，使用快捷键“ctrl+7”创建剪切蒙版，最终效果如图3-67所示。图3-64互换为描边效果图3-65对齐方式图3-66对齐后效果图3-67创建剪切蒙版后效果3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作2.图标“校园通告”实现过程（10）继续复制“组1”。选择图层面板，双击圆角矩形对象重命名为“线框2”，选中“线框2”，选择互换填充和描边工具，调出“渐变”面板点击“反向渐变”，如图3-68所示。加选“剪切组”图层属性栏点击“水平居中对齐”和“垂直居中对齐”，最终效果如图3-69所示。（11）选择画布中所有对象，错位摆放，如图3-70所示。图3-68选择反向渐变图3-69对齐后效果图3-70摆放位置3.1相关知识3.2任务实施3.2.3金刚区图标设计与制作2.图标“校园通告”实现过程（12）制作“圆角矩形”上方的小图标，选择“矩形工具”，设置“描边”为无，“填色”为白色。在画布中绘制矩形，设置“宽度”为，“高度”为，如图3-71所示。复制矩形，向下移动，宽度缩小，最终效果如图3-72所示。（13）选择工具箱中的“文字工具”，在图标下方添加文本“游戏开黑”。设置字体为苹方、Regular，“字体大小”为16像素，颜色设置为“R=40，G=40，B=40”。“校园通告”图标制作完成，整体效果如图3-73所示。图3-71参数设置图3-72添加元素图3-73校园通告图标3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作App标签栏图标是指在移动应用程序界面的底部或顶部设置的一组小图标，用于表示不同的功能或导航选项。它们通常以固定的几个标签的形式呈现，用户可以通过点击这些标签来切换不同的界面或执行相应的功能。标签栏图标有两种状态——选中和未选中状态，分别对应的是面性图标和线性图标，设计效果分别如图3-74所示。接下来，以图标“首页”为例来讲解具体操作步骤。图3-74图标选中和未选中状态3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作1.图标“首页”实现过程（1）打开Illustrator，打开菜单栏中的“文件”—“新建”命令，新建一个空白画布，“预设详细信息”为“标签栏图标一”。设置画布的“宽度”为200像素，“高度”为200像素，“分辨率”为72像素，“颜色模式”为RGB颜色，如图3-75所示。（2）选择工具箱中的“多边形工具”，设置“填充”为无，“颜色”为黑色。在画布中绘制一个形状，然后设置“半径”为50像素，“边数”为3，如图3-76所示。效果如图3-77所示。选择图层面板，双击多边形对象，重命名为“三角形”，如图3-78所示。图3-75新建画布参数图3-76设置边数图3-77三角形图3-78重命名为三角形3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作1.图标“首页”实现过程（3）选择工具箱中的“直接选择工具”，单击三角形的三个锚点，对三角形的高度、宽度进行修改。三角形调整完成后的效果如图3-79所示。选择“直接选择工具”，选择三角形的三个锚点，拖拽“边角构件”为圆角，如图3-80所示。（4）选择工具箱中的“矩形工具”，设置“填充”为无，“颜色”为黑色。在画布中绘制一个形状，然后设置“宽度”为50像素，“高度”为36像素，如图3-81所示，效果如图3-82所示。图3-79图3-80图3-81图3-823.1相关知识3.2任务实施3.2.4标签栏图标设计与制作1.图标“首页”实现过程（5）选择工具箱中“圆角矩形”工具，设置“填充”为无，“颜色”为黑色，然后设置“宽度”为78像素，“高度”为7像素，“圆角半径”为4像素，如图3-83所示。（6）选择工具箱中“选择工具”，将矩形、三角形、圆角矩形居中对齐，效果如图3-84所示。使用快捷键“ctrl+shift+F9”调出“路径查找器”选项卡中执行“联集”命令，如图3-85所示。效果如图3-86所示。图3-83图3-84图3-85图3-863.1相关知识3.2任务实施3.2.4标签栏图标设计与制作1.图标“首页”实现过程（7）选择工具箱中的“直接选择”工具，按住“shift”键选择图标正方体四个“锚点”，如图3-87所示。拖拽四个“锚点”的“边角构件”为圆角，如图3-88所示。（8）设置图形的“填充”为蓝色（R=36，G=137，B=247），“描边”为无，效果如图3-89所示。图3-87图3-88图3-893.1相关知识3.2任务实施3.2.4标签栏图标设计与制作1.图标“首页”实现过程（9）选择图层面板双击路径对象重命名为“首页大图标”，如图3-90所示。选择“首页大图标”“ctrl+C”复制，“ctrl+V”粘贴，选择图层面板，双击首页大图标对象，重命名为“首页小图标”，如图3-91所示。效果如图3-92所示。图3-90重命名为首页大图标图3-91重命名为首页小图标图3-92摆放位置3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作1.图标“首页”实现过程（10）设置图形的“填充”为橙色（R=255，G=167，B=3），“描边”为无，效果如图3-93所示。向左移动“首页小图标”，与“首页大图标”重叠，选择“透明度”面板将图层的“混合模式”设置为“正片叠底”，如图3-94所示。设置“不透明度”为50%，如图3-95所示。效果如图3-96所示。图3-93设置形状样式图3-94选择正片叠底图3-95设置不透明度图3-96设置不透明度后效果3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作1.图标“首页”实现过程（11）选择工具箱中“圆角矩形”工具，设置“填充”为无，“颜色”为黑色，然后设置“宽度”为7像素，“高度”为31像素，“圆角半径”为4像素，如图3-97所示。设置图形的“填充”为橙色（R=255，G=167，B=3），“描边”为无，放置在合适的位置，效果如图3-98所示。按住“alt”键+“shift”键拖拽复制圆角矩形，放置在合适的位置，如图3-99所示。图3-97设置参数图3-98添加元素后效果图3-99复制矩形后效果3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作1.图标“首页”实现过程（12）选择工具箱中的“文字工具”，在图标下方添加文本“首页”。设置字体为苹方、Light，“字体大小”为12像素，颜色设置为（R=40，G=40，B=40），如图3-100所示。“首页”图标制作完成，整体效果如图3-101所示。图3-100图3-1013.1相关知识3.2任务实施3.2.4标签栏图标设计与制作2.图标“好物”实现过程（1）打开Illustrator，打开菜单栏中的“文件”—“新建”命令，新建一个空白画布，“预设详细信息”为“标签栏图标二”，设置画布的“宽度”为200像素，“高度”为200像素，“分辨率”为72像素，“颜色模式”为RGB颜色，如图3-102所示。（2）选择工具箱中的“矩形工具”，设置“填充”为无，“颜色”为黑色。在画布中绘制一个形状，然后设置“宽度”为80像素，“高度”为20像素，如图3-103所示。效果如图3-104所示。选择图层面板，双击多边形对象，重命名为“矩形1”，如图3-105所示。图3-102新建画布参数图3-103新建矩形图3-104绘制矩形图3-105重命名为矩形13.1相关知识3.2任务实施3.2.4标签栏图标设计与制作2.图标“好物”实现过程（3）选择工具箱中的“矩形工具”，设置“填充”为无，“颜色”为黑色。在画布中绘制一个形状，然后设置“宽度”为69像素，“高度”为42像素，如图3-106所示。效果如图3-107所示。选择图层面板双击多边形对象重命名为“矩形2”，如图3-108所示。图3-106矩形参数图3-107矩形效果图3-108重命名为矩形23.1相关知识3.2任务实施3.2.4标签栏图标设计与制作2.图标“好物”实现过程（4）选择工具箱中“选择工具”，将“矩形1”“矩形2”居中对齐，快捷键“ctrl+shift+F9”调出“路径查找器”选项卡中执行“联集”命令，如图3-109所示。效果如图3-110所示。选择图层面板，双击路径对象，重命名为“礼物盒体”，如图3-111所示。图3-109选择联集图3-110联集后效果图3-111重命名为“礼物盒体”3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作2.图标“好物”实现过程（5）选择工具箱中的“直接选择工具”，框选“礼物盒体”最上面两个锚点，如图3-112所示。拖拽“边角构件”为圆角，数值为8像素，如图3-113、3-114所示。图3-112选择锚点图3-113拖拽出圆角图3-114设置边角像素3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作2.图标“好物”实现过程（6）选择工具箱中的“直接选择工具”，框选“礼物盒体”中间两个锚点，如图3-115所示。拖拽“边角构件”为圆角，数值为3像素，如图3-116、3-117所示。图3-115选择锚点图3-116拖拽出圆角图3-117设置边角像素3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作2.图标“好物”实现过程（7）选择工具箱中的“直接选择工具”，框选“礼物盒体”最下面两个锚点，如图3-118所示。拖拽“边角构件”为圆角，数值为4像素，如图3-119、3-120所示。图3-118选择锚点图3-119拖拽出圆角图3-120设置边角像素3.2.4标签栏图标设计与制作2.图标“好物”实现过程（8）选择工具箱中的“椭圆工具”，设置“填充”为无，“颜色”为黑色。在画布中绘制一个形状，然后设置“宽度”为15像素，“高度”为23像素，如图3-121所示。效果如图3-122所示。选择图层面板，双击椭圆对象重命名为“椭圆1”，如图3-123所示。图3-121图3-122椭圆效果图3-123重命名为“椭圆1”3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作2.图标“好物”实现过程（9）选择工具箱中的“选择工具”，鼠标放在对象右上角，按住“shift”键旋转45°，如图3-124所示。鼠标右键“变换”“镜像”，如图3-125所示。图3-124图3-1253.1相关知识3.2任务实施3.2.4标签栏图标设计与制作2.图标“好物”实现过程（10）设置“垂直”“90°”“复制”，如图3-126所示。向右侧移动合适位置，如图3-127所示。选择图层面板，双击椭圆1对象重命名为“椭圆2”，如图3-128所示。图3-126图3-127形状位置图3-128重命名为“椭圆2”3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作2.图标“好物”实现过程（11）调整“椭圆1”“椭圆2”，“描边”粗细为3，如图3-129、图3-130。打开菜单栏“对象”“路径”“轮廓化描边”，将属性更改为“填充”，如图3-131、图3-132所示。图3-129设置描边图3-130描边效果图3-131设置轮廓描边图3-132轮廓化描边后效果3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作2.图标“好物”实现过程（12）选择工具箱中的“椭圆工具”，设置“填充”为无，“颜色”为黑色。在画布中绘制一个形状，然后设置“宽度”为14像素，“高度”为14像素，如图3-133所示，效果如图3-134所示。图3-133设置椭圆参数图3-134设置后效果3.1相关知识3.2任务实施3.2.4标签栏图标设计与制作2.图标“好物”实现过程（13）选择工具箱中的“选择工具”，选择三个椭圆对象，调出“路径查找器”选项卡中执行“联集”命令，如图3-135、图3-136所示。选择图层面板双击复合路径对象重命名为“礼盒蝴蝶”，如图3-137所示。（14）选择工具箱中的“矩形工具”，在画布中随意拖拽矩形框，放置位置需要和“礼盒蝴蝶”重合，如图3-138所示。图3-135图3-136连集后效果图3-137重命名为“礼盒蝴蝶”图3-