移动端“美食小吃”App交互UI设计 天津电子信息职业技术学院天津电子信息职业技术学院 知识要点 0 1 “美食小吃”App交互UI设计项目背景分析 0 2 App交互UI设计项目需求分析 0 3 App页面视觉层次结构与视觉引导 0 4 App界面元素构成设计 0 5 App界面布局设计风格 0 6 移动端平台界面设计规范 0 7 App交互UI设计流程分析 0 8 项目实施-移动端“美食小吃”App 交互UI设计 “美食小吃”App交互UI设计项目背景分析 “美食小吃”App交互UI设计项目背景分析 •在互联网浪潮的冲击下，餐饮行业的互联网化飞速发展。从最初的点评模式开始，团购、外卖等诸多形式不断涌 现，当前，餐饮行业已成为本地生活服务行业中互联网化程度最高的行业之一，订外卖、在线预订、团购都已经成 为消费者就餐的常规选择。 •外卖App已成为一种常规订餐方式。借助外卖，餐厅可摆脱位置、营业面积的制约，扩大服务范围，提高销量。 早期的订餐服务平台有百度外卖、饿了么、美团外卖，从2017年饿了么收购百度外卖后，饿了么和美团占据主要 市场，形成双雄争霸的格局。 •饿了么定位从学生群体着手，瞄准外卖市场，专注成为餐饮服务界巨头。而美团外卖是美团集团T型战略的重要一 环，一直在积极搭建O2O平台，扩大O2O平台的可能性，因此生鲜水果药品配送服务应运而生。 •面对如此规模的市场环境，利用网络宣传美食是现今最有效的方法。设计一款地方或特色美食的App不仅可以长 期宣传美食文化，还可以提高商户或企业的知名度，中国历来有“民以食为天”的传统，餐饮业一直在社会发展与人 民生活中发挥着重要作用，经营档次和企业管理水平不断提高，经营业态日趋丰富，投资主题和消费需求多元化的 发展步伐加快，设计一款自己的App或虚拟店面，需要摒弃传统餐饮业低层次的服务方式，走特色美食文化之路， 提高餐饮业的文化品位。同时要突出App的深层次服务，如企业精神、特色菜肴、休闲、文化娱乐、在同行业中的 特色优势、投诉处理、意见反馈甚至互动交流，培养各阶层顾客对品牌的忠诚度。 App交互UI设计项目需求分析 App交互UI设计项目需求分析 •在新的消费时代，外卖的出现完全颠覆了餐饮业，订购外卖已经成为人们日常生活中常见的事情。传统商业街总 是通过多种方式引导传统店铺。其中，加入外卖平台是多数餐饮企业的选择。餐饮店铺越来越离不开外卖App，消 费者也是离不开外卖App，外卖App已经成为顾客饮食生活中不可缺少的重要部分。 •目前市场对外卖App的需求主要体现在以下几个方面： •客户端：对外卖App用户最重要的功能是自动找到当前位置，然后展示周围的商业街食品，根据销售、距离、类 别、价格等进行选择，在线完成支付后，可以查看配送信息来评估产品。 •后台管理端：外卖App开发的后台管理点。主要功能模块包括设置营销入驻系统、营销支持、基数部署中心在线、 支持各种营销活动、吸引营销、商城结算、数据统计、信息推送等。 •商家方面：主要面向入住外卖App的普通商家。核心功能包括店铺和产品设置、营销活动设置、结算结算、在线 客服、电话短信、店铺公告、订单管理、评价管理等。 •配送方：主要面向配送配送人员，包括实时订单、转账帮助、异常订单、信息通知、历史订单、配送收入、地图 定位、导航等。 •那么，根据产品的定位和目标用户以及用户地域的分布，开发一款商家自己的外卖App软件，可以更精准的把握 用户，并有针对性的提供些定制化服务，同时所有用户的数据都在App后台的数据库里，不需要与其他商家相比， 不仅能大大提高商家的利润，还能给用户降低价格，提高用户的订单率、回收率。还可以举办各种营销活动，建立 会员积分系统，促进销售。从而提升销售额，并形成一定的知名度。 App页面视觉层次结构与视觉引导 App页面视觉层次结构的构建 • 视觉是内容的构成布局，以便有效地传达信息 和含义。 视觉层次结构以及重要性 尺寸、颜色、字重、布局 • 依据重要性顺序排列 • 影响人眼感知正在显示的信息的顺序。 02 视觉层次结构构建的常用元素 尺寸 颜色 字体 布局 App页面视觉层次结构的构建 放大主体内容或者标题来突出 视觉层次关系，突出主要内容 03 视觉层次结构构建的常用元素 尺寸大小 字体 布局 App页面视觉层次结构的构建 颜色 04 视觉层次结构构建的常用元素 尺寸大小 颜色 布局 App页面视觉层次结构的构建 字体 05 视觉层次结构构建的常用元素 尺寸大小 颜色 字体 App页面视觉层次结构的构建 布局 06 分组和对齐 常用的方式有：色块划分、宫格、线框、列表 App页面视觉层次结构的构建 App界面设计的视觉引导 视觉引导 用户通常是以扫描的方式快速获取页面的信息。 需要我们更精确的抓住用户的视线,让用户更高效更便 捷的扫描要浏览的内容。 把握文字和组件的排版布局，来引导用户的视线，让 App看起来更加舒适，用户使用起来更加方便！ App界面设计的视觉引导 视觉引导-图标 图标设计引导性强、与内容贴合； 让内容显得谨慎、专业； App界面设计的视觉引导 视觉引导-图标 遵循图标尺寸一致性的原则，可以尽量避免产品从视觉上 看起来不统一。 学习 实训 出行 主要问题在于 元素尺寸差异比 较大，视觉上显得不统一、专 业度差些 App界面设计的视觉引导 视觉引导-图标 对比市场成熟的App产品，对图标进行简单的分析； 分析图标元素的设计方法、以及遵循的规则； 图标在颜色的构成、元素的形状、丰富的 程度等细节方面遵循一致性的原则，图标 可以显得更加专业 App界面设计的视觉反馈设计 确定恰当的模式确定恰当的模式 设计设计清晰的内容清晰的内容 反反馈馈响响应应及及时时告知用告知用户户 选择模态反馈还是非模态反馈。 信息内容符合大众的认知原理 要选择恰当的时机出现或者消失。 App界面设计的视觉反馈设计 模态反馈：强调反馈信息的重要性 非模态反馈：反馈信息干扰度最小化的传达给用户 一、确定合适的模式 非模态（按钮灰度显示） 模态反馈（弹窗提示） App界面设计的视觉反馈设计 反馈设计要遵循人的认知心理过程； 反馈的内容要符合用户的认知结果。 二、设计清晰的内容 App界面设计的视觉反馈设计 反馈信息的及时性； 不能脱离用户的操作场景； 三、反馈响应及时告知 用户 App界面元素构成设计 App界面元素构成设计 App UI交互界面设计其中的一个要点是要选择正确的界面元素。 界面元素既要能帮助用户完成操作反馈的任务，还要容易被理解和使用；某个功能要在某个或某些界面上完成，这些在交互设计中就已经决定了的；而这 些功能在界面上如何被用户认知到，就属于UI交互设计的范畴。 设计复杂系统的界面首先要面临的一个挑战，就是弄清楚用户不需要知道哪些内容，并且减少它们的可发现性。 我们可以采用一些技巧，使用户完成目标的过程变得容易些。比如：当我们把界面第一次呈现给用户的时候，仔细考虑每一个选项的默认值，如图； App界面元素构成设计 App UI交互界面设计其中的一个要点是要选择正确的界面元素。 界面元素既要能帮助用户完成操作反馈的任务，还要容易被理解和使用；某个功能要在某个或某些界面上完成，这些在交互设计中就已经决定了的；而这 些功能在界面上如何被用户认知到，就属于UI交互设计的范畴。 设计复杂系统的界面首先要面临的一个挑战，就是弄清楚用户不需要知道哪些内容，并且减少它们的可发现性。 我们可以采用一些技巧，使用户完成目标的过程变得容易些。比如：当我们把界面第一次呈现给用户的时候，仔细考虑每一个选项的默认值，如图； 一个设计良好的界面是要组织好用户最常采用的行为；同时让这些界面元素用最容易的方式获取和使用。 App交互界面的构成概念 App的页面构成包括启动页、引导页、登录注 册、首页等页面。 1.启动页 启动页是开启App时的初始页面，一般由logo、 slogan、版本号、产品名、公司名、 Copyright等信息简单组合而成，出现时长一 般在3s内，如图 App交互界面的构成概念 2.引导页 引导页一般作为产品的功能性引导，使用户 能快速了解产品特性；页面数通常为1-5个， 3个最为常见；内容由主题、图/文简介、页 面指示器、跳过按钮等构成，如图3-18和图3 -19所示。 设计时需要注意的是文字信息不宜过多，主 题内容要突出，图片要符合品牌调性，同时 页数也不宜太多。 App交互界面的构成概念 3.登录注册 一般有三种方式，通常会几种方式组合使用。 第三方账号登录，用户不需要输入信息直接第三方账号 登录即可，流程简化。 手机号注册，一般会结合密码或是动态验证码。 邮箱注册，这种登录方式较早，设计之初是基于网页版 注册时使用的。 交互界面内容的构成，通常分为几个标准的信息区 域： 公共导航区：包括导航栏、状态栏；它是对软件操作进 行宏观操控的区域 状态栏：也叫状态指示器，在iOS 7以后，已经开始慢慢 弱化状态栏的存在，将状态栏和导航栏组合在了一起。 通常导航栏高度为：88～132px，分别对应iPhone SE～ iPhone X的尺寸，iOS严格规定了标准信息区域的高度， 我们需要严格遵守，如图 App交互界面的构成概念 主菜单栏，也叫标签栏，承载的内容包括软件LOGO、软 件版本、以及相关图文信息；或者是信息框架。 底部标签栏具有很强的包容性，可以形成最基本的信息 框架，然后用其他的导航模式来承载具体的功能和内容。 展现形式有文字+图标、纯图标形式，常用的是文字+图 标，可以减少用户记忆负担，如图 功能操作区，也叫内容区域，它是软件的核心部分，也 是版面上面积最宽的部分，如图所示。同时需要注意的 是：iPhone X 及之后版本底部要预留68px的主页指示器 的位置 01、显著性元素 显著性要素主要分为感觉和认知两大类。 App界面元素设计的构成方法 感觉类的主要体现颜色、位置、大小等物理特征; 认知类反映出物体与人的关系。 注意：元素不要过多，会造成视觉的复杂感。 02 视觉和心理需求 在浏览页面时，我们会根据自己的兴趣对视觉刺激强的事物 首先分配注意力； 在app界面设计时要考虑视觉的需求和心理的需求，随着界 面的即时性改变设计。 App界面元素设计的构成方法 03 用户的定势和期望 定势指的是某种活动前的心理预备状态; 期望是指对某个事物发展的预设。 在交互设计中，用户更期待高效和降低认知负 荷，扁平化风格应势而起。 App界面元素设计的构成方法 App界面布局风格设计 App界面设计风格的重要性 统一设计风格能给用户呈现整体一致的视觉体验； APP UI界面设计布局风格 App界面设计风格 通过颜色搭配、页面布局和品牌形象等， 给用户呈现出的整体视觉感受 有利于传达产品整体的品牌形象； 方便设计团队制定设计规范； 减少设计风格不一致带来的沟通成本。 App界面设计风格传达的信息 整体基调 目标人群 APP UI界面设计布局风格 主流的设计风格 扁平化设计 APP UI界面设计布局风格 界面美观、简约大方、条理清晰； 设计元素上强调抽象、极简、符号化，去除冗余的装饰效果； 兼容pc网站、安卓、ios等不同系统的平台，适应性强。 主流的设计风格 APP UI界面设计布局风格 参考来自面向企业分析服务公司（KISSmetrics）的调查报告图表 色调冷暖及明暗亮度 通过冷暖色彩+明暗亮度搭配 传递给用户的印象和心理感受 APP UI界面设计布局风格 绿色：天然、健康、好运、稳定等 紫色：灵性、神秘、智慧、启迪等 移动端平台界面设计规范 移动端平台界面设计规范 Android平台 Android的设计规范不同于iOS，Android是一个开源的系 统，国内外有很多的手机厂商，这就导致了有非常多的 Android机型，比如国内的小米、OPPO、vivo、魅族等。 1.基础概念 DPI屏幕密度（Dots Per Inch）：每英寸点数，表示屏 幕密度，它是测量空间点密度的单 位，最初应用于打印技术中，表示每英寸能打印上的墨 滴数量。 后来DPI的概念也被应用到了计算机屏幕上，计算机屏幕 一般采用PPI（Pixels Per Inch）来表示一英寸屏幕上 显示的像素点的数量。 屏幕密度计算公式为，如图 那么，屏幕分辨率为1080*1920设备的屏幕密度，如图 移动端平台界面设计规范 Android平台 2.屏幕密度划分 安卓硬件设备尺寸多且不统一，这就给页面适配带来了很大的工作量，为了解决这个问题，安卓手机屏幕有自己初 始的固定密度，根据这些屏幕不同的密度会自己进行适配，这就涉及到设计稿的尺寸和切图的内容，这点需要我们 掌握，为后面的设计的工作做基础，以下是Android的密度划分以及代表的分辨率，如图 移动端平台界面设计规范 Android平台 3.界面设计尺寸及栏高度 （1）界面设计尺寸 我们根据目前市场占比大的主流设备尺寸来看，建议使用1080 x 1920px来做 安卓设计稿尺寸，如图 以1080x1920px作为设计稿标准尺寸的理由： 从中间尺寸向上和向下适配的时候界面调整的幅度最小，最方便适配。 大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角。 用主流尺寸来做设计稿尺寸，极大的提高了视觉还原和其他机型适配。 （2）界面设计控件尺寸 我们以主流设备的尺寸来看，界面中各控件的尺寸设计，如图 移动端平台界面设计规范 Android平台 4.图标规范 对于分辨率众多的Android设备，为了方便界面适配， Google按照dpi大小将它们分成了4种模式（MDPI、 HDPI、XHDPI和XXHDPI），如图 5.字体规范 在Android平台中使用的英文字体为Roboto字体，中 文字体为思源黑体；在Android 之后，使用的是 思源黑体，字体文件有两个名称，即“Source Han Sans”和“Noto Sans CJK”。 移动端平台界面设计规范 iOS平台 iOS平台在界面设计中制定了常用的一些尺寸规范和 方法，如界面布局尺寸、间距、文字、图标、适配 等，设计师在设计时要严格遵守，并融会贯通。 1.基础概念 物理像素：屏幕的实际分辨率，例如iPhone6/7/8的 750*1334px、iPhone6/7/8plus的1242*2208px。 逻辑像素：物理分辨率是硬件所支持的，逻辑分辨 率是软件可以达到的像素。例如iPhone6/7/8的 375*667pt、iPhone6/7/8plus的414*736pt等，如图 移动端平台界面设计规范 iOS平台 单位pt：iOS开发单位，即point，绝对长度， 1pt=1/72英寸，pt = px * 72 / DPI。 在视网膜屏出现之前，苹果规定 1px=1pt，也就是 说pt和像素点是一一对应的。但随着 iPhone 4 型号 出现以后，高分屏出现了，也就是视网膜屏，这个 时候1pt对应 2px。所以用固定长度pt作为开发单位， 优势是可以统一图形在同一种类不同型号设备上图 形的大小，而如果用像素作为单位的话，就会出现 混乱，因为在不同像素密度的屏幕里面，像素本身 大小是不一样的。 如果界面设计师提供的是2倍图，要先转成逻辑像素， 即px/2。然后算出的pt就是逻辑像素下的字号大小。 Photoshop 默认的DPI（分辨率）就是72，也就是说， 通常界面设计师提供的设计图，如果字体大小单位 是px，2倍图，则iOS中的字号pt = px / 2。 需要注意的一点是，我们需要确认下界面设计师提 供设计图的DPI，再进行转换，如图 移动端平台界面设计规范 iOS平台 2.界面设计尺寸及栏高度 iOS应用中的界面布局，包括状态栏、标签栏、导航栏等，它们的高度 iOS 严格规定了各个栏的高度，需要我们严格遵守，如图 3.标准色规范 字体的颜色设置一般很少用纯黑色，一般用深灰色和浅灰色、细体和粗 体来区分重要信息和次要信息，从而进行信息层级的划分。 标准色规范分为：重要、一般、弱。 标准色-重要：重要颜色中一般不超过3种，红色需要小面积使用,用于特 别需要强调和突出的文字、按钮和图标；而黑色用于重要级文字信息比 如标题、正文等。 标准色-一般：都是相近的颜色，而且要比重要颜色弱，普遍用于普通级 信息、引导词比如提示性文案或者次要的文字信息。 标准色-较弱：普遍用于背景色和不需要显眼的边角信息，如图 移动端平台界面设计规范 iOS平台 4.文字规范 App内的文字大小设置与所在页面、所在层级、所表达内容属性密 切相关；App中字号范围一般在20-36之间（@2x），所有的字号设 置都必须为偶数，上下级内容字号极差关系为2-4号。 百度曾经做过一个调查，对于App字体大小调查结果如图 （1）标准字规范分为：重要、一般、弱。 这里主要规范标准字的大小，标准字要注意跟上面讲的标准色进行 组合 ，来突出App重要的信息和弱化次要的信息。 标准字-重要：大字号普遍用于大标题、top导航，较小字号用在分 割模块的标题上。 标准字-一般：主要用在大多数文字，比如正文。 标准字-弱：普遍与标准色-一般，组合用于辅助性文字如一些次要 的文案说明，如图 iOS制定了不同界面区域下对应不同功能字体大小，如图 移动端平台界面设计规范 iOS平台 （2）字体 在iOS系统中，中文方面默认使用苹方字体，字形纤细中宫饱满，利于 阅读，并且还提供6个字重供设计开发者使用所以后面的设计趋势中， 字重的使用变的开始多元化了起来，使用semibold中粗体、大字号作为 界面的标题变的更为流行起来，如图 而在英文方面，iOS系统使用了San Francisco 的字体。 5.图标规范 在PS中绘制App UI界面设计里的图标时尽可能用形状来绘制，这样可 以保证图标和按钮是矢量图，切图的时候的格式都是Png；同时图标和 按钮的尺寸大小必须为偶数。 图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点 击态等，如图 App交互UI设计流程分析 … … … … App交互UI设计流程分析 版式界面设计的概念梳理 在进行UI设计时，除了要考虑界面层次结构的构建、确定界面的构成及设计风格，还 要考虑版式设计的布局，当界面设计完成后，为了便于和原型交互设计师进行衔接， 同时为了原型交互设计师可以高度还原我们的UI设计稿，还需要平面设计师对UI进行 切图、标注以及元素的优化存储。 … … … … 版式界面设计的概念梳理 内容布局内容布局 列表式布局 卡片式布局 … … … … 内容布局内容布局 列表式布局 卡片式布局 版式界面设计的概念梳理 … … … … 界面界面图图片片设计设计比例比例 常见图片尺寸比例： 16:9 4:3 3:2 1:1 版式界面设计的概念梳理 … … … … 对对 齐齐 对齐是版式设计基础、重要的原则之一，通过整齐的外观， 给用户一种有序一致的浏览体验。 版式界面设计的概念梳理 … … … … 对对 称称 对称设计传达出页面的平衡、安静和稳定，同时表达 了完整性、专业性和一致性。 版式界面设计的概念梳理 … … … … 分分 组组 常见的分组方式就是卡片，为用户选择提供专注而又明确 的浏览体验。 版式界面设计的概念梳理 … … … … 切图的重要性切图的重要性 设计切图输出的目的是跟前端的工程师团队协同工作，那么在团队协作过程中，首先应该保证切图输 出能够满足工程师设计效果图的高保真还原需求。 其次，切图输出应该尽可能降低工程师的开发工作量，避免因切图输出而导致不必要的工作。 最后，输出的切图应当尽可能的压缩大小，以降低App或Web的总大小，提升用户使用时的加载速度。 所以切图输出应当做到切图精准，便于团队协同工作。 切图的重要性 界面标注的注意事项 界面标注的作用是给开发工程师提供参考，因此在标注 之前需要和原型开发工程师进行沟通，了解他们的工作 方式，以更快捷高效的完成工作，并且最大限度的完成 平面设计稿的高度还原。 标注注意事项： 合理划分，再复杂的页面，信息也不要挤在一起，如图 每一个标注本身也要注意对齐方式，干净整洁的标注能 让开发一眼找到所需，如图 任何细节和要求都写清楚，要做到有据可查。 需要标注的内容整理如下： ①文字：字体、大小、字体颜色 ②图标：大小、区域 ③列表：列表高度、颜色、列表内 内容上下间距 ④布局控件属性：控件宽高、填充颜色、圆角大小 ⑤间距：控件之间的距离、左右边距 ⑥段落文字：字体大小、字体颜色、行距，如图 1.不要提供多余无效的内容 用户在观看动态图的时候，很容易被过多的内容所分散注意 力，尤其是当你想要借助动态图来传达特定的引导，多余的 色彩和内容很容易弱化它们。 告知用户正在运行 用户想知道在每一步中发生了什么，如果超过3秒没有反馈， 使用户在不确定性等待中极易关闭应用。 告知用户进度 通常只是让用户知道程序正在运行是不够的，还要能够看到 载入速度和加载时长，进度条的作用得以突显 PS动态元素的优化存储设置 2.在动态图中建立一致的视觉 在设计的时候使用品牌的配色来对动态图进行设 计，将品牌的形象、LOGO和其他元素在Gif图中 呈现，让品牌、企业和产品以更加富有活力的方 式呈现出来。 PS动态元素的优化存储设置 3.颜色越少越好 这不仅影响最终文件的大小，而且使用的颜色越 少，单位体积内可容纳的动画就越多，同时又可 以把文件控制在很小的范围。 PS动态元素的优化存储设置 图要尽可能小 不同平台的图片规格不同，使用场景也不一样，因此， Gif 图需要足够小才能兼容不同的需求。 缩小 Gif图尺寸的方法： 精简动画特效； 丢掉重复的帧； 减少颜色值； 调整损耗值等等； PS动态元素的优化存储设置 1.设计“美食小吃”App界面UI 在“美食小吃”App进行设计之前，我们需要思考， 界面如何设计才能留住用户，首先方便快捷的操作 界面是重要基础，能够让用户快速了解到自己需要 的信息十分重要，其次精致美观的界面设计必不可 少，要最大程度的呈现食物的美味，这就需要我们 在分析的角度上遵循一切从用户角度出发。 在产品功能类似的情况下，用户体验最大程度上影 响用户的忠诚度，因为是主流的外卖App产品，在 产品的易用性和基本用户体验上，很值得我们借鉴， 优秀的交互设计，不能只注重产品体验的易用性， 在设计用户行为、帮助用户完成目标的同时，还应 该给用户带来愉快、有意义的体验。 项目实施-移动端“美食小吃”App交互UI设计 1.设计“美食小吃”App界面UI 1.确定界面设计风格 在进行App界面设计时，首先要做的就是确定整个界面的风格， 通过颜色和布局的搭配给用户呈现整体的视觉感受，我们采用 现行主流的扁平化设计风格，优点是可以兼容不同系统平台和 不同分辨率、设计元素极简，突出图文信息等。 2.使用设计规范 正确的使用设计规范可以对我们的App界面设计进行风格统一， 同时减少界面元素的重复设计，控制设计素材的大小，设计规 范参考Android、iOS平台设计规范。 3.确定页面内容的构成 确定了设计风格及设计规范后，设计师根据风格进行细化的设 计，根据外卖App的特点，我们设定美食小吃App UI设计由引 导页、登录页、首页、会员、订单、我的页面等内容构成，如 图 项目实施-移动端“美食小吃”App交互UI设计 1.设计“美食小吃”App界面UI 4.设计页面层次 我们通过视觉语言的基本元素，尺寸、颜色、字体、版式、布 局来对美食小吃App进行视觉层次的设计。 通过以上的流程讲解，我们实现了App风格的确定、遵循App平 台的设计规范、确定页面内容的构成、以及页面视觉层次的构 建和布局设计，基本完成了美食小吃App UI的设计工作。 项目实施-移动端“美食小吃”App交互UI设计 2.页面适配 在浏览App的时候，我们会遇到过在部分机型中图片变形、页 面不协调、文案被裁剪的问题。这就需要我们页面进行适配， 适配是为了使页面在不同手机设备上, 相对保持统一的展示效果。 在页面适配前，我们先了解什么是@2x、@3x，如图 可以简单的理解为倍数关系，如果使用750x1334px（iPhone 6/7/8）尺寸做设计稿，那么切片输出就是@2x，缩小2倍就是 @1x，扩大倍就是@3x，如图 项目实施-移动端“美食小吃”App交互UI设计 3.实现美食App界面素材切片输出 当界面设计定稿之后，设计师需要对图标进行切片提供给原型交互设计师， 把设计稿中有用的部分剪切下来作为网页或移动端制作时的素材，这个过程 就是切图。 通常我们只需要对图标进行切图就可以，文字、线条和一些标准的几何形状 是不需要切图的，例如搜索框只需要在标注中描述它的尺寸、圆角大小、背 景色值、不透明度即可，开发工程师可以用代码实现这种效果，如图 切图和标注是为了能够满足开发人员对于效果图的高度还原，最早开始的切 图/标注是设计师手动进行，花费的时间成本比较大，而且对于开发人员来讲 看到的通常是一个标满了尺寸的页面。为了迎合市场的需求，出现了各种切 图和标注的软件、插件，想看元素的标注只需点击相应的元素就会自动出现， 还会有相应的代码供开发人员参考，极大的节省了程序开发的时间成本，减 少了很多不必要的沟通与重复切图/标注的概率。 当完成App界面设计后，设计师即可对设计稿依据切图规范和命名规范进行 切图工作，在进行切图标注的时候，设计师需要先确认开发的设备是 Android还是 iOS。 项目实施-移动端“美食小吃”App交互UI设计 4.使用Pxcook标注美食App界面 当界面设计定稿之后，设计师需要对界面进行标注给开发工程师在还原界面 时进行参考。在一份设计稿中需要标注的内容是文字的字号大小、粗细、颜 色、不透明度、色值，界面的背景颜色、不透明度，以及各个图标、列表、 文字之间的间距，如图 借助一些专业的标注工具有利于我们提高工作效率，常用的标注工具有Mark Man、Assistor PS或Pxcook 项目实施-移动端“美食小吃”App交互UI设计 5.美食App动态加载画面优化 App交互设计中，很多设计师都会采用动态效果来吸引用户的注意，相 对于静态的页面，动态效果更能生动的传达出想要传达的思想，同时 也更能感染用户的情绪，吸引眼球。但是动态效果相对于静态来说， 在设计中也需要注意很多问题，因为一不小心如果动态设计过度，不 仅会影响页面加载的进程，更会影响用户的体验。 那么一般App动态元素设计可以从以下几种方式进行优化： （1）减小图像大小 （2）减少帧数 （3）颜色数 （4）色彩损耗值 （5）保存预设和优化文件大小 项目实施-移动端“美食小吃”App交互UI设计 App界面设计的视觉反馈设计 •在项目实施中我们讲解了当界面设计定稿之后，使用切图软件对Android和iOS平台进 行规范的切图以及命名，设计师需要对界面进行标注给原型交互开发工程师在还原界 面时进行参考，通过项目实施我们使用Pxcook软件来提高我们标注的工作效率。另外 我们还使用了几种优化静态图片和GIF动图存储的设置方法，避免由于图片过大或平 台的限制影响页面加载的进程，同时增强了用户的体验，设计师在设计时并不一定要 拘泥于某种软件或方法，但对这些规范应有所了解，并融会贯通，为原型交互设计制 作提供理论基础。 项目小结 本课内容结束 祝学习顺利 天津电子信息职业技术学院天津电子信息职业技术学院