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

05项目五设计与制作“校缘通”App项目——

界面设计（二）UI设计——AIGC驱动赋能界面完美设计5.1相关知识5.2任务实施5.3技能提升055.1相关知识

5.1.1登录注册页面5.1相关知识登录注册页面是社交类App的必备界面，这类页面的设计核心要求为简洁易用。设计时需重点考量多方面操作细节：唤起输入法键盘时，页面文字信息是否会被遮挡；输入框的宽度是否适配用户操作；文字提示是否做到极致精简等。例如部分输入框的提示文字为“请您输入邮箱”，实际仅用“邮箱”二字即可清晰传达提示意图。因此登录注册页面的设计，在保障操作便捷性的同时，务必确保文字表达言简意赅。此外，页面可增设社交账号登录入口，如Facebook、Google、微信等，帮助用户省去填写冗长注册表单的步骤，大幅简化注册与登录的操作流程，如图5-1所示。图5-1

登录注册5.1.2首页页面5.1相关知识

不同功能定位的App，其首页的功能模块布局也有所差异，选择适配产品本身的首页展示形式尤为关键。各类App的首页设计，需结合产品的实际需求与目标用户群体特征进行定制化设计，核心要做到吸引用户注意力、保障良好的用户体验，同时高效展示产品的核心功能与关键内容。

当前App首页的设计同质化问题日趋明显，页面布局与设计思路趋于雷同。作为设计师，需通过多观察、多实践的方式，探索更贴合产品自身定位的展示形式。下文将介绍首页四种最常见的表现形式，分别为列表型首页、图标型首页、卡片型首页和综合型首页，不同类型的首页布局，所承载的功能价值与设计内涵各有侧重1.列表型首页5.1相关知识

列表型首页是指在一个页面上展示同一个级别的分类模块。模块由标题文案和图像组成，图像可以是照片，也可以是图标。这类首页的操作体验更便捷，支持上下滑动查看更多内容，交互性与浏览性俱佳，如图5-2所示。图5-2列表型首页2.图标型首页5.1相关知识

若App首页以承载核心功能为主，可采用图标形式进行展示，如图5-3所示。图标型首页的设计建议将所有核心图标在首屏完整呈现，同时简化点击操作，让用户能快速触达功能入口。图5-3图标型首页3.卡片型首页5.1相关知识

当首页需呈现操作按钮、头像、文字等多元且复杂的信息时，可采用卡片型首页的设计形式。这类首页能将各分类下的按钮与信息进行整合关联，让内容布局清晰明了、用户一眼可辨，同时还能有效提升内容区域的点击交互性，如图5-4所示。图5-4卡片型首页4.综合型首页5.1相关知识

电商类产品的功能模块表现形式丰富，常融合图标、卡片等多种样式，如何让多元内容在页面中排布得层次清晰、易于阅读，是对设计师设计能力的重要考验。

综合型首页的设计需格外注意分割线与背景色的区分不宜过于醒目，选用浅淡的分割线和背景色划分模块即可，以此保障页面整体的视觉统一性与模块间的协调性，如图5-5所示。图5-5综合型首页5.首页设计的注意事项5.1相关知识（1）保持首页设计简洁明了，避免过多视觉干扰与杂乱布局，核心信息需直观呈现，让用户能快速找到所需内容。（2）配备清晰的导航选项，方便用户快速跳转至其他页面和功能，常见形式有底部导航栏、标签页、侧边栏菜单等。（3）结合用户兴趣与使用偏好提供个性化推荐内容，可通过机器学习、用户行为分析等方式实现，助力用户快速找到感兴趣的内容。（4）结合用户打开App的核心诉求，将关键功能或核心内容置于首页醒目位置，让用户能快速获取所需信息，提升整体使用体验。（5）设置快捷操作按钮或图标，方便用户直接执行常用操作，如创建新任务、发送消息等，简化操作流程。（6）运用高质量的图像、动画与色彩搭配提升首页视觉吸引力，同时确保这些视觉元素与App整体风格、目标用户群体的审美相契合。（7）为首页交互设置即时反馈效果，例如按钮点击时的动效、色彩变化等，强化用户的操作反馈感，提升交互体验。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”。添加背景修饰，复制圆角矩形绘制圆形，放置在合适的位置使用快捷键“shift+ctrl+M”，剪切蒙版到圆角矩形内，如图5-55所示。图5-54输入文本图5-55绘制圆角矩形5.2.4首页设计与制作5.2任务实施4.课外技能板块制作（6）输入广告区域的文字内容，进行有层次的排版。绘制宽、高、圆角的矩形，“填充”的颜色色值为白色。复制圆角矩形，绘制一个大小合适的正方形，选择正方形和圆角属性面板点击减去，快捷键“ctrl+alt+S”，修改颜色的色值为“#FB4747”。选择工具箱中的“文字工具”，按钮文字的字体为苹方（5 ptMedium，#和白色），输入文字“国家公务员”，左侧“2020”字体为DIN（12 pt，“Bold”），如图5-57所示。图5-57输入文本5.2.4首页设计与制作5.2任务实施4.课外技能板块制作（7）输入文字“笔试辅导课程”，大标题文字的字体为方正粗雅宋16 pt，文字颜色为白色，勾选属性栏投影，设置Y轴数值为0.5，模糊为0，投影颜色为黑色，不透明度为40%，如图5-58所示。（8）绘制宽、高、圆角的圆角矩形，填充色值为渐变色“#E33DFF、#AE3DFF”。选择工具箱中的“文字工具”，按钮文字的字体为苹方（6 ptRegular，白色）。下方辅助文字字体为方正粗雅，字体大小为4 pt，颜色为白色，文案居中排版，如图5-59所示。图5-58设置投影图5-59设置文本5.2.4首页设计与制作5.2任务实施4.课外技能板块制作（9）课外技能板块，如图5-60所示。图5-60课外技能板块5.2.4首页设计与制作5.2任务实施4.课外技能板块制作（10）整体课外技能板块设计效果如图5-61所示。（11）首页设计整体效果如图5-62所示。图5-61课外技能整体效果图5-62页面整体效果055.3技能提升UI设计——AIGC驱动赋能界面完美设计5.3.1任务概述15.3.1

任务概述

运用AIGC工具制作生鲜主题Banner，画面需展示新鲜的水果、蔬菜、肉类或海鲜，要求图像清晰、色彩鲜艳，精准突出产品细节（如果蔬的纹理质感）；标题设计需醒目吸睛、简洁有力，同时在画面中明确呈现具体的折扣信息与活动时间。5.3.2运用AIGC生成设计元素根据任务要求和工作流程，首先将合适的生鲜图片通过豆包AI生成描述词，接着使用LiblibAI或即梦AI生成设计元素，最后在PS或Figma中调整细节和排版。（1）打开豆包AI，输入生鲜图片的同时提出要求“描述一下这张图，生成一段描述词，用于AI文生图”，如图5-63所示。图5-63输入要求5.3技能提升5.3.2运用AIGC生成设计元素2（2）打开liblibAI在模型广场选择合适的3D模型加入模型库，选择在线生成，如图5-64所示。图5-64liblibAI首页5.3技能提升5.3.2运用AIGC生成设计元素3（3）继续选择其他模型，并加入模型库供选择。添加完毕后选择在线生成功能，如图5-65所示。图5-65选择在线生成5.3技能提升5.3.2运用AIGC生成设计元素4（4）选择大模型，选择文生图，输入豆包生成的提示词，稍作修改“一个装满新鲜蔬果的绿色购物袋，袋内有红彤彤的西红柿、翠绿的和香蕉、紫润的葡萄、橙黄的南瓜、火红的甜椒等，背景是淡蓝色”，如图5-66所示。图5-66选择文生图、输入描述词5.3技能提升5.3.2运用AIGC生