交互设计：网页设计年代的那些事

这是一次内部分享，新部门的同学们希望我聊聊我过去从事的交互设计，做个了面对入门者等级的PPT，对交互设计从业经历做个简单总结。

一. 什么是交互设计

要谈什么是交互设计，先要了解这几个概念。网页设计年代，大概是从2004年开始热起来了，等到我毕业的2006年，满大街都已经是电脑培训机构，记得当时北大青鸟的百日千才培训就在我每日下班必经的十字路口。网页设计年代重视的是特效，说白了就是特效背后的技术，君不见当时的网页是让人看得眼花缭乱啊，这里bling bling闪闪的，漂浮框乱跳的。然后就是套各种网页设计模版，做出很多复杂的类似于右边这种典型的政府网站出来。

1.美工时代：

网页设计时代，大批的”美工”涌现。显然人们有了更高的追求，光是bling bling的眼花缭乱的动画效果已经看厌了，网页也是需要装饰美化的。虽然网页设计论坛当时很火，但是网页设计师这个头衔仍然是一厢情愿的叫法。大多数时候，仍然是老板和客户嘴里的”美工”。美工时代重视的是：视觉效果。并且，原来对网页设计一窍不通的老板们纷纷成了资深的视觉鉴赏家。美工时代”美工”很痛苦——单纯靠视觉效果去评价作品好坏，太主观，太随意。于是他们通常会做N个版本，反复修改，直至美工崩溃或者老板崩溃。

2.UI年代：

大概是在2005年，我崇拜的网络名人从擅长鼠绘的小非变成了图标达人Rokey也自学了关于UI的若干知识，开始迷恋起PS像素级的奇妙世界。UI=User Interface. 已经将User即用户纳入界面设计考虑的重要要素。但是对于精致、质感的无极限的追求，依然会让人顾此失彼，忘记了从用户的视角去审视一个UI的作品。于是，经常会看到虽然很精致，但是很难用的软件界面。用户看到的部份，无可挑剔。但是实际上，使用的感受并不好。而感受部份，可以从几个角度去阐释：

当他们有兴趣去尝试时，他们知道如何开始吗？当他们开始后，知道如何进行下一步吗？当不想要使用时，能够快速明白如何退出吗?当他们退出后，下次来用，是否需要重新去学习掌握如何操作？每一步操作时，他们心理会感觉到愉悦还是枯燥乏味？

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

3.UED时代：

用户体验制胜我们不缺技术，我们不缺另人震撼的视觉，这些虽然过去是我们孜孜追求的东西，如今已经不足为奇。但是我们缺用户来用，我们缺用户持续来关注，我们缺用户体验。用户体验过去一直在产生影响，但是未能得到足够的重视。2007年，开始关注ucdchina，UED是套方法论，UCD是指导思想——User-centered Design. 不再是BCD-Boss-Centered Design.老板说了算，除非老板能够代表目标客户。这和市场营销学发展的历程有点像，从生产主导到市场主导。WEB2.0后，用户的参与度越来越高，用户从被动的接受者变成了主笔，主编，摄影师，作家……他们是主角，使用中遇到问题，当然不可能靠网站的客服电话或帮助教程搞定，他们需要自助，所以，降低使用门槛，消除使用障碍，吸引他们重复使用，是每个网站致力的方向。从广义来讲，一个网站的任何部门都是在为用户体验服务，从战略层的布局开始，用户体验已经开始。而狭义的用户体验设计，也就是UED部门做的事情，大部分是围绕到结构、框架以及表面层。UED部门的组织架构基本如下，解决用户易用，以及想用的问题。而用户研究是帮我们看清用户特征、洞察及挖掘用户需求，前端是伟大的实现者。文案对于用户体验的重要性经常被忽视，所以，文案撰写在UED团队是很稀缺的资源。目前据我了解，只有支付宝的UED团队有此配置，其他团队大部分是由产品经理担任此职。

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

我们不缺技术，我们不缺另人震撼的视觉，这些虽然过去是我们孜孜追求的东西，如今已经不足为奇。但是我们缺用户来用，我们缺用户持续来关注，我们缺用户体验。用户体验过去一直在产生影响，但是未能得到足够的重视。我突然打了一下你，你肯定会有一定的反应。首先，你的表现会吃惊或者生气，你的吃惊或者生气的程度也会受我下手的轻重和方式影响。我呢，对你的反应会有一定的预期，下手的时候，没有期望你会突然哈哈大笑——这就是人与人之间的交互。人和物也是一样，我按下电视的开关键，我预期电视会打开，并且电视如期望发生运转。若我按下电视的开关键，突然电视成了静音，这就是非期望的交互行为。

二. 为什么需要交互设计？

人和物也是一样，我按下电视的开关键，我预期电视会打开，并且电视如期望发生运转。若我按下电视的开关键，突然电视成了静音，这就是非期望的交互行为。人可以经由训练，改变自己对于行为的反馈，比如，妈妈教育婴儿对于他人的礼物回报以”谢谢”和微笑，不要跟着陌生叔叔走等。如果你送一个小孩子礼物，他却对于大骂，你会觉得这个小子怎么这么没教养。机器、系统没有生命力，则需要被赋予对于各种行为的反馈机制。将用户的期望赋予给它，让它给出合理的反馈行为。然而不幸的是，我们的生活里，没有教养的产品实在太多太多…

1. 发现并解决这些问题

上面的那些交互的问题，有些人根本发现不了。有些人发现了并不知道如何解决嗯。交互设计师需要发现并有一套方法去解决。

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

3.控制成本，降低风险

交互的系统方法，让交互的输出物快速迭代呈现，并且低成本。不需要开发，不需要视觉，就能够将抽象的想法具像呈现原型，方便的且低成本的工作方法，方便项目组进行多种可能性的探索。在一轮轮的评审和讨论中让决策人和参与方根据项目的阶段逐步聚焦。最终输出一个最终版的原型。

4.术业有专攻

当然，产品经理和视觉设计师若有可能多做一些，也可以不需要交互设计师。事实上，大多数创业型的公司，确实是没有交互设计师的。但这不意味着交互设计缺失，有可能是产品经理或者视觉承担了此阶段的工作。但是，产品经理在平衡商业和用户的点上，往往会更多站在老板或者 KPI的角度，而视觉设计师感性大于理性，更加纠结于各种视觉细节，会不自觉在项目前期就引入太多视觉元素，让项目组在讨论中偏离核心方向。总归来说，他们的专攻方向是不一样的。

三. 什么是交互设计

我个人认为交互设计师的工作围绕以上四件事情展开。入门的人，很容易将重点落到第二点：快速迭代呈现上，所以他们会直接问：你们都用什么工具？能给我们培训一下工具吗？其实工具真的不是重点，想法若有，发现白纸和笔都是最好的工具。所以进阶的交互设计师后来会明白这一点，他们会回归到需求本源：这是什么？为什么要做？我们要解决的是什么问题？非要如此解决吗？举个例子，若有需求方说：帮我设计一个花瓶。小A设计师就直接去做花瓶去了。小B多问了几句：多大的花瓶？什么材质的？什么时候要？预算是多少？小C则问：你要花瓶做什么的？是放鲜花还是做室内装饰用的？小A肯定做出了花瓶，但是未必是顾客想要的。小B也做了花瓶，顾客也买单了，已经合格了。但是小C则有可能让顾客惊喜。顾客表面要的是花瓶，但是实际上是在寻求一种解决方案。他要解决的问题有可能是风水问题，有可能是美化家庭，有可能是装一束鲜花……若不了解这个背后，你也许只能给他一个花瓶，而不是其他的更加适合他但是他描述不出来的，甚至没意识到的。在实践中，我曾遇到一个需求，在一个新的频道即将发布前，需要做一个预热页面。这个预热页面比正式的页面提前几天发布。运营同事说需要提前让目标顾客知道一个新的频道要上线了，那么原来的设想就是在这个页面上介绍一下新的频道，以及新频道上线后的精彩活动。

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

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

解决一个问题，满足一个需求，有多种方法。有的属于过度设计。有的属于隔靴搔痒——需要多搔很长时间才能解决问题。所以交互需要有四两拨千金的意识，在探索阶段，不放过一个灵感，多做一些探索去求寻最佳解决方案。在后期则当快刀斩乱麻，当断则断。另外，Patterns,也即”模式”非常重要。是高级交互设计师提升工作效率的非常重要的方面。所谓模式可以认为是行业内的通用的已经得到过验证的交互模型。比如登陆，注册，表单校验，搜索列表，搜索筛选，评价列表……你不需要重头开始，更多的是借鉴改良。如果你多看多收集多思考，当开始工作时，你的脑子里会已经出现了一些成熟的解决方案。这些方案因为已经在应用，即使没有用研测试，也能够减少风险。

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

1. 需求阶段

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

2. 原型阶段

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

此阶段若有必要，也会配合用研进行可用性测试，以便提前发现问题。

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

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

4. 优化阶段

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

》》》软件开发   点击咨询《《《