项目3 移动端“美食小吃”App交互UI设计-备课笔记

项目三：移动端“美食小吃”App交互UI设计一、课程说明与要求1.课程性质与考核方式说明教师首先自我介绍。然后说明本课为考查课，平时成绩和期末成绩各占总成绩的50%，平时成绩主要通过平时作业（作品）的形式评定，还要兼顾考核出勤、学习态度、课堂表现等因素；期末考试是在课程的最后两次课采取限时命题创作的形式，全面考核课程知识的综合运用。2.课程说明《数字媒体交互设计》共分为网页交互设计、App交互设计、VR交互设计三方面的内容。本课程是以理论为基础的实践导向型课程,所传达的课程内容围绕“以人为本”的设计原则，重点讲述人机交互的基本概念和重要意义以及发展历程、软件系统的人机交互设计原则和方法、网络系统的人机交互设计原则和方法、移动端应用人机交互技术、人机交互开发工具与环境等理论内容；简要介绍人机交互的认知心理学、计算机硬件的人机交互设计、人机交互技术的发展趋势,并培养学生利用交互设计工具制作做实际交互作品原型的能力。3.组织签到及建立班级课程微信群组织学生使用学习通进行签到。然后使用微信面对面建群，说明本群作为课程的相关通知发布、知识答疑和作品交流使用，同时欢迎同学们及时在群里反馈对课程教学方面的意见和学习感想，提醒老师及时调整适合同学们的授课方式。4.工具材料准备说明本课的实践技能训练阶段，需要同学在手机或者是计算机中下载好行业需求分析文档，教师将所需准备资料发到微信群中。资料类型与名称备注行业需求分析报告文档每个小组一份二、学情分析与课程导入1.学情分析本课程授课对象为艺术专业学生，是在艺术专业中设立的一门逻辑思维较强的设计类课程，需要学生在学习过程中，对美术设计与逻辑设计内容进行一定程度上的融通。作为一门实践性较强的课程，针对学生对当前市场应用需求普遍认知不强，或有较多偏差的情况，强调进行引导教学，融入市场多元化理念。另一方面，学生对未来的市场应用有信心，对所选择的专业感兴趣，获取知识的主动性较强。2.课程导入本项目主要介绍App交互UI设计的视觉层次结构的相关理论知识，包括视觉引导和反馈、App界面设计的风格、版式设计和App平台的界面设计规范，通过这些理论的组合使用，提升读者在视觉层次结构设计这方面的认知。三、理论知识讲解（一）移动端“美食小吃”App交互UI设计背景分析在互联网浪潮的冲击下，餐饮行业的互联网化飞速发展。从最初的点评模式开始，团购、外卖等诸多形式不断涌现，当前，餐饮行业已成为本地生活服务行业中互联网化程度最高的行业之一，订外卖、在线预订、团购都已经成为消费者就餐的常规选择。外卖App已成为一种常规订餐方式。借助外卖，餐厅可摆脱位置、营业面积的制约，扩大服务范围，提高销量。早期的订餐服务平台有百度外卖、饿了么、美团外卖，从2017年饿了么收购百度外卖后，饿了么和美团占据主要市场，形成双雄争霸的格局。饿了么定位从学生群体着手，瞄准外卖市场，专注成为餐饮服务界巨头。而美团外卖是美团集团T型战略的重要一环，一直在积极搭建O2O平台，扩大O2O平台的可能性，因此生鲜水果药品配送服务应运而生。面对如此规模的市场环境，利用网络宣传美食是现今最有效的方法。设计一款地方或特色美食的App不仅可以长期宣传美食文化，还可以提高商户或企业的知名度，中国历来有“民以食为天”的传统，餐饮业一直在社会发展与人民生活中发挥着重要作用，经营档次和企业管理水平不断提高，经营业态日趋丰富，投资主题和消费需求多元化的发展步伐加快，设计一款自己的App或虚拟店面，需要摒弃传统餐饮业低层次的服务方式，走特色美食文化之路，提高餐饮业的文化品位。同时要突出App的深层次服务，如企业精神、特色菜肴、休闲、文化娱乐、在同行业中的特色优势、投诉处理、意见反馈甚至互动交流，培养各阶层顾客对品牌的忠诚度。（二）移动端“美食小吃”App交互UI设计需求分析在新的消费时代，外卖的出现完全颠覆了餐饮业，订购外卖已经成为人们日常生活中常见的事情。传统商业街总是通过多种方式引导传统店铺。其中，加入外卖平台是多数餐饮企业的选择。餐饮店铺越来越离不开外卖App，消费者也是离不开外卖App，外卖App已经成为顾客饮食生活中不可缺少的重要部分。根据产品的定位和目标用户以及用户地域的分布，开发一款商家自己的外卖App软件，可以更精准的把握用户，并有针对性的提供些定制化服务，同时所有用户的数据都在App后台的数据库里，不需要与其他商家相比，不仅能大大提高商家的利润，还能给用户降低价格，提高用户的订单率、回收率。还可以举办各种营销活动，建立会员积分系统，促进销售。从而提升销售额，并形成一定的知名度。（三）视觉层次结构与视觉引导1.视觉层次结构的构建（1）尺寸大小和比例对一些重要的操作内容进行放大显示，通过放大主体内容或者标题来突出视觉层次关系，来突出主要内容。（2）颜色更鲜艳的颜色更吸引人们的注意力；每种色彩对应的认知是不一样的，如图3-2所示，UI界面设计中，蓝色文字代表可点击，红色代表是出错或警示，轻量色彩就没有那么强吸引力，比如图中的灰色或淡黄色等。（3）字体使用粗细来创建视觉层次结构，这样信息结构更加清晰，在设计时候运用加粗加大字体形成强烈的视觉层次，使更重要的文字信息突出展示出来，如图3-3所示。（4）布局通过使用参考线和网格来布局设计，可以使每组元素都可以紧密关联。在App页面中，内容都会显示在中间的内容区域里，那么内容区域与屏幕的左右两端所留出的空间，称为外边距，如图3-4所示。外边距数值越大，页面显得越宽松，数值越小越显得比较满，因此需要我们根据自己实际的情况去确定具体数值。（5）分组、对齐分组和对齐在一定程度上可以引导视觉流，可以运用格式塔原理中的相似、接近、连续、封闭性原理进行布局。2.视觉引导和反馈在快节奏的生活方式下，用户通常是以扫描的方式快速获取页面的信息，那么我们需要知道，如何让我们的App更加高效、快速的使用户能够轻松的浏览到所需要的信息，移动端设备大多数是碎片时间，所以，要让用户更高效更便捷的扫描要浏览的内容，这就需要进行视觉引导和反馈设计。（四）App界面元素构成设计AppUI交互界面设计其中的一个要点是要选择正确的界面元素。界面元素既要能帮助用户完成操作反馈的任务，还要容易被理解和使用；某个功能要在某个或某些界面上完成，这些在交互设计中就已经决定了的；而这些功能在界面上如何被用户认知到，就属于UI交互设计的范畴。设计复杂系统的界面首先要面临的一个挑战，就是弄清楚用户不需要知道哪些内容，并且减少它们的可发现性。App界面元素设计风格网页App界面设计风格是指App通过主要的几种颜色搭配、页面布局和品牌形象等给用户呈现出的整体视觉感受。一个App项目开始启动设计时，首先要做的应该就是根据主要页面指定整个App的设计风格，其他页面按照统一的设计风格进行细化以及美化设计。统一设计风格能给用户呈现整体一致的视觉体验，有利于传达产品整体的品牌形象，也便于设计团队制定设计规范，从而减少设计风格不一致带来的沟通成本。（1）App设计风格从视觉效果上至少给用户传达了两个信息：App的整体基调与App的目标人群（2）现行主流的设计风格是扁平化设计，它的优点是：界面美观、简约大方、条理清晰；设计元素上强调抽象、极简、符号化，去除冗余的装饰效果，突显App的文字图片等信息内容；完美兼容PC网站、安卓、iOS等不同系统的平台和不同屏幕分辨率的设备，适应性强。（3）在设计风格表现上，颜色占据了大部分的视觉体验，要做好设计风格，首先要做好界面的颜色搭配和分布。设计风格的配色除了要注意男女性的喜好差别之外，还应该重视通过冷暖色彩加明暗亮度搭配传递给用户的印象和心理感受。移动端平台的界面设计规范（1）Android平台Android的设计规范不同于iOS，Android是一个开源的系统，国内外有很多的手机厂商，这就导致了有非常多的Android机型，比如国内的华为、小米、OPPO、vivo、魅族等。1.基础概念DPI屏幕密度（DotsPerInch）：每英寸点数，表示屏幕密度，它是测量空间点密度的单位，最初应用于打印技术中，表示每英寸能打印上的墨滴数量。后来DPI的概念也被应用到了计算机屏幕上，计算机屏幕一般采用PPI（PixelsPerInch）来表示一英寸屏幕上显示的像素点的数量。屏幕密度计算公式为：那么，屏幕分辨率为1080*1920设备的屏幕密度：我们根据目前市场占比大的主流设备尺寸来看，建议使用1080x1920px来做安卓设计稿尺寸：（2）iOS平台iOS平台在界面设计中制定了常用的一些尺寸规范和方法，如界面布局尺寸、间距、文字、图标、适配等，设计师在设计时要严格遵守，并融会贯通。在视网膜屏出现之前，苹果规定1px=1pt，也就是说pt和像素点是一一对应的。但随着iPhone4型号出现以后，高分屏出现了，也就是视网膜屏，这个时候1pt对应2px。所以用固定长度pt作为开发单位，优势是可以统一图形在同一种类不同型号设备上图形的大小，而如果用像素作为单位的话，就会出现混乱，因为在不同像素密度的屏幕里面，像素本身大小是不一样的。App交互UI设计流程分析版式设计版式设计也叫版面编辑，也就是在有限的版面空间里，将版面的构成要素，如文字、图片、控件等元素根据特定的内容进行组合排列，设计时要考虑内容布局、比例、分组、对齐等形式。项目实施——移动端“美食小吃”App交互UI设计设计“美食小吃”App界面UI在“美食小吃”App进行设计之前，我们需要思考，界面如何设计才能留住用户，首先方便快捷的操作界面是重要基础，能够让用户快速了解到自己需要的信息十分重要，其次精致美观的界面设计必不可少，要最大程度的呈现食物的美味，这就需要我们在分析的角度上遵循一切从用户角度出发。确定了设计风格及设计规范后，设计师根据风格进行细化的设计，根据外卖App的特点，我们设定美食小吃AppUI设计由引导页、登录页、首页、会员、订单、我的页面等内容构成。引导页：进行设计时主要突出美食主题，页数为1-2页即可。登录页：摒弃了邮箱注册，设计采用主流的手机号登录及第三方账号登录，这样可以简化登录流程。首页：设计了几个标准信息区域，包括公共导航区（状态栏、导航栏）、标签栏、内容区域、主页指示器，同时根据平台设计规范设计了各栏目的高度。会员页：主要展示优惠、跨店红包领取、开通会员等信息。订单页：展示配送、评价、取消订单等信息，如图3-70所示。我的页面：展示个人信息设置、常用功能分类、购物车、评价等信息，如图3-71所示。界面适配在浏览App的时候，我们会遇到过在部分机型中图片变形、页面不协调、文案被裁剪的问题。这就需要我们页面进行适配，适配是为了使页面在不同手机设备上,相对保持统一的展示效果。在页面适配前，我们先了解什么是@2x、@3x，如图3-76所示。实现美食App界面素材切片输出当界面设计定稿之后，设计师需要对图标进行切片提供给原型交互设计师，把设计稿中有用的部分剪切下来作为网页或移动端制作时的素材，这个过程就是切图。通常我们只需要对图标进行切图就可以，文字、线条和一些标准的几何形状是不需要切图的，例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可，开发工程师可以用代码实现这种效果，如图3-79和图3-80示。使用Pxcook标注美食App界面“创建”项目，命名为如图3-95所示，平台选择“iOS”，点击“创建项目”后，就可以将我们需要标注的psd设计稿导入到软件中，如图3-96所示。导入设计稿后，进入到操作界面，如图3-97所示，软件的标注分为“设计”和“开发”模式（5）美食App动态加载画面优化App交互设计中，很多设计师都会采用动态效果来吸引用户的注意，相对于静态的页面，动态效果更能生动的传达出想要传达的思想，同时也更能感染用户的情绪，吸引眼球。但是动态效果相对于静态来说，在设计中也需要注意很多问题，因为一不小心如果动态设计过度，不仅会影响页面加载的进程，更会影响用户的体验。那么一般App动态元素设计可以从以下几种方式进行优化：①减小图像大小打开PS软件，选择菜单栏的“图像>图像大小”，快捷键是Ctrl+Alt+I，即可打开如下图所示的修改面板，输入我们需要的大小尺寸数即可。②减少帧数删掉重复帧只留关键帧，通过增加关键帧的延迟时间，保持动画的节奏，因为每一帧都占用着gif动图的大小，所以帧越少自然体积就越小。③颜色数打开“文件”>“导出”>“存储为Web所用格式…”面板，如图3-113所示，点击下拉菜单，有多个位数选择，对于颜色不是太鲜艳的gif动图来说，可以先尝试选择64种颜色来查看效果，这将有效减小大小；除了预设的几个数值外，还可以手动直接输入自己想要的颜色数，如图3-114所示。④色彩损耗值通过调整的色彩损耗量来缩小GIF文件的大小，如图3-115所示，调整损耗值后，该GIF文件大小的前后对比。⑤保存预设和优化文件大小点击“存储为Web