交互设计概论

1 什么是交互设计

Alan Cooper对交互设计的经典定义：交互设计是人工制品、环境和系统的行为，以及传达这种行为的外观元素的设计和定义。交互设计首先规划和描述事物的行为的方式，然后描述传达这种行为的最有效形式。

这个定义很抽象，读起来晦涩难懂。以下是本书对其定义的解读：

所谓交互，就是输入和输出。（如下图所示）所以交互设计就是针对输入方式（通常是人）和输出方式（通常是产品或者系统）的设计。比如我们通过“触摸”来控制手机便是一种输入方式，然后手机在屏幕上提供相应的界面就是输出方式。更具体的说，交互设计就是设计师对产品或者系统与它的使用者（人）之间的交互机制（输入方式与输出方式）进行分析、预测、定义、规划、描述和探索的过程。即设计和定义使用者如何使用一个产品达到其目标，完成某一任务的过程。这里涉及到三个交互设计要素：目标、任务和完成任务的过程，即使用者的行为。

交互设计定义.png

让我们以一个小故事来具体阐述以上提到的交互设计三要素。

小张是个销售员，下午出去拜访客户，从客户那出来发现已经晚上六点多了，感到肚子很饿。本来小张是想回家自己做饭吃，但是实在是太饿了，回家又要做好久的地铁，还不如就在附近找家小饭馆吃了呢，于是小张环顾四周，发现马路对面左前方200米有个麦当劳，小张于是就穿过马路，沿着道路走了过去，到了麦当劳要了一份套餐，风卷残云的吃完了。

问题来了，在这个故事中，什么是目标？

小张饿了，想填饱肚子。这就是目标。

什么是任务？

回家自己做饭是一种任务，到附近的地方吃也是一种任务,实现同一个目标可能有很多不同的任务。如何选择任务要视具体情境（包括用户的动机、期望、外部环境限制等）而定，如上述故事中小张因为太饿，想快点填饱肚子（动机、期望）但是回家所要花费的时间太长（外部环境）所以才选择到附件饭馆吃。任务是利用产品达成某个目的的具体步骤，多个步骤合起来就达成了目标，比如上面故事中小张需要完成到达对面麦当劳-点餐-吃-结账-走人等五个任务。

什么是行为？
穿过马路，走到麦当劳，推门进去，排队，选择食物，等候，就餐等等这些就是行为，行为是每个任务的具体动作，比如吃的时候你用筷子还是刀叉，坐在靠走廊还是靠窗，行为体现出了用户的操作习惯和对这个事件的认知水平。在人机交互领域，行为就是可以看到的用户的具体操作，专业点的术语我们称之为“用例”。

一个普遍的问题是，目标和任务容易混淆。如何区分呢？其实很简单，如下图：

交互设计三要素.png

目标是可以不断抽象的，比如回家过年是为了什么?目标是跟亲人团聚。那跟亲人团聚是为了什么?是为了得到亲情和爱。（用户研究和需求分析的目的就是得到这种抽丝剥茧之后的用户目标）

任务是可以不断细化的。比如如果我们选择做火车（任务）来达到“回家过年”这个目标，那么要如何才能做火车呢？你需要先买票，然后才能乘坐火车。怎么买票？一种方式是通过网上订票：涉及登录\注册12306网站—查找列车信息—下单—支付这四个步骤。再细分、具体化这四个步骤就是用户行为。如下图查找列车信息下的5个用户行为：

12306订票.jpg

界定任务和行为，我们可以抛一个问题：这个事要怎么做?如果不能立即做那就是任务，如果能够立即做那就是行为。

从以上定义中可以看出：交互设计以用户目标为出发点(目标导向)，关注的重点在于用户行为，任务则是联结目标和行为的纽带。我们所做的所有设计最终都是为了帮助用户达成其目标。（如下图）这种目标导向的设计理念可以帮助交互设计师始终站在一个相对较高的水平上来看问题，而这正是设计的产品具有良好用户体验的前提：设计总是朝着用户的最终目标的方向前进而不会太过偏离用户目标。

目标导向的设计.png

然而，不像与大多数实体人工制品的交互，只涉及简单的行为，人机交互领域或者说人们与数字产品的交互机制具有很多潜在的复杂性：普通用户在利用数字产品完成某一任务时，他们对数字产品或系统的心理模型（人们对数字产品如何工作、响应的心理预期和行为习惯）往往和数字产品或系统的实现模型（技术上如何实现）存在很大的差距，这就要求设计师考虑如何设计才能使数字产品或系统的响应或工作方式表现得尽可能符合普通用户的心理预期和行为习惯。这就好比跳双人舞：用户移动，系统响应；接着用户再移动来回应系统的响应，两者需要步调一致舞蹈才能继续进行。以往的数字产品或系统的开发过程是不考虑这种舞步的协调的，系统往往自己跳自己的，用户需要努力学习才能跟上系统的步调，在学习过程中被踩脚是用户必须付出的代价。而用户中心的设计思想则要求系统能预测用户的舞步，和用户的舞步保持一致，或者能够引导用户轻松跟上系统的舞步。这就要求交互设计师在设计用户和系统的行为（操作和反馈）时需要具备很多学科知识。所涉及学科包含认知心理学、人类学、工业设计、人因工程、信息架构、逻辑学等等。

2 交互设计与相关学科

从用户角度来说，交互设计是一种如何让产品更易用，更能帮助用户达成目标，且有效而让人愉悦的技术。可见它是提升用户体验不可或缺的重要过程。对于交互设计师而言，为达成用户的目标，我们需要综合运用多门学科知识，了解用户的行为习惯、心理特性、实际需求，并将其表现在产品的功能特性和传达的形式上。以下是交互设计借鉴较多的几门学科：

2.1 工业设计与交互设计

工业设计中应用的很多知识技能和交互设计具有很大的重叠。工业设计研究实体产品的功能和传达形式，以及产品，用户和外部环境之间的平衡关系。比如，在工业设计领域，实体产品的设计需要综合考虑产品的形状、色彩，人们对其的感知、心理欲望，以及产品的可用性等方面。有人认为交互设计是工业设计在软件及数字领域的延生。此外，随着技术的发展，软件和硬件的界限呈现逐渐模糊的趋势，交互设计和工业设计的界限也将逐渐变得不明确。例如各种可穿戴设备、智能硬件、智能家居等产品的出现就是这种趋势的有利佐证。（案例：智能手环）

2.2 认知心理学与交互设计

认知心理学是一门主要研究人的认知过程规律的学科，认知过程包括感知觉，注意，表象，记忆思维，语言等等。认知心理学能为交互设计和视觉设计提供基础的设计原则。这些原则包括心理模型（Mental Model），映射原理（Mapping），隐喻（Metaphor）以及可操作启示性（Affordance）等等。所谓心理模型，有时也称为心智模型，就是人们对于现实世界如何运作的一种内在思维过程。它是人们对周围世界以及各组成部分之间的关系的一种内在表征（概念），以及个体对自己的行为，行为所引发的结果的一种直觉认识。心理模型是基于过去经验和行为习惯而形成的。当个体面对一个新的事物或者产品时，没有对应的心理模型，这时个体会选择用一个与其相近的概念去尝试理解这个新的产品，并尝试学习如何使用，这就是映射。隐喻就是人们将现实世界中所形成的概念、认知模式映射到数字产品的一个例子。例如网页或应用中的电子邮箱通常以信封图标来表现（尽管发送电子邮件从未涉及到物理信件）。启示性，指的是某物体或者对象具有某种操作或功能上的暗示性。举例来说，一张高于你膝盖高度的椅子，它可以暗示你坐。牙刷的手柄略长于人类的手掌，它暗示可以用来握紧。启示性是一个重要的交互设计原则，在下节交互设计原则中我们进行详细阐述。

以上认知心理学所提供的设计原则是设计出易用有效的产品的重要指导原则。不遵循这些原则的产品很可能会造成用户体验不良。下面这个例子就是市面上背离这些原则的不良产品设计：

下图是常见的马桶按钮设计。这个按钮由一大一小两部分组成。不知有多少人知道这个设计的奥秘所在。有没有曾方便完疑惑过，该按哪一个？大多数人最后的选择可能都是同时按。

马桶按钮.jpg
图片来源: http://qiuyuexp.com/toilet_ue/

其实一大一小的按钮设计初衷是出水量的不同：大按钮出水量多，小按钮出水量小。咋看起来这个设计很合理，然而它试图挑战的是大多数人早已建立的认知结构和关系模式（心理模型），以致每次操作时都要付诸额外的认知记忆和判断。不是吗？最自然的设计和操作该是什么？其实大多数人的实际操作已经给了答案，一个按钮就够了！那出水量怎么办？在人们的认知模式（心理模型）中，什么与出水量是最自然的关联？答案是按下的时间长短或力度。这是比按钮大小更早建立或更普遍的关联关系。每次放水时的犹豫，就在于设计者要挑战我们早已形成的认知模式。

此外，这个产品在交互设计上存在另一个问题：反馈。即便人们曾经分别按过大或小按钮，结果呢？我们关注的是水有没有出来。我们并不能感受到按大小按钮时出水量的不同。在认知心理学中，有个概念叫最小可觉差（ just noticeable difference）。简单举例说，手拿一张纸或两张纸，这个重量差别你体会不到，但拿一张纸或一沓纸，这个差别你是能分辨出的，因为一张两张纸的差别小于你能分辨出的重量差别（即最小可觉差），而一张纸和一沓纸的区别大于最小可觉差。对于马桶出水量，我们缺少水流判断的视觉线索，水量差别小于最小可觉差。我们感知到的是：不同操作所引发的结果是一样的。这就会导致我们感到困惑。

2.3 人因工程与交互设计

人因工程学（又称工效学、人机工程学、人体工学、人因学）是一门重要的工程技术学科，是研究人和机器、环境的相互作用及其合理结合，使设计的机器和环境系统适合人的生理及心理等特点，达到在生产中提高效率、安全、健康和舒适目的的一门科学。例如下图是一张理想的办公室人体工学图。它给出了良好地办公桌，电脑，椅子的合理配置。从而使机器、环境适合人，提高工作效率。

人体工程学电脑椅.png
图片来源：http://site.douban.com/172021/widget/notes/10865863/note/241589204/

类似地，在交互设计中人因工程学也提供了支持，如下图是一张标准化热点图，显示了人们在屏幕上进行滚动手势操作的三个明显区域。

手机滚动操作.png

图片来源: http://www.uxmatters.com/mt/archives/2014/09/insights-on-switching-centering-and-gestures-for-touchscreens.php

为什么是这三个区域？这和屏幕中的内容类型有关。左侧的图像显示的是在对话框中对短内容的滚动；中间和右侧的图显示得是对全屏内容列表的滚动。在中间的图像中，列表条目由非常简短的信息构成，所以在屏幕中央有大量空白区域，你会发现用户更喜欢触摸中央。在右侧的图像中，长列表条目占据了许多屏幕的宽度，用户就在屏幕更右侧进行滚动操作。甚至左利手用户也遵循这种操作模式。

对于那些语言上是从右往左阅读的文化中，结果刚好相反。人们点击屏幕左侧的空白间隔。

在内容区域用户对于使用滚动手势会显得不自信。因为他们不是担心他们会不小心和内容交互，就是担心他们会遮住内容。当页面中充满了内容，没有任何多余的触摸空间时，用户选择在右侧滚动操作。

2.4 信息架构与交互设计

信息架构是指组织信息内容的结构和方式，在互联网产品中，信息架构就是对内容的分类，并通过建立一种引导人使用的方式，让人更易于获得想要的内容而进行的设计。有效的信息架构能够让用户按照逻辑，没有障碍地，逐步地得到他们想要的内容，在交互设计中，建立起这个行之有效的信息架构的人，被称为信息架构师。有时候这部分工作也由交互设计师完成。

3 交互设计原则

3.1 什么是设计原则

设计原则其实就是对一些设计过程中基于人类的认知规律对设计做出的一些指导性原则，并且对已经成为行业共识的设计经验做个总结，用来指导设计师界定问题、提高效率。

3.2 常用的交互设计原则

1. 可视性

普通用户在浏览一个网页或者应用界面时往往只是一扫而过，所以要让产品界面做到不言而喻，一目了然。普通用户只要看一眼就知道是什么内容，知道如何使用。或者产品界面至少要做到自我解释，借助提示或帮助，普通用户只需要花一点点时间去理解产品界面。（即产品的表现模式要趋近用户的心理模型）

具体来说，可视性的内容包括：明确当前所在位置，知道当前能干什么、接下来要干什么，能快速辨别界面中的元素并明白其功能。在设计时可采用合理的隐喻、习惯用法等有效的启示性。

例如荔枝FM 这个APP界面中调频显示按钮模拟了真实收音机，一目了然。其实这是隐喻启示的手法，隐喻启示是非常利于新用户学习的，从现实世界中直接映射过来。

荔枝FM-功能启示性.png

扩充阅读：交互设计原则之启示性

2. 一致性
良好的一致性，可以减少用户学习成本和培养用户习惯，也可体现产品设计的严谨。
一致性可以体现在以下几个层级：

• 跨平台一致性。如果用户经常需要跨平台使用你的产品，那么平台间的一致性就非常非常重要，例如Evernote。Evernote的核心竞争力就是多终端多平台，所以它的产品在跨平台一致性的要求是非常高的。

• 系列产品的一致性。同一开发者的多款应用间，或者同一应用的新旧版本间，自由的切换使用，而不需付出太大的学习成本。例如微软Office 套件，它们的菜单一致性设计可称业界楷模。

  
  Office套件.jpg

• 单个网站、软件或者应用的内部一致性。在相似的情景下，应在几个方面保持一致性：视觉表现、交互逻辑、操作结果、信息架构。如果有不同，应作相应的区别处理，特别是视觉表现上要予以区分。例如，淘宝、京东、唯品会等网购类型的网站，无论你以什么形式搜索商品，到最后出现的商品都是以表格形式呈现。到你选择商品进入详细页面，相关商品的详细信息、商品评价的相对位置都是一样的。再到添加到购物车或直接购买，一系列的交互行为都有一致性。

3. 简洁性
少即是多，尽可能精简界面上的元素。当设计出原型，先将元素减半，然后再看能否再简化。保证主要任务流程顺利完成，消减其余不相关元素的干扰。简洁体现在三个方面：减轻视觉干扰、精简文字表述、简化操作步骤。在设计时可合理使用删除、隐藏、组织、转移等策略。

（案例：Evernote的注册/登录表单设计）

4. 流畅性
确保用户操作连贯，任务完成顺畅，避免干扰或打断。明确最基本的核心任务，并保证它的顺利执行，辅助操作应在不影响核心任务的基础上展开。避免干扰，让用户明确在特定界面中的首要任务和目标，尽可能避免界面上的视觉噪音和其它干扰；避免打断，让用户的操作保持连贯性，模态框的使用要谨慎。

例如下图Gmail在把邮件删除后，会将删除的弹框设计成List Notification非模态这种方式，提醒用户撤销刚才的删除操作，这种的处理，让删除的流程更加顺畅和轻松自如。

gmail撤销按钮.png

5. 及时反馈
界面中任何可操作的地方，当用户发生操作时，都应该及时给予反馈。让用户了解操作已经生效，界面还在用户的控制之下。反馈内容包括：用户操作反馈和产品状态反馈。
操作反馈，指的是界面元素在用户进行滑过、点击、移开等操作时，元素的反馈变化。

状态反馈，指的是产品在运行需要用户等待或者系统出错时的反馈，让用户明白状况。（例如百度云、迅雷等每次下载完成都有声音提醒，音乐播放时的进度条显示就是这类反馈）

这是 Gmail 第一次加载收件箱的界面。

加载进度条.jpg

6. 可探索性（容错）
用户在使用产品过程也是一个探索过程，产品应该允许用户犯错，即使犯错了也不能埋怨用户，而且必须给用户重新尝试的机会，让用户处于放松的心态。设计过程中，首先要帮助用户避免出错，比如采用合适的控件（相同情况下选择控件比输入控件出错机会更小），给予输入帮助或启示。在登陆邮箱的过程中如果忘记密码，在登陆图标的旁边会有一个“忘记密码？”的提示图标，来提醒用户不用担心，点击进入来解决问题。用户出错后，需要提供撤销或返回功能，使用户返回到上一步操作重新探索。出错反馈要亲和，避免责备用户或鲁莽的打断或推出产品，要礼貌的指出错误所在并提供有用的补救建议。