作者：陈子游

来源： 设计心术

导读：这是一篇《用户体验要素》一书的精华解读，强烈推荐给所有设计人员以及各岗位的IT从业者阅读。

精彩抢先看

相信很多读者都读过这本书，我几年前也读过，但这一次重读让我有了很多新的感悟，也许是因为这些年积累了更多的经验，所以理解得更深刻了。

这本书写得非常实在，具有很强的指导意义，如果按照书中的模式去进行用户体验设计，相信有很大的概率能做出体验优秀的产品。

谁最应该读这本书？

首先是那些有志于成为优秀的用户体验设计师的人。

其次是企业的老板和高层，因为每一步用户体验的优化，都有可能带来更高的转化率，对于企业来说这是实实在在的利益。

还有产品、技术、运营等岗位也是如此，没有他们的支持配合，战略层和范围层的工作就无法落到实处，光靠设计部门在框架层和表现层去做努力，最终的用户体验就像隔靴搔痒一样的缺乏成效。

---

精华摘要

①用户体验为什么如此重要

这个话题看似多此一举，实则无比重要。表面上互联网行业几乎人人都知道用户体验的重要性，那实际上国内的这些公司都做到“知行合一”了吗？目前看来还没有做到。

②用户体验设计的五个要素

良好的用户体验设计由一系列完整的决策组合而成，这些决策它们本质上分为五个层面。这个五个层面至上而下分别为：表现层、框架层、结构层、范围层、战略层。

③战略层

战略层处在五大要素最关键的底层，清晰明确的战略是成功的用户体验的基础。它的核心关注的是产品目标和用户需求。

④范围层

范围层的工作是确定通过什么样的功能和内容来满足产品目标和用户需求。最终我们需要有一个“功能文档”用来定义功能和内容需求，这个文档能够帮我们解决“该做什么、不该做什么、优先级如何”等问题。

⑤结构层

结构层关注的事情开始从抽象变得更加具体，针对功能型产品和信息型产品，它分为交互设计和信息架构这两项主要工作。结构层产出的是具体的结构示意图文档。

⑥框架层

从框架层开始，我们要通过界面布局、导航、信息设计等工作来将产品变得更加直观和具体。框架层产出的是线框稿或原型图。

⑦表现层

表现层处在五大要素的最顶层，代表感知设计，这也是每个产品直面用户的部分。它包含了视觉、听觉、触觉等多个方面的领域。表现层产出的结果包含设计稿和风格指南。

---

①用户体验为什么如此重要

随着移动互联网的普及，用户体验这个概念已经深入人心，连一些普通用户也开始知道一个APP不好用就叫做“体验不好”，因此用户体验的重要性已经毋庸置疑，我相信每一个有自己APP的企业也都会认可这一点。

既然如此，那国内的这些互联网公司都做到“知行合一”了吗？目前看来还没有，因为我们平时生活中常用的APP的用户体验水平依然参差不齐，我举一些例子大家就知道了。

比如那些传统企业的APP，它们的用户体验基本上做的都挺差的，特别是银行和证券公司，除了招商银行和华泰证券(涨乐财富通)这两个特例，其他的都给人一种落后时代好几年的感觉。

剩下的APP一般都是互联网公司做的，用户体验的平均水平比传统企业要好，其中有一些做的非常优秀，但也有一些是做的很差的，这完全是由团队能力决定的。

再来看我们使用频率最高的那些APP，耳熟能详的一般都属于一线互联网公司，它们的用户体验平均水平最高。

这里面社交娱乐类的用户体验较好，电商购物类的用户体验较差。虽然这和业务模式太复杂有关，但也有很大一部分是主观因素。比如电商的各种活动设计，每次都做的花里胡哨，各种动态图片在手机屏幕上四处乱窜，每年用户都要经历好几次这样的审美灾难，但好像没有看到哪个平台有一丝悔改的迹象。（不知道对电商的这个观点大家是否赞成，欢迎留言和我探讨。）

那用户体验如果做得不好会有什么后果呢？大家可以花点时间检查自己手机上常用的这些APP，相信每个人都会有几个“不得不装”的APP，不管是因为什么客观因素导致我们必须安装和使用它们，但是只要哪天出现一个更好的替代品，它们就可以被立刻替换。

所以对于企业来说，用户体验的重要性不能仅仅停留在口头上，而是应该真正落实到产品中，“知道”距离“做到”还很遥远。

那些着眼未来的企业，会把用户体验当作自己可持续发展的核心竞争力，他们会持续不停的完善产品的体验，努力留住每一个用户。

而那些不重视用户体验的企业，天天都在为用户流失而发愁，却把根本原因归结到自己营销做得不够好或者广告做的不够多，永远处在缘木求鱼的状态。

而对于设计师来说，要充分的认识到随着技术的发展，用户体验设计已经变成了一个集合了视觉、触觉、听觉的系统工程。

而且我认为设计师对用户体验起到的首要价值和最大价值，是利用自身较高的审美标准，给用户提供最好的视觉、动画、声音等效果。并与产品和技术密切合作，为用户创造最便捷的使用流程(交互体验)。

---

②用户体验设计的五个要素

良好的用户体验设计由一系列完整的决策组合而成，通过分析这些决策可以发现，它们本质上分为五个层面。

这个五个层面至上而下分别为：表现层、框架层、结构层、范围层、战略层。

表现层主要关注的是视觉感知问题；

框架层主要关注的是界面布局问题；

结构层主要关注的是交互设计问题；

范围层主要关注的是功能定位问题；

战略层主要关注的是产品目标与用户需求的问题。

在每一个层面我们都要处理各种抽象或具体的问题，越上层的问题往往越具体，越下层的问题一般越抽象。

而每一个层面都是由它的下一个层面决定的。假设战略层的问题没有考虑清楚，那么从范围层开始往上的四个层面都无法做出决定，因为每一个层面的所有决策都逃不出下一个层面给出的范围。

下一个层面没有明确，就给上一个层面安排工作，那就等于盲人骑瞎马。这也是为什么在有些项目中设计稿彻底推翻好几次却还定不下来的原因。

不过如果在项目中一定要等到下层问题百分百确定，才进行上一层的工作的话，那也是很不现实的。

因此最合理的方式就是：当下层问题的主要部分确定后，就可以开始进行上一个层面的工作，等下层问题全部确定后，再将上一层工作收尾。

举例来说，当战略层的产品目标和用户需求不明确的时候，就希望把范围层的功能定位问题明确下来是不可能的。当框架层的布局设计还没有确定的时候，就要求设计师把视觉给完成，这样是很容易造成反复修改甚至是重做的。

用户体验设计这个领域，我思考的越多就越发现它不仅仅是设计团队的问题，所以光是设计师学习用户体验设计是不够的，公司的老板、高管、产品、运营、技术都该学习。

只有在战略层、范围层都做到位的前提下，设计师才能在结构层、框架层、表现层上面大展身手，为产品和用户创造更好的体验。

---

③战略层

清晰明确的战略，是成功的用户体验的基础，这也是为什么战略层处在五大要素最关键的底层的原因。

要确定战略，我们必须得问自己两个问题：

第一、我们(公司)要通过这个产品实现什么目的？

产品的目标必须能够很明确的说出来和写出来。

如果产品的目标只是以“只可意会不可言传”的状态存在于管理层的脑海中，不能明确的说出来或写出来时，那参与项目的每个人就都有不同的理解。

如果产品目标以非常宽泛的“为了公司赚钱”或者是“为了公司省钱”，那这个目标说了跟没说也差不多。

同时，强烈建议将“增强品牌识别”作为一项基础产品目标加入其中，因为用户在使用产品过程中会无意识的逐步形成对产品的印象，加入这一项目标既能够时刻提醒我们注意这一点，也能够让我们在设计过程中有意识的引导用户去加强品牌的正面印象。

还有，必须为产品目标的达成与否提前设定明确的衡量标准，这将会对接下来几个层面的工作产生直接的影响。

第二、我们(公司)的用户要通过这个产品得到什么？

要分析出用户的需求，首先要定义清楚谁是我们的用户。

首先要避免的误区就是，在不做调查的前提下将用户想像成“一群完全像我们一样的人”，这样设计出来的产品会具有很大的盲目性。

接着，在用户人群细分、用户研究、市场调研、可用性测试、创建用户模型等方法中，选出符合自己公司现状和条件的进行实施，尽可能的发掘出用户的真实需求。

以上两个问题弄清楚了，成功的用户体验就有了基础保障。然后我们需要制定一份“战略文档”，发到每一位项目成员的手中，这份文档将在接下来的工作中起到至关重要的作用。

---

④范围层

战略层确定了产品目标和用户需求，而范围层的工作是确定通过什么样的功能和内容来满足它们。

项目的决策者应该依据战略层得出的结果来定义功能和内容需求，并将它们写入“功能文档”。这个文档应该要起到三个作用：

第一、明确我们目前要做的事情

这些事情一定是为了我们在战略层确定的产品目标和用户需求而服务的，需要将它们明确下来，清楚的写出来，并分配到明确的责任人。

这包括产品中的一些细节内容，比如各种流程中给用户弹出的提示文字，如果有人专门负责，用户体验就会更有保障。

第二、明确我们目前不做的事情

项目进行的过程中，可能会有各种各样的点子冒出来，这个时候需要评估哪些事情我们是不该做的，哪些是真的需要增加的，哪些是需要记录进文档等待下一个版本去做的。保证产品进度可控的同时，又不扼杀项目过程中产生的创新。

第三、确定事情的优先级

现实中总会有各种条件限制，有时候是时间不允许，有时候是开发成本不允许，因此必须提前明确所有事情的的优先级。

---

⑤结构层

结构层关注的事情开始从抽象变得具体，针对功能型产品和信息型产品，它分为交互设计和信息架构这两项主要工作。

在移动互联网时代，我们生活中常用的产品基本都同时包含交互设计和信息架构的工作，只是功能型产品里交互设计的工作占比更多（比如支付宝），而信息型产品里信息架构的工作占比更大（比如今日头条、微博）。

交互设计中的重点是理解用户的工作方式、行为和思考方式。

其中概念模型是将现实世界中的概念引入产品中，以便用户更好的理解其本质，电商APP中的“购物车”概念就是一个典型的例子。

而错误处理也是交互设计的重要工作，通过事先将错误分级，通过预防、改正、恢复等方式减少用户的挫折感，让用户的流程回到正常轨道。

信息架构关注的是如何将信息内容合理、方便的提供给需要的用户。通过将内容结构化，如采用树状结构、矩阵结构、自然结构、线性结构等方式，确定组织原则，并以用户能懂的语言提供选择方式。

结构层的文档一般都以结构示意图的形式展现。

---

⑥框架层

从框架层开始，我们要通过界面布局、导航、信息设计等工作来将产品变得更加直观和具体。在移动APP产品中，界面布局、导航、信息设计这三项工作已经不像网站设计那样容易区分，而是已经交融在一起了。

在这一层设计中，第一个重点就是要关注用户习惯，有一些已经非常普及的用户习惯我们一般不应该去改变，除非我们有非常充足合理的理由。

界面设计的需要我们先选择正确的元素，其次要做到主次分明（站在用户的角度），元素特别多的页面一定要尽力做好元素直接的平衡。

导航设计不论是对于网站还是APP，关键在于清晰的路径设定，最好时刻让用户知道自己身处何地，也能让用户知道如何回去。

信息设计的关键在于内容如何组织和呈现，无论是提示性的文字，还是大块的内容，都需要更有逻辑的组织和一致性的展现形式。

框架层所产出的文档就是线框图，我们平时也会称之为原型图，这也是大家最直观能感受到的交互设计师的成果。

---

⑦表现层

表现层是五大要素的最上层，代表感知设计，这也是每个产品中用户最先直观感受到的部分。

从感知设计这个词语上，就能看出这是包含了视觉、听觉、触觉等多个方面的领域。特别是在APP产品中，听觉和触觉在用户体验中的重要性越来越高。

触觉和听觉在设计中可以与视觉设计、交互设计完美配合，让用户能明显的感受到自己做了什么操作，操作是否成功了，减少用户在面对一个新应用的时候的使用门槛，这对那些新用户来说会特别友好。

视觉设计在表现层中一般来说所占的工作量最大，一般人很容易把它仅仅理解成“美术过程”，其实视觉设计的首要任务是将它下面四个层面所想要达成的目的，通过最恰到好处的方式呈现在用户面前。

因此，视觉设计关注的一个重要标准就是视觉引导路径是否合理。理想的情况下，用户在使用产品的过程中一定有一个最佳的视觉路径，这个路径既满足了产品所要达到的目标，也满足了用户想要获得的结果。要实现这个目的，设计师需要恰当的运用“对比、一致性、栅格化对齐”等原则去做排版设计。

同时，选择合适的配色方案，除了能够增强用户心目中的品牌印象，还能在视觉感受上获得用户的认可。

RECOMMEND

推荐阅读

《用户体验要素：以用户为中心的产品设计（原书第2版）》

点击链接了解详情并购买

本书是Ajax之父Jesse James Garrett的经典之作。用简洁的语言系统化地诠释了设计、技术和商业融合是重要的发展趋势。用清晰的说明和生动的图形分析了以用户为中心的设计方法（ucd）来进行网站设计的复杂内涵，并关注于思路而不是工具或技术，从而使你的网站具备高质量体验的流程。

设计人员是本书的核心读者，但产品、技术、运营、管理更应该仔细阅读本书，相信看完本书，你们的沟通将更加顺畅！

更多精彩回顾

书讯 |9月书讯（下）| 开学季，读新书

书讯 |9月书讯（上）| 开学季，读新书

上新 | 一本书带你吃透Nginx应用与运维
书单 | 开学季——计算机专业学生必读的10本畅销经典

干货 | 巨详细！使用OpenCV和OpenVINO轻松创建深度学习应用

收藏 | 开学季——想打好数学基础？这些经典教材你最需要！

视频 | 4min视频带你了解阿里B2B电商算法

赠书 |【第20期】实践深度学习？先接住这三板斧再说

点击阅读全文购买