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

044.2任务实施4.2.1闪屏页界面设计思路解析4.2任务实施本项目设计制作“校缘通”App的闪屏页，主要以宣传品牌为主，画面的主要组成部分是“产品名称+产品形象+产品广告语”，整体色调以品牌的蓝色为主色，页面中间的商业插画元素主要以能体现App的核心功能为主，启动图标放置在页面的底部，如图4-15所示。图4-16

新建画布参数4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（1）选择工具箱中的“椭圆工具”，在工具属性栏中将“填充”更改为无，“描边”设置为黑色。在画布中绘制一个椭圆，设置“宽度”为，“高度”为，如图4-17、图4-18所示。图4-17图4-181.新建文件

打开Illustrator，执行菜单栏中的“文件”—“新建”命令，新建一个空白画布。设置“预设详细信息”为闪屏页制作，设置“宽度”为1125

px，“高度”为2436

px，“颜色模式”为RGB颜色，“分辨率”为屏幕（72 dpi），如图4-16所示。图4-16

新建画布参数4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（2）选择工具箱中的“钢笔工具”，在椭圆的右侧添加两个锚点，如图4-19所示。选择工具箱中的“直接选择工具”，选择椭圆右侧中间锚点，向左侧拖拽并且调整添加锚点的控制手柄，如图4-20所示。图4-19

选择锚点图4-20

调整后样式4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（3）在工具属性栏中将“描边”设置为无，“填充”颜色设置为蓝色到青色渐变色，左侧蓝色（R=19、G=127、B=254）、右侧青色（R=100、G=218、B=254），右侧滑块向左侧移，“角度”设置为90°，如图4-21所示。效果如图4-22所示。图4-21

设置渐变填充

图4-22

渐变效果4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（4）选择工具箱中的“椭圆”工具，在工具属性栏中将“填充”更改为无，“描边”设置为黑色。在画布中绘制一个椭圆，设置宽度为，高度为，如图4-23、图4-24所示。图4-23

形状参数

图4-24

设置后效果

4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（5）选择工具箱中的“矩形”工具，在工具属性栏中将“填充”更改为无，“描边”设置黑色。在画布中绘制一个长方形，设置为，高度为，如图4-25、图4-26所示。选择椭圆和长方形点击属性栏“水平居中”，效果如图4-27所示。图4-25

设置矩形参数图4-26

矩形图4-27

位置放置4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（6）选择工具箱中的“自由变换工具”中的“透视扭曲工具”，调整对象上方锚点的透视，如图4-28所示。（7）选择工具箱中的“旋转工具”，按住“alt”键点击椭圆中心点，设置“旋转角度”为45°，如图4-29所示。图4-29

设置重复旋转图4-28

设置透视4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（8）选择工具箱中的“选择工具”，全选所有对象，按“ctrl+shift+alt+F9”调出“路径查找器”点击“联集”，如图4-30、图4-31所示。（9）选择工具箱中的“椭圆工具”，在工具属性栏中将“填充”更改为无，“描边”设置黑色。在画布中绘制一个椭圆，设置宽为，高为，如图4-32所示。图4-30

选择联集图4-31

联集后效果图4-32

绘制椭圆4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（10）选择椭圆和齿轮对象点击属性栏“水平居中”“垂直居中”，使用快捷键“ctrl+8”建立“复合路径”。在工具属性栏中将“描边”设置为无，“填充”颜色设置为蓝色到青色渐变色，左侧蓝色（R=19、G=127、B=254），右侧青色（R=100、G=218、B=254），右侧滑块向左侧移，“角度”设置为90°，如图4-33所示。效果如图4-34所示。（11）在工具属性栏中将“描边”设置为黑色，“填充”设置为无，选择工具箱中的“钢笔工具”绘制一个不规则图形，如图4-35所示。图4-33

设置渐变图4-34

渐变效果图4-35

绘制形状4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（12）在工具属性栏中将“描边”设置为无，“填充”颜色设置为蓝色到青色渐变色，左侧蓝色（R=19、G=127、B=254），右侧青色（R=100、G=218、B=254），右侧滑块向左侧移，“角度”设置为90°，如图4-36所示。（13）工具属性栏中将“描边”设置为黑色，“填充”设置为无，选择工具箱中的“钢笔工具”绘制一个不规则图形，如图4-37所示。图4-36

设置渐变图4-37

绘制不规则形状4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（14）在“描边”属性栏中设置“粗细”，“虚线”为9 pt，如图4-38所示。在属性栏设置“描边”颜色为深蓝色（R=1、G=82、B=136），如图4-39所示。图4-38

设置参数图4-39

设置后效果4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（15）选择工具箱中的“矩形工具”，在工具属性栏中将“填充”更改为无，“描边”设置为黑色。在画布中绘制一个矩形，设置“宽度”为，“高度”为，如图4-40、图4-41所示。图4-40

矩形参数图4-41

矩形4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（16）在“描边”属性栏设置“粗细”，“虚线”为9 pt，如图4-42所示。在属性栏设置“描边”颜色深蓝色（R=1、G=82、B=136），如图4-43所示。（17）在矩形的四个角上分别绘制四个小矩形，旋转调整合适的倾斜角度，如图4-44所示。图4-42描边参数图4-43描边填色

图4-44绘制矩形并旋转4.2.2闪屏页界面设计与制作4.2任务实施2.制作页面主体插画背景部分（18）复制齿轮和山，摆放至界面合适的位置，页面主体插画背景部分制作完成，效果如图4-45所示。图4-454.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（1）选择工具箱中的“矩形”工具，在工具属性栏中将“填充”更改为白色，“描边”设置为无。在画布中绘制一个矩形，设置“宽度”为，“高度”为，如图4-46、图4-47所示。图4-46

矩形参数图4-47

矩形4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（2）其他矩形和椭圆形可以按照图例进行制作，如图4-示。其余矩形面板制作效果，如图4-48、图4-50所示。图中所使用的颜色色值分别为，灰色（R=216、G=210、B=210）、浅灰色（R=242、G=242、B=242）、橘红色（R=254、G=106、B=60）、黄色（R=253、G=172、B=25）、蓝色（R=0、G=134、B=202）、深蓝色（R=1、G=82、B=136）。图4-48

形状制作图4-49

面板效果图4-50

新建描边矩形4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（3）选择工具箱中的“矩形工具”在工具属性栏中将“填充”更改为无，“描边”设置黑色。在画布中绘制一个矩形，设置“宽度”为，“高度”为，如图4-51、图4-52所示。（4）制作对话框，选择工具箱中的“选择工具”，拖动四个边的“边角构件”圆角数值为，如图4-53所示。图4-51

新建描边矩形图4-52

描边矩形图4-53

设置圆角4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（5）选择工具箱中的“直接选择工具”，调整矩形锚点和控制手柄为不规则形状，如图4-54所示。在矩形的右下角添加3个锚点，将添加的3个锚点转换成尖角，向下拖拽中间添加的锚点，如图4-55、图4-56所示。（6）属性栏设置“描边”颜色为橘红色（R=254、G=106、B=60），如图4-57所示。图4-54

调整为不规则形状图4-55

右下角添加三个锚点图4-56

向下拖拽中间锚点图4-57

填充形状4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（7）制作播放器。结合步骤三对话框的制作流程，完成下方播放器的制作，相关颜色色值如步骤1所示，效果如图4-58所示。（8）制作小喇叭。选择工具箱中的“钢笔工具”，在工具属性栏中将“填充”设置为无，“描边”设置颜色为R=0、G=134、B=202。在画布中绘制一倾斜的线段，选择工具箱中的“宽度工具”，在路径两端的锚点上拉宽度，如图4-59所示。图4-58

播放器

图4-59

钢笔工具绘制形状4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（9）选择菜单栏的“对象”里面的“路径”“轮廓化描边”，在小喇叭较宽一侧的路径上添加“锚点”，属性栏将所选锚点转换为平滑，调整控制手柄到合适的弧度，如图4-60所示。选择小喇叭尾部较窄的一侧两端锚点，拖拽“边角构件”至最大弧度，在小喇叭的两侧分别添加锚点，属性栏所选锚点转换为平滑，调整控制手柄到合适的角度，如图4-61所示。（10）选择工具箱中的“椭圆工具”，在工具属性栏中将“填充”更改深蓝色（R=1、G=82、B=136），“描边”设置为无，如图4-62所示。将鼠标放在右上角锚点位置，旋转15°左右放置在小喇叭上方，如图4-63所示。图4-60

添加锚点控制弧度图4-61

调整到合适角度图4-62

绘制椭圆图4-63

组合元素4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（11）制作小喇叭手柄，选择工具箱中的“钢笔工具”，绘制不规则形状，在工具属性栏中将“填充”更改为橙色（R=254、G=106、B=60），如图4-64所示。（12）选择工具箱中的“椭圆工具”，绘制不规则椭圆，在工具属性栏中将“填充”更改为无，“描边”设置为深蓝色（R=1、G=82、B=136），设置属性栏“描边”粗细为1pt，选择菜单栏“对象”—“路径”—“轮廓化描边”，如图4-65所示。图4-64

绘制不规则形状图4-65

轮廓化描边4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（13）工具箱中的“椭圆工具”，绘制不规则椭圆，在工具属性栏中将“填充”更改为黄色（R=253、G=172、B=25），“描边”设置为无，如图4-66所示。（14）选择工具箱中的“钢笔工具”，绘制不规则形状，在工具属性栏中将“填充”更改为橘红（R=254、G=106、B=60），如图4-67所示，最终效果图4-68、图4-69所示。

图4-66

绘制黄色形状图4-67

绘制橙色形状图4-68

组合形状图4-69

喇叭形状组合4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（15）选择工具箱中的“钢笔工具”，绘制一条倾斜的路径，在工具属性栏中将“描边”更改为橙色（R=254、G=106、B=60），“填充”更改为无，如图4-70所示。（16）选择工具箱中的“宽度工具”，在路径两端的锚点上拉宽度，如图4-71所示。选择菜单栏“对象”—“路径”—“轮廓化描边”，选择工具箱中的“钢笔工具”在较宽一侧的路径上添加“锚点”，属性栏将所选锚点转换为平滑，调整控制手柄到合适的弧度，在对象两侧分别添加“锚点”，属性栏将所添加锚点转换为平滑，调整控制手柄到合适的弧度，如图4-72所示。图4-70

绘制路径图4-71拉宽度图4-72

调弧度4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（17）选择工具箱中的“椭圆”工具，在属性栏中将“描边”更改为无，“填充”更改为白色，小喇叭最终效果如图4-73所示。（18）制作放大镜，选择“椭圆”工具，在工具属性栏中将“填充”更改为无，“描边”更改为蓝绿色（R=22、G=147、B=184），在画布中绘制一个圆形，设置“宽度”为，“高度”为，如图4-74所示。属性栏调整“描边”粗细为，选择菜单栏“对象”—“路径”—“轮廓化描边”，如图4-75所示。图4-73

最终效果图4-74

绘制形状图4-75

轮廓化描边4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（19）选择“椭圆”工具，在工具属性栏中将“填充”更改为无，“描边”更改为白色。在画布中绘制一个圆形，设置“宽度”为，“高度”为，如图4-76所示。在属性栏调整“描边”粗细为1 pt，如图4-77所示。（20）选择“椭圆”工具，在工具属性栏中将“填充”更改为淡青色（R=187、G=230、B=221），“描边”更改为无，在画布中绘制一个圆形，设置“宽度”为，“高度”为，如图4-78所示。属性栏“不透明度”为38%，如图4-79所示。图4-76

绘制椭圆图4-77

设置描边

图4-78

绘制圆形图4-79

设置不透明度效果

4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（21）选择“椭圆”工具，在工具属性栏中将“填充”更改为浅灰色（R=227、G=226、B=223），“描边”更改为无，在画布中绘制一个圆形，设置“宽度”为，“高度”为，如图4-80、图4-81所示。（22）鼠标放在椭圆上右键“变换”—“移动”数值如图4-82、图4-83所示，框选两个椭圆形按“ctrl+shift+alt+F9”调出“路径查找器”点击“减去顶层”如图4-84所示。属性栏调整“不透明度”为78%，如图4-85、图4-86所示。图4-80

圆形参数图4-81

圆形

图4-82

设置变换移动

4.2任务实施4.2任务实施图4-83

移动参数图4-84

减去顶层

图4-85

设置不透明度图4-86

组合元素4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（23）选择工具箱中的“矩形工具”，在工具属性栏中将“填充”更改为橙红色（R=254、G=106、B=60），“描边”更改为无，在画布中绘制一个长方形，设置“宽度”为，“高度”为，如图4-87、图4-88所示。（24）选择工具箱中的“矩形工具”，在工具属性栏中将“填充”更改为橙黄色（R=253、G=172、B=25），“描边”更改为无，在画布中绘制一个长方形，设置“宽度”为，“高度”为，如图4-89、图4-90所示。图4-87绘制矩形图4-88

矩形效果图4-89

矩形参数图4-90

矩形效果4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（25）选择工具箱中的“直接选择工具”向内侧分别移动两个锚点，如图4-91所示。继续选择工具箱中的“矩形工具”，在工具属性栏中将“填充”更改为白色，“描边”更改为无，在画布中绘制一个长方形，设置“宽度”为，“高度”为2 px放大镜完成效果图如图4-92所示。图4-91

调整矩形形状图4-92

放大镜4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（26）按照以上步骤及制作方法来做钳子和笔的元素，效果如图4-93、图4-94所示。图4-93

钳子图4-94

笔4.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（27）手势制作，选择工具箱中的“钢笔工具”，在工具属性栏中将“填充”更改为无，“描边”设置为黑色。在画布中绘制不规则形状，如图4-95~图4-97所示，图中所使用的颜色色值分别为：手部浅粉色（R=252、G=212、B=202）、衣服袖子深青色（R=2、G=121、B=125）、衣服袖子橘红色（R=254、G=106、B=60）、衣服袖子黄色（R=253、G=172、B=25）、衣服袖子蓝色（R=0、G=134、B=202）。图4-95

手势1图4-96

手势2图4-97

手势34.2.2闪屏页界面设计与制作4.2任务实施3.制作页面主体元素（28）将以上所有完成的闪屏页面元素放置到恰当的位置，置入“背景纹理”素材，整体效果如图4-98所示。闪屏元素绘制完成，最终效果如图4-99所示。图4-98

元素组合

图4-99

闪屏页整体效果4.2.3引导页设计思路解析4.2任务实施本项目的引导页由简要精练的文案搭配该产品的功能框架组成，引导页面提供App功能亮点，配合情感化插图，能让用户更快捷理解产品定位，如图4-100所示。图4-100

引导页4.2.4引导页设计与制作4.2任务实施1.主体插画绘制（1）打开Illustrator，执行菜单栏中的“文件”—“新建”命令，新建一个空白画布。设置“预设详细信息”为引导页制作，设置“宽度”为，“高度”为，“颜色模式”为RGB颜色，“分辨率”为屏幕（72 dpi），如图4-101所示。（2）头发绘制，选择工具箱中的“钢笔工具”绘制不规则形状，制作头发时需要按照不同颜色的层次进行绘制，使用到的色彩有深棕色（R=132、G=88、B=31），暗棕色（R=112、G=76、B=22），深红棕色（R=91、G=59、B=16），暗红棕色（R=73、G=46、B=14），效果如图4-102所示。图4-101

新建画布图4-102绘制头发4.2.4引导页设计与制作4.2任务实施1.主体插画绘制（3）脸部绘制，选择工具箱中的“钢笔工具”绘制不规则形状，需要先绘制面部大致轮廓及插画人物的耳朵部分，五官中眉毛的绘制需要将“填充”属性设置为无，将“描边”属性设置为黑色，选择工具箱中的“钢笔工具”绘制弧形，将属性面板中的“描边”粗细设置为3 pt，“端点”设置为“圆头端点”，如图4-103、图4-104所示。（4）脸部绘制，五官中鼻子的绘制需要将“填充”属性设置为无，将“描边”属性设置为深粉红色（R=193、G=126、B=112），选择工具箱中的“钢笔工具”绘制鼻子的弧形，将属性面板中的“描边”粗细设置为1pt，将“变量宽度配置文件”设置为“宽度配置文件1”，如图4-105所示。图4-103

设置参数图4-104

绘制脸部图4-105

设置宽度配置文件4.2任务实施（5）脸部红色圆圈使用工具箱中的“椭圆”绘制，“填充”颜色为浅棕红色（R=221、G=146、B=131）。嘴巴绘制是使用工具箱中的“钢笔工具”绘制不规则形状，“填充”颜色设置为白色，效果如图4-106所示。（6）插画人物上半身绘制，选择工具箱中的“钢笔工具”绘制不规则形状，脖子绘制所使用到的色彩是浅棕红色（R=221、G=146、B=131），身体绘制所使用到的颜色是深紫色（R=110、G=85、B=170），左右胳膊绘制所使用到的颜色分别为深蓝紫色（R=75、G=64、B=137）、深紫色（R=91、G=72、B=150），手部绘制所使用到的颜色为浅粉红色（R=239、G=168、B=149），效果如图4-107所示。4.2.4引导页设计与制作1.主体插画绘制图4-106

脸部效果图4-107

绘制上半身

4.2任务实施（7）插画人物下半身腿部绘制，选择工具箱中的“钢笔工具”绘制不规则形状。右腿绘制所使用到的颜色分别为青绿色（R=18、G=183、B=161）腿部阴影颜色为暗绿色（R=16、G=160、B=136）左腿绘制所使用到的颜色分别为深绿色（R=12、G=119、B=98）腿部使用颜色为深蓝绿色（R=8、G=99、B=82）脚步绘制所使用到的颜色为浅红色（R=229、G=153、B=137）鞋子绘制所使用到的颜色为青绿色（R=34、G=170、B=170）深青色（R=28、G=153、B=149），效果如图1-108所示。4.2.4引导页设计与制作1.主体插画绘制图4-108

绘制下半身4.2任务实施（8）笔记本电脑绘制，选择工具箱中的“圆角矩形”，在工具属性栏中将“填充”更改为天蓝色（R=81、G=177、B=224），“描边”更改为无，在画布中绘制一个圆角矩形，设置“宽度”为，“高度”为，“圆角”为4 px，如图4-109、图4-110所示。（9）选择工具箱中的“倾斜工具”，调整到适当的倾斜度，如图4-1011所示。使用相同的方法绘制笔记本电脑其他部分，其中使用到的宝石蓝色的色值为（R=78、G=140、B=102），浅蓝色（R=128、G=193、B=137），海洋蓝色（R=66、G=128、B=178），效果如图4-112所示。4.2.4引导页设计与制作1.主体插画绘制图4-109

绘制矩形图4-110

矩形图4-111

调整倾斜度图4-112

绘制电脑4.2.4引导页设计与制作4.2任务实施1.主体插画绘制（10）椅子绘制。选择工具箱中的“钢笔工具”