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

06项目六设计与制作“校缘通”App项目——

界面设计（三）UI设计——AIGC驱动赋能界面完美设计6.1相关知识6.2任务实施6.3技能提升066.1相关知识UI设计——AIGC驱动赋能界面完美设计6.1.1App的列表布局方式6.1相关知识列表布局是App界面中最常用的布局形式，整体由缩略图与文字信息组合构成，这类布局对图片质量要求较低，设计核心侧重文字内容的呈现。适用场景：产品对图片质量无高要求，但需展示大量内容，且需要用户通过优惠信息、价格参数等维度进行内容对比时，可采用列表布局。优点：自上而下的展示形式契合人眼自然阅读习惯，便于用户快速扫视、对比信息；单条信息占用版面空间小，一屏可承载更多内容，提升信息展示效率。缺点：图片占比偏小，难以丰富展示产品细节；单屏信息量较大，用户长时间浏览易产生视觉疲劳。设计列表页时，需遵循以下核心原则：留白的把控张弛有度，根据内容层级做好亲疏区分；元素对齐方式规整统一；粗细元素的搭配组合营造出视觉节奏感；需要重点突出的元素选用明快的色彩；整体列表的视觉层次感清晰分明；采用虚实结合的设计手法时，需遵循实形元素在前、虚形元素在后的视觉逻辑。6.1相关知识

1.单行列表

大多数消费类产品的结果页面都会以单行列表的形式进行展示，左边为图，右边为文字信息、评分和价格等，这样的展示方式易于用户阅读，如图6-1所示。图片能够诱导用户进行点击，文字则用来解释商品。图6-1

单行列表6.1相关知识2.双行列表双行列表页的布局形式空间利用率更高，每个内容卡片均采用上图下文的排布方式，既能充分利用版面，也能让页面视觉更饱满，如图6-2所示。图6-2双行列表6.1相关知识6.1.2大图网格大图网格布局以单行为单位展示单张图片，图片在版面中占比大，单屏最多可展示1～2张内容，适用于以图片浏览为核心体验的产品（见图6-3）。适用场景：产品展示内容数量较少，且有专人维护图片质量，大图能呈现更佳视觉效果时使用，多见于图片类、租房类平台及商品推荐列表等界面。优点：自上而下的展示逻辑契合人眼自然阅读习惯，便于信息的有效传递；大尺寸图片能充分展示产品细节，丰富界面视觉效果的同时，更好地凸显品牌调性。缺点：单屏可承载的展示内容较少，不利于用户快速查找信息及多维度对比内容。图6-3大图网格6.1相关知识6.1.3两列网格布局该布局将屏幕横向划分为两列，单栏内采用上图下文的内容排布形式，整体呈现网格状视觉效果；用户的浏览顺序趋近Z字形，布局中图片占比可观，对图片质量要求较高，适用于以图片对比为核心需求的商品展示场景。适用场景：产品主打图片类商品对比，且无须以大图形式展示内容时，可采用此布局设计；两列网格布局也常与列表布局结合使用，适配更多展示需求。优点：便于用户对图片类商品进行对比选择，单屏可展示4～6条信息，视觉呈现效果佳；缺点：文字展示区域有限，仅能呈现商品标题、标签、价格等核心文字信息。图6-4两列网格布局6.1相关知识6.1.4两列瀑布流布局两列瀑布流布局与常规两列布局均为屏幕横向二分的形式，核心区别在于：瀑布流布局的图片宽度固定，高度随图片实际尺寸自适应变化，整体展示形式更具不规则性，适合用户浏览目标不明确的使用场景。适用场景：与两列网格布局的适用场景相近，核心差异为——两列网格布局适用于产品数量较少、用户浏览目标明确的情况；而两列瀑布流布局多用于用户目标不明确、产品数量庞大，且支持无限下滑加载的展示需求。优点：图片高度自适应，能更丰富地展现图片细节；支持无限下滑的交互形式，用户可浏览的内容更多。缺点：产品展示时图片尺寸不一，易出现大图更易被关注、小图易被忽略的情况；技术实现多采用预加载方式，无法提前预估展示的产品数量。图6-5两列瀑布流布局6.1相关知识6.1.5三列网格布局三列网格布局是将屏幕横向三等分的展示形式，也可称作宫格布局。因单个展示模块尺寸较小，布局核心以图片展示为主，文字信息通常仅保留简洁标题，适合应用在用户浏览需求不明确的页面中。适用场景：产品仅需展示大量内容，且无需用户通过图片进行细节对比，可采用三列网格布局。优点：版面利用率高，单屏能展示的产品数量最多，便于用户快速浏览并筛选感兴趣的内容。缺点：图片展示尺寸偏小、画质呈现效果有限，文字信息仅能做简单展示，内容对比性较弱，整体界面的视觉趣味性与新鲜感不足。图6-6三列网格布局6.1相关知识6.1.6拼图布局拼图布局的视觉呈现上，头部通常以单张大尺寸Banner展示，下方则由多张图片以多样的拼图形式组合排布；下方展示的内容一般为与头部Banner相关的商品，该布局适用于平台主动推荐的商品列表场景。适用场景：拼图布局（含两列形式）在常规商品列表中应用较少，因不规则的拼图画面对图片维护的成本要求较高，且小尺寸图片易被用户忽略，因此更多用于平台推荐页面，由编辑对图片统一处理后再上传展示。优点：采用杂志式的排版形式，视觉样式更活泼美观；产品的主次层级表达清晰，可通过图片占比大小直观区分核心推荐与次要展示的信息。缺点：布局内图片尺寸有大有小，小图易被用户忽略；同时该布局的编辑制作成本较高，内容往往需要单独策划、定向推荐。商品推荐页面可采用拼图的形式展现，将重要信息放到大图上，次要信息放到小图上，引导用户购买。图6-7拼图布局066.2任务实施UI设计——AIGC驱动赋能界面完美设计6.2.1学院好物界面设计思路解析6.2任务实施学院好物界面的设计核心围绕个性化推荐、新生入学必买、好物推荐展示三大核心要素展开。通过个性化推荐算法，结合用户历史购买记录与兴趣偏好为其推送定制化商品，以此提升用户的购买意愿与品牌忠诚度；新生入学必买、好物推荐两大板块直观呈现当下流行商品趋势，有效吸引用户浏览与选购。通过整合上述设计元素，打造兼具吸引力、个性化与易用性的商品推荐界面，全面提升用户的购物体验与使用满意度。界面布局上，搜索栏下方设置常用功能引流图标，图标底板采用微渐变设计，且图标色板的配色区间保持统一，让视觉呈现更具整体性。新生入学必买板块采用瓷片区通用设计形式，规划两个广告展示位，可依据用户的搜索频率提取关键词，生成匹配用户兴趣的广告内容。Banner广告区布局在新生入学必买板块下方，作为核心引流展示区域，整体以“双十一”为主题进行视觉设计。好物推荐板块是本界面的核心展示部分，采用两列瀑布流布局，重点展示商品本体、价格信息及核心卖点。本项目的学院好物页面采用长图形式，将首屏所有内容进行一体化呈现，界面整体设计效果如图6-8所示。6.2.1学院好物界面设计思路解析6.2任务实施图6-8

学院好物界面设计1.搜索栏和图标区制作（1）打开AdobeXD软件，新建iPhoneX/XS/11Pro（375×812）尺寸，如图6-9所示。首页全局边距左右留，打开XD版iOS组件直接拖拽iPhone的notch和状态栏，选择工具输入大标题“学院好物”使用苹方字体（16ptRegular，#），放置在页面的中间位置，如图6-10所示。6.2.2好物界面设计与制作6.2任务实施图6-9新建尺寸

图6-10新建尺寸（3）绘制搜索栏图标。选择工具箱中的“矩形工具”，设置宽为，高为，圆角的矩形，边界的填充色值为#，“编辑宽度”为1。（4）绘制搜索图标，选择工具箱中的“椭圆工具”，设置宽为，高为，“边界”色值为##DBDBDB，“边界宽度”为1。选择工具箱中的“直线工具”，绘制宽为，高为，倾斜的线段。选择工具箱中的“文本工具”，输入“搜索”使用苹方字体（12 ptLight，#，），如图6-11所示。6.2.2好物界面设计与制作6.2任务实施图6-11搜索框、设置文本（5）功能入口图标制作，选择工具箱中的“椭圆工具”，设置宽为，高为，填充线性渐变（左侧色块颜色为#FBA872、右侧色块颜色为#FB7746）。选择工具箱中的“椭圆工具”，绘制图标底板修饰圆点，填充白色，不透明度为20%，如图6-12所示。（6）打开Illustrator“图标”素材源文件，直接复制到XD文件内，如图6-13所示。6.2.2好物界面设计与制作6.2任务实施图6-12圆形图6-13添加素材（7）功能入口共制作5个图标，操作步骤如（3），如图6-14所示。6.2.2好物界面设计与制作6.2任务实施图6-14功能入口图标2.新生入学必买和好物推荐板块制作（1）选择工具箱中的“矩形工具”，设置宽为，高为，圆角的矩形，“填充”颜色为白色。勾选属性栏“阴影”X轴数值为0，Y轴的数值为0，模糊值为8，阴影的不透明度为15%。（2）打开Illustrator“必买”图标素材源文件，直接复制到XD文件内。输入“新生入学必买”字体为苹方（14 ptRegular，#）。输入“新同学加入立减20元”字体为苹方（10 ptLight，#A1A1A1），如图6-15所示。6.2.2好物界面设计与制作6.2任务实施图6-15绘制行形状、添加文本（3）选择工具箱中的“矩形工具”，设置宽为，高为，圆角的矩形。填充为渐变色（左侧色值为#FED97E，右侧色值为#FACA68）。选择工具箱中的“椭圆工具”，为背景添加修饰，加入设计文案及Photoshop抠好的图片，如图6-16所示。6.2.2好物界面设计与制作6.2任务实施图6-16新生入学必买板块（4）选择工具箱中的“矩形工具”，设置宽为，高为，圆角的矩形，将在photoshop设计制作好的Banner图导入到XD内，将Banner图和圆角矩形选中，使用带有形状的蒙版快捷键“shift+ctrl+M”，效果如图6-17所示。（5）绘制好物推荐板块小图标。选择工具箱中的“椭圆工具”绘制圆形，宽为，高度为，填充色值为#FC6246。绘制宽为，高度为，圆角的矩形。双击圆角矩形，将圆角矩形转换为可编辑对象，框选左侧锚点键盘向左移动，框选右侧锚点键盘向右移动。选择工具箱中的“钢笔工具”，绘制弧线，“边界”颜色为#FC6246，如图6-18所示。6.2.2好物界面设计与制作6.2任务实施图6-17Banner图图6-18推荐好物图标（7）使用重复网格工具制作好物推荐板块内容。首先需要选择工具箱中的“矩形工具”，设置167 pt，高为190 pt，圆角9 pt的圆角矩形。（8）输入“标题文字内容”字体为苹方（10 ptLight，#6F6F6F）。选择工具箱中的“矩形工具”，设置宽为，高为，圆角的圆角矩形，填充色值为#FEEEEE。继续选择矩形工具，设置宽为，高为，圆角的圆角矩形，填充色值为#FEEEEE。输入“￥198”字体为DIN（12 ptBold，#F91F06）。输入“￥198”字体为DIN（8 ptBold，#B1B1B1）。（9）选择工具箱中的“直线工具”制作删除线，直线宽为36 pt，颜色为#B1B1B1，全选编组“ctrl+G”，属性栏重复网格工具，向下拖拽，如图6-20所示。6.2.2好物界面设计与制作6.2任务实施图6-20好物推荐模块（10）将图片按照先后顺序命名，拖拽到网格编组圆角矩形内，打开txt“好物推荐标题”文档，直接拖拽到网格编组文案内，打开txt“好物推荐价格”，直接拖拽到网格编组价格内，其他如上所述内容进行操作即可，效果如图6-21所示。6.2.2好物界面设计与制作6.2任务实施图6-21编辑图像和文本学院操场页面是展示用户互动内容的核心界面，能够有效提升用户体验与平台社交参与感。界面设计围绕多类核心板块展开，具体设计思路如下：（1）用户信息展示：在最新用户动态展示区域，清晰呈现用户姓名、头像、性别等基础信息，帮助其他用户快速了解发布者，提升社交互动的关联性。（2）内容筛选功能：为保持页面整洁有序，增设内容筛选与排序功能，支持用户按点赞数、评论数、发布时间等维度动态进行筛选展示，提升信息查找效率。（3）多元内容呈现：动态展示区支持文字、图片、音频、视频等多种内容形式，丰富界面展示维度，吸引用户兴趣，进一步促进平台内的交互与内容分享。（4）动态数量管控：合理限制单个用户在页面中展示的最新动态数量，避免信息过载，保障整体页面的整洁度与浏览舒适度。此外，本界面的瓷片区广告设计、功能入口图标设计均沿用好物推荐界面的设计风格，让整个App的视觉设计具备一致性与整体性。6.2.3学院操场界面设计思路解析6.2任务实施学院操场界面是兼具互动交流与互助咨询的综合功能界面，本项目中该页面采用长图形式，将首屏所有内容进行一体化呈现，整体设计效果如图6-22所示6.2.3学院操场界面设计思路解析6.2任务实施图6-22学院操场界面1.头部信息卡片制作（1）选择工具箱中的“矩形工具”，设置宽为，高为的矩形，填充色值为#4195F5。（2）打开大楼外观素材，拖入XD软件内，属性栏内选择“对象模糊”数值为14，不透明度为35%，放在蓝色矩形上方。将蓝色矩形复制一层，选择大楼外观，shift加选蓝色复制层，使用shift+ctrl+M“带有形状的蒙版”，效果如图6-23所示。6.2.4操场界面设计与制作6.2任务实施图6-23设置头部背景（3）输入“学院操场”字体为苹方（16 ptRegular，白色）。选择工具箱中的“矩形工具”，设置宽为，高为的矩形，的圆角矩形，填充色值为白色。（4）打开学校logo素材，拖入XD软件内，选择logo素材，按shift键加选圆角矩形，使用shift+ctrl+M“带有形状的蒙版”。输入“重庆机电职业技术大学”字体为苹方（16 ptMedium，白色）。输入“重庆璧山区”字体为苹方（12 ptMedium，白色）。输入“共加入人”字体为苹方（8 ptLight，白色），打开素材文件夹置入头像素材，如图6-24所示。6.2.4操场界面设计与制作6.2任务实施图6-24添加元素（5）制作发帖入口。打开发帖图标素材，拖入XD软件内，调整合适的大小，放置在右侧，安全边距保持和左侧相同。输入“发帖”字体为苹方（10 ptLight，白色）。（6）制作签到按钮。选择工具箱中的“矩形工具”，设置宽为，高为的矩形，圆角为的圆角矩形，填充色值为#FFA803。输入“签到”字体为苹方（12 ptMedium，白色）。（7）制作管理员消息栏。选择工具箱中的“矩形工具”，设置宽为，高为，圆角为的圆角矩形。填充色值为黑色，不透明度为30%。复制管理员头像，放置在圆角矩形左侧。输入管理员公告的相关文字字体为苹方（12 ptMedium，白色），如图6-25所示。6.2.4操场界面设计与制作6.2任务实施图6-25添加元素2.瓷片区广告制作（1）选择工具箱中的“矩形工具”，设置宽为，高度为的矩形，圆角为的圆角矩形，填充色值为渐变色（左侧色值为#A5A5A5、右侧色值为#6B6B6B）。（2）打开素材文件夹内的背景修饰素材，拖入到XD软件内，调整合适的大小及角度。复制圆角矩形，选择圆角矩形，按住shift键加选背景修饰素材，使用shift+ctrl+M“带有形状的蒙版”，如图6-26所示。6.2.4操场界面设计与制作6.2任务实施图6-26设置矩形（3）输入“#游戏开黑#”字体为苹方（16 ptMedium，白色）。输入“各路大神带你飞”字体为苹方（12 ptLight，白色），如图6-27所示。（4）瓷片区其他板块步骤操作如步骤（1）。橙色瓷片区填充的颜色色值为渐变色，左侧色值为#FF9C72，右侧色值为#FB7A41；红色瓷片区填充的颜色色值为渐变色，左侧色值为#FF6D6E，右侧色值为#FF4A4A。效果如图6-28所示。6.2.4操场界面设计与制作6.2任务实施图6-27设置文本图6-28瓷片区3.图标区和Banner广告区制作（1）图标制作步骤参考“好物界面设计与制作”（3），效果如图6-29所示。（2）选择工具箱中的“矩形工具”，设置宽为，高为，圆角为8 pt的圆角矩形，将在photoshop设计制作好的Banner图导入到XD内，将Banner图和圆角矩形选中，使用带有形状的蒙版快捷键“shift+ctrl+M”，效果如图6-30所示。6.2.4操场界面设计与制作6.2任务实施图6-29图标图6-30制作广告区4.动态区制作（1）绘制动态图标，选择工具箱中的“椭圆工具”，设置宽为，高为，填充色值为#FFA803。（2）选择工具箱中的“钢笔工具”，绘制垂直和水平线，颜色为白色，属性栏设置为圆头端点。输入“动态”字体为苹方（16 ptRegular，#2D2D2D），如图6-31所示。（3）绘制关注图标，选择工具箱中的“钢笔工具”，绘制心形，设置颜色色值为#FFA803，绘制心形内部白色高光，颜色为白色，输入“关注”字体为苹方（16 pt、Regular、#），如图6-32所示。6.2.4操场界面设计与制作6.2任务实施图6-31动态图标图6-32关注图标（4）打开素材文件夹内的头像图片素材，拖入XD软件内，调整合适的大小。输入“吃货界的小老大”字体为苹方（12 pt、Regular、#2D2D2D）。输入“30分钟前”字体为苹方（10

pt、Regular、#B2B2B2）。选择“矩形工具”，设置宽为、高为、圆角为2

pt的圆角矩形，填充色值为线性渐变色（左侧色值为#FEC458，右侧色值为#FFA808）。（5）输入“大一”字体为苹方（8 pt、Regular、为白色）。选择“矩形工具”，设置宽为、高度为，圆角为的圆角矩形，填充颜色色值为线性渐变色（左侧色值为#82BFFE，右侧色值为#449EFF）。输入“美食社”字体为苹方（8 pt、Regular、白色）。选择“矩形工具”，设置宽为、高为、圆角为的圆角矩形、填充色值为#DBECFF。输入“+关注”字体为苹方（10 pt、Regular、#258BF9）。效果如图6-33所示。6.2.4操场界面设计与制作6.2任务实施图6-33设置文本样式图6-33

设置文本样式（6）选择工具箱中的“直线工具”，绘制分割线“宽度”为，“边界”大小为1

pt，色值为#E8E8E8。输入内容文案字体为苹方（10 pt、Light、#）。选择“矩形工具”，设置宽为、高为、圆角为的矩形。（7）打开素材文件夹内的美食图片素材，拖入到XD软件内，调整合适的大小，选择圆角矩形，按住shift键加选美食图片，使用shift+ctrl+M“带有形状的蒙版”，另外两张图片操作步骤如上，如图6-34所示。6.2.4操场界面设计与制作6.2任务实施图6-34添加素材（8）制作标签，选择工具箱中的“矩形工具”，设置宽为、高为、圆角为的圆角矩形、填充色值为#E0F0FF。输入“#美食社团#”字体为苹方（10 pt、Light、#2489F7）。另外两个标签操作如上，如图6-35所示。（9）输入“重庆机电职业技术大学”字体为苹方（10 pt、Light、#B1B1B1）。绘制评论框，选择“矩形工具”，设置宽为、高为、圆角为的圆角矩形、填充色值为#F1F1F1。输入“362浏览量”字体为、Light、#B1B1B1。6.2.4操场界面设计与制作6.2任务实施图6-35设置文本（10）打开素材文件夹内的评论框图标素材，拖入到XD软件内，调整合适的大小。输入“6”字体为苹方10 pt、Medium、#B1B1B1）。输入“9”字体为苹方（10 pt、Medium、#B1B1B1）。效果如图6-36所示。6.2.4操场界面设计与制作6.2任务实施图6-36操场好物界面066.3技能提升UI设计——AIGC驱动赋能界面完美设计6.3.1任务概述6.3.1

任务概述

依托AIGC打造活动视觉内容，围绕自驾出游路线推荐，引导用户出游实拍晒图，联动抽奖与免费流量听歌福利，整体图标统一采用玻璃质感3D设计，借此引流拉新、提升用户参与度。自驾出行路线板块，右上方使用小汽车图标，下方配文“自驾出游精心推荐路线，绝不踩雷”。鼓励用户晒图板块，右上方使用相机图标，下方配文“图片分享晒出风景照片，即可参与抽奖”。抽奖板块，右上方使用礼物盒图标，下方配文“有礼抽奖推荐商家晒单有礼，中奖率高”。参与免费流量听歌活动板块，右上方使用音乐符号图标，下方配文“音乐随享受在线申请，免费流量听歌”。6.3技能提升6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素根据任务概述，使用即梦AI生成图标，再配合PS或Figma进行排版优化。（1）打开即梦AI，选择“智能画布”，选择“文生图”，输入描述词“小汽车，蓝色，蓝紫色点缀，3D艺术，C4D，磨砂玻璃质感，透明感，UI设计风格，光线追踪，干净白色背景，参考Pinterest、Dribbble风格，使用OC渲染器，Blender渲染，减少细节，16K分辨”，选择生图模型“图片3.0”，默认尺寸，点击“立即生图”，如图6-37所示。6.3技能提升图6-37

描述词、参数设置6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（2）从生成的图片中选择合适的，选择消除笔工具，将车头部字母消除，如图6-38所示。6.3技能提升图6-38选择消除笔6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（3）消除后，选择抠图，去除背景，完成抠图编辑后导出并下载，如图6-39所示。6.3技能提升图6-396.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（4）相机、礼物、音乐图标按以上办法生成，导出下载即可，如图6-40所示。6.3技能提升图6-40生成6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（5）接着在Figma中进行排版编辑。在Figma中新建一个175×220大小的矩形，设置圆角数值为20，如图6-41所示。6.3技能提升图6-41新建矩形6.3.2运用AIGC生成设计元素6.3.2运用AIGC生成设计元素（6）将汽车图标复制粘贴到figma中，调整汽车图标的大小和位置，设置矩形填充为线性渐变填充，如图6-42所示。6.3技能提升图6-42渐变填充、汽车元素大小6.3.2