1. 前言

《用户体验要素-UCD for web》主要是以Web产品作为标准产品示例而开展的一个对用户体验的阐述说明。该书从认识用户体验开始，依次讲解了Web产品中用户体验的各个要素。

笔者对文中的一些产品设计以及元素认识的思考是针对于Web产品这一层面上。故本文的某些观点可能并不适用于其他产品的用户体验提升。

举例，游戏类产品的用户体验和Web类产品的用户体验可能正是恰恰相反的。Web追求更高效的完成某一个行为，“提升效率，减少犯错几率”。但是想想《仙剑奇侠传》，那里面令人抓狂的迷宫设计决不是为了减少犯错几率，而在那些看起来冗长的人物对话，拖沓的故事情节也绝不是为了提升通关的效率。

故针对不同的产品，应该有不同的交互设计理念，以及不同产品定位。

言归正传，接下来还是看看这本书到底告诉我们了一些什么东西。

2. 用户体验为什么如此重要？

功能性产品于用户有广义上的两个意义：

1. 产品的用途；

2. 产品如何与用户发生联系并发挥作用；

用户体验即决定产品如何与用户发生联系并发挥作用的一个重要指标。这一指标恰恰是决定产品成败的关键因素。

一个好的用户体验可以提升一个产品的整体形象，从而留住现有的用户（提升用户忠诚度），吸引更多的用户（口碑传播）。

任何在用户体验上所作的努力，目的都是为了提高效率。这基本上是以两种主要形式体现出来的：“帮助人们提升效率”和“减少人们犯错的几率”。

只有好的用户体验，才会吸引到用户不断登录你的网站。

3. 用户体验的要素

一个Web产品的用户体验要素自下而上分了5个层次。战略层为底层，表现层为最上层。可以想象一个产品就像一颗大树一样。从根到躯干，到枝叶，最后到开花结果。

1. 战略层

产品的经营者想从这个产品得到些什么，用户又想从产品得到些什么。有些战略目标是显而易见的，而有些战略目标并不是很容易说清楚。就像腾讯最早在做免费聊天软件，谁都不知道它想要干什么。战略层关注的内容主要为：用户需求以及网站目标。

2. 范围层(scope)

我偏向于把它理解成为功能层，即你的这个产品都可以干些什么。这个产品有哪些功能。例如“weibo.com”，能发图片，发文字，能互相关注，这就是范围层需要考虑的东西。范围层关注的内容为：产品的功能设计和信息的内容需求（定义内容的详细属性）。

3. 结构层(structure)

结构层比较抽象，主要用于设计用户如何到达某个页面，当完成了这个页面的任务以后，用户又要去什么地方。框架层定义了导航条上各项的排列方式，而结构层则确定了哪些类别应该出现在导航条上。结构层关注的内容：产品的交互设计和信息架构设计。

4. 框架层(skeleton)

网页中的图片，文字，按钮，表格不是胡乱摆放在一起的，而是有一个组织结构，有一个布局设计，能达到这些元素之间的最大效果。例：在我需要看数据的时候有一个表格，而不是文字或者其他的按钮。框架层关注的内容：信息设计、界面设计和导航设计。

5. 表现层(surface)

表现层就用户直接看到的东西，用户看得见摸得到（用鼠标）的东西，像网页上的图片，文字等等。表现层需要关注的内容：视觉设计。

一个好的Web产品绝不是来源于某一个boss的拍脑门，也绝对不是来自抄袭某一个外国网站。一个好的产品应该是经过深思熟虑，从五个层面自下而上的建立起来的。

可以从下图看看如何完成一个Web产品。每一个底层的决定的方案，对会都上一层起到影响的作用，而最终形成一个确定的产品。

在设计产品时需要做好计划。我们常常可能会遇到需求的变更或者根据竞争对手或行业标准去做一些产品上的调整。这样就要求我们对产品的设计要足够灵活。即范围层进行一些调整，不会导致结构层完全无法承受。

举个例子：地瓜在最初的时候的需求是只要能够下载游戏就OK，所以就只针对游戏下载做了开发。后面需求变更，满足不了下载软件的条件时，进行结构上的大调整。这样延误了时间也耗费了人力。如果能在一开始就对整个产品的定义非常明确，在结构上设计的比较灵活，就能在后面的工作中规避很多诸如此类的问题（游戏版本、同一个包名的修改版等等）。

4. 战略层

战略层定义无非就是明确两个问题的答案。

我们要从这个网站得到什么？

我们的用户要从这个网站得到什么？

对第一个问题的回答有几个关键词：“目标”，“品牌”，“利益”，“页面浏览量”，“用户转化率”等等。

对第二个问题的回答也有几个关键词：“用户类型”，“现场调研”，“市场调研”，“用户模型”等等。

首先我们在做一个Web产品的时候，需要明确自己要做一件什么事，需要在脑中有一个比较宏观的构想，当朋友或者伙伴问起你：“嘿，这个东西最终到底是什么样的啊？”你能头头是道的说出所以然来，可能当时的想法会很粗略或者很幼稚，但是必须有一个明确清晰的方向，这样才不会导致在越做越多的功能和需求中迷失自己。最终要明白做这件事，自己到底想要得到的东西。（不是指商业目的）

其次，需要想清楚第二个问题，我们的用户到底想要从这个网站得到什么？用弄清楚这个问题就得先考虑清楚我们的用户是些什么人？是和尚？是道士？是学生？还是白领？这类人有些什么特性？他们为什么会需要我们的产品？他们最终会以什么样得形式留在我们的网站中？可以适当使用一些调研方法去研究这些问题。问卷调查、用户访谈等等。

5. 范围层

设计范围层需要注意的几点：

收集和筛选需求

其次需要收集需求。需求是来自四面八方的，由来自用户的，有来自boss的，有来自自己的，有朋友随口提的。但是无论来自何处的需求，都需要注意以下几点：

1. 不要被自己的思维方式限制住，不要太迷信自己，切不可认为自己就是典型用户，认为自己的需求就是用户的需求。

2. 要去各个渠道，各种方面收集需求。多开展头脑风暴。

3. 从表象挖掘深层需求。

确定需求的优先级

战略目标高于一切。分清需求的特性和战略目标。将特性排除在战略目标之外。有时候可能会突发奇想一个点子“我们做一个提醒用户天气的功能吧！这样用户会觉得很温馨，每天浏览我们的网页，都能看到温馨的天气提示。”在说这句话的时候想一想，我们的产品到底是要干什么用的，如果是旅游产品，提醒用户景点的天气无可厚非，但是如果是一个在线看电影的网站，提醒用户天气好像跟我们的战略目标没有太多相关联之处。

需求设计

1. 用积极解决问题方式的心态进行设计，不论最终这个功能的结果是否能使用户满意，但是这个过程必须是使用户感到满意的。要随时以友好的态度面对任何一个功能上的交互流程。

2. 具体，详细的解释需求。确认开发人员完全能理解设计的意图，不会因为文档或者沟通方面的问题导致产品返工。

3. 避免主观语气。在功能需求描述中切忌出现一些主观描述词语。例如：“弄得美观一些”，“然后就那样弹出提示”等等。

内容需求

只有当我们把内容需求制定得足够明确，知道我们提供给用户的内容都有哪些属性，才会在后面的产品设计过程中得心应手。

我们要确定产品一共有几维的属性？在确定的属性中还有可能增加新的维度吗？这些问题我们都得在设计时候反复考虑。或者使用一个比较灵活的结构承载信息的内容需求。

6. 结构层

设计结构层需要注意的几点：

理解用户的思维方式和工作方式

最好的方法就是从既有的成功的产品中学习用户如何使用产品和思考产品，当你的设计和大家的设计表现形式相同却到达了两个结果，这样的设计就是坏的设计，是会困惑到用户的设计。

关注交互设计

用户会有哪些可能的行为，而这些可能的行为又会带来哪些可能的响应？我们的产品应该如何配合用户的这些行为。当用户点击了一个菜单以后，是应该在点击菜单的附近出现选项，还是在另外页面一个不容易察觉的角落出现选项？这些都是需要我们去细心考虑和学习的东西。

使用概念模型

用户对于“交互组件将怎样工作”的观点称为概念模型。例如你在淘宝上买东西，你会把东西放进购物车中而不是盒子中，不是盆子中，也不是口袋中。因为购物车有很强的概念模型，用户在理解购物车的功能中要比理解盆子或者盒子更加容易得多。尽可能的去降低用户的学习成本，所以要去使用好的概念模型。

错误处理

首先要从设计上规避一些常见的错误选择出现，然后要去积极地解决每一个级别可能会出现的错误，确保更高比例的用户能有积极的体验。对一个Web产品来说最可怕的就是用户在使用该产品的时候有强烈的挫败感。用户很快就能很容易找到另外一个替代品。

合理的信息架构

需要使用灵活的信息架构。一个有效结构的特点就是具备“容纳成长和适应变动”的能力。当有新的需求时，不应该导致重新考虑网站的整体结构。而是在现有的结构中做一些调整就可以满足需求。

结构方法

信息架构的基本单位是节点(node)。节点可以对应产品中的任意的信息片段或者组合，例节点可以是商品的价格属性，也可以是呈现商品的页面。然后节点通过不同的组织方式构成不同的信息架构。以下为几种节点构成的信息架构。

• 层级结构：也成为树状结构，或中心辐射结构。节点和节点之间存在父级/子级的关系。像我们现在的网站“android.d.cn”就是一个标准的层级结构。
• 矩阵结构：允许用户在节点与节点之间沿着两个或更多的维度移动。例如地瓜可能会在以后做的关联游戏推荐，通过两个游戏之间的标签作为节点进行关联的一种结构。
• 自然结构：不会遵循任何一致的模式。节点是逐一被连接起来的。这种结构没有太强的“分类”的概念。现在很少能看到这种结构。
• 线性结构：线性结构经常被见到于Web产品注册流程或者网店商品购买流程之中。

组织原则

组织原则就是我们决定哪些节点要编成一组，哪些节点要保持独立的标准。不同的组织原则将被应用在不同的区域和网站不同的层面。

我们的网站会按照时间或者热度或者下载量对游戏进行组织。这就是我们的组织原则。不同的产品会使用不同的组织原则。微博在个人主页是使用用户发表的信息进行组织，而QQ在个人主页是使用用户关系进行组织。

战略层告诉我们“用户的需求是什么”，范围层告诉我们“什么样的信息将满足用户的需求”，然后我们在结构层就可以使用这些原则进行节点之间的组织。

使用通俗易懂的语言

与用户谈话并且了解他们的沟通方式，是开发出一个让用户感到命名原则自然的最有效方式。

当时在网游门户部做需求的时候，去了解用户最喜欢把链接叫飞机。所以考虑将新功能叫做坐飞机，但是考虑到是否新增用户是否会理解这个语言的含义，所以还是使用比较传统的叫法。

书中还提到了创建控制性词典、类词词典的方法。和如何建立使用元数据。有兴趣的同学可以仔细研读该处。

7. 框架层

在框架层需要非常紧密的将界面设计，导航设计，信息设计三个元素结合起来。要像齿轮一样的咬合，才能搭建出比较完美的框架层。

在实际设计中可能会发现这三者的边界变得模棱两可，但是把它们定义为独立的领域可以帮助我们更准确的评估是否已经找到合适的解决方案。

通过“界面设计”，用户可以接触到在结构层的交互设计中确定的具体功能。

通过“导航设计”，用户可以看到我们网站的信息结构中自由穿行。

通过“信息设计”，用户在网站的信息结构中驻足的时候，他得到是有用的信息，还是一片无用的垃圾？

设计框架层需要注意的点：

尊重用户的习惯；

在设计布局的时候，应该尊重用户的习惯。不能天马行空，让用户在使用你的产品时感到很强的挫败感。应该像电话中数字矩阵的“3*4”布局。让界面的布局和自身保持一致性。

使用合理的比喻方式

尽量让用户少思考就能明白你要传达给用户的意思。例如使用放大镜比喻搜索的意思，用垃圾箱表示删除的意思等等。

界面设计

在一个界面的第一次呈现给用户的时候，仔细考虑每一个选项的默认值，仔细考虑界面中信息的排序方式，用户需要哪些信息。站在用户的角度去思考任务和目标。

还有一种做法就是记住用户的最后一次选择状态。

导航设计

在信息空间中，大多数人是不会有太强的方向感的，所以需要设计导航指引人们当前的位置。就是你的网站需要告诉用户“你现在在哪儿？”，“下一步可以去哪儿？”

信息设计

首先需要站在用户的角度进行思考，想想什么样得信息结构更适合于用户浏览。就像写作文一样，我们的用户是语文老师，老师认为作为就应该是龙头猪肚凤尾，所以我们把作文写成龙头猪肚凤尾就能得高分，而写成猪头凤肚龙尾就是不行的。我们给用户呈现的信息也应该最遵循用户认为正确的结构进行组合。

当时在做地瓜管理列表中呈现给用户的内容时，考虑到用户在管理列表中更希望看到的信息是他的所安装游戏的版本号和大小。所以我们改掉了普通列表中显示星级和评论数的设计，而将用户可能更加关心的信息呈现给用户。

指示标示

这个很容易理解。就是把免费的标成绿色，下载按钮用更加显眼的形状或者颜色进行标注。

线框图

线框图是对页面中所有的组成部分以及它们如何结合到一起的一个露骨的描述。我们常常使用页面原型进行表达。

8. 表现层

最终呈现到用户眼前的东西。

需要一个非常好的VI设计和UI设计。让用户能非常快乐的接受你想传达给他们的信息。（审美观比较差的人就不发表什么意见了。）

9. 后记

其实这本书在手边也放了很久了，前段时间狠下心，用一星期时间边读边写，磕磕绊绊写完了读书笔记。也算对自己学习的一个交代。书中详细的提到了很多实例，说得很有意思，也很有启发性。但是我认为真正好的东西还是需要自己在工作中和生活中积累下来的东西。将积累的东西思考了，变成自己的东西，那才是更重要得财富。