7000字解读《争论点》丨UI设计师的用户体验设计学习入门书

7000字解读《争论点》丨UI设计师的用户体验设计学习入门书-经验/观点-UICN用户体验设计平台

什么是用户体验？用户体验设计师是做什么工作的？如果你有留意BAT这些大厂的招聘岗位，你会发现如今用户体验设计师这个岗位非常受欢迎，而且薪资特别高。对于UI设计师来说，在岗位竞争日益加剧的情况下，如何去构建自己的核心竞争力，成为一个企业不可或缺的人才，通过这本书的阅读，将会告诉你用户体验是什么，我们又该如何去学习。

一、这本书讲了什么？

1. 什么是用户体验？

用户体验（User Experi-ence，简称UE/UX）是用户在使用产品过程中建立起来的一种纯主观的感受，这是百度百科对「用户体验」的介绍。为了让大家弄清楚「用户体验」的含义，作者做了一个更全面的补充——任何可以解决用户痛点（需求）的事物我们都可以称为产品，而用户在使用产品过程中所产生的心理反馈就是用户体验。

最近我也在阅读另一本关于用户体验设计的书籍，是李磊老师的《这才是用户体验设计》。这本书里举了一个很有趣的案例，那就是四个盲人不知道大象是什么样子的，于是就用手去摸来感知出大象的形状，最后每个人对大象的印象都不一致。这说明什么呢，「用户体验」这个东西，不同的人或许都有自己的看法，但事实上「用户体验」是一个比较宏观的概念，它包含了设计师、体验、用户、产品、交互和流程这些元素。任何单一的体验或流程都不能称为「用户体验」，它是一个包含前端到后端完整的服务流程。

在我看来，「用户体验」在我们的生活中无处不在。比如当你去一家早餐店准备吃早餐，你从找寻菜单开始点菜，然后和老板沟通下单，最后到你找到位置开始用餐，结束后付钱离开，这个流程就是就餐的用户体验。这个流程是否顺畅、友好，决定你的就餐是否愉快。

如果这家餐饮店的菜单文字小到你看不清楚，这就说明在点餐这个环节没有设计好，甚至老板对你的点餐回应不积极、不理睬，这就说明用户体验出了问题。所以，「用户体验」它不仅仅应用在互联网行业，所有行业都需要友好的用户体验，用户体验设计就是一个庞大的体系。

2. 6个评价模型

什么样的用户体验设计可以称为友好？一款用户数上亿、变现能力超强的产品就一定是一款用户体验好的产品？作者打了一个问号，他认为当我们去评价一个事物的时候，首先要分清楚这是属于价值判断还是属于事实判断。比如评价王家卫和周星驰的电影谁好看，这对不同的人来说会有不同的答案。

还有像12360这样的国民级产品，常年位居APP下载榜的前列，已经拥有几亿用户，但它的用户体验却一直被人诟病。这和电影一样，没有任何一套公式或者模型可以真正做到能精准无误地用量化的方法去评估产品的用户体验水平。

所以作者根据自己的工作经验和资料，设计了一套用户体验的评价模型，包含了6个重要的要素——有用性、可见性、易感知、易用性、容错性和一致性，这也是这本书的核心内容。

2.1 有用性

有用，就是产品可以解决用户的需求，比如你使用一个外卖程序进行点餐，如果这个产品连下单的流程都无法完成，它就是连最基础的核心功能都没实现，这样的产品就是一个彻底失败的产品，有用性为0。

所以，评价一款产品的用户体验是否友好，「有用性」是基础，用户是否可以通过产品访问、下单，这就是最基础的保障。如果用KANO模型来描述，它就是基本型需求，满足用户最简单的需求。作者还介绍了一个常用工具——「用户体验地图」，通过这个工具，可以系统地梳理用户在产品使用过程中的痛点，方便你能从全局到局部了解用户的需求。

2.2 可见性

在尼尔森十大原则中，第一条就是「系统可见性原则」。无论何时，在哪个界面，一定要让用户知道自己在哪里，操作了什么以及给与及时的反馈。所谓可见性，就是这样的，用户要使用一个功能，首先必然要找到这个功能，而如何让用户快速找到目标功能呢？我们就需要建立有效的产品导航体系，明确产品的功能路径。

作者通过信息架构、跳转动作和快捷入口的案例给读者讲解了「可见性」在用户体验设计中的重要性，往往这些微不足道的细节，其实才是真正决定产品设计的关键，试想一下，如果当用户准备下单购买时候，购买的按钮不突出、不醒目，这是不是严重降低了用户购买率。「可见性」，就是一定要保证用户看得见，才能产生下一步的交互动作。

2.3 易感知

「易感知」是什么呢？「易感知」就是用户对信息的感知效率，用户是否在短时间内快速获取到他们期望的信息，这个将会决定用户体验设计是否友好。根据尼尔森的一项统计显示，互联网用户平均只读了每个页面文本内容的28%。这意味着用户很少会读完大段的文字，他们更多地是“扫描”。

所以作者认为，要提升用户的感知效率，可以从信息优先级、缩短路径、信息可视化、化繁为简和隐藏机制这五个方面去优化。比如SAAS产品中后台首页的仪表盘，如果去排列一行行系统的数据，这样用户看上去非常累，感知效率非常低。但当采用了数据可视化的设计，这样就能极大提升用户对数据的感知度，今天产生了几个新订单，支付了多少钱很快就能感知到。

2.4 易用性

前面我们说「有用性」，主要是指这个产品能用，那么如果想要提升用户体验，就要实现易用，也就是方便、好用。作者认为，如果要提升用户的「易用性」，需要从优化交互方式和减少不必要的场景转化去设计。

作者举了一个很有趣的例子，就是用户去交话费的场景。在十五年前，如果要去交话费，需要从家里出发去营业厅，这里面会经历骑车、排队等步骤，最后交完话费以后才能回家。我们可以感受出，交话费这个行为是非常复杂的，不像我们今天打开支付宝或微信，输入金额就充值成功了。所以，提升易用性可以从优化交互方式和减少不必要的场景转化去设计，这样用户才会感到便捷。

大家可以回想一下APP注册的简化流程，其实就是这样一个道理。过去我们需要输账号密码，现在几乎大部分APP，只需要发送手机验证码甚至直接使用微信/微博即可直接登入，这就是优化了交互方式，让用户不用担心密码记不住，或切换到记事本去找寻密码，输入手机验证码即可登录。

2.5 容错性

「容错性」很好理解，任何一个产品，用户在使用过程中都会出现误操作，那么这个时候设计师就应该把这些场景都考虑进去。比如不小心点击删除订单的按钮，这个时候，如果出现一个是确认和撤销的弹窗，用户就能及时判断是否属于误操作。作者把容错性原则分为三个阶段，分别是引导、报错和解决。

所谓引导，就是提前避免用户犯错，比如一个需要输入手机号码的输入框中，在表格中先提醒用户只能输入11位的数字，这可以有效避免用户输入中文等文字。

而报错则是当引导失效了，给用户做出及时的反馈。比如身份证号码输入有误，这个时候出现输入错误的样式可以让用户避免在提交表格时候再出现输入有误更友好。

解决是当用户出现错误了，给与用户准确的解决方案，比如前往重置密码、修改身份认证信息等具体的动作。

2.6 一致性

「一致性原则」可以称为统一性原则，这是一个优秀的产品设计所必须要遵循的，比如整个产品的颜色、字体、配图、主体尺寸需要保持统一。对设计师和开发人员来说，「一致性原则」可以极大地节省功能迭代的时间，从用户的角度来说，「一致性」可以减少用户的学习成本，更能增加用户对于产品的认可度。

在我们过去讲解的众多设计书籍中，遵循设计的统一性是最基础的原则，如果一个产品在整个服务流程中不保持统一，这样的产品会显得非常业余，给用户极差的体验。

3. 4个设计概念

为什么要讲设计概念？作者说，在他建立的设计师交流群中，发现很多从业多年的设计师对一些简单的设计概念都模糊不清，而我们所从事的设计行业，每天都在发生巨大的变化，不断有新的设计风潮袭来，如果不去弄懂这些基础概念，就只能停留于实物的表面现象，而不知道它的本质和产生的原因。

作者在这一章讲了MD和iOS设计规范、适配、手势和异常场景这四个设计概念，讲得很细。比如MD和iOS两个系统在阴影、导航体系和组件的区别，还有关于适配需要遵循的设计原则等等，对于很多设计师来说是这些都是非常基础的知识普及，值得系统学习。

4. 8个设计元素

这一章作者介绍了8个设计元素，分别是色彩、布局、文字、图标、按钮、间距、插画和动画。虽然这些知识点在很多设计书籍中都会有介绍，但我发现作者对几个元素的介绍，很有自己独特的角度。

4.1 布局

作者把产品设计的布局分为两种，列表式布局和宫格式布局，他们都属于信息整合的方式。「列表式布局」是将信息整合成纵向的信息栏中，而「宫格式布局」则是将信息整合到不同的模块中，每一个模块代表了一类信息。作者在这一节主要从视觉吸引力和可拓展性两个方面来去分析这两种布局类型的优缺点，这可以帮助我们在内容布局有一个可参考的设计标准。

4.2 文字

不同于其他设计书籍去介绍字体的类型、字重等元素，作者在「文字」这个部分的角度非常新颖，他认为——不管你的图标画得多么传神，但也需要文字的辅助说明，因为具象的元素虽然可以让用户更快地感知信息，但是无法保证精确性。

作者把一个产品的文字分为四种类型：标题类、正文类、提示类和交互类。然后对这四类文字的使用场景、字体大小、颜色都进行了详细的解释。比如标题类的文字颜色一般使用深灰色或者品牌色，提示类的文字就要清晰给用户展示当前的反馈状态等等。

在本节最后，作者还提到了文案的力量，这往往是很多设计师一直所忽略的，但其实一个优秀的产品，文案的用户视角、语气都非常注重。

4.3 按钮

作者没有给按钮进行分类介绍，反而把它拆解成一个公式：按钮=形状+填充+内容，这让我读起来感到非常新颖。

比如按钮的形状，作者认为按钮最主要的形状就是矩形和圆角矩形，但具体选用哪种样式，可以根据品牌基因加以确定。但无论你选择什么样式，一定要保持统一。

还有按钮的填充样式（分为面妆按钮、线状按钮和文字按钮），除了需要考虑功能的优先级，还有考虑产品的品牌基因，从这两个角度出发，才能帮助你获取最佳的填充样式选择。

4.4 间距

很多时候，我们会觉得自己的作品非常平庸或者“看起来特别模糊”，这其中大部分原因就是配色、字体和间距的对比没有做好。很多设计师或许比较看重配色和字体的对比，比如品牌色和辅助色等，但很多人对「间距」这个设计元素都忽略了。读到这里，其实我挺能感同身受的。我平时去临摹设计稿的时候，就会特别注重这些大厂的间距设计，很多时候我会把这些间距的数字都背下来，再应用到自己的设计中。

「间距」的作用可以简单地被归纳成一句话：通过建立视觉层级来简化界面内容，让用户更容易接受，作者的对「间距」这个知识点的归纳，真的非常精炼。

5. 7个设计体系

作者认为界面里的每一个元素都不是以一个独立的个体而存在的，它们相互联系，相互影响，所以他总结了7个设计体系帮助我们获取更全面的理解，这7个设计体系分别是导航体系、搜索功能、返回功能、反馈机制、分享功能、引导页和顶部栏。

5.1 导航体系

「导航体系」这个知识点，角度特别好。「导航」这个功能，是告诉用户当前所处的位置和规划出前往目的地的路线。而为什么要把「导航体系」的概念引入互联网产品中呢？作者认为，网站和APP就像一个信息的容器，装载了所有的信息内容，而当用户去访问产品的时候，需要通过不同的模块、页面获取信息，那么这个交互流程就需要一个「导航」，要告诉用户在使用产品的过程中，时刻了解现在我在哪个页面、从哪里来如何回去、以及从这个页面可以去哪里。

作者把多数的导航体系拆分成三个基本元素：tab、（下拉）列表和标签。不管产品的导航菜单有多么复杂，都可以看成这三种基本元素的不同组合形式。

比如你去访问QQ音乐这样功能复杂的产品，其实他的首页就是由不同的TAB栏目组成，推荐、音乐馆、听书等等；还有腾讯视频这样的产品，当你去搜索影片的时候，其实是通过不同的tab+列表为你展示视频信息。读完这一节，你会对TAB、标签有全新的认识，原来它们发挥了这么大的作用。

5.2 搜索功能

搜索功能与导航功能很相似，都是为了帮助用户更快地找到期望的功能或内容，两者的区别在于搜索功能对于位置的定位更加快速和精确。

我非常赞同作者的这句话——通过搜索功能可以帮助用户很好地了解产品。在我去拆解很多平台产品的时候，有时候只需要通过「搜索」这个功能就能知道这个产品的服务内容有哪些。比如像丁香医生的搜索，你会发现整个搜索都和平台的服务关联，在线问诊、医疗百科、健康科普、相关医院/医生等。

作者认为，一个完整的搜索功能/流程应该由搜索入口、信息录入和搜索结果组成，而不是一个单一的搜索框，如果你想全面了解「搜索」，这一节一定要好好读读。

5.3 返回功能

这一节主要讨论了关于「返回」的类型、路径以及手势操作。别小看「返回」这个功能，如果不去阅读这一节，事实上我发现有很多细节以前也忽略了。比如作者举的支付宝的例子，当你付款的时候想添加「指纹支付」功能，你需要先返回到首页，然后进入我的-设置，才能进行指纹支付设置，你可以算算这个从「返回」到「设置」的路径有多长。这就是本节关于「返回」设计讨论的意义，不仅要去思考「返回」的类型、路径，还要结合不同的操作系统去考虑手势操作，从而设计最合理的用户体验设计。

5.4 反馈机制

反馈机制很重要，它会极大影响产品的产品用户体验，你想想如果你上传一个图片没有进度条或者没有上传成功的提醒，你会崩溃的。「反馈」从覆盖范围上来说可以分为「操作反馈」和「用户反馈」两种，作者在这一节主要介绍了「操作反馈」这个类型的设计注意事项和以及子分类。

作者认为，要设计出一个让用户满意的反馈体系，不仅需要考虑「反馈」的实时性，还要考虑「反馈」的轻量化。就像我们在「容错性」提到的，当用户的身份证号码输出入错误的时候，一定要给与及时提醒，否则当用户填完其他信息点击提交的时候你再告诉他，这样的反馈体验就差了。

我们常见的弹框、页面、标签、动画、红点和声音，这些都属于「反馈」的类型，都是系统给与用户的反馈，让用户随时感知到系统的状态。

5.5 分享功能

作者在本节引用了「福格行为模型」让大家了解用户的行为机制。这个模型我们在《上瘾》那本书中详细解读过，也就是要让用户产生某个行为动作，需要具备动机、能力和触发三个条件。如果你想吸引用户主动分享你的产品，那么你就可以从三个方面去思考设计。

5.6 引导页

「引导页」是一个产品引导用户快速上手的最佳方式，它一般包含浮层、弹窗和引导页这些元素。作者在这一节先给大家做了一个全面的普及，让大家学会区分启动页、引导页和开屏广告三者的关系，然后介绍了引导页的设计元素，包含插画、文字、动画和跳过选项。

5.7 顶部栏

「顶部栏」这一节，特别细，填补了我的设计组件库关于顶部栏的很多样式。如果你没有读到这一节，你可能不知道顶部栏其实可以有这么多状态，分别是去标题化、可点击、背景色、导航栏和隐藏五种状态，这些知识点对于我们的工作真的非常有帮助。

6. 5个设计组件

作者在最后一章筛选了五个热门组件进行讲解，分别是弹框、表单、tab、标记系统和信息录入。作者讲得非常细，对每一个组件的应用类型、场景和注意事项都进行了详细的解释，大家可以去仔细阅读，查漏补缺。

7. 小结

这本书一共10万字，在我拆解完，你会发现整本书的内容可以用这样一组数据来概括——6个评价模型、4个设计概念、8个设计元素、7个设计体系和5个设计组件。但和其他设计书籍不同，我觉得作者的创作风格非常严谨和感性。

严谨是指他的每一个知识点都有理有据，而且角度独特；感性是指他对产品设计的洞察力，你会发现他多数的案例都是来自平时的生活和工作。总之，这本书如果你去认真阅读，你的收获一定很大，你不会因为「用户体验设计」这样宏观的概念读完以后难以理解，而是可以获得快速应用到实际工作中的设计技能，帮助你提升对用户体验设计的理解，最终学以致用。

二、这本书我们如何应用？

1. 一本用户体验设计入门的书籍

如果你以前对「用户体验设计」这个概念非常模糊，这本书值得你深入阅读。它不仅可以让你快速获取用户体验设计的概念，而且通过非常细致的讲解告诉你影响一个产品的用户体验设计需要考虑哪些细节。这本书从用户体验设计师需要掌握的技能、概念、元素、体系和组件都进行了非常全面的解答，而且作者的观点视角非常独特，整本书我阅读完下来，很多知识点的诠释让我拍案叫绝。

2. 一个用户体验评价模型

如果你不知道怎么去评价一个产品的用户体验设计好坏，那么作者总结出来的六个用户体验评价模型非常适合你。任何产品，你都可以从有用性、可见性、易感知、易用性、容错性和一致性去进行评测，这六个维度，几乎涵盖了一个优秀产品应该具备的所有元素。这个模型虽然不是作者发明的，但我觉得它完全可以媲美像「5E体验设计模型」这样的模型，应用起来非常方便。

3. 一双发现设计细节的眼睛

我非常佩服本书作者王争的洞察力，如果你仔细阅读，你会发现他是一个非常善于观察的设计师，很多知识点都是从他体验其他产品或进行用户调研时候发现的。比如他在整理公司产品第一季度用户反馈的问题发现了「搜索功能」的重要性，于是他对搜索功能进行了系统的调研，输出了全面的「搜索功能」设计参考。而结合这样真实的案例去讲解，你会发现这本书的内容和我们的日常工作无比接近，给读者留下的印象也会越深刻，这同时激励我们要去培养一双能洞察细节的眼睛。

三、写在后面的话

王争的这本书，正如他的书名《争论点：用户体验设计的交互指南》，是一本非常适合于UI设计师学习用户体验设计的入门书籍。整本书讲得非常细，没有复杂的设计理论，而是从非常实干的设计案例中去讲解「用户体验设计」需要掌握的知识。你只要学会他的6个评价模型、4个设计概念、8个设计元素、7个设计体系和5个设计组件，这对你入门用户体验设计会有非常大的帮助。

其次在我拆解完以后，我特别佩服王争严谨又细腻的设计思维，在本书的作者介绍中，王争写了一句话——我相信深奥的设计理论也可以以一种浅显的方式阐述。这本书，就像他的这句话一样，把用户体验设计这个看上去宏观的概念，用一个个设计案例和细节向我们解释清楚，帮助我们快速入门，真是一本好书！