最近在产品工作的实践中发现自己对于用户体验五要素的理解又开始变得模糊了，于是又重新拿出这本书回顾和研究。重新研读与初次读的感受明显不一样，第一次读这本书的时候，似是一个如饥似渴的婴儿疯狂吸允母乳的汁水一下，不经品鉴就快速阅完了，而且觉得自己收获了很多，非常之满足。而这次再看这本书时，会带着最近经历过的实践场景去过滤书中的每一行每一字，也收获了新的理解。

在学习之余，同时也会以系列文章的方式输出和记录。本篇先从用户体验五要素的基本概念，以及五要素之间的关系讲起，后续会针对每一层进行深入分析和输出。

产品设计的五个层级

一个软件产品要想在面市后，被市场评价有良好的用户体验，最基本要经历五个层次的设计和思考。分别是战略层、范围层、架构层、框架层、表现层。产品诞生的过程，是从战略层至表现层逐级设计和规划，而用户在使用产品时，却是从表现层至战略层去逐渐了解和认知的。为了便于理解，本文以石墨文档这个产品进行举例，具体的事物描述会让我们在理解抽象概念时更有体感。

01 表现层｜Surface

表现层的设计任务，是通过形状、大小、颜色、间距构成界面的所有元素，这些元素可以让首次接触的用户明白这个东西是什么，可以用来做什么，现在是什么情况，做了某个操作之后又将会发生什么。

表现层面向用户的本能层和理解力而设计，所有的设计元素可感知、可预知。

比如，可以点击的按钮是红色，不可点击的按钮是灰色。剪头向下表示下面有更多东西可以浏览，而一个横幅截止线则代表当前已经是所有的内容。以下石墨文档的图标依次表示加粗、倾斜、底部横线、文字中间删除线、字体换颜色、马克笔涂底纹色等含义，图以表意。

02 框架层｜Skeleton

框架层的设计任务，是通过合理的分类使得这些元素被安放在最恰当的位置上，良好的页面布局可以引导用户进行正确的交互操作。让用户首次接触界面时，就知道应该先看哪里，再看哪里，应该在界面的什么位置找到期望的设计元素。

框架层面向用户的理解力和记忆力而设计，页面的布局结构可以让用户知道在界面某位置一定可以找到自己想要的，框架布局可感知，可预知。

比如，石墨文档的顶部功能栏共分为三层，最顶部第一层是对多个文档的操作，比如新增一个文档，关闭一个文档，设置文档的打开和存储方式等；第二层是对当前文档的操作，分享当前文档，邀请他人与我一同协作本文档，演示当前文档等；第三层是对当前文档的内容进行操作，编辑文字、插入图片表格、添加标记评论等。这三层的关系是逐级而上的。

03 结构层｜Structure

结构层的设计任务，是对范围层的功能和内容进行合理的分类，哪些功能/内容可以归为一类，哪些功能是要区别分开的。如何评估分类是否合理，用户可以快速找到想要的功能/内容就是合理的。

这个工作准则，是渗透在你思考用户的每一个行为、产品的每一个功能层级、以及产品页面中设计中的。

比如，在文档类软件中，任何不是用户自己type出来的内容，都属于外部来源内容，被归为一类，属于插入性内容，用「插入」这一分类名称来将其归为一类，收纳在容器里。

在对文档进行分类时，可以从文件创建者、文档更新时间、文档重要性三个维度进行分类。以此将文档分别归为最近文件、共享给我、我的收藏三个分类。

当然，除此之外还有其他分类维度，比如文档类型、文档内容维度；

文档类型是指，该文档是Excel表格、思维导图、word文档、还是PPT幻灯片。哎？小吴2个月前发给我了一个Excel表格，里面写的啥来着？让我找找。所以，可以看到，分类也是有层级的，文档来源维度是用户找文件时候首先考虑的，其次才是文档类型。

文档内容是指，该文档里的内容归属于什么类目。这个分类的命名是自定义的，比如创建文件夹分类，创建多个空间分类，或者创建标签分类。石墨文档可以创建多个空间，多个文件夹，把每一个文档归属在相对应的文件夹下。而Flomo可以创建很多标签，把每一个笔记卡片归类在多个标签下。

04 范围层｜Scope

范围层的任务，是决策产品应该做什么，不做什么。一个产品应该提供什么服务，应该有什么功能和内容都是在范围层考虑的事情。而战略层决定了范围层的什么可为，什么不可为。

范围层面向用户的需求和产品的目标而设计，是「理想」与「现实」两者进行多重、反复权衡的产物。

举个实例讲讲，范围层如何根据战略层的制定来决策产品该做什么，不该做什么。问，为什么石墨文档只做文件夹和空间分类，而不做标签分类呢？

首先明确用户需求，分类是为了更方便的查找。为了找到某个文档，我们需要通过分类来定义每一个文档的唯一性。当某个文档只被归属于一个分类下时，适合用文件夹的实现逻辑。而当某个文档可以被归属于多个分类下时，适合使用标签的实现逻辑。文件夹和标签分类与文档之间的从属关系如下：

从企业目标来讲，石墨文档是面向办公场景而做的工作软件。在办公场景下，工作的过程是在完成一个又一个的项目，文档的最小归类是项目。一个文档很少既属于这个项目又属于另一个项目。公司是有组织架构的，所以办公场景产生的文档是有组织架构性的（平台事业群/战略投资事业部）、项目性的（小程序/APP项目）、岗位性的（产品经理/前端开发）、阶段性的（Q1/Q2）。大家查找某个文档时，会按照组织架构、项目等顺序去查找。这种查找逻辑是层次递进的，是大盒套小盒，大分类套小分类。基于组织架构、项目、阶段、人员维度建立层级嵌套的文件夹，就可以很容易查找出某个文档。

当你在建立知识库时，一个知识点可以被归属于多个维度/主题。比如“#OKR拆解方法、#《阿里基本动作》”这两个分类。这种查找逻辑是平行的，并列的。比如以下这个笔记的标签分类。

当然如果石墨要做知识库，标签必不可少。

05 战略层｜Strategy

战略层的任务是要明确两个问题：

我们想要从这个产品获得什么？

用户想要从这个产品上得到什么？

战略层考虑三件事，即用户-场景-需求，明确清楚产品要满足什么用户在什么场景下的什么需求。

五个层级之间的关系

从空间逻辑来讲，这五个层面的关系非常耦合，也就是层层依赖。每一个层面都是由其下一个层面决定的，表现层的设计受到框架层的约束，框架层的设计受到结构层所作决策的约束。这种强依赖性和耦合性提示我们，当你觉得UI设计师出的界面图怎么弄都很别扭时，可能是框架层的设计出现了问题，甚至是更底层的结构层设计出现了问题。

从时序逻辑来讲，并不是要完全完成下层任务之后，才能开始上一层的工作。相反，要让每个层级的工作，在下个层级结束前完成。比如，当你在进行框架层设计时，在规划到80%时候就可以开始表现层的设计了。

这种阶段性并行的工作方式，最直观的作用，就是可以节省产品设计交付时间。也就是说，当产品经理在规划结构层时，就可以让交互设计师介入框架层的设计工作了，当交互设计师完成60%时，就可以让视觉设计师介入工作了。

此外，这种阶段性并行的工作方式，还有一个作用，就是可以在动手设计上层任务时，及时发现下层任务的决策错误和考虑不足之处，然后及时修正。

在每一个层面上，我们都可以参照竞争对手中的最佳实践成果来作出自己的决定。当你不知道要做什么时候，看看行业最佳实践，跟着做大概率不会错，且在实际的产品工作中非常高效。比如，当你的老板让你从0-1搭建一个备考工具，且仅给你一周时间方案思考时，你首先要做的，其实不是先去调研目标用户的备考流程和用户需求，而是看看行业内的最佳竞对们的实践成果是怎么做的，看看竞对们都做了什么，也就能基本确定你的产品范围层要做什么、不做什么了。范围层的确定，信息决策来源不只是用户，还有竞对。

说一说那些在工作中常见的“不合规”时刻：

1:UI设计师觉得整个页面太空太碎了，请求产品经理在界面上添加一些banner位。

2:结构层完全确定之后，才开始框架层的设计。框架层完全确定后，才开始表现层的设计。

3:范围层和结构层还确定，就开始画原型图。

作者：葛葛，无心有肺的产品经理；微信公众号【葛葛的旅程】