交互设计师该如何做好交互设计

前不久和一些朋友们聊天，觉得开发、PD和UED是一个很有趣的怪圈，通常而言：开发看不起PD，因为PD除了有想法，写点文档，看起来啥都不会，而通常开发们自己就很有想法；PD看不起UED，因为他们通常会觉得UED太事儿了，事儿太多，考虑得太细，他们根本就不明白这个东西对公司到底有多么重要……。

除了商业意识没有跟得上外，UED也会面临其他的瓶颈，如价值量化和说服力问题、技术发展及眼界问题(像我，一段时间不在交互圈里混，一旦失去警惕，就会发现技术已经日新月异，目前移动客户端的交互、响应式设计已经把我抛到后面了)，如果作为交互不持续学习及更新，很快你会发现你能够想出来的解决方案，技术师们早就知道了，他们甚至比你更能够提供更好的解决方案。

此刻，回想自己相继写了一些交互设计的文章，至今已经有两年了，期间有不少新的想法伴随着我的工作、交流涌现出来，加上几周前，在新的团队又进行了一次分享，颇有点心得，所以，就借助马海祥博客的平台进行一些分享吧。

一、什么是交互设计？

要想了解什么是交互设计？除了要明白交互设计的概念之外（具体可查看马海祥博客《交互设计是什么》的相关介绍），我们还要了解以下这几个概念：

1、网页设计年代

大概是从2004年开始热起来了，等到的2009年，满大街都已经是电脑培训机构，记得当时北大青鸟的培训就在我每日下班必经的十字路口。

网页设计年代重视的是特效，说白了就是特效背后的技术，君不见当时的网页是让人看得眼花缭乱啊，漂浮框乱跳的，然后就是套各种网页设计模版，做出很多复杂的类似于右边这种典型的政府网站出来。

2、美工时代

网页设计时代，大批的“美工”涌现。显然人们有了更高的追求，光是眼花缭乱的动画效果已经看厌了，网页也是需要装饰美化的，虽然网页设计当时很火，但是网页设计师这个头衔仍然是一厢情愿的叫法，大多数时候，仍然是老板和客户嘴里的“美工”。

美工时代重视的是：视觉效果，并且原来对网页设计一窍不通的老板们纷纷成了资深的视觉鉴赏家，美工时代“美工”很痛苦——单纯靠视觉效果去评价作品好坏，太主观，太随意，于是他们通常会做N个版本，反复修改，直至美工崩溃或者老板崩溃。

3、UI年代

随着时代的发展，我们迈入了伟大的UI年代（UI=User Interface），已经将User即用户纳入界面设计考虑的重要要素，但是对于精致、质感的无极限的追求，依然会让人顾此失彼，忘记了从用户的视角去审视一个UI的作品，于是，经常会看到虽然很精致，但是很难用的软件界面。

用户看到的部份，无可挑剔，但是实际上，使用的感受并不好，而感受部份，可以从几个角度去阐释：

● 他们知道不知道这个是什么东西？他们感觉到迷惑吗？

● 他们是否清楚能够通过此物做什么？

● 是否清楚如何做到？

● 当他们有兴趣去尝试时，他们知道如何开始吗？

● 当他们开始后，知道如何进行下一步吗？

● 当不想要使用时，能够快速明白如何退出吗？

● 当他们退出后，下次来用，是否需要重新去学习掌握如何操作？

● 每一步操作时，他们心理会感觉到愉悦还是枯燥乏味？

当然，我们崇尚软件操作过程中的效率，但是若用户感觉到愉悦，也许就不会觉得效率太低，其实，效率是个相对的说法。归根结底，这就是用户体验。

4、UED时代——用户体验制胜

我们不缺技术，我们不缺令人震撼的视觉，这些虽然过去是我们孜孜追求的东西，如今已经不足为奇，但是我们缺用户来用，我们缺用户持续来关注，我们缺用户体验，用户体验过去一直在产生影响，但是未能得到足够的重视。

2007年，开始关注UED方法论，UCD是指导思想——User-centered Design，不再是BCD-Boss-Centered Design，老板说了算，除非老板能够代表目标客户，这和市场营销学发展的历程有点像，从生产主导到市场主导。

WEB2.0后，用户的参与度越来越高，用户从被动的接受者变成了主笔，主编，摄影师，作家……，他们是主角，使用中遇到问题，当然不可能靠网站的客服电话或帮助教程搞定，他们需要自助，所以降低使用门槛，消除使用障碍，吸引他们重复使用，是每个网站致力的方向。

从广义来讲，一个网站的任何部门都是在为用户体验服务，从战略层的布局开始，用户体验已经开始；而狭义的用户体验设计，也就是UED部门做的事情，大部分是围绕到结构、框架以及表面层。

UED部门的组织架构基本如下，解决用户易用(交互、文案)，以及想用(视觉，交互)的问题，而用户研究是帮我们看清用户特征、洞察及挖掘用户需求，前端是伟大的实现者。

文案对于用户体验的重要性经常被忽视，所以，文案撰写在UED团队是很稀缺的资源，目前据马海祥了解，只有支付宝的UED团队有此配置，其他团队大部分是由产品经理担任此职。

那么，交互设计到底是什么呢？

比如：我突然打了一下你，你肯定会有一定的反应，首先，你的表现会吃惊或者生气，你的吃惊或者生气的程度也会受我下手的轻重和方式影响。

我呢，对你的反应会有一定的预期，下手的时候，没有期望你会突然哈哈大笑——这就是人与人之间的交互。

人和物也是一样，我按下电视的开关键，我预期电视会打开，并且电视如期望发生运转，若我按下电视的开关键，突然电视成了静音，这就是非期望的交互行为。

二、交互设计的一些术语

面向对交互比较陌生的团队进行分享，少不得再介绍下那些让人云里雾里的术语，这次，马海祥为这些术语做一个关系图：

从下至上是各种术语的演变史，中间代表“做的事情”，左边代表做这件事情的“人”，右边代表做这件事情需要的“指导思想”。

在关注技术和功能的时候——还记得满屏在闪烁的各种网页吗？网页设计师比较畅销和通用，后来，当焦点是要外观时，涌现了大量的“美工”，这时，没有UCD指导思想，更多的是TCD(以技术为中心)，或者BCD(猜是什么？哈哈，是以老板为中心)。

UI年代引入User概念，也催生了大量的UI设计师和各种UI论坛，此时的指导思想正在由BCD向UCD转化，最后有了UCD指导思想，也诞生了UCD指导思想下的一系列组织、工作方法和分工定位（具体可查看马海祥博客《新型设计师的分工定位》的相关介绍）。

让我们感谢促成这一切的国外先驱们和国内先驱们吧！

三、交互设计师的重要交付物

在过去的经验里，马海祥觉得有三个交付物最为常用。

1、行为路径

有时叫做页面流程图(Page Flow)，关注任务流和页面流设计，让用户流转顺利，提升任务完成效率。

2、信息架构

有时叫做站点地图(Site Map)，关注内容结构、导航系统设计，让用户方便找到所需信息，一般来讲，内容为主的网站比较重视信息架构设计。

3、单页面交互设计

一般用线框图、原型图来称呼这部分交付物，但有时也不局限于什么形式，关注单页面信息布局、内容优先级及交互细节。

四、为什么需要交互设计？

人可以经由训练，改变自己对于行为的反馈，比如，妈妈教育婴儿对于他人的礼物回报以“谢谢”和微笑，不要跟着陌生叔叔走等，如果你送一个小孩子礼物，他却对于大骂，你会觉得这个小子怎么这么没教养。

机器、系统没有生命力，则需要被赋予对于各种行为的反馈机制，将用户的期望赋予给它，让它给出合理的反馈行为。

然而不幸的是，我们的生活里，没有教养的产品实在太多太多……。

上图左侧是一个杯子，我让现场的同学猜这个杯子的成本价，答案集中在10元左右，但是不幸的是，我为这个杯子花费了不下600元，原因正在于不良交互，杯子的把手处仅容两个手指塞入，当倒入热茶后，我端起此杯，把手上部是光滑无比的玻璃，而手指又被杯壁烫了一下，结果杯子倾斜，将热茶倒入了笔记本电脑键盘里——修键盘花费了580元。

考虑到这里，设计杯子的设计师可以考虑把把手做成磨砂玻璃，增加卖点。

上图是公司内部的门，基本上去个卫生间都要从此门经过，那么基本上每个员工每天进出此门不下6次吧，在场的同学声称每次都很紧张——为什么？怕被撞啊，你看不到对面有没有人，怕推门撞别人，自己也担心被人撞。所以，途径此门，瞳孔会不会由于紧张放大呢？还有此门推也可拉也可，上面的“拉”字其实形同虚设。

每天反复扇动，座位靠近此门的同学们夏天感觉到热，冬天感觉到冷，严重不低碳环保，原因也是不良交互设计。

改进此门，可以设置透明的玻璃窗，或者用自动开启的推拉门代替。

上面是一个电梯事件，要知道电梯是个最讲究习惯统一的地方，你要经常在不同的大楼用不同的电梯，若A电梯用这种按键，B电梯用那种按键，基本上你都要重新适应，然而这个适应你又无法持续，因为你到了C电梯，仍然要重新学习，所以电梯的按键设计，基本上要有行业标准的。

然而创业大厦就是特立独行的，大多数电梯将开门、关门的按键放到了数字键的上部，而创业大厦则是将报警按键放到此处，开门关门则放到了数字键的最下方。

我到阿里巴巴上班(当时公司就在创业大厦)，觉得这里的同事很不友好，好几次晚到一步，电梯门即将合上，我大步向前，边跑边叫等一下，里面的人面带笑容，靠门的MM伸手一按键，电梯门无情地关上了。

这里的人都太不友好了——我一直怀抱如此恶念，直到有一次我上了电梯，电梯门即将关闭时，有几个迟到的同事飞奔过来，我二话不说，直接按开门键——叮呤呤，居然响起了铃声，有个声音问：什么事？我定睛一看，原来本以为是开门键的地方，是个报警的按键，原来如此！

上图是今年去千岛湖outting拍的酒店里的门以及开关，酒店的门打开貌似是在教我们做肢体协调操，需要两个手同时按指示操作才能打开，试问门的安全性在于防止外面的人破门而入，不是为了防止屋内的人出门，不晓得这个过度设计有何作用，总之，妈妈不再敢把小孩子留在房间自己不带房卡出门，因为一个8岁以下的孩子，基本上不会开此门。

右下角是大部份酒店都有的变态的灯，你不知道什么状态是开，什么状态是关，当然，由于酒店系统，某处灯光是由多个按键控制，无法用统一的交互解决，但是这是系统的问题，不是用户的问题。

还有，网页上的无教养的表现更多了，某日我看到一封邮件，我大概一瞄，我就看到几个关键词：免费，即可获得，10元，立即领取(我和大部分用户一样，不会逐字去阅读什么什么介绍，基本上都是在抓关键词，要提高效率，请精简网页文案，强调文案重点)。

但是，当我点击立即领取之后，直接给我一个添堵的页面：我没有资格。

我不知道是不是不登陆造成的，当时的设计应该考虑各种风险给出周全的解决方案。

从数据上去看，也许会看到活动的转化率很低很低，也许活动方会认为是投放人群不对，页面不够吸引人，或者10元的力度不够等等，但是只要认真去找问题，也许会发现不良交互产生了严重影响。

当然，我还搞不明白，像UIGARDEN这种盈利模式单一急需用户注册的网站为何会在注册页面和用户过不去。

你链接不上GMAIL的服务器是你的不对，别说用户的EMAIL是无效的好不？

再看麦考林糟糕的经历，我不知道具体的数据如何，但是麦考林肯定有大量非商品质量问题，也非服务问题造成的退货，也是由于糟糕的交互设计引起的。

我填写了收货地址后，上图是让我指定送货方式，麦考林给出了两个方式可选，我毫不犹豫选择了邮局方式——因为EMS太贵了嘛，谁知道这邮局还真的是邮局——5天后，我收到前台给我签收的一个包裹单，让我去邮局凭借身份证领取包裹，要知道，快递送货上门时代，我怎么可能去邮局领包裹！

打电话给麦网，客服小姐说，因为我的收货地址不支持快递，所以只能让我选邮局，我这才知道是怎么回事，原来麦网为了解决用户选的配送方式不可用的问题(淘宝也经常存在这个问题)，故作聪明使用了邮编去匹配配送方式的方法，我填写的邮编他们系统解读不支持快递，因此下个页面就不给我这个选项。

邮编在今天已经是用户认为很不重要的字段，他们会不确认就随便写，另外，麦网要避免这个问题，也可以让顾客明白有哪些配送方式不可用且告诉原因而不是简单隐藏了事。

所以，我们需要交互设计去做什么呢？

1、发现并解决这些问题

上面的那些交互的问题，有些人根本发现不了，有些人发现了并不知道如何解决嗯。

但马海祥觉得交互设计师需要发现并有一套方法去解决。

2、平衡——引入用户视角和方法

用户、UCD、商业和技术的分析搭配使用，还是那个老图，如下图所示：

3、控制成本，降低风险

交互的系统方法，让交互的输出物快速迭代呈现，并且低成本，不需要开发，不需要视觉，就能够将抽象的想法具像呈现原型，方便的且低成本的工作方法，方便项目组进行多种可能性的探索。

在一轮轮的评审和讨论中让决策人和参与方根据项目的阶段逐步聚焦，最终输出一个最终版的原型。

4、术业有专攻

当然，产品经理和视觉设计师若有可能多做一些，也可以不需要交互设计师，事实上，大多数创业型的公司，确实是没有交互设计师的，但这不意味着交互设计缺失，有可能是产品经理或者视觉承担了此阶段的工作。

但是，产品经理在平衡商业和用户的点上，往往会更多站在老板或者KPI的角度，而视觉设计师感性大于理性，更加纠结于各种视觉细节，会不自觉在项目前期就引入太多视觉元素，让项目组在讨论中偏离核心方向（具体可查看马海祥博客《产品经理该如何看待产品需求》的相关介绍）。

总归来说，他们的专攻方向是不一样的。

五、交互设计师的工作

我个人认为交互设计师的工作围绕以上四件事情展开，入门的人，很容易将重点落到第二点：快速迭代呈现上，所以他们会直接问：你们都用什么工具？能给我们培训一下工具吗？

其实工具真的不是重点，想法若有，发现白纸和笔都是最好的工具，所以进阶的交互设计师后来会明白这一点，他们会回归到需求本源：这是什么？为什么要做？我们要解决的是什么问题？非要如此解决吗？

举个例子，若有需求方说：帮我设计一个花瓶。小A设计师就直接去做花瓶去了；小B多问了几句：多大的花瓶？什么材质的？什么时候要？预算是多少？小C则问：你要花瓶做什么的？是放鲜花还是做室内装饰用的？

小A肯定做出了花瓶，但是未必是顾客想要的；小B也做了花瓶，顾客也买单了，已经合格了；但是小C则有可能让顾客惊喜，顾客表面要的是花瓶，但是实际上是在寻求一种解决方案，他要解决的问题有可能是风水问题，有可能是美化家庭，有可能是装一束鲜花……若不了解这个背后，你也许只能给他一个花瓶，而不是其他的更加适合他但是他描述不出来的，甚至没意识到的。

在实践中，我曾遇到一个需求，在一个新的频道即将发布前，需要做一个预热页面，这个预热页面比正式的页面提前几天发布，运营同事说需要提前让目标顾客知道一个新的频道要上线了，那么原来的设想就是在这个页面上介绍一下新的频道，以及新频道上线后的精彩活动。

追问：你的目标是让这些人知道有这件事情，还是让他们知道有这件事情并且在频道发布后回访呢？需求是后者。那么一个简单的介绍页面只能达到前者的目标，这群人知道这件事情，但是一周后就会淡忘这件事情，这群人绝大多数不会成为正式频道发布后造访的那拨人，那为何还提前预热？要达成后者的目标，我们则需要放钩子，比如在预热期间让用户抢积分，免费送积分，折扣券等，并且限定了积分或者折扣券只在正式发布那天有效等。

数据可以看出一些需求，但是数据是个有意思的武器，武器可以让用户的行为显像化直观化，但是你依然不了解这些数据的背后有什么样的顾客行为，比如，数据显示某购物网站主流用户也许是集中在25岁到29岁，这是个事实，那么我们的产品有可能会认为就是要满足这类顾客的需求，但是有可能是我们在设计上太偏重这个阶段的用户群，让其他用户更难去用我们的产品。

另外，交互要始终平衡的除了商业与用户、技术，就是ROI，也即投入产出比。

解决一个问题，满足一个需求，有多种方法，有的属于过度设计，有的属于隔靴搔痒——需要多搔很长时间才能解决问题，所以交互需要有四两拨千金的意识，在探索阶段，不放过一个灵感，多做一些探索去求寻最佳解决方案，在后期则当快刀斩乱麻，当断则断。

在整个项目流程中，交互设计则在四个阶段有不同程度的参与，并且这几个阶段并不是严格的串行，而是并行中迭代的。

1、需求阶段

参与讨论，了解并挖掘需求，进行用户需求分析(也会与BI部门以及用研配合，走访用户，做用户调研等)，任务分析，提供网站架构图(site map), 网页流程图(page flow)等，协助产品经理细化需求，从BRD(商业需求文档)到PRD(产品需求文档)。

2、原型阶段

同步PRD进程，输出各阶段所需的产品原型，也即线框图(Wireframe)，探索满足需求的各种解决方案(包括任务流以及单页面交互)，并组织评审和讨论会，在评审和讨论后，输出一个确认版的线框图以及交互说明文档。

此阶段若有必要，也会配合用研进行可用性测试，以便提前发现问题（具体可查看马海祥博客《如何将需求还原成情景变成可用性设计》的相关介绍）。

3、视觉-前端以及开发阶段

演变成为UED内部项目经理，对UED整体时间进度负责，讲解需求，答疑，验收视觉以及前端、开发成果。根据他们的反馈，改进交互设计，并与产品经理协调。

4、优化阶段

观测核心数据变化，进行可用性测试和用户调研，以便优化下个版本。

六、交互设计的核心竞争力

有人又问我，你觉得做好交互需要哪些素质和技能？我想了一下，似乎可以用四个关键词来表达。

表现在外，你可能会一些工具和方法，如AXURE，如卡片分类，如可用性测试，如角色模型建设……或者精通各种理论，但是在这些之下，我们需要在四个方面有意识提升自己。

1、同理心

以用户为中心，站在用户立场上思考，喊起来很容易但是做起来很难，有时候我们不得不就站在自己的立场上，同理心是比较强大的武器，让你任何时侯够能够设身处地去考虑用户的感受、习惯和可能会犯的错误。

要训练同理心，从你发出的每一封邮件开始，写作之时发送之前，模拟一下你的读者是怎么阅读这封邮件的？你打算让他们先看哪里？注意到哪里？做什么动作？给你什么回应，然后模拟下他们看到邮件后会不会如你所愿，代替用户去思考是很难的，我们自然无法做到完全像他们一样，但是至少我们得有这个意识。

不得不说，这点上，女人们占据点优势。

2、好奇心

喜欢尝鲜吗？喜欢第一时间升级吗？喜欢探索新鲜好玩的交互吗？无疑的，交互是提供各种需求的解决方案，你面对的需求可能很变态，但是大部分需求或许都是已有成熟的解决方案的，你很多时候做的就是迅速想起来一些模版，然后在此基础上做更多优化，而不是任何时候都重新设计轮子，脑子里存储尽可能多的模版，是需要长期积累但是终会见效的工作，这不是不让你创新，而是更高效率的创新。

不得不说，这点上，男人们占据点优势。

3、系统化

很多职业和工种都需要系统化思考，交互尤其需要，交互的工作训练我几年，以至于带着交互的背景去做别的任何工种，会让我感觉更加得心应手。

一般看交互设计师看两点，一个是解决复杂问题的能力，能够在各种限制条件下给出优雅的解决方案；一个是上下协作沟通能力（具体可查看马海祥博客《专业的交互设计师要学些什么》的相关介绍）。

那么，系统化是什么呢？在马海祥看来，整体而非局部，相关而非孤立——能够看到需求的相关性需求，有可能把需求分析没——不需要做，也有可能把需求分析得很大——发现了很多相关性的需求，从而一起解决，而不是头疼医头，还是那句话：every thing is connected。

本质而非表面——看到需求背后的需求，多问几个为什么，为要这个？没有的话你们怎么做？有了之后呢？拿他去做什么？

交互设计师在进入设计和细节之前，一定要给自己留点时间去想想这个事情，“让我想一下”，想一下商业需求的背后，想一下竞争对手做了啥，多想几个解决方案……。

4、说服力

很悲剧的就是，很多时候无法用数据去量化交互价值，数字虽然会骗人，但是我们需要它，它客观，毋庸置疑，看似公正，很难想出别的材料去取代数字，但是交互的价值就是这样，你有时真的是会找不到一个不受其他因素干扰的数据指标去证明你做对了(但是，如果别人想找一个指标证明你做错了往往又很容易……唉)，同一个指标会受到大量其他因素干扰，同期发布的功能，市场的促销活动，客服的工作……。

曾经我改了很难改动的首页一角，观测转化率数据，发现上升了几个百分点，喜报邮件还没有来得及发，第二天却又发现下跌了……然后几天后又上升了……是好是坏？不知道，如果要定性调研，问几个人，都反馈好的，但是要定量数据？那要看我选取的是上升的时间段还是下降的时间段了。

但是交互设计师必须要有说服力，你必须要让PD或者其他资源投入方认可你的方案，尤其是改善型的需求，或者是需要投入很多资源的需求。

图形化、专业交付物、讲故事都似乎是经过验证的有效手段，所以我有时会很早就让需求方、其他人一起参与，看似最后的方案是大家一起得到的，反正达到目的就可以了。

马海祥博客点评：

交互不是岗位而是技能，这是我的观点，交互若往前走，也可以做产品设计师(既做PD也做设计)，也可以做PD(只做PD，不做设计)。

我的经验证明，一边写PRD，一边画原型，绝对效率比写好PRD交给别人去做原型或者一边和别人讨论PK一边等一边写PRD效率要高太多，走的过程自然有磨合，有不适应，也有更多要学习的东西，但是也绝对有新的体验和上升空间。

本文发布于马海祥博客文章，如想转载，请注明原文网址摘自于http://www.mahaixiang.cn/jhsj/1441.html，注明出处；否则，禁止转载；谢谢配合！