UI设计全书(全彩)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

1.1 关于UI设计

UI(用户界面)是一个广义的概念,包含软硬件设计,囊括了UE(用户体验)、GUI(图形用户界面)以及ID(交互设计)。

1.1.1 UI设计概念

UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅让软件变得有个性、区别于其他产品,而且让用户使用起来便捷、高效。

在人机交互中,有一个层面叫界面。按照心理学的角度来讲,可以把它分为两个层次:感觉(视觉、触觉、听觉)和情感。人们在使用产品时,首先直观感受到的是屏幕上的界面,它传递给人们第一印象。一个友好的、美观的界面能给用户带来愉悦的感受,增强用户的黏性,增加产品的附加值。

很多人认为界面设计仅仅是视觉层面的东西,其实这是错误的理解。设计师需要定位用户群体、使用环境、使用方法,最后根据这些数据进行合理的设计,如图1-1所示。

图1-1

判断一款界面设计的好与坏,最有发言权的是用户,而且不是一个用户,是一个特定的群体。所以UI设计要时刻与用户研究紧密结合,时刻考虑用户的想法和习惯,这样才能设计出让用户满意的产品。如图1-2所示为出色的UI界面设计。

图1-2

1.1.2 设计类别

刚刚从事设计行业的设计师很容易混淆一些概念,下面带领大家正确理解UE、UX、ID、IxD、GUI、UED之间的区别。

◎ UE

User Experience(用户体验,简称“UX”或“UE”),关注的是用户的行为习惯和心理感受,就是揣摩怎样的操作过程可以令用户感到顺心如意。

用户体验是用户在使用产品的过程中建立起来的一种纯主观的心理感受。因为它是纯主观的,所以具有不确定性因素。同时,个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。

但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够通过设计良好的实验来认识到的。计算机技术和互联网的发展,使技术创新形态正在发生转变,以用户为中心、以人为本越来越得到重视,用户体验也因此被视为创新2.0模式的精髓,如图1-3所示。

图1-3

◎ GUI

图形用户界面(Graphical User Interface,简称“GUI”,又称“图形用户接口”)是指采用图形方式显示计算机等设备的操作用户界面。GUI就是界面设计,只负责应用的视觉界面,目前国内大部分的UI设计师做的其实就是GUI,如图1-4所示。

图1-4

纵观图形化用户界面设计行业的发展现状,许多国际知名公司意识到GUI可以在产品方面产生强大的增值功能,以及带动巨大的市场价值,所以在公司内部设立了相关的设计部门专门从事GUI的研究与设计,同行间也成立了若干组织,相互进行GUI设计理论与经验的交流。

? 知识补充

虽然中国IT产业、移动通信产业、家电产业迅猛发展,但产品的人机交互界面设计水平却明显落后,这对于提高产业的综合素质,以及与国际同行的竞争力等方面无疑产生了一定的影响。

◎ IxD

交互设计(Interaction Design,缩写为“IxD”),简单来讲是指人和应用之间的互动过程,一般由交互工程师来做。

交互设计是定义和设计人造系统的行为,它包含了两个或多个个体之间互动交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立人与产品及服务之间的关系,以“在充满复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和“用户体验”两个层面进行分析,关注以人为本的用户需求,如图1-5所示。

图1-5

一般而言,交互设计师都要遵循一定的步骤进行设计,为特定的设计问题提供相应的解决方案(注意,没有绝对正确的方案)。设计流程的关键在于快速迭代,换言之,快速建立原型,通过用户测试改进设计方案。

如下是交互设计步骤的要点:

? 用户群体调研

通过用户调研的手段(介入观察、非介入观察、采访等),了解用户及其相关使用的场景,以便对其有深刻的认识(主要包括用户使用应用时的心理模式和行为模式),从而为后续设计提供良好的基础。

? 概念设计

通过综合考虑用户调研的结果、技术可行性、商业机会,交互设计师为设计目标创建概念(目标可能是新的软件、产品、服务或者系统)。整个过程可能来回迭代多次,每个过程可能包含头脑风暴、交谈(无保留的交谈)、细化概念模型等活动。

? 创建用户模型

基于用户调研得到的用户行为模式,设计师创建场景、用户故事或者故事板(Storyboard)来描绘产品将来可能的形态。通常,设计师设计人物志(Persona)来作为创建场景的基础。

? 创建界面流程

通常,交互设计师采用线框图来描述设计对象的功能和行为。在线框图中,采用分页或者分屏的方式(夹带相关部分的注解)来描述系统的细节。界面流程图主要用于描述系统的操作流程。

? 开发原型以及用户测试

交互设计师通过设计原型来测试设计方案。原型大致可分为三类:功能测试原型、感官测试原型以及实现测试原型。这些原型用于测试用户和设计系统交互的质量。原型可以是实物,也可以是计算机模拟的;可以是高度仿真的,也可以是大致相似的,如图1-6所示。

图1-6

◎ UED

用户体验设计(User Experience Design,简称“UED”),是以用户为中心的一种设计手段,以用户需求为目标而进行的设计,设计过程注重以用户为中心,用户体验的概念从开发初期就开始引入,并贯穿始终。其目的就是保证:

1. 对用户体验有正确的预估;

2. 认识用户的真实期望和目的;

3. 能够以低廉成本加以修改,并对核心功能进行修正;

4. 保证核心功能同人机界面之间的协调工作,减少BUG。

用户体验是个人主观感受,但是这种体验可以通过良好的设计进行提升。用户体验设计旨在提升用户使用产品的体验。在互联网企业中,一般将视觉界面设计、交互设计和前端设计都归为用户体验设计。

但实际上用户体验设计贯穿于整个产品设计流程。一名优秀的用户体验设计师,实际上需要对界面、交互和实现技术都有深入的理解,如图1-7所示。

图1-7

◎ ID

工业设计(Industrial Design,简称“ID”),指以工学、美学、经济学为基础对工业产品进行设计。

工业设计分为产品设计、环境设计、传播设计、设计管理四类,包括造型设计、机械设计、电路设计、服装设计、环境规划、室内设计、建筑设计、UI设计、平面设计、包装设计、广告设计、动画设计、展示设计、网站设计等。工业设计又称“工业产品设计学”,工业设计涉及心理学、社会学、美学、人机工程学、机械构造、摄影、色彩学等。工业发展和劳动分工所带来的工业设计,与其他艺术、生产活动、工艺制作等都有明显不同,它是多种学科、技术和审美观念的交叉产物。

1.1.3 UI设计流程

UI设计流程一般分为以下十个阶段:

? 产品定位与市场分析阶段

1. 目的(UI设计师应了解产品的市场定位、产品定义、客户群体、运行方式等);

2. 主要执行人员(界面设计人员、用户体验设计人员、产品经理);

3. 需沟通人员(销售人员);

4. 实现步骤(会议讨论);

5. 界面设计人员主要职责(定义用户群特征、最终用户群和产品方向)。

? 用户研究与分析阶段

1. 目的(分析目标用户的使用特征、情感、习惯、心理、需求等,提出用户研究报告和可用性设计建议);

2. 主要执行人员(界面设计人员、用户体验设计人员、产品经理、开发人员);

3. 需沟通人员(销售人员);

4. 实现步骤(纸稿线稿、黑白稿、原型);

5. 界面设计人员主要职责(收集相关资料,这部分工作由团队配合完成。时间允许的情况下,可以制定实景用户分析)。

? 架构设计阶段

1. 目的(这里涉及比较多的是界面交换与流程的设计,根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素);

2. 主要执行人员(界面设计人员、用户体验设计人员、产品经理);

3. 需沟通人员(技术人员、销售人员);

4. 实现步骤(界面设计人员进行风格设计,与产品经理拿出定稿;用户体验设计人员对原型进行优化,整理出交互及用户体验方面意见,反馈给界面设计人员及产品经理;客户等待效果图,开始编制代码);

5. 界面设计人员主要职责(根据可行性分析制定交互方式、操作与跳转流程、结构、布局、信息和其他元素,界面设计、图标设计、风格设计)。

? 原型设计阶段

1. 目的(根据进度与成本,将原型控制在“手绘-图形-Flash-视频”几个质量范围);

2. 主要执行人员(界面设计人员、用户体验设计人员、产品经理);

3. 需沟通人员(客户、开发人员);

4. 实现步骤(设计规范,代码及程序开发);

5. 界面设计人员主要职责(对前面所有工作以页面的形式呈现出来,根据进度与成本,可以把原型控制在“手绘-图形-Flash-视频”几个质量范围。原型的本质更倾向是一个DEMO,它不需要实现全部的功能,但要体现出设计对象的基本特性)。

? 界面设计阶段

1. 目的(根据原型设计阶段的界面原型,对界面原型进行视觉效果的处理);

2. 主要执行人员(界面设计人员、用户体验设计人员、开发人员);

3. 需沟通人员(用户体验设计人员、销售人员);

4. 实现步骤(制作线框图、完成图);

5. 界面设计人员主要职责(在该阶段确定整个界面的色调、风格、界面、窗口、图标、皮肤的表现)。

? 界面输出阶段

1. 目的(配合开发人员完成相关的界面结合);

2. 主要执行人员(开发人员);

3. 需沟通人员(界面设计人员、用户体验设计人员、产品经理、销售人员);

4. 实现步骤(输出设计制作好的图稿);

5. 界面设计人员主要职责(配合技术部门实现界面设计的实际效果)。

? 可用性测试阶段

1. 目的(开展一致性测试、信息反馈测试、界面简洁性测试、界面美观度测试、用户动作性测试、行业标准测试);

2. 主要执行人员(程序测试部门);

3. 需沟通人员(界面设计人员、用户体验设计人员、程序员、产品经理、销售人员);

4. 实现步骤(测试原型);

5. 界面设计人员主要职责(负责原型的可用性测试,发现可用性问题并提出修改意见)。

? 完成工作阶段

1. 目的(对于前面七个阶段的设计工作进行细节调整);

2. 主要执行人员(界面设计人员、用户体验设计人员);

3. 需沟通人员(开发人员、销售人员);

4. 实现步骤(沟通解决);

5. 界面设计人员主要职责(可用性的循环研究、用户体验回馈、测试回馈、界面设计人员完善可行性建议)。

? 产品上线

1. 目的(检验前面界面设计的成果是否符合市场及用户群体需求);

2. 主要执行人员(销售人员);

3. 需沟通人员(程序测试部门);

4. 实现步骤(调研用户群);

5. 界面设计人员主要职责(收集市场对于产品的用户体验,并记录成文字说明)。

? 分析报告及优化方案

1. 目的(了解整个界面设计的优缺点);

2. 主要执行人员(界面设计人员、用户体验设计人员);

3. 需沟通人员(开发人员、销售人员);

4. 实现步骤(撰写分析报告及优化方案);

5. UI主要职责(对于前九个阶段的界面设计进行详细系统的整理,为下一次界面设计提供有力的市场及专业论据)。

1.2 了解UI设计师

什么是UI设计师?UI设计师的工作是什么?其实,UI设计从工作内容上来说主要有三个方向,这三个方向主要是由UI研究的三个因素决定的,这三个因素分别是研究界面、研究人与界面的关系、研究人。

1.2.1 研究界面——图形设计师

目前,国内大部分的UI设计者都是从事研究界面的图形设计师(Graphic UI Designer),也被称为“美工”,但实际上UI设计师并不是单纯意义上的美术人员,而是软件产品的外形设计师。本书主要讲解的就是UI图形设计师的相关工作以及UI图形界面的设计。

通常,UI图形设计师大多是专业美术院校毕业,其中大部分都具有美术设计教育背景,如工业外形设计、信息多媒体设计、装潢设计等。

首先,视觉设计不仅仅是做Icon、界面或者界面元素。很多人认为,如果去互联网公司做视觉UI设计,只要会简单做图标、界面即可,其实这是极其不负责任的想法。

一般公司如果雇佣专职视觉设计师的话,那么整个公司的美术设计工作都会交由视觉设计师负责。这就要求视觉设计师几乎精通平面设计相关的所有知识。所以,如果大家想今后在视觉领域有所发挥,那么以下几项技能必不可少:

1. 平面构成;2. 色彩构成;3. 版式设计;4. 心理学;5. 美术绘画;6. 设计意识。

1.2.2 研究人与界面的关系——交互设计师

在软件图形界面出现之前,长期以来UI设计师就是指交互设计师(Interaction Designer)。交互设计师的工作内容就是设计软件的树状结构、操作流程、软件的结构与操作规范等。一个软件产品在进行编码设计之前需要做的工作就是交互设计,并且确定交互模型、交互规范。交互设计师一般都需要具有软件工程师的背景,并且应该具备以下基本能力:

1. 了解用户体验设计、可用性原则;

2. 信息挖掘、用户调研、数据分析;

3. 良好的逻辑能力;

4. 心理学;

5. 交互设计原则、不同平台的规范;

6. 产品视觉感;

7. 沟通能力。

1.2.3 研究人——用户测试/研究工程师

为了保证产品的质量,任何产品在推出之前都需要经过测试,除了软件的功能编码需要进行测试,UI设计也需要进行测试。UI设计的测试,主要是测试交互设计的合理性以及图形设计的美观性。测试的方法一般是采用焦点小组的形式,向目标用户发放调查问卷来衡量UI设计的合理性。

用户测试/研究工程师(User Experoemce Engineer)的职位很重要,如果没有这个职位,UI设计的好坏只能凭借设计师的经验或者领导的审美来判断,这样会给企业带来很大的风险。用户测试/研究工程师一般需要具有心理学、人文学背景。

综上所述,读者应该明白UI设计师可以分为三种:UI图形设计师、交互设计师和用户测试/研究工程师。

1.3 UI设计应用软件

当设计师完成关于产品的构思和草图后,就要使用各类绘图和制图软件将草图上色并制作电子稿了,下面介绍几种绘图和制图软件。

1.3.1 图片处理——Photoshop

Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理由像素构成的数字图像,使用其相关的编修与绘图工具,可以有效地进行图片编辑工作。Photoshop有很多功能,在图像、图形、文字、视频、出版等各方面都有涉及。

2003年,Adobe Photoshop 8更名为“Adobe Photoshop CS”。2013年7月,Adobe公司推出了新版本的Photoshop CC,自此,Photoshop CS6作为Adobe CS系列的最后一个版本被新的CC系列取代。

截止2017年12月,Adobe Photoshop CC 2018为市场最新版本。Adobe支持Windows操作系统 、安卓系统与Mac OS系统,如图1-8所示为Photoshop CC 2018的启动界面和初始界面。

图1-8

1.3.2 矢量绘图——Illustrator

Illustrator,简称“AI”,是一款矢量图形处理软件,在UI设计中非常适合处理一些极其复杂的图形路径,而且这款软件有一个特点就是可以与Photoshop结合使用。具体就是设计师在制作图表时,在AI中处理完成之后再链接嵌入Photoshop中。这款软件对于大家学好UI设计有很大的帮助。

作为一款非常好用的矢量图形处理工具,该软件主要用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等,也可以为线稿提供较高的精度和控制,无论是小型设计还是大型复杂项目均可使用。如图1-9所示为软件启动界面和初始界面。

图1-9

1.3.3 矢量绘图——Sketch

Sketch是一款矢量绘图应用,矢量绘图也是目前进行网页设计,特别是移动应用设计、图标以及界面设计的最好方式。除了矢量编辑的功能,Sketch同样添加了一些基本的位图工具,比如模糊和色彩校正。

Sketch是一款容易理解并且上手简单的软件,有经验的设计师花上几个小时便能运用自如。对于大多数的数字产品设计,Sketch都能替代Photoshop和Illustrator。

Sketch是为图标设计和界面设计而生的。它是一个有着出色UI的一站式应用,所有需要的工具都触手可及。在Sketch中,画布无限大,每个图层都支持多种填充模式;同时Sketch有最棒的文字渲染和文本式样,还有一些简单便携的文件导出工具。

必要的话,大家可以用无限精准的“分辨率无关模式”来查看画布,或者打开“像素模式”来查看每一个像素导出后的样子。

但是Sketch并不是一个位图编辑应用。也就是说如果大家想修正一张照片或者用笔刷来画画,那么该应用不太适用。如图1-10所示为Sketch的介绍。

图1-10

1.3.4 交互效果——Axure RP

Axure RP,又称“Axure”,这款软件就不像前面几款那么熟悉了,而且这款软件也不属于Adobe公司旗下的软件。但这款软件对于交互设计师来说并不陌生,其在UI设计中主要用来制作交互原型图,对于制作一些交互效果来说是非常棒的。

Axure RP是一款专业的快速原型设计工具。Axure代表美国Axure公司,RP则是Rapid Prototyping(快速原型)的缩写。

Axure RP是美国Axure Soware Solutionn公司的旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效地创建原型,同时支持多人协作设计和版本控制管理,如图1-11所示。

图1-11

Axure RP的使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等。另外,架构师、程序员也在使用Axure RP。

1.3.5 小动画——Flash

Flash是由Macromedia公司推出的交互式矢量图和Web动画的标准。做Flash动画的人被称为“闪客”。网页设计者使用Flash可以创作出既漂亮又可以改变尺寸的导航界面以及其他奇特的效果。

Flash的前身是Future Wave公司的Future Splash,是世界上第一个商用的二维矢量动画软件,用于设计和编辑Flash文档。

1996年11月,美国Macromedia公司收购了Future Wave,并将其改名为“Flash”。后又于2005年12月3日被Adobe公司收购。Flash通常也指Macromedia Flash Player(现Adobe Flash Player)。2012年8月15日,Flash退出Android平台,正式告别移动端。2015年12月1日,Adobe将动画制作软件Flash professional CC 2015升级并改名为Animate CC 2015.5,从此与Flash技术划清界限。

Flash是一种集动画创作与应用程序开发于一身的创作软件,到2013年9月2日为止,最新的零售版本为Adobe Flash Professional CC(2013年发布)。

Adobe Flash Professional CC为创建数字动画、交互式Web站点、桌面应用程序以及手机应用程序开发提供功能全面的创作和编辑环境。Flash广泛用于创建吸引人的应用程序,包含丰富的视频、声音、图形和动画。

可以在Flash中创建原始内容,或者从其他Adobe应用程序(如Photoshop或Illustrator)导入它们,快速设计简单的动画,以及使用Adobe ActionScript 3.0开发高级的交互式项目。设计人员和开发人员可使用它来创建演示文稿、应用程序和其他允许用户交互的内容。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用。

1.4 UI设计的构成元素

与传统媒体不同,网站界面除文字和图像以外,还包含动画、声音和视频等新兴多媒体元素,更有由代码语言编程实现的各种交互式动效,这些极大地提升了网站界面的生动性和复杂性,但同时也使网页设计者需要考虑如何优化这些页面元素的布局。

1.4.1 文字元素

文字元素是信息传达的主体部分,从最初网页的纯文字界面发展至今,文字仍是其他元素所无法取代的。这是因为文字信息符合人类的阅读习惯,而且文字所占存储空间很少,节省了下载和浏览的时间。

网站界面中的文字主要包括标题、信息、文字链接等几种主要形式。标题是内容的简要说明,一般比较醒目,应该优先编排。文字作为占据页面重要比例的元素,同时又是信息的重要载体,其字体、大小、颜色和排列对页面整体设计影响极大,应该多花心思去处理。如图1-12所示为典型的以文字排版为主的网站界面,整个网站页面的图像修饰很少,但是文字分类条理清晰,并没有单调的感觉,可见文字排版得当,网站界面同样可以生动活泼。

图1-12

1.4.2 图形符号元素

图形符号是视觉信息的载体,通过精练的形象,表达一定的含义。图形符号在网站界面设计中可以有多种表现形式,可以是点,也可以是线、色块或是页面中的一个圆角处理等,如图1-13所示为网站界面中的图形符号元素表现效果。

图1-13

1.4.3 图像元素

图像在网站界面设计中有多种形式,图像具有比文字和图形符号都要强烈、直观的视觉表现效果。图像在表现手法、工具和技巧方面具有较高的自由度,从而可以产生无限的可能性。网站界面设计中的图像处理往往是网页创意的集中体现,图像的选择应该根据传达的信息和受众群体来决定。如图1-14所示为网站界面中的图像创意设计表现。

图1-14

1.4.4 多媒体元素

网站界面中的多媒体元素主要包括动画、声音和视频,这些都是网站界面构成中最吸引人的元素,但是网站界面还是应该坚持以内容为主,任何技术和应用都应该以信息的更好传达为中心,不能一味地追求视觉化的效果。如图1-15所示为网站界面中多媒体元素的应用效果。

图1-15

1.4.5 色彩元素

网站界面中的配色可以给用户带来不同的视觉和心理感受,它不像文字、图像和多媒体等元素那样直观、形象,它需要设计师凭借良好的色彩基础,根据一定的配色标准,反复试验、感受之后才能够确定。有时,一个好的网站界面往往因为选择了错误的配色而影响整个网站的设计效果,如果色彩使用得恰到好处,就会得到意想不到的效果。

色彩的选择取决于“视觉感受”,例如,与儿童相关的网站可以使用绿色、黄色或蓝色等一些鲜亮的颜色,让人感觉活泼、快乐、有趣、生气勃勃;与爱情交友相关的网站可以使用粉红色、淡紫色和桃红色等,让人感觉柔和、典雅;与手机数码相关的网站可以使用蓝色、紫色、灰色等颜色,让人感觉时尚、大方、具有时代感。如图1-16所示为网站界面中的配色效果。

图1-16

1.5 UI设计的重要原则

不以规矩,不成方圆。在UI设计中也有几项重要的原则需要大家注意,下面为大家进行详细介绍。

1.5.1 清晰明了的设计

简洁的界面便于让用户使用和了解产品,并能降低用户发生错误选择的概率。如果用户打开一个页面或者App,面对杂乱无章的界面无从下手,也不知道具体的功能分区,或者需要花费大量的时间才能找到想要的按钮或页面。在这种情况下,大多数用户将会失去耐心,页面也很有可能被用户放弃,如图1-17所示。

图1-17

1.5.2 记忆负担最小化

在设计界面时,要考虑人类大脑处理信息的限度。人类的短期记忆有限且极不稳定,24小时内存在约25%的遗忘率。所以对用户来说,浏览信息要比记忆更容易,如图1-18所示。

图1-18

1.5.3 设计的一致性

界面一致性是每个优秀网站都具备的特点。界面的结构必须清晰且一致,风格必须与产品内容相一致。所以对于相同的问题,提供相同的解决方案,这样可以减轻用户的认知及记忆负荷。一旦确定一个设计模式,打造更符合直觉的产品体验显得相当重要,如图1-19所示。

图1-19

1.5.4 美观大方的设计

对于一个UI设计师来说,产品界面的美观是相当重要的。但当仔细分析过后,大家会发现,一个产品漂不漂亮并不是用户体验的核心所在。

举个最简单的例子:大家对微信都应该很了解,那么作为设计师的你觉得微信设计得漂亮吗?答案是微信设计得中规中矩,与很多“漂亮的App”相比,其实它显得很普通。

但是,微信的设计让你挑不出太多的毛病,甚至有些细节让人觉得很棒,对于一个过亿级的产品,不出错且用户能够很清晰、快速地完成其目标,那就是成功,如图1-20所示。

图1-20

1.5.5 从用户习惯考虑

真真切切从用户的角度出发,想用户所想,做用户所做。用户可以按照他们自己的方法理解和使用网站或者App。设计师可以通过比较两个不同世界(真实与虚拟)的事物,完成更符合用户要求的设计,如图1-21所示。

图1-21

1.5.6 安全性

用户能自由地进行选择,且所有选择都是可逆的。在用户进行危险的选择时有信息介入系统的提示,这样会让用户即用户觉得很安全,自己的权益不会遭到损失,如图1-22所示。

图1-22

1.5.7 灵活性

界面的灵活性,简单来说就是要让用户方便地使用界面内的各种元素,即互动多重性。用户与界面的交互不局限于单一的工具(包括鼠标、键盘或手柄、图标或按钮、链接图片),如图1-23所示。

图1-23

1.5.8 人性化

高效和满意是人性化的体现。界面应具备专家级和初级玩家系统,即用户可依据自己的习惯定制界面,并能保存设置。所以一个优秀的UI设计师,从技能上讲,不仅要能画图标,还得能做好界面,同时也会很多交互知识,如图1-24所示。

图1-24

1.6 专题讨论

在用户体验设计中,产品思维能确保设计师为正确的用户群体构建正确的功能,处理正确的问题。产品思维能让设计师做正确的决定,并依据它来构建用户真正想要的功能。产品思维在产品管理和用户体验设计之间构建了富有成效的关系,这种关系让产品变得强大,如图1-25所示。

图1-25

1.6.1 为什么要培养设计师的产品思维?

设计师们在进行用户体验设计时,常常想的是如何让这个产品的功能变得更易于用户使用。但实际上,功能只是产品中一个很小的一部分。不仅要对某个用户的问题进行思考,还要对产品目标、收益进行思考。

? 知识补充

用户体验的核心并不是指一个产品功能的集合体,用户使用产品的核心是为他解决问题。例如,滴滴出行的用户体验是让用户在任何时候都能简单就近地打到车。当车辆快到达用户所在地时,会出现倒数,这是一个很好地提升用户体验的功能。这个功能不能离开产品存活,所以这也是为什么设计师最好先从产品层面开始思考。

每个产品都会有一个核心的用户体验,这个核心的用户体验就是这个产品存在的意义。它可能满足了用户的某一个需求,也可能解决了用户的某一个问题,这样的产品才变得有实际意义。

如果这个问题不存在,或者没有被完美地解决,那这个产品存在的意义就降低了,用户也不愿意去使用这个产品。错误的解决方案可以被修正,但是不存在的问题则无法被调整,所以设计师要思考哪个是真正该解决的问题。如果设计师无法100%确认,可以通过观察,与用户交流降低产品开发的风险,发现用户真正的需求,从而为其提供解决方案。

1.6.2 产品层面思考

在产品层面思考会帮助设计师打造成功的功能。明确产品具体要解决用户的何种问题,你就可以知道为什么要构建这个产品了。定义目标人群(谁会有这些问题)和定义解决方式(我们如何解决这个问题)将会对如何构建新功能起到很大的作用。设定目标可以帮助设计师检测功能是否成功构建。如图1-26所示。

图1-26

1.7 本章小结

随着时代的发展及人们审美需求的不断提高,UI界面设计已经在短短数年内跃升为一个新的艺术门类,而不仅仅只是一门技术。相对于其他设计而言,UI设计更注重艺术与技术的结合、形式与内容的统一等。本章向大家介绍了UI设计的相关知识,大家需要理解相关的UI设计理论,并能够在网站UI设计过程中应用相应的理论知识。