推荐！交互设计那些事儿（二）

@Heidixie （阿里巴巴资深交互设计师）推荐阅读同一系列好文：交互设计那些事儿（一）

一. 理论前提

1. 人机交互与人类信息处理机制理论

既然产品设计出来不是给设计师用的，而是给用户用的，他们如何理解、认知、使用产品才是最重要的。因此"定义用户"，"了解用户"，"研究用户"是交互设计前需要做的重要工作。

要了解三种不同的"模型"：实现模型，用户心理模型以及表现模型。在《交互设计精髓》书中（英文名：about face3.0about face3.0）,作者Alan Cooper写道：设计者最重要的目标之一，就是要使表现模型和用户的心理模型尽可能地接近，因此，设计师能否详细地了解目标用户所认为的"如何使用软件"非常关键。

图1：实现模型，表现模型，用户心理模型

我们举个简单的例子去阐述以上的理论。电路板……一个普通的家庭妇女一天要用到电路板很多次，早上插上豆浆机，开启微波炉，开启电饭煲，洗了头发插上吹风机，晚上按亮台灯……她只需要做的就是保持插头接入电源，然後开启电器即可。若你采访她说：你了解这些电器的工作原理吗？你知道为何会有电吗？

除非她是个物理学家，要不然她有可能给出和我一样的答案：我以为我只要插入插头，插座里的开关就会被连接起来，电流就会从某个中心站源源不断输入到电线里，进而启动我的电器。没错，我想到就是输液一样的经验……电流正如输液管中的液体一样被输入到电器里。

但是实际上这个简单的动作背后有着无比复杂的电路原理……请原谅我根本无法去描述这个工作原理.它想起来或许如同下图中左侧的电路板……然而实际原理比这个还要复杂。我不了解这些，但是我的认知虽然错误，但是完全不妨碍我去用"电"。因为设计人员给了我一个简单的插头和插座，以及各种简单的开关。

图2： 实现模型电路板和用户心理模型插头对比

很多产品设计也是如此，你不需要教育你的用户成为精通电路板以及输电站工作原理的专家才让他们能够用你的产品。他们是如何理解的？虽然是错误的，但是这预示着你应该如何去"表现"你的设计。

2. 了解用户—行为、态度、能力

但凡交互设计的书籍都会从了解用户开始。可是了解用户的什么呢？

首先了解的是人本身，人类的信息处理机制，心理学，以及消费者心理学、行为学等等。

其次才是商业环境下的用户，再可以细分到某个行业的用户，比如电子商务购物者研究。和市场研究学对消费者的研究有所不同的时，用户体验设计部的用户研究员更关心的是用户产生的行为研究(behavior)，而不是观点（view）.

图3：用户行为变量

以上四个领域都属于要了解用户的维度，用户体验设计部更加偏重于对于用户行为的研究，通过用户行为的观察、研究，挖掘出用户真正的内在需求。

在目前的UED组织架构中，虽然有用户研究员这一专门的职位，但是作为交互设计师，依然要尽可能亲自参与了解用户的工作中，下图所示的了解用户的不同层次的工作，若有兴趣，可以多多涉猎。

图4：从了解人到了解用户，从了解心理到研究行为

3. 可用性及交互设计十大原则

从上世纪的80年代起，Jakob nielsen（网站：http://www.useit.com/）就一直是可用性领域的领军人物。

他提出，通常来讲，要使产品或者服务具有可用性，至少需要考虑以下5个维度：

1. 可学习性: 系统应该很容易学习，这样用户就可以快速开展工作
2. 效率性：一旦使用即可提高生产率
3. 可记忆性：即使离开一个系统一段时间，之后重新使用这个系统，也不用一切从头学起。
4. 容错和错误预防能力：最低的错误率，让用户很少出错，即使出错也很快能够恢复，必须保证不发生灾难性的事故。
5. 主观满意度：使用起来令人愉悦。

要举出这5个方面的反例，也不难，用过公司财务系统，Oracal的同学自然会清楚。为什么有些系统必须要培训了才能上手，并且一段时间不用，就会忘记掉怎么用，最糟糕的是，在使用的过程中，你充满了委屈和郁闷。

可用性以及其他相关因素的关系（整理自《重塑用户体验》一书）：

图5：可用性与相关因素关系
在5大维度的基础上，Jakob nielsen发展了一套沿用至今的启发式评估指南兼原则。在用户研究领域，看一个新的产品是否达到可用性目标，除了邀请真实的客户外，也会让行业专业、用户体验设计师们，用Nielsen提出的十大交互设计原则作为启发式评估的纲领，去审视设计作品。

图6：十大启发式评估原则

这应该是交互设计领域理论的沉淀结果。

二. 意识前提

在实际应用中，除了掌握基本的理论基础，还需要了解工作环境对于交互设计师的特殊要求。据我的经验，以下几点需要注意：

1. 好的解决方案是平衡

什么是好的设计方案？工作环境为结果买单，为过程喝彩。首先这个方案必然是技术可行的，这个方案必然是达到商业目标的，这个方案是在满足种种期望下，符合种种制约条件下的尽可能用户体验最优化的产物。如果用户体验是10分，你先是做到10，然後综合各种因素削减做到7。而不是死守着10不放，也不是一开始就奔着7去做。交互设计师如何拿到结果？

2. 多谋，方能善断

交互设计是理性的，也是感性的，更是理性的。它始终在寻求最佳解决方案——现实中往往没有出现过这个最佳方案，只有最适合的。所以交互设计师不能放弃探索。在任何一个既定的需求下，都有着无数个解决方案。除非你相信一开始蹦到脑子里的就是最适合的。否则多做一些尝试，多听一些意见，多做一些评审。

3. 不求一次完美

很可能到了要交付的日期，你脑子里还在探索。你又有了新的解决方案。渴求完美的心理，几乎是设计师的通病。产品上线后糟糕的用户反馈，会比你的主管给你打个糟糕的KPI的分数更让你难以忍受。但是上线后产品更加容易得到用户的行为数据和反馈，让下一次的优化更加有目标。该放手就放手吧。

掌握节奏感，要记住自己是项目中的一环，确保项目的进程是首要任务。记下那些优柔寡断，记下那些纠结，在发布之后的用户研究需求里提出来去验证。

三. 交互方法

1. FLOW CHART 流程图

流程图种类非常多，一般常用的有任务流程图（Task Flow）以及页面流程图（Page Flow）.

任务流程图（Task Flow）——为了达到某个目标，用户需要进行的各项任务，以及各项任务之间的逻辑关系，一般来讲，技术人员绘制的UML流程图以及产品经理绘制的业务流程图都属于任务流程图。

举一个GTD(getting things done,时间管理)的任务流程图：

图7：GTD流程图

我们可以根据以上的时间管理启发，轻松绘制出家庭收纳指南流程图：

图8：家庭收纳指南流程图

当任务中参与部门较多时，流程图如果有必要体现出不同节点各部门、人员如何配合，改换流程图的形式，多用泳道流程图表示：

图9：年度预算流程图（泳道图，来源于网络）

而页面流程图（Page Flow）则多由设计师产出，用来表示为了完成所有任务，需要的页面以及页面之间的跳转关系。任务流程图上的某些任务是在页面上完成的，有些可能不是，比如通过邮件、系统消息等。在分析任务，以及分析任务流程图并得出页面流程图的过程中，设计师基本上可以知道需要多少个页面，每个页面的目标和设计需求是什么。

页面流程图能够提供"俯瞰全局"的视角，让设计师不陷入到某个具体页面的细节里，始终把握大局。另外能够帮助设计师查漏补缺，在没有详细开展线框图及交互细节设计之前，不是凭空去想像复杂的交互行为。

好的页面流程图应该有各页面的编号，并和线框图的页面对应起来。它也可以在以后作为项目组进行任务走查的基础。

2. WIRE FRAMES 线框图

在《聊聊线框图：那些必要的理论和前提》文中，我对那几个观点没有其他补充性的内容：

1. 线框图不是"画"出来的，而是想出来的，是确认出来的。
2. 精美细致并不重要。
3. 从最简单的开始，逐渐补充细节。
4. 选择性价比最高的工具——不要把时间花在学习工具上。

线框图说白了，也只是工具而已。作为交互设计师，不仅仅只有这个方法才能表达产品。

3. 讲故事

交互设计师要有凭空想象复杂的交互行为的能力。作为一个路痴的我，根本无法凭空去想象一个火车站的架构，地铁站的架构，我一直认为自己在"凭空想象复杂的交互行为"能力方面不足。但是，我愿意去学习和弥补。利用周全的流程图即是弥补的方法之一，通过流程图，可以强迫自己把各种分支流程都考虑到，穷举出各种CASE. 而另一个好用的方法即是讲故事。

直到现在，每当有人给我讲他的一个新的构想的时候，我总是忍不住打断他吃力的讲解，说：讲个故事吧。假设现在你的方案都实现了，假设有了这个东西，假设你的用户是小明，他……

我们也总是能发现，讲故事除了引人入胜，更能发掘出本身不符合逻辑的事实——因为故事很容易讲不下去。但是没有故事，片段的话语很容易"蒙混过关"。

角色模型，任务走查，故事板归根结底是为了讲需求和产品设计场景化，因此我将他们都统一为一种技能：讲故事。

要讲一个好故事，你可能得：

1. 设定主人公，他们是谁，有什么特征？他们的需求是什么？
2. 设定故事的背景，要引人入胜，故事从哪里开始？
3. 设定你的故事线，你可以凭空去讲，在你有了原型之后，也可以用页面流程图、任务流程图等将故事串起来，点击具体的页面，让项目组和你一起在故事中进行任务的走查。

交互设计的方法还有很多，比如卡片分类法、概念图、站点地图（SITE MAP）等，无法一一展开了。有兴趣的同学自行了解哈。

至于交互设计的工具：

1. 纸和笔，脑子和嘴巴——这是开始设计的第一步，通过沟通了解需求，挖掘需求，笔和纸是具像化设计的第一步。
2. Axure——我用它来做线框图、流程图以及详细流程图，虽然它有不尽如人意的地方，但是依然是目前来看最符合交互性价比的工具。
3. OmniGraffle——苹果系统里最好用的画图工具，自从用了它之后，流程图，概念图之类的，基本上就用它。

原文地址：heidixie.blog
作者：Heidixie

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座：每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音（YY频道：156982）分享实战经验。
设计微博：拥有粉丝量55万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：