第三章移动端“美食小吃”App交互UI设计

移动端“美食小吃”App交互UI设计知识要点01“美食小吃”App交互UI设计项目背景分析02App交互UI设计项目需求分析03App页面视觉层次结构与视觉引导04App界面元素构成设计05App界面布局设计风格06移动端平台界面设计规范07App交互UI设计流程分析08项目实施-移动端“美食小吃”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界面元素构成设计AppUI交互界面设计其中的一个要点是要选择正确的界面元素。界面元素既要能帮助用户完成操作反馈的任务，还要容易被理解和使用；某个功能要在某个或某些界面上完成，这些在交互设计中就已经决定了的；而这些功能在界面上如何被用户认知到，就属于UI交互设计的范畴。设计复杂系统的界面首先要面临的一个挑战，就是弄清楚用户不需要知道哪些内容，并且减少它们的可发现性。我们可以采用一些技巧，使用户完成目标的过程变得容易些。比如：当我们把界面第一次呈现给用户的时候，仔细考虑每一个选项的默认值，如图；App界面元素构成设计AppUI交互界面设计其中的一个要点是要选择正确的界面元素。界面元素既要能帮助用户完成操作反馈的任务，还要容易被理解和使用；某个功能要在某个或某些界面上完成，这些在交互设计中就已经决定了的；而这些功能在界面上如何被用户认知到，就属于UI交互设计的范畴。设计复杂系统的界面首先要面临的一个挑战，就是弄清楚用户不需要知道哪些内容，并且减少它们的可发现性。我们可以采用一些技巧，使用户完成目标的过程变得容易些。比如：当我们把界面第一次呈现给用户的时候，仔细考虑每一个选项的默认值，如图；一个设计良好的界面是要组织好用户最常采用的行为；同时让这些界面元素用最容易的方式获取和使用。App交互界面的构成概念App的页面构成包括启动页、引导页、登录注册、首页等页面。1.启动页启动页是开启App时的初始页面，一般由logo、slogan、版本号、产品名、公司名、Copyright等信息简单组合而成，出现时长一般在3s内，如图App交互界面的构成概念2.引导页引导页一般作为产品的功能性引导，使用户能快速了解产品特性；页面数通常为1-5个，3个最为常见；内容由主题、图/文简介、页面指示器、跳过按钮等构成，如图3-18和图3-19所示。设计时需要注意的是文字信息不宜过多，主题内容要突出，图片要符合品牌调性，同时页数也不宜太多。App交互界面的构成概念3.登录注册一般有三种方式，通常会几种方式组合使用。第三方账号登录，用户不需要输入信息直接第三方账号登录即可，流程简化。手机号注册，一般会结合密码或是动态验证码。邮箱注册，这种登录方式较早，设计之初是基于网页版注册时使用的。4.App交互界面内容的构成，通常分为几个标准的信息区域：公共导航区：包括导航栏、状态栏；它是对软件操作进行宏观操控的区域状态栏：也叫状态指示器，在iOS7以后，已经开始慢慢弱化状态栏的存在，将状态栏和导航栏组合在了一起。通常导航栏高度为：88～132px，分别对应iPhoneSE～iPhoneX的尺寸，iOS严格规定了标准信息区域的高度，我们需要严格遵守，如图App交互界面的构成概念主菜单栏，也叫标签栏，承载的内容包括软件LOGO、软件版本、以及相关图文信息；或者是信息框架。底部标签栏具有很强的包容性，可以形成最基本的信息框架，然后用其他的导航模式来承载具体的功能和内容。展现形式有文字+图标、纯图标形式，常用的是文字+图标，可以减少用户记忆负担，如图功能操作区，也叫内容区域，它是软件的核心部分，也是版面上面积最宽的部分，如图所示。同时需要注意的是：iPhoneX及之后版本底部要预留68px的主页指示器的位置01、显著性元素显著性要素主要分为感觉和认知两大类。App界面元素设计的构成方法感觉类的主要体现颜色、位置、大小等物理特征;认知类反映出物体与人的关系。注意：元素不要过多，会造成视觉的复杂感。02视觉和心理需求在浏览页面时，我们会根据自己的兴趣对视觉刺激强的事物首先分配注意力；在app界面设计时要考虑视觉的需求和心理的需求，随着界面的即时性改变设计。App界面元素设计的构成方法03用户的定势和期望定势指的是某种活动前的心理预备状态;期望是指对某个事物发展的预设。在交互设计中，用户更期待高效和降低认知负荷，扁平化风格应势而起。App界面元素设计的构成方法App界面布局风格设计App界面设计风格的重要性统一设计风格能给用户呈现整体一致的视觉体验；APPUI界面设计布局风格App界面设计风格通过颜色搭配、页面布局和品牌形象等，给用户呈现出的整体视觉感受有利于传达产品整体的品牌形象；方便设计团队制定设计规范；减少设计风格不一致带来的沟通成本。App界面设计风格传达的信息整体基调目标人群APPUI界面设计布局风格主流的设计风格扁平化设计APPUI界面设计布局风格界面美观、简约大方、条理清晰；设计元素上强调抽象、极简、符号化，去除冗余的装饰效果；兼容pc网站、安卓、ios等不同系统的平台，适应性强。主流的设计风格APPUI界面设计布局风格参考来自面向企业分析服务公司（KISSmetrics）的调查报告图表色调冷暖及明暗亮度通过冷暖色彩+明暗亮度搭配传递给用户的印象和心理感受APPUI界面设计布局风格绿色：天然、健康、好运、稳定等紫色：灵性、神秘、智慧、启迪等移动端平台界面设计规范移动端平台界面设计规范Android平台Android的设计规范不同于iOS，Android是一个开源的系统，国内外有很多的手机厂商，这就导致了有非常多的Android机型，比如国内的小米、OPPO、vivo、魅族等。1.基础概念DPI屏幕密度（DotsPerInch）：每英寸点数，表示屏幕密度，它是测量空间点密度的单位，最初应用于打印技术中，表示每英寸能打印上的墨滴数量。后来DPI的概念也被应用到了计算机屏幕上，计算机屏幕一般采用PPI（PixelsPerInch）来表示一英寸屏幕上显示的像素点的数量。屏幕密度计算公式为，如图那么，屏幕分辨率为1080*1920设备的屏幕密度，如图移动端平台界面设计规范Android平台2.屏幕密度划分安卓硬件设备尺寸多且不统一，这就给页面适配带来了很大的工作量，为了解决这个问题，安卓手机屏幕有自己初始的固定密度，根据这些屏幕不同的密度会自己进行适配，这就涉及到设计稿的尺寸和切图的内容，这点需要我们掌握，为后面的设计的工作做基础，以下是Android的密度划分以及代表的分辨率，如图移动端平台界面设计规范Android平台3.界面设计尺寸及栏高度（1）界面设计尺寸我们根据目前市场占比大的主流设备尺寸来看，建议使用1080x1920px来做安卓设计稿尺寸，如图以1080x1920px作为设计稿标准尺寸的理由：从中间尺寸向上和向下适配的时候界面调整的幅度最小，最方便适配。大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角。用主流尺寸来做设计稿尺寸，极大的提高了视觉还原和其他机型适配。（2）界面设计控件尺寸我们以主流设备的尺寸来看，界面中各控件的尺寸设计，如图移动端平台界面设计规范Android平台4.图标规范对于分辨率众多的Android设备，为了方便界面适配，Google按照dpi大小将它们分成了4种模式（MDPI、HDPI、XHDPI和XXHDPI），如图5.字体规范在Android平台中使用的英文字体为Roboto字体，中文字体为思源黑体；在Android5.0之后，使用的是思源黑体，字体文件有两个名称，即“SourceHanSans”和“NotoSansCJK”。移动端平台界面设计规范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和像素点是一一对应的。但随着iPhone4型号出现以后，高分屏出现了，也就是视网膜屏，这个时候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系统使用了SanFrancisco的字体。5.图标规范在PS中绘制AppUI界面设计里的图标时尽可能用形状来绘制，这样可以保证图标和按钮是矢量图，切图的时候的格式都是Png；同时图标和按钮的尺寸大小必须为偶数。图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点击态等，如图App交互UI设计流程分析

…………App交互UI设计流程分析版式界面设计的概念梳理在进行UI设计时，除了要考虑界面层次结构的构建、确定界面的构成及设计风格，还要考虑版式设计的布局，当界面设计完成后，为了便于和原型交互设计师进行衔接，同时为了原型交互设计师可以高度还原我们的UI设计稿，还需要平面设计师对UI进行切图、标注以及元素的优化存储。

…………版式界面设计的概念梳理内容布局列表式布局卡片式布局

…………内容布局列表式布局卡片式布局版式界面设计的概念梳理

…………界面图片设计比例常见图片尺寸比例：16:94:33:21:1版式界面设计的概念梳理

…………对齐对齐是版式设计基础、重要的原则之一，通过整齐的外观，给用户一种有序一致的浏览体验。版式界面设计的概念梳理

…………对称对称设计传达出页面的平衡、安静和稳定，同时表达了完整性、专业性和一致性。版式界面设计的概念梳理

…………分组常见的分组方式就是卡片，为用户选择提供专注而又明确的浏览体验。版式界面设计的概念梳理

…………切图的重要性设计切图输出的目的是跟前端的工程师团队协同工作，那么在团队协作过程中，首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求。其次，切图输出应该尽可能降低工程师的开发工作量，避免因切图输出而导致不必要的工作。最后，输出的切图应当尽可能的压缩大小，以降低App或Web的总大小，提升用户使用时的加载速度。所以切图输出应当做到切图精准，便于团队协同工作。切图的重要性界面标注的注意事项界面标注的作用是给开发工程师提供参考，因此在标注之前需要和原型开发工程师进行沟通，了解他们的工作方式，以更快捷高效的完成工作，并且最大限度的完成平面设计稿的高度还原。标注注意事项：合理划分，再复杂的页面，信息也不要挤在一起，如图每一个标注本身也要注意对齐方式，干净整洁的标注能让开发一眼找到所需，如图任何细节和要求都写清楚，要做到有据可查。需要标注的内容整理如下：①文字：字体、大小、字体颜色②图标：大小、区域③列表：列表高度、颜色、列表内内容上下间距④布局控件属性：控件宽高、填充颜色、圆角大小⑤间距：控件之间的距离、左右边距⑥段落文字：字体大小、字体颜色、行距，如图1.不要提供多余无效的内容用户在观看动态图的时候，很容易被过多的内容所分散注意力，尤其是当你想要借助动态图来传达特定的引导，多余的色彩和内容很容易弱化它们。告知用户正在运行用户想知道在每一步中发生了什么，如果超过3秒没有反馈，使用户在不确定性等待中极易关闭应用。

告知用户进度通常只是让用户知道程序正在运行是不够的，还要能够看到载入速度和加载时长，进度条的作用得以突显PS动态元素的优化存储设置2.在动态图中建立一致的视觉在设计的时候使用品牌的配色来对动态图进行设计，将品牌的形象、LOGO和其他元素在Gif图中呈现，让品牌、企业和产品以更加富有活力的方式呈现出来。PS动态元素的优化存储设置3.颜色越少越好这不仅影响最终文件的大小，而且使用的颜色越少，单位体积内可容纳的动画就越多，同时又可以把文件控制在很小的范围。PS动态元素的优化存储设置4.Gif图要尽可能小不同平台的图片规格不同，使用场景也不一样，因此，Gif图需要足够小才能兼容不同的需求。缩小Gif图尺寸的方法：

精简动画特效；丢掉重复的帧；减少颜色值；调整损耗值等等；PS动态元素的优化存储设置1.设计“美食小吃”App界面UI在“美食小吃”App进行设计之前，我们需要思考，界面如何设计才能留住用户，首先方便快捷的操作界面是重要基础，能够让用户快速了解到自己需要的信息十分重要，其次精致美观的界面设计必不可少，要最大程度的呈现食物的美味，这就需要我们在分析的角度上遵循一切从用户角度出发。在产品功能类似的情况下，用户体验最大程度上影响用户的忠诚度，因为是主流的外卖App产品，在产品的易用性和基本用户体验上，很值得我们借鉴，优秀的交互设计，不能只注重产品体验的易用性，在设计用户行为、帮助用户完成目标的同时，还应该给用户带来愉快、有意义的体验。项目实施-移动端“美食小吃”App交互UI设计1.设计“美食小吃”App界面UI1.确定界面设计风格在进行App界面设计时，首先要做的就是确定整个界面的风格，通过颜色和布局的搭配给用户呈现整体的视觉感受，我们采用现行主流的扁平化设计风格，优点是可以兼容不同系统平台和不同分辨率、设计元素极简，突出图文信息等。2.使用设计规范正确的使用设计规范可以对我们的App界面设计进行风格统一，同时减少界面元素的重复设计，控制设计素材的大小，设计规范参考Android、iOS平台设计规范。3.确定页面内容的构成确定了设计风格及设计规范后，设计师根据风格进行细化的设计，根据外卖App的特点，我们设定美食小吃AppUI设计由引导页、登录页、首页、会员、订单、我的页面等内容构成，如图项目实施-移动端“美食小吃”App交互UI设计1.设计“美食小吃”App界面UI4.设计页面层次我们通过视觉语言的基本元素，尺寸、颜色、字体、版式、布局来对美食小吃App进行视觉层次的设计。通过以上的流程讲解，我们实现了App风格的确定、遵循App平台的设计规范、确定页面内容的构成、以及页面视觉层次的构建和布局设计，基本完成了美食小吃AppUI的设计工作。项目实施-移动端“美食小吃”App交互UI设计2.页面适配在浏览App的时候，我们会遇到过在部分机型中图片变形、页面不协调、文案被裁剪的问题。这就需要我们页面进行适配，适配是为了使页面在不同手机设备上,相对保持统一的展示效果。在页面适配前，我们先了解什么是@2x、@3x，如图可以简单的理解为倍数关系，如果使用750x1334px（iPhone6/7/8）尺寸做设计稿，那么切片输出就是@2x，缩小2倍就是@1x，扩大1.5倍就是@3x，如图项目实施-移动端“美食小吃”App交互UI设计3.实现美食App界面素材切片输出当界面设计定稿之后，设计师需要对图标进行切片提供给原型交互设计师，把设计稿中有用的部分剪切下来作为网页或移动端制作时的素材，这个过程就是切图。通常我们只需要对图标进行切图就可以，文字、线条和