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

055.2任务实施UI设计——AIGC驱动赋能界面完美设计5.2.1闪屏页界面设计思路解析5.2任务实施登录注册界面采用简约化整体设计，使用通俗易懂的文字表述，对输入框、功能按钮进行清晰标注，同时设置明确的界面标识，让操作逻辑一目了然。页面顶部放置项目品牌主标识——

“校缘通”启动图标；登录按钮选用项目主色调，强化品牌视觉识别；页面底部增设社交账号登录入口，进一步简化注册与登录的操作流程。背景层采用图片叠加黑色遮罩层的呈现形式，通过后台程序实现背景图的动态缩放效果，既为登录注册界面赋予项目专属的场景代入感，也让整体设计更具灵动性与交互感，如图5-6、图5-7所示。图5-6

底图遮罩

图5-7

登录页和注册页5.2.2登录注册页设计与制作5.2任务实施1.新建文件打开Illustrator，执行菜单栏中的“文件”—“新建”命令，新建一个空白画布。设置“预设详细信息”为登录页制作，设置“宽度”为，“高度”为，“颜色模式”为RGB颜色，“分辨率”为屏幕（72 dpi），如图5-8所示。图5-8新建画布5.2.2登录注册页设计与制作5.2任务实施2.制作背景部分（1）菜单栏“文件”—“打开”（或者直接拖拽图片到文件内）置入背景图片，将图片调整合适大小，属性栏点击“置入”，将图片“置入”到文件内，如图5-9所示。菜单栏“效果”—“模糊”—“高斯模糊”值为14，如图5-10所示。图5-9选择嵌入图5-10高斯模糊5.2.2登录注册页设计与制作5.2任务实施2.制作背景部分（2）选择工具箱中的“矩形工具”，在工具属性栏中将“填充”更改为无，“描边”更改为无，绘制和画布一样大小尺寸的矩形，对齐画板，选择图片和矩形使用快捷键“ctrl+7”—“剪切蒙版”，将画布“剪切”矩形内，适配画板大小，如图5-11所示。（3）选择工具箱中的“矩形工具”，在工具属性栏中将“填充”更改为黑色，“描边”更改为无，绘制和画布一样大小尺寸的矩形，和画布对齐，将“不透明度”调整为60%，如图5-12所示。图5-11使用剪切蒙版图5-12设置不透明度5.2.2登录注册页设计与制作5.2任务实施3.制作界面组成元素（1）菜单栏“文件”—“打开”（或者直接拖拽Illustrator软件中）打开“启动图标”的源文件，放置在登录页制作界面的合适位置，如图5-13所示。（2）按钮绘制，选择工具箱中的“圆角矩形工具”，在工具属性栏中将“填充”更改为品牌主色蓝色（R=19，G=127，B=254），“描边”设置为无。在画布中绘制一个圆角矩形，设置“宽度”为906 px，“高度”为906 px，“圆角半径”为53 px，如图5-14所示。图5-13放置启动图标图5-14绘制矩形5.2.2登录注册页设计与制作5.2任务实施3.制作界面组成元素（3）选择工具箱中的“文字工具”，输入登录字体为苹方字重Medium字号60 px，如图5-15所示。注册按钮使用相同方法制作，效果如图5-16所示。图5-15绘制登录按钮图5-16绘制注册按钮5.2.2登录注册页设计与制作5.2任务实施3.制作界面组成元素（4）选择工具箱中的“文字工具”，输入标题登录注册文字，字体为苹方字重Medium字号60 px，如图5-17所示。输入下方更多登录方式文字，字体为苹方字重Medium字号48

px，如图5-18所示。图5-17绘制上方文字图5-18绘制下方文字5.2.2登录注册页设计与制作5.2任务实施3.制作界面组成元素（5）选择工具箱中的“钢笔工具”，在工具属性栏中将“填充”更改为无，“描边”设置为白色，绘制线条，线条左右长度要一致，界面左右边距保持一致，如图5-19所示。将快捷登录需要的微信图标、QQ图标、新浪图标置入文件内，摆放到合适的位置，如图5-20所示。图5-19绘制直线图5-20添加图标5.2.2登录注册页设计与制作5.2任务实施3.制作界面组成元素（6）使用相同的方法将其他正在登录和注册页面制作出来，界面效果图如图5-21所示。图5-21登录页注册页效果5.2.3首页设计思路解析5.2任务实施本项目首页板块与功能布局齐全且丰富，依据前期架构图与原型图的规划，将首页划分为Banner区、功能入口图标区、广告区、社团活动区、课外技能区五大核心板块；底部标签栏聚焦“校缘通”App的核心功能，让用户可在首页快速找到所需内容，以此提升页面点击率与功能转化率。Banner区作为首页核心引流展示区域，整体采用活力感的插画风格设计，中心位置突出展示广告语，背景色彩以项目主色调蓝色为核心进行搭配。

功能入口图标区的设计思路与实操步骤，详见项目3中的“金刚区图标设计与制作”相关内容；底部标签栏图标的设计思路与操作步骤，同样参考项目3中的“标签栏图标设计与制作”板块。广告区也称作瓷片区，规划三个内容展示板块，均以简约图形搭配文案的形式呈现，确保图形与文案的表达相辅相成；背景选用与主色调同饱和度、同明度的渐变效果，让整体版面视觉协调无突兀感。5.2.3首页设计思路解析5.2任务实施

社团活动区主要展示校内各类社团的活动内容，采用一屏展示两个社团的布局形式，搭配活动总结性短文案与实景图片；同时设计立即加入社团功能按钮，进一步提升板块点击率与用户留存率。课外技能区规划三个展示板块，左侧区域突出呈现技能标题文案、功能按钮及价格信息，右侧区域展示最新技能相关政策与内容宣传，整体展示手法与Banner区设计风格相呼应。

首页整体设计在保证内容丰富的前提下，做到板块划分清晰、文案展示层次分明且逻辑连贯，图片选取遵循清晰简洁、贴合主题的原则，避免花哨杂乱；本项目首页采用长图形式，将首屏所有内容进行一体化展示，整体设计效果如图5-22所示图5-22首页5.2.4首页设计与制作5.2任务实施1.导航栏图标和Banner区广告制作（1）打开AdobeXD软件，新建iPhoneX/XS/11Pro（375×812）尺寸，如图5-23所示，首页全局边距左右留，打开XD版iOS组件直接拖拽iPhone的notch和状态栏，输入大标题“首页”使用苹方字体，字重为Regular，文字颜色色值为#，放置在页面的中间位置，如图5-24所示。提示：XD软件采用逻辑分辨率ptillustrator软件设置采用为物理分辨率px，换算标准为1 pt=，此案例制作所采用的尺寸为逻辑分辨率pt为标准。图5-23选择尺寸图5-24设置“首页”字体5.2.4首页设计与制作5.2任务实施1.导航栏图标和Banner区广告制作（2）绘制导航栏图标。选择工具箱中的“矩形工具”，设置宽为，高为，保持图标大小一致性原则，在这个矩形框内绘制导航栏图标。绘制导航左侧图标，绘制宽为、高为、圆角的圆角矩形，边界色值为#，宽度为1。选择工具箱中的“直线工具”，绘制宽为1的直线段，边界色值为#。设置端点为圆头端点，如图5-25所示。图5-25绘制左侧形状5.2.4首页设计与制作5.2任务实施1.导航栏图标和Banner区广告制作（3）选择工具箱中的“矩形工具”，绘制宽为、高为、圆角的圆角矩形，边界色值为#，“编辑宽度”为1。选择工具箱中的“直线工具”，绘制宽为19的直线段，“边界”色值为#，“编辑宽度”为1，设置端点为“圆头端点”，适配灰色边框大小，如图5-26所示。然后将矩形框删除，放置在页面的左上角，如图5-27所示。图5-26图形适配灰色边框图5-27放置图标5.2.4首页设计与制作5.2任务实施1.导航栏图标和Banner区广告制作（4）选择工具箱中的“矩形工具”，绘制宽为、高为、圆角的圆角矩形，“边界”色值为#。在圆角矩形上右键执行“轮廓化描边”。绘制矩形放置在圆角矩形上方，选择圆角矩形和矩形工具，使用“布尔工具”减去，如图5-28所示。（5）相同操作方法绘制纵轴缺口，选择工具箱中的“直线工具”，在图标中间绘制横线，“边界”色值为#，“编辑宽度”为1，如图5-29所示。（6）适配灰色边框大小，如图5-30所示。然后将矩形框删除放置在页面的右上角，如图5-31所示。

图5-28

运用布尔运算

图5-39

图形适配灰色边框

图5-30

图形适配灰色边框图5-31放置图标5.2.4首页设计与制作5.2任务实施1.导航栏图标和Banner区广告制作（7）输入“重庆机电职业大学”字体为苹方，字号为，字重为Regular。绘制下拉选择按钮，如图5-32所示。（8）Banner区广告制作，选择工具箱中的“矩形”工具，绘制宽为、高为、圆角的圆角矩形，边界色值为无，填充色值为#137FFE，“编辑宽度”为1。（9）打开Illustrator“放射”源文件素材，置入到XD内，复制底层圆角矩形使用快捷键“ctrl+shift+]”放置最顶层，选择顶层圆角矩形和“放射”素材，使用快捷键“ctrl+shift+M”创建剪切蒙版，如图5-33所示。图5-32

添加文本图5-33

放射形状

5.2.4首页设计与制作5.2任务实施1.导航栏图标和Banner区广告制作（10）输入主标题文案“皮玩大神”，字体为华康海报体（40 ptRegular，白色）。复制“皮玩大神”错位摆放，修改文字色值为“#1141A7”。输入副标题文案“限时招募”，字体为华康俪金黑（25 pt，“#FFE240”）。复制“限时招募”错位摆放修改文字色值为“#1141A7”，如图5-34所示。（11）打开Illustrator“装饰”素材源文件，直接复制到XD文件内，合适的位置，如图5-35所示。图5-34添加文本图5-35

添加装饰素材

5.2.4首页设计与制作5.2任务实施1.导航栏图标和Banner区广告制作（12）打开Illustrator“人物”素材源文件，直接复制到XD文件内，合适的位置，如图5-36所示。（13）绘制轮播条，选择工具箱中的“矩形工具”，绘制宽、高、圆角的圆角矩形，填充色值为白色。复制两个轮播条，间距为，设置不透明度为36%，如图5-37所示。图5-36添加人物素材

图5-37

绘制轮播条5.2.4首页设计与制作5.2任务实施1.导航栏图标和Banner区广告制作（14）打开Illustrator“金刚区图标”素材置入制作好的金刚区图标，选择工具箱中的“文字工具”，字体为苹方字体（12ptRegular，#），如图5-38所示。（15）楼层条广告制作，选择工具箱中的“矩形工具”，绘制宽、高、圆角的圆角矩形，填充色值为“#F6DDC7”，打开Illustrator“楼层条广告”素材图标，如图5-39所示。图5-38置入金刚区图标图5-39

绘制矩形并拖入素材5.2.4首页设计与制作5.2任务实施1.导航栏图标和Banner区广告制作（16）选择工具箱中的“文字工具”，大标题的字体为苹方（12 ptRegular，文字色值为#7D5434）。内文字字体为苹方（8 ptLight，#B49275）。立即认证文字的字体苹方（12

ptLight，#7D5434），如图5-40所示。（17）导航栏图标和Banner区广告制作整体效果，如图5-41所示。图5-40加入文本图5-41制作后效果5.2.4首页设计与制作5.2任务实施2.瓷片区广告制作（1）瓷片区广告制作分为三个板块，这里选择一个内容版块进行制作演示。选择工具箱中的“矩形工具”，绘制宽、高、圆角的圆角矩形。填充色值为渐变色（左侧数值为“#FBDC83”、右侧数值为“#FCE5AC”），拖拽色块调整合适的角度。加入圆点，调整圆点的不透明度为35%作为底图的修饰，如图5-42所示。（2）选择工具箱中的“文字工具”，大标题的字体为苹方（16 pt，Regular，“#EF6F0A”），输入文字“赚生活费”。小标题的字体为苹方（12 pt，Light，“#EF6F0A”），输入文字“安全保障”，如图5-43所示。（3）打开Illustrator“瓷片区广告”素材图标及插画人物素材，置入到XD内，效果如图5-44所示。

图5-42绘制形状、加入装饰

图5-43加入文本

图5-44拖入素材5.2.4首页设计与制作5.2任务实施2.瓷片区广告制作（4）瓷片区广告整体效果如图5-45所示。图5-45瓷片区广告整体效果5.2.4首页设计与制作5.2任务实施3.社团活动板块制作（1）打开Illustrator“社团”素材图标置入到XD内，调整合适大小放置在左侧，选择工具箱中的“文字工具”，板块标题的字体为苹方（16 ptRegular，“#”），输入文字“社团活动”。板块副标题的字体为苹方（12 ptLight，“#A1A1A1”），输入文字“更多社团”，如图5-46所示。图5-46拖入素材并设置文字5.2.4首页设计与制作5.2任务实施3.社团活动板块制作（2）社团活动板块分为两个板块的内容设计，这里选择一个内容版块进行制作演示。选择工具箱中的“矩形工具”，绘制宽、高、圆角的圆角矩形。直接拖拽美食图片素材到软件内，给美食素材进行模糊，属性面板设置为“对象模糊”数值为2。将矩形工具和美食图片素材全选，使用快捷键“ctrl+shift+M”剪切蒙版，将美食素材剪切到矩形内，如图5-47所示。（3）给美食图片添加黑色遮罩，选择工具箱中的“矩形工具”，绘制宽、高、圆角的圆角矩形，填充色值为黑色。放置在美食图片上面，调整不透明度为50%。如图5-48所示。图5-47使用剪切蒙版图5-48

添加黑色遮罩

5.2.4首页设计与制作5.2任务实施3.社团活动板块制作（4）选择工具箱中的“文字工具”，板块标题的字体为苹方（1 2ptRegular，白色），输入文字“美食爱好社”。板块副标题的字体为苹方（8 ptLight，为白色），输入文字“如果你也是一枚吃货那么请加入我”。调整合适的行距，拖拽三张美食图片素材到软件内，调整合适的大小。（5）选择工具箱中的“矩形工具”，绘制宽、高、圆角的圆角矩形，分别放置在美食图片上面。使用快捷键“ctrl+shift+M”剪切蒙版，将美食素材剪切到矩形内，如图5-49所示。图5-49

添加文本和图案

5.2.4首页设计与制作5.2任务实施3.社团活动板块制作（6）拖拽三张头像素材到软件内，调整宽、高的圆形头像，三张头像叠加在一起摆放。选择工具箱中的“文字工具”，辅助文字的字体为苹方（6 ptLight，白色），输入文字“已加入155人”。（7）按钮制作，绘制宽为38 pt、高为10 pt、圆角6 pt的圆角矩形，“填充”色值为“#FCA300”。按钮文字的字体为苹方（6 pt，Light，为白色），输入文字“加入TA们”，如图5-50所示。图5-50加入文本和图案5.2.4首页设计与制作5.2任务实施3.社团活动板块制作（8）社团活动板块制作最终效果如图5-51、图5-52所示。图5-51社团活动板块图5-52社团活动效果5.2.4首页设计与制作5.2任务实施4.课外技能板块制作（1）打开Illustrator“技能”素材图标置入到XD内，调整合适大小放置在左侧。输入文字“课外技能”字体为苹方（16 ptRegular，“#”）。输入文字“更多技能”，字体为苹方（12 ptLight，“#A1A1A1”），如图5-53所示。（2）绘制宽70 pt、高15 pt、圆角8 pt的圆角矩形，填充色值为“#2489F7”。选择工具箱中的“文字工具”，按钮文字的字体为苹方（12 pt，Light，白色），输入文字“公务员考试”。输入大标题文字为苹方（12 pt，Medium，“#3A3A3A”），输入文字“考试掌握140+策略+基础+强化”。输入文字为苹方（10 pt，Light，“#3A3A3A”），输入文字“考试逆袭君”。价格文字为DIN字体（12 pt，Bold，“#F81E06”），输入价格“￥284.00”。输入划价格文字为DIN字体（8 pt，Bold，“#B2B2B2”），匹配1 px的划线颜色同划价格相同。图5-53置入素材并设置文本5.2.4首页设计与制作5.2任务实施4.课外技能板块制作（3）制作限时折扣按钮。绘制宽、高、圆角的圆角矩形，“边界”色值为“#F81E06”。按钮文字的字体为苹方（8 ptLight，“#F81E06”），输入文字“限时折扣”，效果如图5-54所示。（4）右侧广告设计。绘制宽133 pt、高75 pt、圆角11 pt的圆角矩形，填充色值为“#1787E9”。添加背景修饰，复制圆角矩形绘