对用户体验最有用的诠释，重读《用户体验要素》

最近重读了《用户体验要素——以用户体验为中心的设计》。此书不愧是AJAX之父Jesse James Garrett的经典之作。整个知识结构简洁优雅，让我又有了新的感悟。难怪有知名出版媒体人称“这本书，始终是对于用户体验最有用的诠释”。本文将书中要点分享给大家。

1 用户体验是什么？

用户体验是什么呢？我们不妨先回忆下自己生活中不好的产品使用体验。比如下面这3种使用场景。

• 电梯楼层按钮。一下子找不到高楼层在哪里。因为低楼层的位置放得高，高楼层的位置放得低，违反了人的直觉；
• 洗脸盆/浴缸塞子。到底是按中间弹出，还是按边缘反转，还是抠出来，真的看不出来。（有次在酒店各种尝试，把我的指甲盖都牺牲了一小半）
• 电动汽车中控台。由于缺少触觉反馈，必须用眼睛看着屏幕才能调音量和温度，在行驶过程中不安全。

可以看到用户体验其实体现在我们生活中的方方面面。用户体验并不是指一件产品本身是如何工作的，它是指“产品如何与外界发生联系并发挥作用”，也就是人们如何“接触”和“使用。 从“产品设计”到“用户体验设计”，不再只是功能和外观。任何在用户体验上所做的努力，基本上是以两种主要的形式体现出来：

• “帮助人们工作得更快”。例如许多App在新用户注册时，会使用QQ、微信、微博一键登录，让用户免去填写昵称、账号密码的烦恼。
• “减少他们犯错的几率”。还是以注册为例，账号一般只能输入字母、数字、下划线，在用户输入前需要给出充分的提示，在用户输入时需要对中文等非法字符需要给出红色警告。

2 用户体验的五个层级

用户体验要素分为五个层面，分别是战略层、范围层、结构层、框架层、表现层，依次从从抽象到具体，从概念到完成。

在进行用户体验设计时，我们应该从下到上进行思考。如果先从非常具体的表现层开始，可能做了很多却因为违背底层设计，出现需要全部推倒重来的情况。在进行每个层次的思考时，不需要一个层次100%完成再进行更具体层次，而应该是完成了80%就开始更具体层次。随着具体层次工作的开展，也会帮助抽象层次的丰满。

2.1 战略层

明确产品目标：我们要通过这个产品得到什么？

• 商业目标
• 品牌识别
• 成功标准

明确用户需求：用户要通过我们这个产品得到什么？

用户细分

可以依据人口统计学（demographic）来划分，例如性别、年龄、教育水平、婚姻状况、收入等；也要考虑消费心理档案（psychographic profile），因为按人口统计特征划分出来的同一个用户群之中，其世界观和感兴趣的事情往往并不同。

例如王诗沐在《幕后产品》一书中提到，网易云音乐的用户细分为：

• 发烧友
• 影视动漫爱好者
• 大众用户

那么怎么根据上述用户群给用户推荐音乐呢？这个划分相信大家可以猜到相当一部分推荐策略了，欢迎留言讨论。

可用性和用户研究

用户研究的方法包括问卷调查、用户访谈、焦点小组等，可以收集用户的普遍观点和感知；可用性研究的方法包括用户测试、现场调查等，可以理解具体的用户行为以及用户在和产品交互的表现。

创建用户角色（用户画像）

在用户体验设计的过程中，用户角色是从用户研究中提取出的、可成为样例的虚构人物。它可以让用户变得更加真实，帮助你确保在整个产品设计过程期间把用户始终放在心里。例如在《用体验地图解析澳门之旅》 中，我为澳门旅游业的用户群体创建了2个用户角色。

2.2 范围层

在范围层，我们从讨论战略层面的抽象问题——“我们为什么要开发这个产品？”——转而面对一个新问题：“我们要开发的是什么？”

一般来说，需求类型可以分为三种。

• 用户直接讲述的清晰直接的需求。例如用户说App启动太慢了，经常要十几秒；
• 使用产品遇到困难后想出的缓解方案。例如用户说我期望能有个报表导出功能，但其实是产品提供的筛选功能不够，用户期望能导出后自己在Excel中处理数据；
• 人们不知道是否需要的新特性。例如微信扫描二维码功能，在推出之前可能很少有用户想到它真的能“万物皆可扫”。这是产品经理在移动互联网场景下思考出来的特性。

功能规格说明的要点包括：

• 乐观 Bad：这个系统不允许用户购买没有风筝线的风筝。 Good：如果用户想购买一个没有线的风筝的话，系统应该引导用户到风筝线的页面。
• 具体 Bad：最受欢迎的视频要重点关注 Good：上一周被播放最多的视频要显示在列表的最前端
• 避免主观的语气 Bad：这个网站的风格应该是时尚的、闪耀的 Good：网站的外观应该符合企业的品牌指南文档。文档中规定了Logo、字体、字号、颜色、布局等使用规范。

2.3 结构层

在定义好需求并排列好优先级别之后，我们对于产品将会包括什么特性已经有了清晰的图像。我们需要在这些分散的需求之上，为产品创建一个概念结构。

结构层分为交互设计和信息架构，它们都强调一个重点：确定各个将要呈现给用户的元素的“模式”和“顺序”。交互设计关注于将影响用户执行和完成任务的元素。信息架构则关注如何将信息表达给用户的元素。

交互设计关注于描述“可能的用户行为”，同时定义“系统如何配合与响应”这些用户行为。典型的例子是错误处理，一般有2种方法：

• 第一种也是最好的办法，就是将系统设计成不可能犯错的那种。比如自动挡汽车只有P档才能启动。
• 第二种就是使错误难以发生。比如Word将用户输入的错误单词自动改正。

信息架构关注的就是呈现给用户的信息是否合理并具有意义。

结构化内容包括2种方法，可以相互配合使用：

• 从上到下（从战略层所考虑的内容，即根据产品目标与用户需求直接进行结构设计。该方法有可能导致内容的重要细节被忽略。）
• 从下到上（根据对内容和功能需求的分析，逐步归纳出结构设计。该方法有可能过于精确地反映了现有的内容，因此不能灵活地容纳未来内容的变更或增加。）

具体结构有4种：

• 层级结构（也称为树状结构或中心辐射结构，比如蓝鲸桌面下的Paas，比如蓝盾DevOps平台下的服务）
• 矩阵结构（比如电商网站，默认最好不要超过3个维度）
• 自然结构（比如游戏）
• 线性结构（比如教学资料、景区、博物馆等）

2.4 框架层

在框架层，我们需要更进一步地提炼这些结构，确定很详细的界面外观、导航和信息设计，让晦涩的结构变得更加实在。

界面设计：提供给用户做某些事的能力

• 组织好用户最常采用的行为，同时让界面元素用最容易的方式获取和使用

导航设计：提供给用户去某个地方的能力

• 全局导航（覆盖整个网站的通路）
• 局部导航（父级、兄弟级、子集的通路）
• 辅助导航（比如KM的相关推荐）
• 上下文导航（比如读书软件的注释链接）
• 友好导航/网站地图/索引表等

信息设计：传达想法给用户

习惯和比喻是框架层绕不开的两个重要概念。

比喻是指模仿现实世界的某个物体来设计界面，一般来说是不提倡的。比如一个电话的小图片表示什么？是打电话，还是检查语音信箱，或者是交电话费用呢？记得抑制你在产品四周建立起比喻的冲动。

习惯是我们与这个世界交互的各种基础。例如开头说到的电梯按钮，就是没有遵循低楼层在下高楼层在上的用户认知习惯，导致用户一开始找不到楼层。因此，我们的产品设计一般都应该遵循用户习惯和生活常识，例如红色危险绿色安全、出行靠左、电话按键总是4行3列等。

关注习惯有个有趣的例子。为什么天安门广场的东侧是中国国家博物馆，西侧是人民大会堂呢？其实这个也是遵循了古制（古人的习惯）的左祖右社。在故宫，正好东边是太庙，用于供奉祖先，西边是社稷坛，用于祭祀土地神和五谷神。两者的作用和方位与目前国家博物馆和大会堂是一一对应的。

2.5 表现层

在表现层，我们把注意力转移到产品用户会首先注意到的地方：感知设计。这里，内容、功能和美学汇聚到一起来产生一个最终的设计，完成其他四个层面的所有目标，并同时满足用户的感官感受。

具体包括：对比和内部一致性、内部与外部一致性、配色方案和排版等。

比如下面这个超市促销海报。除了配色ok，无论是排版、还是一致性，都非常让人抓狂。

3 总结

这本书在2001年就推出英文版第一版，书里的概念在互联网界广为流传。可以看到互联网公司现有的很多岗位职责都是可以和书中的五个层次对应起来的。例如视觉设计师对应表现层，交互设计师对应框架层，产品经理对应战略层、范围层、结构层。

用户体验设计和开发是一场马拉松而不是短跑。大家总是在工作到某个阶段时，才后悔没有提前关注战略、范围和结构。经过深思熟虑的设计决策，可能会在短期内花费一定的时间，但是它们将在一个更长时期中节省更多时间。

我自己重读的最大感受是，要多系统思考。一个需求不应该简单地归入表现层、框架层、结构层，而应该从范围层，甚至战略层去思考。另外，战略层的更新也需要多关注。随着产品的发展从增长期进入平台期后，用户反馈有价值的点，可以用来更新我们的战略层，有可能给产品带来一片新天地。

更多内容欢迎关注我的微信公众号>>