《UI设计-AIGC驱动赋能界面完美设计》课件项目四 设计与制作“校缘通”App项目- 引导页界面设计（一）

04项目四设计与制作“校缘通”App项目

引导页界面设计（一）UI设计——AIGC驱动赋能界面完美设计4.1相关知识4.2任务实施4.3技能提升044.1相关知识

4.1.1闪屏页4.1相关知识App闪屏页是移动应用启动时展示的页面，通常用于呈现应用的品牌标识、名称及相关品牌信息，会在启动阶段短暂显示后，自动跳转至应用主界面或登录界面。作为用户接触应用的首个视觉触点，闪屏页的设计要求尤为考究。其展示时长极短，通常仅1

s左右，如何在这一有限时间内精准传递产品定位，是设计师需要重点考量的核心问题。唯有设计出定位清晰、视觉吸睛的闪屏页，才能有效强化用户对产品的认知与记忆。闪屏页主要分为品牌宣传型、节假关怀型、活动推广型三类，不同类型的闪屏页，所承载的内容信息与视觉表达形式均各有侧重。4.1.1闪屏页4.1相关知识1.品牌宣传型

App闪屏页的核心设计目的是彰显产品品牌，核心组成元素为“产品名称+产品形象+产品广告语”，其中品牌宣传型闪屏页是最直观的类型，设计上追求简洁精炼，以突出品牌核心特征为核心，如图4-1所示。2.节假关怀型

每逢节假日，多数App会通过营造节日氛围传递人文关怀。当用户看到贴合节日的暖心插画时，能真切感受到产品带来的节日祝福，进而获得愉悦的使用体验。QQ空间在节日闪屏页的设计中，会对品牌logo进行节日化延展设计，融入鲜明的节日元素，如图4-2所示。图4-1品牌宣传型App闪屏页图4-2节日关怀型App闪屏页4.1.1闪屏页4.1相关知识3.活动推广型

以特色活动为核心开展营销策划，围绕用户核心利益点营造专属活动氛围，这类闪屏页多以插画形式呈现。设计时需重点突出活动主题与关键时间节点，明确视觉主次逻辑，避免因场景画面过于繁复弱化核心信息的表达，如图4-3所示。图4-3活动推广型App闪屏页4.1.2引导页4.1相关知识引导页概述引导页是用户首次打开应用时展示的页面，核心目的是向用户介绍应用的功能、特色与使用方法。这类页面通常由不超过5页的可左右滑动屏组成，能够帮助新用户快速熟悉应用核心功能，同时完成基础的使用指引。1.功能介绍型功能介绍型引导页是引导页中最基础的类型，信息展示需具备强针对性，切忌文字冗杂。设计师需在短暂的3秒内，为用户呈现文案简洁明了、界面直观易懂的内容。功能介绍型分为带按钮和不带按钮两种，社交类产品常加入登录入口，如图4-5所示。图4-4功能介绍型App引导页图4-5引导页登录入口4.1.2引导页4.1相关知识2.推广介绍型此类引导页以传递品牌理念与价值主张为核心目的，侧重引发用户情感共鸣，通过阐述产品的品牌使命与人文情怀，清晰展现App的市场定位与视觉风格，如图4-6所示。3.问题解决型此类引导页聚焦用户实际生活中的痛点问题并给出对应解决方案，以此建立用户与App之间的情感联结，提升用户对产品的好感度，进而增强用户黏性，如图4-7所示。图4-6推广介绍型App引导页图4-7问题解决型App引导页4.1.2引导页4.1相关知识4.浮层引导页浮层引导页一般出现在功能操作提示中，是为了让用户在使用过程中更好地解决问题而提前设计的用户指导。这种引导页的浮层通常以手绘表现方式为主，使用箭头和圆圈进行设计，并用高亮的颜色来突出信息，同时采用蒙版方式来加强突出功能，如图4-8所示。图4-8浮层引导页4.1.3表现方式4.1相关知识1.固定框架类框架类引导页由简要精练的文案搭配该产品的功能框架组成，是引导页最常用的表现形式，常用于基本功能类和使用方法类界面，如图4-9所示。2.图片与文字组合图文结合是引导页设计中较为常见的表现形式，主要由文字搭配图片、手绘插图构成。设计时文字需简洁凝练，视觉层面结合产品定位，搭配契合使用场景、富有画面意境的插图，实现图文协调融合，如图4-10所示。图4-9功能框架类图4-10图文结合4.1.3表现方式4.1相关知识3.动态效果展示通过上下滑动、左右切换、拉伸放大、点击跳转、退出过渡等动态效果，将3～4个引导页界面串联起来，并搭配契合产品调性的背景音乐。用户浏览时能获得新奇有趣的交互体验，打破传统静态页面的单一沉闷感，如图4-11所示。4.视频展示引导页除静态界面、动效引导外，还可采用视频播放形式展示产品功能和信息，例如播放一段开场视频向用户传递产品的使用方式与功能，这类引导页设计多用于拍照、记录、交友、发布类多媒体等应用产品，如图4-12所示。图4-11动效展示图4-12视频展示4.1.4设计原则4.1相关知识1.合理化原则仅围绕核心需求开展内容引导，根据设计目的与出发点的不同，引导页可划分为产品说明类、使用说明类、推广类、问题解决类四大类。设计前期需对引导页进行全面分析，以此制定贴合需求的合理化设计方案。2.优化编排原则引导页常用设计形式包含文字与界面组合、文字与插图组合、动态效果搭配音乐、视频特效等；常见编排方式有逐一展示、故事串联、节日应景等。逐一展示是将核心内容提炼为独立要点并按序排列，各要点之间无需建立强关联。3.眼球效应原则有效吸引用户注意力，才能让引导页传播效果事半功倍。设计时需将视觉焦点聚焦于核心信息，通过光影突出、背景虚化、局部放大等方式强化信息表达。眼球效应也可通过交互效果、动画、视频等动态形式实现。4.1.5空白页4.1相关知识1.首次进入型空白页分为首次进入型和错误提示型两种，是由于网络问题或没有内容造成的页面。在用户第一次打开应用时，App会利用空白页的提示引导用户进行操作，指引用户找到需要的内容，如图4-13所示。2.错误提示型错误提示型空白页在网页和App中均常见，例如显示“找不到页面”或“网络中断”等，如图4-14所示。这类页面一般会指引用户解决问题，例如点击“刷新页面”按钮可以刷新页面。空白页设计一定要简洁明了。图4-13首次进入型空白页图4-14错误提示型空白页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）椅子绘制。选择工具箱中的“钢笔工具”绘制椅子背不规则形状，绘制所使用到的颜色为深海蓝色（R=54、G=69、B=96）和蓝紫色（R=81、G=98、B=135）。椅子腿绘制，选择工具箱中的“矩形工具”，在工具属性栏中将“填充”更改为黄褐色（R=204、G=200、B=168），“描边”更改为无，在画布中绘制一个矩形，设置“宽度”为，“高度”为，如图4-113所示。（11）选择工具箱中的“自由变换工具”中的“透视扭曲”，将矩形下方进行透视调整，如图4-114所示，其他椅子腿操作步骤方法一致，绘制完成效果如图4-115所示。图4-115

主体效果图4-113

绘制矩形图4-114

绘制椅子腿4.2.4引导页设计与制作4.2任务实施2.背景绘制

背景的元素采用浅灰色氛围的烘托，大致表现的是和商业插画相符合的场景，绘制方法如商业插画同样的操作步骤，整体效果如图4-116所示。3.文案层级排版

文案采用iOS苹方字体，一级标题文案采用的是苹方Medium字重，二级标题文案采用的是苹方Regular字重，文字粗细及大小视觉层级拉开，提升重点文字突出，效果如图4-117所示。图4-116

添加背景后效果图4-117

文字排版4.2.4引导页设计与制作4.2任务实施4.轮播点控件和按钮制作（1）引导页滑动操作的轮播点控件制作，本项目案例使用的尺寸为“宽度”为，“高度”为，灰色色值为（R=219、G=219、B=219），浏览本页状态的轮播条控件显示状态，使用尺寸“宽度”为，“高度”为，最大“圆角”状态，使用的颜色为品牌主色蓝色色值（R=18、G=128、B=153），放置在页面的下方居中位置，效果如图4-118所示。（2）引导页最后一个页面采用开始体验按钮操作，方便用户在引导页显示界面时随时跳转到App的首页，按钮使用“圆角矩形”，使用的尺寸为“宽度”为，“高度”为，最大“圆角”状态，使用的颜色为品牌主色的渐变色，两个蓝色色值为（R=18、G=128、B=153），（R=18、G=156、B=253），使用苹方Bold字重，效果如图4-119所示。图4-118、图4-120图4-1194.2.4引导页设计与制作4.2任务实施4.轮播点控件和按钮制作使用相同的方法将其他两个引导页面制作出来，界面效果图如图4-120所示。图4-120引导页效果044.3技能提升UI设计——AIGC驱动赋能界面完美设计4.3

j技能提升4.3.1

任务概述运用AIGC完成“轻居生活”App引导页的设计与制作。“轻居生活”App致力于打造一站式家居改造服务平台。通过整合户型设计模拟、家居单品搭配、3D虚拟家装、环保材料推荐、社区案例分享等功能，降低家居改造门槛，让用户轻松实现个性化设计。引导页总体视觉风格，采用清新自然的莫兰迪色系为主色调，搭配明亮的点缀色，营造出温馨、舒适且充满活力的氛围。整体风格简约现代，融合北欧风格与日式极简美学，运用大量留白和