作者：夏琰
出版社：人民邮电出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
移动UI交互设计(微课版)试读：
前言
PREFACEUI设计也称为用户界面设计，所面向的领域主要包括平面媒体设计、Web界面设计、移动界面设计、交互设计和互联网产品设计等，从事UI设计的人员称为UI设计师。
由于UI设计进入我国的时间较晚，因此UI设计行业在我国的发展尚处于起步阶段。目前，开设UI设计相关教学内容的院校数量有限，市面上与UI设计相关的教材也为数不多，整体上缺乏良好的学习资源，缺少交流的环境，导致真正高水平的、能充分满足市场需要的UI设计师成为紧缺人才。
本书主要面向移动界面设计领域进行编写。编者根据多年的教学和研究经验，结合UI设计学习的特点，将移动UI设计教学内容细化为4章，从UI设计概述、主题图标设计、界面设计、交互设计几方面循序渐进、详细介绍移动UI设计的相关知识。其中，第2~4章是本书的重点部分。
本书理论知识的介绍由浅入深、通俗易懂，通过图文并茂的形式，帮助读者理解和吸收相关知识，并提供了相关的设计案例用于对知识的强化，读者可扫码进行查看。本书还注重理论与实践相结合，采用“教、学、做一体化”的理念，通过真实项目引领，详细分析、阐述主题图标设计、界面设计、交互设计的设计思路和制作过程。同时，为方便读者使用，书中全部案例均提供免费的教学视频，读者可扫码进行观看和学习。此外，第2~4章还安排了课后习题，对读者提出相应的自学要求并进行必要的指导，以帮助读者理解和运用所学知识。
本书参考学时为64～96学时，建议采用理论实践一体化的教学模式。
本书由夏琰任主编，余燕、周晓红任副主编。夏琰负责全书的总体策划和编写工作，余燕、周晓红负责案例整理、视频录制等工作。
移动UI设计发展速度很快，书中有些内容在数据或规范要求上可能出现更新不及时的现象，敬请读者谅解。实际上，无论移动UI设计如何发展，其简洁、易用、高效的宗旨是不会变的，读者可以通过对本书的学习，掌握UI设计的精髓，并在实践中加以应用。编者2019年1月01 UI设计概述
UI设计已经成为移动端产品设计的重要组成部分。通过本章的学习，可以从总体上了解以下内容。
1.UI设计的概念。
2.UI设计的流程。
3.UI设计的规范。
UI设计最早从2000年传入中国，国内最早成立UI设计部门的公司是金山公司。该公司出品的产品（如影霸、毒霸等）在软件行业中曾首屈一指，同时因为重视UI的开发，使得其开发的产品在同类软件产品中更加突出。可以看出，在激烈的市场竞争中，要想战胜对手，仅仅拥有强大的功能还是不够的，还应该积极开展用户研究与使用性测试，将易用性与美观性相结合。有时候，商家只要在产品美观和易用设计方面做很小的投入，就可能会得到很大的产出。1.1 UI设计的概念
有人认为“UI设计等于网页设计”，更有人认为“从事UI设计的人就是美工”，实际上，这些理解都是狭隘的、不正确的。
UI是“User Interface”的缩写，译为用户界面。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅要让软件变得有个性、有品位，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。
UI设计现已成为屏幕产品（包括能在计算机、手机、Pad等设备上运行的各种产品）的重要组成部分，如图1-1所示。UI设计是一个复杂的、有不同学科参与的工程，认知心理学、设计学、语言学等在其中都扮演着重要的角色。图1-1 UI设计
从事UI设计工作的人称为UI设计师，主要负责以下工作。（1）软件界面的美术设计、创意和制作工作。（2）根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计。（3）对页面进行优化，使用户操作更趋于人性化。（4）维护现有的应用产品。（5）收集和分析用户对于GUI（Graphical User Interface，图形用户界面）的需求。1.2 UI设计的流程
UI设计不光要研究产品的外形、图形界面，还要研究产品的交互设计，并且确立交互模型、交互规范，同时要测试交互设计的合理性及图形设计的美观性等。也就是说，UI设计包括了界面设计、交互设计与用户研究3个部分。因此，UI设计师的基本工作流程可以分为图1-2所示的几个阶段。图1-2 UI设计流程1.2.1 需求分析阶段
需求分析阶段主要是分析产品用户的需求及同类产品的优、缺点。
产品用户的需求包括产品的使用者、使用环境及使用方式的需求，如面对儿童开发的产品和面对家长开发的产品就是完全不同的两个概念，电脑上使用的软件和手机上使用的软件就不能使用同一款设计等。也有人将需求分析总结为3W，即Who、Where、Why，也就是什么人用、在什么地方用、为什么用，其中任何一个元素发生改变，结果都会有相应的改变。
所谓“知己知彼、百战百胜”，要设计一个产品的UI，了解同类产品的优势和不足是非常重要的。例如，我们要设计一款用于网上聊天的软件，就可以将QQ、微信、易信等同类产品进行调研，总结出各款产品的特点，找到自己设计的切入点。当然，适合于最终用户的设计才是最好的设计。1.2.2 设计制作阶段
在需求分析的基础上，我们进入设计制作阶段。设计包括界面设计和交互设计，且要形成设计方案。界面设计当然以美观为主，要有创新，在同类产品中能够脱颖而出。界面设计包括启动界面、主界面、详情界面等代表性界面的设计。交互设计要分析产品必需的功能、内容，根据需要制作低保真模型或高保真模型，也可通过原型工具来规划流程。如果有条件的话，可以在设计时，多设计出几套不同风格的方案用于备选，如图1-3所示。图1-3 不同风格的方案1.2.3 方案修改阶段
设计方案提交给客户后，需要与客户进行沟通，根据客户的需求来修改设计。我们在尽量满足客户要求的基础上，也要考虑其要求的功能或技术是否可行。例如，有些客户的修改意见，在方案规定时间内是难以完成的。可能完成时间需要3个月，但是最后客户却要求在2个月内交稿，这时这些功能就可以待产品下次改版或升级时再实现。1.2.4 测试改进阶段
在设计方案通过并交付以后，就可以将产品推向市场了。但是设计并没有结束，我们还需要跟踪了解用户的测试与反馈。好的设计师应该在产品上市以后主动接近市场，在第一线零距离接触最终用户，了解用户实际使用时的感想，为以后升级版本积累经验。1.3 UI设计的规范
在进行产品的UI设计时，要遵循统一的规范，不管是按钮、控件、颜色，还是布局风格等，都要遵循统一的标准，让用户使用起来有统一感，不觉得混乱；同时，还要建立起精确的心理模型，使用户对一个界面使用熟练后，切换到另外一个界面也能轻松地推测出各种功能，不需要浪费时间和精力去分析和理解新的界面。
一般在进行UI设计时，会由项目组有经验的人士或是项目经理确立UI规范，从而使所有参与人员了解规范，降低时间成本和培训成本，如图1-4所示。图1-4 设计规范
UI设计的规范总体来说，主要包括用户控制原则、一致性原则、简单美观原则、布局合理原则、响应时间合理原则等。1.3.1 用户控制原则
UI设计的一个重要原则是永远以用户体验为中心，让用户总是感觉在控制软件而不是感觉到被软件所控制。（1）操作上要让用户扮演主动角色，在需要自动执行任务时，要以允许用户进行选择或控制它的方式来实现该自动任务。（2）要提供用户自定义设置。每个用户的需求和喜好不一样，要使产品满足不同用户的个性需求，就要为用户提供类似于颜色、字体或其他选项的设置，如图1-5所示。（3）要让用户感觉自己是聪明的，对于软件的操作是顺利的、易于理解的。同时，出错界面要友好，让用户对产品有好感。图1-5 用户自定义设置1.3.2 一致性原则
一致性原则包括两个方面：一是尽可能允许用户将已有的知识运用到新产品中；二是在同一产品中的相同元素或术语要保持一致。
允许用户将已有的知识传递到新的任务中，可以方便用户更快地学习新事物，并将更多的注意力集中到任务上，从而使用户不必花时间来尝试记住交互中的不同，进而产生一种稳定、愉快的感觉。例如，要开发一款购物程序，假设在这之前，用户在其他购物网站或程序中已经有过购买经验，那么我们就可以使用相同或相似的名称来命名操作行为。例如在选择商品时，好多网站或程序都将购物车设计成储存商品的容器，那么我们在开发购物程序时，也可以使用购物车或购物篮等来使用户快速明白这个操作行为的含义，方便其使用。
在同一款产品中，要使用一致的外观、字体、手势、命令等来展示同样的功能或信息，具体如下。（1）外观。一致的外观使用户界面更易于理解和使用，界面上的控件看起来应该是一致的。（2）字体。保持字体及颜色一致，避免一套主题出现多个字体，我们可以用不同的字号来显示内容的层级关系。对于不可修改的字段，最好统一用灰色文字显示。（3）手势。在手机或Pad程序中，通常会用手势进行操作，如放大/缩小、快进/快退、音量等手势控制应保持一致，从而带给用户好的使用体验。（4）命令。要使用同样的命令来执行对于用户来说相似的功能。例如，在同一个产品中，如果要实现“编辑”功能，就在各处出现相似功能时都使用“编辑”字样，而不要出现“修改”“设置”“调整”等容易混淆的词汇。建议在项目开发阶段建立一个产品词典，它包括产品中常用术语及描述，设计或开发人员应严格按照产品词典中的术语词汇来展示文字信息。
图1-6所示的3个界面就很好地体现了一致性原则，其主要的颜色、分割的线条、使用的字体等视觉元素都是一致的。图1-6 一致性原则1.3.3 简单美观原则
任何产品或程序的UI设计都应该是简单、易于掌握和使用的。实际上，扩大功能和保持简单存在一定的矛盾性，一个有效的设计应该尽可能平衡这些矛盾。支持简单性的一种方法就是将信息减到最少，只要能够进行正确交互即可，不相关或冗长的元素会扰乱设计，使用户难以方便地提取重要信息。例如，在开发一个运行在手机上的播放器程序时，在启动界面可以提示用户“如果要调整音量，可以用手指向上滑动放大音量，向下滑动缩小音量”。这些提示信息很详细，但是启动界面的时候可能只有2~5秒，而相似的提示信息（如快进/快退等）可能还有几条，用户难以在短时间内阅读完毕，更不要提掌握它们的使用方法了。如果我们将这些信息简化，借助手势图和方向箭头来表示，加以简单的文字说明（如“音量控制”），就可很好地展示出使用信息，也可使用户在最短的时间内掌握使用该程序的方法，如图1-7所示。图1-7 简单、便捷的提示信息图1-8 简单、美观的界面设计
美观是UI设计的重要因素，不论是在何种设备上运行的程序，美观与否是用户对程序的第一印象。出现在界面上的每一个视觉元素都很重要，图形的创意、颜色的运用、可视化设计的技巧都是构成美观的界面必不可少的要素，它们互相搭配，共同提升用户的视觉体验，提高用户的使用满意度，如图1-8所示。1.3.4 布局合理原则
在进行UI设计时需要充分考虑布局的合理化问题，一般提倡多做“减法”运算，将不常用的功能区块隐藏，有利于提高软件的易用性及可用性。布局的合理化包括很多方面，具体如下。（1）要遵循用户从上而下、自左向右的浏览、操作习惯。（2）要注意将用户常用的功能按钮排列紧密，不要过于分散，以避免造成用户手指移动距离过长的弊端。（3）确认按钮一般会放置在页面左边，取消或关闭按钮一般放置于页面右边。（4）所有文字内容和控件元素避免贴近页面边缘。（5）页面布局设计时应避免出现横向滚动条。
总体来说，布局设计是为了提升用户的使用体验，最适合用户使用的布局设计才是最合理的。图1-9所示的布局设计就很合理，信息浏览区域明显，操作简单，按钮位置符合使用习惯。图1-9 布局合理化
手机和Pad设备对布局都有一些特殊的规范，我们会在第3章界面设计中详细介绍。1.3.5 响应时间合理原则
系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧；而响应时间过短也会影响到用户的操作节奏，并可能导致错误。因此，在系统响应时间上应该坚持以下原则。（1）用户操作后，要在2~5秒内显示处理信息提示，避免用户误认为没响应而重复操作。（2）如果在加载信息或启动程序时超过5秒，应该添加进度条或进度提示，避免用户产生焦躁心理。1.4 本章小结
本章概括性地介绍了UI设计的概念、UI设计的流程，以及UI设计的规范，使读者对UI设计有了初步的认识，对其设计的方法和规范有了大体的了解，可以为后续的学习奠定基础。02 主题图标设计
主题图标是指手机系统的功能图标，是手机最具个性的一个方面。通过本章的学习，可以掌握以下内容。
1.图标设计的分类。
2.图标设计的原则。
3.图标设计的流程。
4.图标设计的规范。2.1 图标设计概述扩展图库图标的应用
我们在使用手机、Pad、智能手表等液晶显示设备的时候，会发现其上有大量的图标，如图2-1所示。这些图标比文字描述更直观、美观，并能提升软件、功能的可用性，极大地提升了视觉效果。图2-1 图标提升可用性和视觉效果
苹果用户体验设计师Mike Stern对于UI和应用图标的重要性这样解释：“用户并不会根据你使用了多少技术，或是整合了多少API （Application Program Interface，应用程序接口），或是你使用的代码有多厉害而去对应用做出评价。他们在意的是你的应用能用来做什么，会给他们带来什么感受。用户期待你的应用能为他们带来直观、美妙甚至不可思议的体验。”可见，除了软件实现的功能，用户对图标、界面等视觉元素及交互功能的设计也十分关注。因此，图标设计在整体软件设计中是十分重要的。
那么，什么是图标呢？有很多人认为图标就是图像，其实，这个说法有些狭隘。图标既可以包含图像，也可以是一个文本、一个LOGO，又或是这些元素的组合。所以，准确地描述图标，它应该是一组具有高度浓缩性、能快捷传达信息、便于记忆的图形。
在设计图标的时候，要注意它的美观性和实用性，二者互相兼顾，才能得到最好的设计效果。一些初学设计的人，往往过于关注图标是否精美，将精力过多地放在图标的修饰上，而忽略了图标的实用性。这样设计出来的图标在比赛中也许可以得到奖项，但是在实际应用中却不可行。例如，我们要设计一款关于技能明星的图标，图2-2所示的两个图标都是设计方案，就辨识度来说，图（a）显然比图（b）表示的含义更正确。图2-2 图标的辩识度
所以，只有对图标的使用环境、所要实现的功能有清晰的把握，才能设计出辨识度高、易于用户理解的图标。2.1.1 图标设计分类
按照功能分类，图标可以分为启动图标、应用图标和功能图标，如图2-3所示。
按照设计风格分类，图标可以分为剪影图标、扁平图标和拟物图标，如图2-4所示。图2-3 按功能分类图2-4 按设计风格分类2.1.2 图标设计原则
1.可识别性原则扩展图库图标的可识别性
可识别性原则应该是图标设计中首先应该遵循的原则。就是说，设计的图标要能准确地表达相应的操作，让初次使用该产品的用户能够一看就懂，尽量避免误导性、歧义性。图2-5所示的一组图标，其可识别性原则就体现得特别好，形状简单、效果简洁，甚至不需要汉字释义，就能够清楚地知道该图标所代表的操作。
由Adobe公司开发的Photoshop软件，是业界公认最好的图形图像处理软件之一。如果从图标设计的角度来看这款软件，其图标简洁实用、可识别性高的优点也极为突出，每个工具、命令的图标都清晰地表达了其所代表的操作，值得初学者研究、借鉴，如图2-6所示。图2-5 图标的可识别性图2-6 Photoshop的操作图标
2.差异性原则
一组图标会出现在同一个手机的主题中、同一个应用程序中，这种同一性要求这组图标有共性。例如，图2-7所示的图标，它们的外形一致，颜色的亮度、饱和度一致，所以它们被认为具有共性。图2-7 手机主题图标扩展图库图标的差异性
但是，强调共性的同时，不能忽略图标之间的差异性。因为每个图标代表的含义和操作是不相同的，如果过于强调共性，就会让差异性弱化，从而分不清每个图标的区别。如图2-8所示，前面两个图标的相似度过高，差别的区域过小，一旦图标缩小，就会很难辨认，后面两个图标也存在同样的问题。图2-8 图标设计
因此，在设计图标时，要有合理的规划，既强调共性，又突出个性，这样才能使其成为一套优秀的设计作品。
3.合适的精细度
设计图标时，过于简单或过于复杂，都不是很合适。图2-9所示的一组关于“设置”的图标中，A图标过于简单，几乎看不到图形的变化；B、C、D图标虽然有颜色、细节表现等方面的区别，但是都属于能够接受的精细程度，可以表示该图标所代表的操作；E图标在细节表现上非常细致、逼真，但是应用到图标设计当中，却显得过于累赘，尤其是当图标尺寸变小的时候，更容易看不清其细节。所以，5个方案中，B、C、D方案是可取的。图2-9 图标的精细度
从上面的分析可以看出，图标的可用性随着精细度的变化过程，是一个类似于波峰的曲线，如图2-10所示，该坐标的横轴表示图标的精细度，纵轴表示图标的可用性。从图中可以看出，当图标的精细度为零时，图标几乎没有可用性，随着精细度的逐渐增大，图标的可用性也会逐渐增强；而精细度过大时，反倒会影响图标的可用性。图2-10 波峰曲线
4.风格统一
所谓图标的风格，表现为对图标题材选择的一贯性和独特性、对图标主题思想的挖掘，也表现为对创作手法的运用、塑造形象的方式、对艺术语言的驾驭等方面的独创性。对于一套图标来说，如果图标的视觉设计协调统一、选用元素的出处统一，我们就说这套图标具有自己的风格。图2-11所示的两套图标，上面的图标取材于糕点，下面的图标取材于中国古典元素，我们就说它们都有自己统一的风格。图2-11 图标的风格统一扩展图库图标的风格
图标的风格有很多种，在设计图标之前，首先要考虑风格的定位，如要设计的图标是简约的，还是精致的；是平面的，还是立体的；是古典的，还是现代的；是写实的，还是卡通的；是单色的，还是多彩的；是抽象的，还是具体的……只有先将风格定位做好，才能着手进行图标的设计与制作。2.2 图标设计流程
设计一套图标，一般会遵循“确定图标风格—图标草图绘制—图标电脑制作—主题界面制作”这一流程来进行。2.2.1 确定图标风格
图标设计看上去很简单，实际上要设计出高质量、有特色的图标并不容易。前面我们提到过设计图标要统一风格的问题。图标设计的风格没有固定的形式，也没有所谓的对错，甚至流行的设计趋势会反复，有时流行复古风格，过一段时间又流行现代风格。现在我们使用的手机、Pad中，图标的扁平化设计成为流行趋势，强调图标的简洁性、寓意性，去除冗余、厚重和繁杂的装饰效果，让图标所表述的功能本身作为核心被凸显出来，图2-12所示的一套小米手机图标就是典型的扁平化设计风格。图2-12 扁平化设计风格
在开始设计图标之前，考虑好图标的风格非常重要，这样能够保证在设计每个图标时都能遵循这个风格。2016年，MBE风格图标风靡一时，红遍追波、站酷等设计平台，如图2-13所示。MBE风格是从线框型Q版卡通画演变而来的，相比没有描边效果的扁平化风格插画而言，去除了里面不必要的色块区分，更简洁、通用、易识别。粗线条的描边起到了对界面的绝对隔绝作用，突显内容、表现清晰、化繁为简。
MBE风格图标的统一性表现在设计手法上，因为对于很多初学者来说，对风格统一的把握并不是很容易，所以可以尝试在图标的外形上寻求统一。图2-14所示的两套图标，每套图标的外形都是一致的，在统一的外形中再添加元素对图标进行区分。在设计这种类型的图标时，要注意图标的差异性原则，要能够很容易地辨识出每个图标所代表的含义。
图标设计风格统一的另一种常用表现手法就是统一图标设计元素的出处，它们可以选自于同一个时代、同一部电影、同一个环境……将这些图标设计成拟物化的图形，也能够带来很好的设计效果。图2-15所示的一套图标，灵感来源于西方中古时代，是以当时的物品为原型提取其特征并适当加入新的设计元素设计出来的，其设计过程如图2-16所示。图2-13 MBE风格图标图2-14 外形统一的图标设计
试读结束[说明：试读内容隐藏了图片]