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

07项目七设计与制作“校缘通”App项目——

界面设计（四）UI设计——AIGC驱动赋能界面完美设计7.1相关知识7.2任务实施7.3技能提升077.1相关知识7.1.1个人中心页7.1相关知识在App中，个人中心页又称为“我的”页面，通常设计在底部菜单栏的最右侧。社交应用中，个人中心有两种角色的划分，一个是自己的主页面，还有一个是他人的中心页面。自己的个人页面可以自己进行编辑，而他人的页面是供用户关注或进行私信交流的。所以，个人中心页与其他页面在功能上需要有场景区分。个人中心页主要由头像、个人信息和内容模块组成，通常会采用头像居中对齐的方式进行设计，目的是体现当前页面的信息都与本人有关。头像一般会采用圆形，因为这样看起来更为协调，同时画面也会显得更为饱满，如图7-1所示。

图7-1

头像居中布局7.1.1个人中心页7.1相关知识还有一种设计是以头像居左对齐为主，通常在信息比较多的情况下会采用这种设计，不仅能节省空间，同时也能让内容在一屏上展示完整，如图7-2所示。图7-2头像居左布局7.1.2消息页面7.1相关知识一个功能点的页面要，最根本的还是与产品自身的定位和用户需求有关。1.内容/社交类App对于内容和社交类的App而言，消息中心是App中一个非常重要的功能，通常会在一级导航栏中设置一个Tab，作为消息中心的入口。像微信、QQ这类App，聊天作为其最核心的功能，消息中心自然是放在App首页的位置，并且每次打开App的时候首先也是展示消息页面。小红书和微博这类的消息中心主要承载了通知和聊天功能，集合了转发、评论、赞、@等通知功能，以及官方与粉丝、粉丝与粉丝之间的聊天互动功能，如图7-3所示。图7-3社交类7.1.2消息页面7.1相关知识2.电商类App对于电商类App而言，在消息中心里告知用户交易物流信息非常重要；并且因为网购商品无法看到实体商品，所以消费者通过消息对话向商家了解商品信息，几乎是购买过程中都要涉及的步骤。此外，消息中心还会有一些互动、优惠版块等。正因为消息功能使用频率非常高，所以几乎很多电商App都会独立出一个“消息”Tab按钮，方便用户快速进入消息中心入口，如图7-4所示。图7-4电商类7.1.2消息页面7.1相关知识3.资讯类App资讯类App的消息中心几乎都是“我/我的”页面中的链接或者按钮，主要是因为资讯类App的核心需求是文章内容阅读，主要承载部分文章推送或者其他消息推送（在资讯App中首页其实已经会根据用户爱好或订阅而推荐阅读），几乎在使用过程中不需要使用消息功能。一个功能的页面布局和设计，取决于根据产品定位和用户需求决定的需求优先级，消息功能在不同类型的App的需求优先级大概如下：内容/社交类Ap电商类Ap资讯类Ap工具类App。7.1.2消息页面7.1相关知识4.其他功能消息中心除了上述的聊天、私信、物流信息和状态提示等功能外，还能成为App提供更多功能的入口。（1）内容推送：现在很多App将消息中心打造成类似于公众号的形式，制作精美的文章，精准地推送给用户，进行活动推广。这类功能在音乐类App——

网易云音乐、QQ音乐等中会经常看到。（2）活动营销：对于一些追求更多付费和活动转化的需求，会在消息中心推送一些链接，跳转到优惠活动页面，或者推送一些优惠券吸引用户。这类功能主要属于消息中心的服务通知，在生活服务类App——

美团（外卖）、大众点评等经常会看到，如图7-5所示。图7-5活动营销类077.2任务实施UI设计——AIGC驱动赋能界面完美设计7.2.1

消息界面设计思路解析7.2任务实施消息界面设计可以提供用户与其他用户或系统之间进行沟通、信息交流和互动的平台，在设计消息界面时，考虑到用户需要快速浏览和管理多个消息，一个清晰的信息架构和布局是至关重要的。确保消息列表的呈现方式直观，使用户能够一目了然地查看未读消息和已读消息，并能根据需要进行筛选和排序。消息详情页面中，将关键信息和附件展示清晰，便于用户阅读和操作。为了增强用户的界面认知和可用性，保持一致的视觉语言和标识是非常重要的。在消息界面中，使用统一的图标、颜色和样式，以及符合用户习惯的交互模式，帮助用户快速理解界面的功能和操作方式。确保消息界面的交互设计符合用户的期望和习惯，提供简单直观的操作方式。例如，适当使用手势操作，如滑动删除、下拉刷新等，以提高用户的操作效率和流畅度。消息界面的设计必须考虑到App的性能和响应速度，保证界面的加载和刷新速度尽可能快，让用户能够快速获取最新的消息和回复，提升用户的使用体验。设计一个优秀的App消息界面需要关注信息架构和布局、视觉语言和标识、易用的交互设计、个性化和用户偏好、智能化的推荐与过滤，以及良好的性能和响应速度。7.2任务实施1.

标题和列表区制作（1）打开AdobeXD软件，新建iPhoneX/XS/11Pro（375×812）尺寸，如图7-6所示。首页全局边距左右留12

pt，打开XD版iOS组件直接拖拽iPhone的notch和状态栏，选择“文本工具”输入大标题“消息”使用苹方字体、字号为16

pt、字重为Regular、文字颜色色值为#333333。继续输入标题“通知”使用苹方字体、字号为14

pt、字重为Regular、文字颜色色值为#B2B2B2、调整放置在页面的中间位置，如图7-7所示。图7-6

设置尺寸

图7-7

添加文本7.2.1

消息界面设计思路解析7.2任务实施（2）绘制未读消息，选择工具箱中的“椭圆工具”，设置“宽度”为，“高度”为，“填充”的颜色色值为#FF4D4D，选择“文本工具”输入数字“3”使用苹方字体，字号为8 pt，字重为Regular，文字颜色色值为白色，选择工具箱中的“矩形工具”，设置“宽度”为，“高度”为，“圆角3pt的圆角矩形，“填充”颜色色值为#，如图7-8所示。7.2.2消息界面设计与制作图7-8未读消息

图7-9制作评论按钮7.2任务实施（6）选择工具箱中的“矩形工具”，设置宽为、高为的圆角矩形。“填充”的颜色色值为渐变色，左侧色值为#8AC0FF，右侧色值为#。选择工具箱中的“椭圆工具”，绘制按钮背景上的圆点修饰，适当调整不透明度。输入文字“评论”使用苹方字体、字号为、字重为Regular、文字颜色色值为白色。打开Illustrator“图标”素材源文件，直接复制到XD文件内，放置按钮到合适的位置，如图7-9所示。（7）其他按钮制作如上述步骤，效果如图7-10所示。图7-10其

他按钮

图7-11消息对话列表7.2.1

消息界面设计思路解析7.2任务实施（8）制作消息对话列表，选择“椭圆工具”，设置宽为、高为。打开素材文件夹内的消息头像素材，拖入到XD软件内，选择头像素材，按shift键加选圆角矩形，使用shift+ctrl+M“带有形状的蒙版”。输入“吃货界的小可爱”使用苹方字体（14 pt、Regular，#）。输入“明天休息了准备去哪里玩”使用苹方字体12 pt、Regular、#B2B2B2。输入消息接受时间文字12 pt、Regular、#B2B2B2)。选择工具箱中的“椭圆工具”，设置宽为、高为、“填充”颜色色值为#FE4C4D。选择“文本工具”输入数字“6”使用苹方字体（10 ptRegular，白色）。选择“直线工具”，绘制列表分割线，“长度”为，“边界”颜色为#E8E8E8，如图7-11所示。（9）对话列表制作方法如上步骤，效果如图7-12所示。7.2.2消息界面设计与制作图7-12对话列表效果7.2任务实施App个人中心界面是用户在应用中管理个人信息、进行各种操作和查看相关内容的重要界面。在个人中心界面上，突出展示用户的基本信息，如头像、昵称、个人简介等，以帮助其他用户快速了解该用户。功能模块分类如个人设置、账户信息、订单管理等，并使用直观的图标或标签将它们呈现出来，便于用户轻松切换和使用。为常用的功能设置快捷入口，如个人设置、购物车、收藏夹等，让用户能够直接访问并快速完成相关操作，提高用户操作的便捷性和效率。在个人中心中加入消息中心，让用户能够接收和管理系统通知、好友消息、活动提醒等，确保用户不会错过重要的信息和动态。提供客户支持入口，如联系客服、帮助中心、常见问题解答等，以满足用户在使用过程中遇到的问题和需求，提供及时的帮助和解决方案。为保护用户的隐私和安全，提供隐私设置入口，让用户能够自行调整个人信息的公开程度，同时显示安全提示和措施，增强用户的安全感和信任度。在个人中心界面上加入用户反馈的入口，鼓励用户提交意见、建议和问题，以便开发团队进行优化和改进，提升用户体验和满意度。App个人中心界面的设计思路是突出展示个人信息，分类呈现各种功能，并提供个性化设置、快捷入口、订单、收藏和消息管理等功能，以提高用户的操作便捷性和用户满意度。7.2.1

消息界面设计思路解析7.2任务实施1.头像基本信息区域制作（1）选择工具箱中的“矩形工具”，设置“宽度”为，“高度”为的矩形，“填充”的颜色色值为#4195F5。打开素材文件夹内的大楼外观素材，拖入XD软件内，属性栏内选择“对象模糊”数值为14，“不透明度”为35%，放在蓝色矩形上方，将蓝色矩形复制一层，选择大楼外观，shift加选蓝色复制层，使用shift+ctrl+M“带有形状的蒙版”，如图7-13所示。（2）选择文本工具，输入“个人中心”字体为苹方（16 ptRegular，白色）。选择“矩形工具”，设置“宽度”为，“高度”为的椭圆形。打开素材文件夹内的消息头像素材，拖入到XD软件内，选择头像素材，按shift键加选圆角矩形，使用shift+ctrl+M“带有形状的蒙版”。输入“头像名字”字体为苹方（14 ptRegular，白色），如图7-14所示。（3）选择工具箱中的“矩形工具”，设置“宽度”为，“高度”为的矩形，“填充”的颜色色值为白色，调整“不透明度”40%。输入数字和对应文字字体为苹方（14

ptRegular，白色）。选择工具箱中的“直线工具”，设置“高度”为，“边界”颜色为白色，“不透明度”为30%，如图7-15所示。图7-13设置头部背景模糊

图7-14设置头像元素

图7-15设置其他元素7.2.1

消息界面设计思路解析7.2任务实施2.瓷片区设计制作（1）选择工具箱中的“矩形工具”，设置“宽度”为，“高度”为的矩形，“圆角的圆角矩形，“填充”的颜色色值为渐变色，左侧色值为#FF7777，右侧色值为#FA9C9C。打开素材文件夹内的背景修饰素材，拖入XD软件内，调整合适的大小及角度，复制圆角矩形，选择圆角矩形，按住shift键加选背景修饰素材，使用shift+ctrl+M“带有形状的蒙版”。输入“学院好物”字体为苹方（16 ptMedium，白色）。输入“精选好礼等你拿”字体为苹方12 ptLight，白色），如图7-16所示。（2）瓷片区另外一个板块设计方法如以上步骤，如图7-17所示。图7-16学院好物板块

图7-17天天签到板块7.2.1

消息界面设计思路解析7.2任务实施3.我的服务和Banner区广告制作（1）选择工具箱中的“矩形工具”，设置“宽度”为，“高度”为的矩形，“圆角8 pt的圆角矩形，“填充”的颜色为白色，勾选属性栏“投影”x为0，y为3，模糊为6。选择“矩形工具”，设置“宽度”为，“高度”为的椭圆形，“填充”的颜色为#FF4C4F。打开素材文件夹内的服务图标素材，拖入到XD软件内，放置到合适的位置。输入“我的服务”字体为苹方（16 ptMedium，#），如图7-18所示。（2）图标制作步骤参考“好物界面设计与制作”（3），效果如图7-19所示。（3）选择工具箱中的“矩形工具”，设置“宽度”为，“高度”为，“圆角的圆角矩形，将在photoshop设计制作好的Banner图导入到XD内，将Banner图和圆角矩形选中，使用带有形状的蒙版快捷键“shift+ctrl+M”，效果如图7-20所示。图7-18我的服务

图7-19图标

图7-20广告区7.2.1

消息界面设计思路解析7.2任务实施4.其他功能入口区制作（1）打开素材文件夹内的客户服务图标素材，拖入XD软件内，放置到合适的位置，工具箱中的“文本工具”，输入“客服中心”字体为苹方，字号为16 pt，字重为Medium，颜色色值为#，如图7-18所示。绘制更多图标，选择工具箱中的“钢笔工具”，设置“边界”粗细为2，“填充”颜色为#B1B1B1，选择工具箱中的“直线工具”，绘制分割线“边界”大小为1，颜色为#E8E8E8，如图7-21所示。（2）其他功能入口区制作步骤如上，效果如图7-22所示。图7-21客服中心

图7-22页面效果7.2.1

消息界面设计思路解析077.3技能提升UI设计——AIGC驱动赋能界面完美设计7.3.1任务概述7.3.1

任务概述

通过AIGC技术，对界面元素进行智能化分析与问题查找，提高界面优化效率。查找内推包括垂直间距、规范网格布局与卡片组件样式，底部导航栏图标对齐与交互反馈。最终打造一个布局规范、视觉统一、交互流畅且专业美观的界面，显著提升用户使用体验与界面整体品质。7.3.2运用AIGC查找页面问题（1）以Figma插件SpecAI为例。复制首页.SVG格式首页到Figma中，如图7-23所示。7.3技能提升图7-23打开Figma7.3.2运用AIGC查找页面问题7.3.2运用AIGC查找页面问题（2）选择工具栏搜索插件，输入SpecAI选择打开“SpecAI：EnhanceUI/UX，Accessibility&CopywithAI”，如图7-24所示。7.3技能提升图7-24搜索插件SpecAI7.3.2运用AIGC查找页面问题7.3.2运用AIGC查找页面问题（3）初次使用需要登录，登录后选择页面并点击继续，如图7-25所示。（4）继续选择页面，点击Review，如图7-26所示。7.3技能提升图7-25点击按钮图7-26点击Review7.3.2运用AIGC查找页面问题7.3.2运用AIGC查找页面问题（5）在对话框上方选