读Jesse James Garrett的《用户体验要素：以用户为中心的产品设计》

在加略特的认知中，产品用户体验分为五个层次，从低到高分别是战略层，范围层、结构层、框架层和表现层。
在每个层次中，产品设计关注的内容和范围是不一样的，每一个层面都是根据它下面的那个层面决定的。所以在产品设计时，我们通常需要从下往上，逐层确定每一层面的目标和内容。

本文为笔者原创，转载请注明出处。

用户体验要素的五个层次

1 战略层

战略层

战略层包含企业的产品目标和用户需求两部分。

企业的产品目标通常包含企业的商业目标、品牌形象展示提升、产品的成功指标（如转化率、活跃、留存等）
用户需求则是要求产品人员必须收集、清洗、整理和分析用户的需求，确立需求的优先级。

战略是产品设计“以用户为中心”的起点，但是这并不意味着你必须在项目开始之前将你的战略完全确定下来。尽管确定战略（产品目标和用户需求）是产品设计的前提，但是想要确定一个完全并且固定不变的战略是非常困难的。事实上，战略是不断演变和进化的。

战略层的目标：明确“我们想要什么”和“我们的用户想要什么”

2 范围层

范围层

范围层需要确定的是 由战略层决定的产品的全部功能需求、内容需求和服务需求。
在范围层，产品人员通常会产出产品版本规划、功能清单和产品需求文档（PRD）。
在产品需求文档中，产品人员通常需要定义功能的规格说明（或者是功能的业务逻辑规则），在撰写产品功能需求时，产品需要注意以下几点
1、乐观&友善
在描述一个系统或者功能时，要描述这个功能要做什么事情去“防止”不好的事情发生（或者可以理解为异常的发生），而不是描述这个系统“不应该”做什么事情。例如

• 不好的需求描述：系统不允许用户购买没有风筝线的风筝
• 好的需求描述：如果用户想购买一个没有风筝线的风筝，系统应该引导用户到风筝线页面。

2、具体&程序语言
尽可能详细的解释清楚状况，这是决定一个功能能否被实现的最佳途径。例如

• 不好的描述：将最受欢迎的视频重点标注
• 好的描述：将上一周播放量最多的视频显示在视频列表的最前面

在例子中，第一个需求属于不清晰的需求。如什么是“最受欢迎”的定义，是点赞数最多、评论最多还是分享次数最多？什么是“重点标注”的定义？模糊的需求定义必然导致程序开发人员无所适从。而第二个需求则要明确的多，用具体的细节定义了功能的目标，定义了我们认为什么是“最受欢迎”，并且描述了关于“重点标注”的机制。
（笔者：在第二个需求中，其实还需要额外定义“播放量”和“视频列表”的概念。例如“播放量”是指一个视频被完整观看的次数，还是至少观看3分钟的次数。视频列表是指默认排序条件下，还是按播放量从高往低排序条件的显示顺序等等）

3 避免主观的描述
功能需求需要避免主观的描述，如“这个网站的风格应该是时尚、大气的”
功能需求必须是可验证的——就是说，它必须是能证明“这个需求有没有被满足”
在上面的例子中，你如何去验证这种被宣称为“时尚、大气”的产品品质？产品人员对时尚的定义，也许和设计师对时尚的定义完全不同，而公司的CEO，网站的用户更有可能对此有完全不同的看法。

这并不是说你不能要求你的网站时尚。只是必须找到某种方式来明确的说出应该要达到的标准：

• 网站的外观应该符合企业的品牌指南文档。
  时尚的概念已经完全从这个需求中消失了。相反的，我们得到了一个清晰的、毫不含糊、已有的参考指南。

4 量化的定义功能
我们可以通过量化方法来定义功能要实现的目标，用量化的标准也能有助于我们知道我们是否满足了需求。
比如，要求系统具有“高并发性能”，我们可以用“要求系统的设计至少能支持1000个用户同时使用”来代替。
如果最终产品的性能达不到1000个并发，我们就知道这个需求没有被满足。

3 结构层

结构层

在定义好用户需求并排列好需求的优先级之后，我们对于最终产品将拥有哪些功能已经有了清晰的认知。然而，现在这些需求还是一个个功能孤岛（尽管在产品人员脑子中，可能已经有一个初步的串联结构），我们需要将这些分散的功能组成一个整体。这就是结构层。

结构层是五个层次中的第三层，也是将我们的关注点从抽象的战略、目标、范围过渡到更能影响最终的用户体验的具体因素。
在这个层次，对功能产品来说需要交互设计，对内容产品来说需要信息架构。事实上，对任何一个产品来说，都包含功能和内容两部分，因此在这个阶段，通常产品人员需要设计 交互设计和信息架构。
1 交互设计
在交互设计中，交互是指用户与系统之间、用户与用户之间、系统与系统之间的交互。在任何一个交互行为中，通常都涉及到两方甚至多方之间的互动。产品人员在交互设计中需要关注和这些用户行为。

2 异常处理
在一个交互中，只会有一种正常的流程，但是却会许多种异常。产品经理在设计产品功能时，除了正常的流程外，更多的精力是要思考对异常的处理（如用户在填写和提交表单时，文本框内容填写错误时，需要考虑各种错误类型和系统的处理逻辑）。
对异常处理的策略主要有以下几种思路

• 阻止异常的发生（如不显示不可用的操作，按钮置灰不可用，无货商品不能购买）
• 设计系统使错误难以发生（如限制用户输入的字符类型，内容长度）
• 在错误发生时，给用户一个正确的建议（如注册邮箱时，当用户输入的邮箱名称已被占用时，系统给出几个可用邮箱名称的建议）
• 自动矫正用户的错误（如用户名不支持字母大小写区分时，系统会自动将大写转成小写。自动矫正错误功能需要慎用！因为自动矫正的内容不一定是用户希望的）
• 给出错误提示（各种错误和异常提示）
• 二次确认（在某些操作中加入用户二次确认功能，减少用户错误操作发生的几率）
• 错误发生后的补救措施（如“撤销”和“反悔”类的功能，常见的有取消订单、微信消息的撤回）

3 信息架构
信息架构通常是整理网站上所有显示的内容，并依据信息之间的关系将他们组织起来，建立起信息之间的关系。
在梳理信息架构时，笔者常用的工具是 Xmind脑图工具，将产品涉及到的所有信息全部按上下级、同级、包含、注释说明等关系类型，将信息组织成信息架构图。以下是笔者做的一个电商平台商家后台中订单模块的信息架构图。

电商平台商家后台中订单模块的信息架构图

4 框架层

框架层

在框架层，我们需要确定详细的界面设计、导航设计和信息设计。
在第三层 结构层中，我们关注的是网站功能的交互逻辑和整体的信息结构，已经确定了需要的界面和界面应该包含的内容和功能。而在第四层框架层中，我们开始关注具体的界面板式。
界面板式是指产品的界面中各个板块、每个板块的排列位置，每个板块中包含的控件、内容，以及这些控件和内容的排列位置。
通常在这个阶段，产品经理需要产出产品原型文档。示例如下：

电商平台 个人中心 收货地址的界面

5 表现层（视觉层）

image.png

在表现层，我们要完成的工作是利用视觉设计（UI设计），给用户传达产品的品牌、调性、美感、功能和内容。
在进行视觉设计时，通常我们会关注颜色。事实上，我们可以利用不同的设计技巧来实现我们的产品目标，在视觉设计中，通常有以下几种方法：

• 对比
  我们可以通过不同的颜色、文字和图标/图像，大小等不同的方式，给页面中的一个元素设计的与众不同
• 一致性
  当一组元素具有相同的层级、重要程度相同时，将视觉元素保持一致的大小尺寸、可以让用户能更快的了解这组元素之间的关系。
• 对齐
  对齐是美的一种表现形式，无论是通过栅格系统或者自定义的规则，整齐是产品视觉表现良好的标准之一。
• 配色
  色彩是向外界传达品牌识别的一个有效的方法。使用色彩的原则是一套统一的配色方案。
  在一套配色方案中，应该能整合其中的色彩，并且能应用到产品的广泛的范围之中。在配色方案中，拥有多种可选择的色彩，可以为我们提供一套能做出高效的、可供设计选择的工具包。
• 字体
  字体是“用设计进行有效传达形象”的一部分。对于互联网产品来说，文本始终是内容呈现的一种重要方式。
  有效的使用字体的原则与其他视觉设计原则一样，不要使用非常相似但又不完全一样的风格，除非是你要传达不同的信息。

笔者随感：重读《用户体验要素》一书，笔者已感觉书中的内容与现在互联网产品设计的现状不完全吻合。此书更多是在理论层面上提出了用户体验的概念，在实际工作中，操作流程和书中描述的并不完全一致。
在国内的实际工作中，书中提到的每一层面的内容已经被拆解分离，用户研究、产品经理、视觉设计、交互设计都已经是独立的岗位设置。即使在产品经理岗中，往往也被分成了用户、后台、中台、数据等多个不同类别的职位，甚至具体到某个模块如支付、用户中心产品经理，产品经理现在往往不能看到产品的全貌，这是精细化分工的结果，也是产品经理的无奈吧。