描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787519239886丛书名: UI设计师养成记智能设备UI设计指南
产品特色
编辑推荐
《中公版·UI设计师养成记智能设备UI设计指南》主要以智能手机UI设计的讲解为主，由表及里，层层深入，内容涵盖了UI设计基础知识、主要手机系统的UI设计规范、UI设计的流程及元素等方面，全面系统地讲解了智能设备的UI设计理论知识，帮助有一定设计基础的从业人员了解并掌握UI设计流程和规范。
本书条理清晰，内容全面新颖，语言通俗易懂，案例实用详细，讲解深入浅出，便于掌握。图书采用彩色印刷，图文结合，风格活泼，能激发阅读兴趣。
内容简介
《中公版·UI设计师养成记智能设备UI设计指南》以UI设计发展趋势为依据，讲解软件界面的设计。全书分13章，主要内容包括智能设备UI概述、智能手机UI设计基础知识、iOS系统界面设计、Android系统界面设计、Windows Phone系统界面设计、常见的APP界面设计、APP界面设计原则、其他智能设备的UI设计、APP应用的图标设计、交互设计、移动用户体验、设计适配、UI设计师的自我修养等。
目 录
1.1什么是智能设备/
1.2认识APPUI设计/
1.3APPUI与WebUI的区别/
1.4APP产品研发流程/
1.4.1前期探索/
1.4.2设计规范与项目管理/
1.4.3交互设计/
1.4.4用户体验/
1.4.5视觉设计/
1.4.6开发实现/
1.4.7产品测试/
1.4.8运营推广/
1.5APPUI设计师的就业前景/
2.1常用设计单位/
2.2色彩基础知识/
2.2.1色彩的应用/
2.2.2色彩的分类/
2.2.3色彩搭配方法/
2.3APPUI设计的要点/
3.1iOS系统的发展历史/
3.2了解全新的iOS11系统/
3.2.1iOS11系统的功能特点/
3.2.2iOS11与iOS10系统的差别/
3.3iPhone界面尺寸/
3.3.1不同设备的界面尺寸/
3.3.2单位换算/
3.4UI设计元素及规范/
3.4.1栏（组件）/
3.4.2视图/
3.4.3常用控件/
3.5iOS11系统的优缺点分析/
3.5.1“十字交互”模式/
3.5.2更大的标题/
3.5.3弱化UI，内容至上/
4.1Android系统的发展历史/
4.2了解全新的AndroidO系统/
4.2.1AndroidO系统的设计风格/
4.2.2AndroidO系统的功能升级/
4.3Android系统界面尺寸/
4.4UI设计元素及规范/
4.4.1栏/
4.4.2控件/
4.5Android系统的优缺点分析/
4.5.1系统优点分析/
4.5.2系统缺点分析/
5.1WindowsPhone系统的发展历史/
5.2WindowsPhone系统的特色/
5.2.1设计风格特色/
5.2.2用户体验特色/
5.3WindowsPhone设备及界面尺寸/
5.4UI设计元素及规范/
5.4.1栏/
5.4.2控件/
5.5WindowsPhone的优缺点分析/
5.5.1系统优点分析/
5.5.2系统缺点分析/
6.1APP分类及风格介绍/
6.1.1教育类/
6.1.2购物类/
6.1.3社交类/
6.1.4游戏类/
6.1.5娱乐类/
6.2常用页面/
6.2.1启动页/
6.2.2引导页/
6.2.3首页/
6.2.4列表页/
6.2.5内容页/
6.2.6搜索页/
6.2.7登录和注册页/
6.2.8设置页/
6.2.9空状态页/
6.3页面的构图方式/
6.3.1常见构图方式/
6.3.2导航页面的构图方式/
7.1美观性/
7.2一致性/
7.3流畅性/
7.4情感化/
7.5动态化/
7.6反馈性/
7.7隐喻性/
7.8用户控制/
8.1可穿戴智能设备/
8.1.1智能眼镜/
8.1.2虚拟现实头戴式显示设备/
8.1.3智能手表/
8.2家用智能设备/
8.2.1智能电视/
8.2.2可视电话/
8.2.3智能空调/
8.3智能自助设备/
8.3.1智能自助点餐设备/
8.3.2智能自助取款设备/
9.1了解图标/
9.1.1图标类型/
9.1.2图标的作用/
9.1.3图标常用格式/
9.2扁平化图标/
9.2.1扁平化图标的设计风格/
9.2.2基本图形的加减法/
9.3拟物化图标/
9.3.1拟物化图标的特点/
9.3.2拟物化图标的设计风格/
9.4卡通手绘风格图标/
9.4.1MBE风格图标/
9.4.2涂鸦风格图标/
9.5启动图标的尺寸规范/
9.5.1iOS系统启动图标常用尺寸/
9.5.2Android系统启动图标常用尺寸/
9.5.3启动图标提交尺寸/
9.6APP图标设计原则/
9.6.1辨识性/
9.6.2实用性/
9.6.3差异性/
9.6.4创意性/
9.6.5一致性/
9.6.6兼容性/
9.7启动图标的设计流程/
9.8启动图标设计案例/
10.1交互设计的概念/
10.2交互设计的要素/
10.3交互设计的基本流程/
10.3.1定性用户分析/
10.3.2确定用户角色/
10.3.3创建故事脚本/
10.3.4绘制线框图/
10.3.5制作原型图/
10.3.6产品测评/
10.4原型软件的使用/
10.4.1AxureRP软件/
10.4.2Mockplus软件/
10.5移动交互动效设计/
10.5.1交互动效的设计原则/
10.5.2常用的交互动效动作/
10.5.3AfterEffects的动效制作/
10.6微交互/
10.6.1微交互的要素/
10.6.2常见的微交互设计形式/
11.1什么是用户体验/
11.2用户体验五要素/
11.2.1战略层/
11.2.2范围层/
11.2.3结构层/
11.2.4框架层/
11.2.5表现层/
11.3感官体验/
11.3.1视觉体验/
11.3.2触觉体验/
11.3.3听觉体验/
11.4等待体验/
11.4.1使用启动页/
11.4.2充实等待时间/
11.4.3营造舒适的等待体验/
11.5情感体验/
11.5.1情感设计的核心价值/
11.5.2情感设计的表现形式/
11.5.3情感设计应恰到好处/
11.6用户体验的特性/
11.6.1易用性/
11.6.2反馈性/
11.6.3定制化/
11.6.4简约性/
11.6.5社交性/
11.6.6离线性/
11.6.7趣味性/
11.6.8独特性/
12.1系统适配/
12.1.1设计基准/
12.1.2设计适配步骤/
12.1.3屏幕适配/
12.1.4适配规则与方式/
12.1.5前端开发完成适配方案/
12.2标注设计图/
12.2.1标注基准/
12.2.2标注注意事项/
12.2.3标注工具的使用/
12.3切图/
12.3.1页面内容切图/
12.3.2切图工具的使用/
12.3.3命名规则/
13.1UI设计师应具备的基本素养/
13.2UI设计师应具备的职业技能/
13.2.1设计能力/
13.2.2创新能力/
13.2.3逻辑思维能力/
13.2.4软件操作技能/
13.2.5开发知识/
13.2.6演示技巧/
13.3UI设计师的机遇与挑战/
1.2认识APPUI设计/
1.3APPUI与WebUI的区别/
1.4APP产品研发流程/
1.4.1前期探索/
1.4.2设计规范与项目管理/
1.4.3交互设计/
1.4.4用户体验/
1.4.5视觉设计/
1.4.6开发实现/
1.4.7产品测试/
1.4.8运营推广/
1.5APPUI设计师的就业前景/
2.1常用设计单位/
2.2色彩基础知识/
2.2.1色彩的应用/
2.2.2色彩的分类/
2.2.3色彩搭配方法/
2.3APPUI设计的要点/
3.1iOS系统的发展历史/
3.2了解全新的iOS11系统/
3.2.1iOS11系统的功能特点/
3.2.2iOS11与iOS10系统的差别/
3.3iPhone界面尺寸/
3.3.1不同设备的界面尺寸/
3.3.2单位换算/
3.4UI设计元素及规范/
3.4.1栏（组件）/
3.4.2视图/
3.4.3常用控件/
3.5iOS11系统的优缺点分析/
3.5.1“十字交互”模式/
3.5.2更大的标题/
3.5.3弱化UI，内容至上/
4.1Android系统的发展历史/
4.2了解全新的AndroidO系统/
4.2.1AndroidO系统的设计风格/
4.2.2AndroidO系统的功能升级/
4.3Android系统界面尺寸/
4.4UI设计元素及规范/
4.4.1栏/
4.4.2控件/
4.5Android系统的优缺点分析/
4.5.1系统优点分析/
4.5.2系统缺点分析/
5.1WindowsPhone系统的发展历史/
5.2WindowsPhone系统的特色/
5.2.1设计风格特色/
5.2.2用户体验特色/
5.3WindowsPhone设备及界面尺寸/
5.4UI设计元素及规范/
5.4.1栏/
5.4.2控件/
5.5WindowsPhone的优缺点分析/
5.5.1系统优点分析/
5.5.2系统缺点分析/
6.1APP分类及风格介绍/
6.1.1教育类/
6.1.2购物类/
6.1.3社交类/
6.1.4游戏类/
6.1.5娱乐类/
6.2常用页面/
6.2.1启动页/
6.2.2引导页/
6.2.3首页/
6.2.4列表页/
6.2.5内容页/
6.2.6搜索页/
6.2.7登录和注册页/
6.2.8设置页/
6.2.9空状态页/
6.3页面的构图方式/
6.3.1常见构图方式/
6.3.2导航页面的构图方式/
7.1美观性/
7.2一致性/
7.3流畅性/
7.4情感化/
7.5动态化/
7.6反馈性/
7.7隐喻性/
7.8用户控制/
8.1可穿戴智能设备/
8.1.1智能眼镜/
8.1.2虚拟现实头戴式显示设备/
8.1.3智能手表/
8.2家用智能设备/
8.2.1智能电视/
8.2.2可视电话/
8.2.3智能空调/
8.3智能自助设备/
8.3.1智能自助点餐设备/
8.3.2智能自助取款设备/
9.1了解图标/
9.1.1图标类型/
9.1.2图标的作用/
9.1.3图标常用格式/
9.2扁平化图标/
9.2.1扁平化图标的设计风格/
9.2.2基本图形的加减法/
9.3拟物化图标/
9.3.1拟物化图标的特点/
9.3.2拟物化图标的设计风格/
9.4卡通手绘风格图标/
9.4.1MBE风格图标/
9.4.2涂鸦风格图标/
9.5启动图标的尺寸规范/
9.5.1iOS系统启动图标常用尺寸/
9.5.2Android系统启动图标常用尺寸/
9.5.3启动图标提交尺寸/
9.6APP图标设计原则/
9.6.1辨识性/
9.6.2实用性/
9.6.3差异性/
9.6.4创意性/
9.6.5一致性/
9.6.6兼容性/
9.7启动图标的设计流程/
9.8启动图标设计案例/
10.1交互设计的概念/
10.2交互设计的要素/
10.3交互设计的基本流程/
10.3.1定性用户分析/
10.3.2确定用户角色/
10.3.3创建故事脚本/
10.3.4绘制线框图/
10.3.5制作原型图/
10.3.6产品测评/
10.4原型软件的使用/
10.4.1AxureRP软件/
10.4.2Mockplus软件/
10.5移动交互动效设计/
10.5.1交互动效的设计原则/
10.5.2常用的交互动效动作/
10.5.3AfterEffects的动效制作/
10.6微交互/
10.6.1微交互的要素/
10.6.2常见的微交互设计形式/
11.1什么是用户体验/
11.2用户体验五要素/
11.2.1战略层/
11.2.2范围层/
11.2.3结构层/
11.2.4框架层/
11.2.5表现层/
11.3感官体验/
11.3.1视觉体验/
11.3.2触觉体验/
11.3.3听觉体验/
11.4等待体验/
11.4.1使用启动页/
11.4.2充实等待时间/
11.4.3营造舒适的等待体验/
11.5情感体验/
11.5.1情感设计的核心价值/
11.5.2情感设计的表现形式/
11.5.3情感设计应恰到好处/
11.6用户体验的特性/
11.6.1易用性/
11.6.2反馈性/
11.6.3定制化/
11.6.4简约性/
11.6.5社交性/
11.6.6离线性/
11.6.7趣味性/
11.6.8独特性/
12.1系统适配/
12.1.1设计基准/
12.1.2设计适配步骤/
12.1.3屏幕适配/
12.1.4适配规则与方式/
12.1.5前端开发完成适配方案/
12.2标注设计图/
12.2.1标注基准/
12.2.2标注注意事项/
12.2.3标注工具的使用/
12.3切图/
12.3.1页面内容切图/
12.3.2切图工具的使用/
12.3.3命名规则/
13.1UI设计师应具备的基本素养/
13.2UI设计师应具备的职业技能/
13.2.1设计能力/
13.2.2创新能力/
13.2.3逻辑思维能力/
13.2.4软件操作技能/
13.2.5开发知识/
13.2.6演示技巧/
13.3UI设计师的机遇与挑战/
在线试读
第1章
智能设备UI设计概述
1.1什么是智能设备
智能设备（IntelligentDevice）是对具有数据计算处理能力的机械、设备、仪器的统称。拥有完善功能的智能设备应具备灵敏准确的感知功能、正确严谨的运行逻辑以及高效的执行力。随着计算机技术的飞速发展，智能设备的种类也在不断增多，深入到人们生活的方方面面。常见的智能设备有智能手机、智能手表、智能冰箱、智能电视、智能游戏机等，如图1-1所示，连体重秤、牙刷等传统生活用品也都出现了智能化产品，智能设备为我们的生活带来了极大的便利。
图1-1常见的智能设备
1.2认识APPUI设计
在众多智能设备中，智能手机是应用量、功能领域涉及广的智能设备。相关研究机构的调查数据显示，中国智能手机的普及率达到58%，高于全球智能手机43%的普及率。智能手机的高度普及带动了智能手机APP的快速发展。APP（Application）是智能手机的第三方应用程序，直观地说就是应用软件，目前主要指的是iOS、Android等系统中的应用程序。图1-2展示的是应用市场中的图标，每一个图标代表着一个APP应用程序。
图1-2应用市场上的图标展示
在竞争日趋激烈的APP领域，设计突出的APP往往能获得更多用户的青睐，因此，UI设计已经成为评判APP应用的一个关键标准。UI（UserInterface）是用户界面，泛指用户的操作界面，包含移动APP、网页、智能穿戴设备等领域。UI设计主要针对界面的样式、美观程度进行设计。
APPUI设计是针对移动应用程序的界面设计，着重对应用程序人机交互、操作逻辑、界面美观等进行整体设计。好的APPUI设计不仅可以提升APP的界面品味，还可以使操作变得舒适、简单、自由，凸显应用的定位和特性。
1.3APPUI与WebUI的区别
APPUI的设计范围基本锁定在手机和平板电脑的客户端上，而WebUI是指网络产品界面设计（WebsiteUserInterface），简称为WUI。设计范围包括常见的网站（如电商网站、社交网站）设计、网络软件（如邮箱）设计等。WebUI设计多使用台式机、笔记本电脑等设备。因存在载体、操作方式等多种不同因素，APPUI设计与WebUI设计也有很大的区别。
（1）精确度不同
网页的操作媒介是鼠标，鼠标精确度相对较高，点击的错误率较低。APP的操作媒介是手指，手指的精确度没有鼠标高，同时要考虑用户手指粗细的差异，因此，APPUI中的按钮需要一个较大的有效点击区域，以提高点击的准确率。
（2）按钮状态不同
如图1-3所示，网页中的按钮通常有四种状态：默认状态、鼠标经过状态、鼠标单击状态、不可用状态。手机APP界面中的按钮只有三种状态：默认状态、单击状态和不可用状态。
图1-3Web与APP的按钮状态对比
（3）按钮位置不同
图1-4展示的是PC端和移动端使用环境的对比。WebUI的使用环境相对稳定，人们多在办公室或咖啡厅等相对稳定的环境中使用电脑，所以，按钮的大小和位置对于点击的影响不大。而APPUI的设计，则需要考虑手机复杂多变的使用环境。例如，在乘坐交通工具或走路等动态环境中使用手机，用户多使用单手操作，因此，其按钮通常设计在屏幕下方或者左右手大拇指都能控制的范围内，按钮样式一般设置为拉长居中，便于用户点击。
图1-4PC端与移动端的使用环境对比
（4）操作方式不同
PC端可以通过鼠标的单击、双击、右键等方式对网页按钮、菜单进行操作。而在移动端中，一般通过单击、长按、滑动等操作进行控制，因此可以设计长按呼出菜单、滑动翻页或切换、双指的放大缩小以及双指的旋转等操作手势。
（5）首页内容不同
受显示屏幕尺寸的限制，网页一般的设计尺寸是1920px×1080px，APP目前的适配尺寸为750px×1334px。
如图1-5所示，由于网页和APP输出尺寸不同，WebUI与APPUI能够在同一页面中展示的内容也不同，即使是相同功能的页面，内容布局也相差甚远。
PC端需要把尽可能多的内容放到首页中，避免出现过多的层级；手机端APP应用页面所能呈现的信息量有限。由于屏幕的限制，不能将内容都放到首页中，因此需要更多的层级，以及一个非常清晰的逻辑结构和操作流程，使用户清楚地知道自己在整个应用中所处的位置，并能快速找到想去的页面或要进行的步骤操作。
1.4APP产品研发流程
要完成一个APP产品的研发，除了设计之外，还需要多个环节配合完成。完整的研发流程可总结为：前期探索→设计规范与项目管理→交互设计→用户体验→视觉设计→开发实现→产品测试→运营推广。
1.4.1前期探索
（1）竞品分析
●竞品分析要素
竞品是竞争产品的简称，竞品分析就是对市场中相关产品进行客观分析和主观分析。客观分析主要分析数据情况、界面构成、产品详细功能等；主观分析主要分析用户流程、优势与不足等。
对于APP的开发来说，竞品分析可以通过收集数据、分析数据信息、了解APP所处行业的基本情况、市场空缺情况以及竞争对手的资本背景等信息，从而准确地定位APP所处的市场空间和发展前景，如图1-6所示。
图1-6APP竞品分析要素
竞品分析可深入分析竞争对手的市场动向，主要对竞争对手产品的目标人群、运营策略、用户体验的效果、用户的反馈信息等进行分析。分析数据信息，找到突围点，快速提高市场的占有率，进而在市场中占据有利地位。
●竞品选择实例分析
在竞品数量选择方面，并不是越多越好，应根据产品的定位和用户群体，选择优质和适合的竞品。假设准备上线一款购物类的APP，需要分析的竞品类型如下：
类选择如、苏宁、淘宝、天猫等B2C网络购物平台。这些竞品与想要上线的购物类APP有着相似的功能和用户需求，具有极高的参考价值。
第二类选择如美团、糯米、大众点评、拼多多等承载了团购功能的APP，盈利的模式虽然不同，但是可以作为参考。
第三类选择如聚美优品、中粮我买网等商品类别较为单一的竞品，可以更加具体地分析某一类产品的用户群体和用户需求。
（2）用户研究
对于一个全新的APP来说，用户研究一般用来明确用户需求点，帮助设计师选定APP的设计方向；对于已发布的APP来说，用户研究一般用于发现APP的问题，帮助设计师优化APP的用户体验。用户研究使APP的功能更贴近于用户的真实需求，更关注用户的操作习惯，考虑用户使用APP的环境，尽可能地减少访问层级和操作步骤。
用户研究内容包括：用户的基本信息（包括姓名、年龄、家庭状况、收入、工作等）、典型场景、目标和动机、需求和痛点、对APP的态度（喜好）等。精准的目标人群分析，可以使设计师更清晰地把握到目标人群的特点。针对目标人群做出的设计才能更好地满足需求。
（3）功能分析
在做好竞品分析、用户研究的基础上，可以进入核心功能分析确认阶段。用户购买产品，实际上是购买产品的功能，功能是产品设计的基础。功能分析是把产品及其各个组成部分抽象成功能，并找出其中的内在联系。产品功能按性质分为使用功能、美观功能；按用户要求分为必要功能、不必要功能、过剩功能。功能分析的目的是加强必要功能，剔除多余功能，从用户的实际需求出发，提供价值更高的产品。
UI设计的分工其实不是分明的。有些公司的UI设计师不需要进行功能分析，只需要按照产品经理要求的功能进行还原，而有些公司则需要UI设计师参与到功能分析这个环节。
1.4.2设计规范与项目管理
（1）设计规范
在APP设计过程中，重复的工作与沟通会花费大量的时间，不同的设计师会有不同的设计语言与理念，因此确定一套设计规范成为开发设计阶段必不可少的工作。设计规范可以保证产品的一致性，提升同伴之间的沟通效率，同时还可以预防人员流动带来的不便，更利于呈现给用户风格统一、简捷易操作的产品。
设计规范的内容包含：标准色、标准字、图标、按钮、模块、布局、命名等。图1-7是以750px×1334px尺寸为例的中公教育APP的设计规范。
图1-7中公教育APP设计规范
（2）项目管理
在产品的研发过程中，项目管理通常是由设计师与产品经理共同承担的任务。项目管理主要对实现目标需要完成的相关任务进行整体监测、督促和管控协商，其包括策划、进度排期等工作。项目管理重要的是团队协作。有效的项目管理可以帮助团队营造良好的开发节奏，使产品有条不紊地进行迭代更新，不断为用户制造惊喜；混乱的项目管理则可能使产品在市场中丧失竞争力。
设计师在制定需求的环节加入是为理想的状态，有利于设计师理解需求的起源、节省后期重新沟通的成本，还能为产品引入更多设计层面的思考，将用户体验注入产品的基因中。
1.4.3交互设计
所有人都拥有交互的能力，我们每一天都在与人、产品、环境产生互动。任何一个交互行为，其实都是人在环境中为实现某一目的而产生的行为与反馈，交互渗透进我们日常生活中的各个方面，无处不在。不仅限于人机交互，交互设计是指两个及以上活动参与者之间的信息交流，人与人、人与环境、人与产品、人与机器之间的信息交流，都可以称之为交互。
图1-8展示了用户在取款过程中的交互经历，具体过程如下：
●王某初次到某个银行取款，依据路标指示牌的引导找到了银行。（人与环境交互）
●进入银行后，王某与工作人员沟通，被告知其办理的小额取款业务，可自行在ATM自动取款机上完成，无需到银行柜台办理。（人与人交互）
●根据ATM自动取款机的语音和文字提示引导操作，王某终完成了取款业务。（人与机器交互）
1.4.4用户体验
用户体验是为了解决产品使用过程中出现的实际问题。产品设计应以用户体验为基础，站在用户角度不断提升其在使用产品服务过程中的主观体验和感受。
宜家家居的一站式家居购物体验是广受好评的用户体验案例，如图1-9所示。该商场分为三层楼：层是杂货区、餐饮和提货区，第二层是样板间，第三层是家具展区和餐厅，基本满足了顾客的购物、休息和餐饮的一体化需求。
宜家家居每层楼按照用户需求设置商品分类。在一层的杂货区域，按照商品类别给出了指示牌标识，如厨具、布艺、灯具等；二层的样板间是按照房间类型分类，如卫生间、起居室、办公室等。宜家家居各楼层都设有引导图，《家居指南》
智能设备UI设计概述
1.1什么是智能设备
智能设备（IntelligentDevice）是对具有数据计算处理能力的机械、设备、仪器的统称。拥有完善功能的智能设备应具备灵敏准确的感知功能、正确严谨的运行逻辑以及高效的执行力。随着计算机技术的飞速发展，智能设备的种类也在不断增多，深入到人们生活的方方面面。常见的智能设备有智能手机、智能手表、智能冰箱、智能电视、智能游戏机等，如图1-1所示，连体重秤、牙刷等传统生活用品也都出现了智能化产品，智能设备为我们的生活带来了极大的便利。
图1-1常见的智能设备
1.2认识APPUI设计
在众多智能设备中，智能手机是应用量、功能领域涉及广的智能设备。相关研究机构的调查数据显示，中国智能手机的普及率达到58%，高于全球智能手机43%的普及率。智能手机的高度普及带动了智能手机APP的快速发展。APP（Application）是智能手机的第三方应用程序，直观地说就是应用软件，目前主要指的是iOS、Android等系统中的应用程序。图1-2展示的是应用市场中的图标，每一个图标代表着一个APP应用程序。
图1-2应用市场上的图标展示
在竞争日趋激烈的APP领域，设计突出的APP往往能获得更多用户的青睐，因此，UI设计已经成为评判APP应用的一个关键标准。UI（UserInterface）是用户界面，泛指用户的操作界面，包含移动APP、网页、智能穿戴设备等领域。UI设计主要针对界面的样式、美观程度进行设计。
APPUI设计是针对移动应用程序的界面设计，着重对应用程序人机交互、操作逻辑、界面美观等进行整体设计。好的APPUI设计不仅可以提升APP的界面品味，还可以使操作变得舒适、简单、自由，凸显应用的定位和特性。
1.3APPUI与WebUI的区别
APPUI的设计范围基本锁定在手机和平板电脑的客户端上，而WebUI是指网络产品界面设计（WebsiteUserInterface），简称为WUI。设计范围包括常见的网站（如电商网站、社交网站）设计、网络软件（如邮箱）设计等。WebUI设计多使用台式机、笔记本电脑等设备。因存在载体、操作方式等多种不同因素，APPUI设计与WebUI设计也有很大的区别。
（1）精确度不同
网页的操作媒介是鼠标，鼠标精确度相对较高，点击的错误率较低。APP的操作媒介是手指，手指的精确度没有鼠标高，同时要考虑用户手指粗细的差异，因此，APPUI中的按钮需要一个较大的有效点击区域，以提高点击的准确率。
（2）按钮状态不同
如图1-3所示，网页中的按钮通常有四种状态：默认状态、鼠标经过状态、鼠标单击状态、不可用状态。手机APP界面中的按钮只有三种状态：默认状态、单击状态和不可用状态。
图1-3Web与APP的按钮状态对比
（3）按钮位置不同
图1-4展示的是PC端和移动端使用环境的对比。WebUI的使用环境相对稳定，人们多在办公室或咖啡厅等相对稳定的环境中使用电脑，所以，按钮的大小和位置对于点击的影响不大。而APPUI的设计，则需要考虑手机复杂多变的使用环境。例如，在乘坐交通工具或走路等动态环境中使用手机，用户多使用单手操作，因此，其按钮通常设计在屏幕下方或者左右手大拇指都能控制的范围内，按钮样式一般设置为拉长居中，便于用户点击。
图1-4PC端与移动端的使用环境对比
（4）操作方式不同
PC端可以通过鼠标的单击、双击、右键等方式对网页按钮、菜单进行操作。而在移动端中，一般通过单击、长按、滑动等操作进行控制，因此可以设计长按呼出菜单、滑动翻页或切换、双指的放大缩小以及双指的旋转等操作手势。
（5）首页内容不同
受显示屏幕尺寸的限制，网页一般的设计尺寸是1920px×1080px，APP目前的适配尺寸为750px×1334px。
如图1-5所示，由于网页和APP输出尺寸不同，WebUI与APPUI能够在同一页面中展示的内容也不同，即使是相同功能的页面，内容布局也相差甚远。
PC端需要把尽可能多的内容放到首页中，避免出现过多的层级；手机端APP应用页面所能呈现的信息量有限。由于屏幕的限制，不能将内容都放到首页中，因此需要更多的层级，以及一个非常清晰的逻辑结构和操作流程，使用户清楚地知道自己在整个应用中所处的位置，并能快速找到想去的页面或要进行的步骤操作。
1.4APP产品研发流程
要完成一个APP产品的研发，除了设计之外，还需要多个环节配合完成。完整的研发流程可总结为：前期探索→设计规范与项目管理→交互设计→用户体验→视觉设计→开发实现→产品测试→运营推广。
1.4.1前期探索
（1）竞品分析
●竞品分析要素
竞品是竞争产品的简称，竞品分析就是对市场中相关产品进行客观分析和主观分析。客观分析主要分析数据情况、界面构成、产品详细功能等；主观分析主要分析用户流程、优势与不足等。
对于APP的开发来说，竞品分析可以通过收集数据、分析数据信息、了解APP所处行业的基本情况、市场空缺情况以及竞争对手的资本背景等信息，从而准确地定位APP所处的市场空间和发展前景，如图1-6所示。
图1-6APP竞品分析要素
竞品分析可深入分析竞争对手的市场动向，主要对竞争对手产品的目标人群、运营策略、用户体验的效果、用户的反馈信息等进行分析。分析数据信息，找到突围点，快速提高市场的占有率，进而在市场中占据有利地位。
●竞品选择实例分析
在竞品数量选择方面，并不是越多越好，应根据产品的定位和用户群体，选择优质和适合的竞品。假设准备上线一款购物类的APP，需要分析的竞品类型如下：
类选择如、苏宁、淘宝、天猫等B2C网络购物平台。这些竞品与想要上线的购物类APP有着相似的功能和用户需求，具有极高的参考价值。
第二类选择如美团、糯米、大众点评、拼多多等承载了团购功能的APP，盈利的模式虽然不同，但是可以作为参考。
第三类选择如聚美优品、中粮我买网等商品类别较为单一的竞品，可以更加具体地分析某一类产品的用户群体和用户需求。
（2）用户研究
对于一个全新的APP来说，用户研究一般用来明确用户需求点，帮助设计师选定APP的设计方向；对于已发布的APP来说，用户研究一般用于发现APP的问题，帮助设计师优化APP的用户体验。用户研究使APP的功能更贴近于用户的真实需求，更关注用户的操作习惯，考虑用户使用APP的环境，尽可能地减少访问层级和操作步骤。
用户研究内容包括：用户的基本信息（包括姓名、年龄、家庭状况、收入、工作等）、典型场景、目标和动机、需求和痛点、对APP的态度（喜好）等。精准的目标人群分析，可以使设计师更清晰地把握到目标人群的特点。针对目标人群做出的设计才能更好地满足需求。
（3）功能分析
在做好竞品分析、用户研究的基础上，可以进入核心功能分析确认阶段。用户购买产品，实际上是购买产品的功能，功能是产品设计的基础。功能分析是把产品及其各个组成部分抽象成功能，并找出其中的内在联系。产品功能按性质分为使用功能、美观功能；按用户要求分为必要功能、不必要功能、过剩功能。功能分析的目的是加强必要功能，剔除多余功能，从用户的实际需求出发，提供价值更高的产品。
UI设计的分工其实不是分明的。有些公司的UI设计师不需要进行功能分析，只需要按照产品经理要求的功能进行还原，而有些公司则需要UI设计师参与到功能分析这个环节。
1.4.2设计规范与项目管理
（1）设计规范
在APP设计过程中，重复的工作与沟通会花费大量的时间，不同的设计师会有不同的设计语言与理念，因此确定一套设计规范成为开发设计阶段必不可少的工作。设计规范可以保证产品的一致性，提升同伴之间的沟通效率，同时还可以预防人员流动带来的不便，更利于呈现给用户风格统一、简捷易操作的产品。
设计规范的内容包含：标准色、标准字、图标、按钮、模块、布局、命名等。图1-7是以750px×1334px尺寸为例的中公教育APP的设计规范。
图1-7中公教育APP设计规范
（2）项目管理
在产品的研发过程中，项目管理通常是由设计师与产品经理共同承担的任务。项目管理主要对实现目标需要完成的相关任务进行整体监测、督促和管控协商，其包括策划、进度排期等工作。项目管理重要的是团队协作。有效的项目管理可以帮助团队营造良好的开发节奏，使产品有条不紊地进行迭代更新，不断为用户制造惊喜；混乱的项目管理则可能使产品在市场中丧失竞争力。
设计师在制定需求的环节加入是为理想的状态，有利于设计师理解需求的起源、节省后期重新沟通的成本，还能为产品引入更多设计层面的思考，将用户体验注入产品的基因中。
1.4.3交互设计
所有人都拥有交互的能力，我们每一天都在与人、产品、环境产生互动。任何一个交互行为，其实都是人在环境中为实现某一目的而产生的行为与反馈，交互渗透进我们日常生活中的各个方面，无处不在。不仅限于人机交互，交互设计是指两个及以上活动参与者之间的信息交流，人与人、人与环境、人与产品、人与机器之间的信息交流，都可以称之为交互。
图1-8展示了用户在取款过程中的交互经历，具体过程如下：
●王某初次到某个银行取款，依据路标指示牌的引导找到了银行。（人与环境交互）
●进入银行后，王某与工作人员沟通，被告知其办理的小额取款业务，可自行在ATM自动取款机上完成，无需到银行柜台办理。（人与人交互）
●根据ATM自动取款机的语音和文字提示引导操作，王某终完成了取款业务。（人与机器交互）
1.4.4用户体验
用户体验是为了解决产品使用过程中出现的实际问题。产品设计应以用户体验为基础，站在用户角度不断提升其在使用产品服务过程中的主观体验和感受。
宜家家居的一站式家居购物体验是广受好评的用户体验案例，如图1-9所示。该商场分为三层楼：层是杂货区、餐饮和提货区，第二层是样板间，第三层是家具展区和餐厅，基本满足了顾客的购物、休息和餐饮的一体化需求。
宜家家居每层楼按照用户需求设置商品分类。在一层的杂货区域，按照商品类别给出了指示牌标识，如厨具、布艺、灯具等；二层的样板间是按照房间类型分类，如卫生间、起居室、办公室等。宜家家居各楼层都设有引导图，《家居指南》
评论
还没有评论。