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

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。输入内容文