争论点：用户体验设计师的交互指南

用户体验（User Experience， UE）是用户在使用产品过程中建立起来的一种纯主观感受。近年来，用户体验在产品设计中越来越受到重视。用户体验虽然因为互联网而被大家熟知，但它绝对不仅仅存在于互联网领域，还存在于生活中的方方面面。

本书主要介绍用户体验设计师需要掌握的一些技能，以及用户体验的优化策略，主要内容包括用户体验设计入门、概念、元素、体系、组件。全书每个知识点都通过举例或者对比的形式来介绍，具有直观、易学的特点。

本书适合用户体验设计师、交互/视觉设计师、产品经理学习。

只可意会不可言传的设计理论原来这么简单！

文章全网阅读量200万+人次！

为什么写书

对设计师来说，工作能力从来不会跟工作年限画等号。很多设计师已经工作了 5 年以上，但是对于一些知识点的认识还停留在很浅显的阶段。他们满足于一知半解，觉得够用就行，对于设计原理不会深入研究，知其然而不知其所以然。这类设计师很容易进入职业生涯的瓶颈期而无法再提高，我也曾经进入过瓶颈期。当时我希望可以通过大量地看视频和阅读文章来提升自己的能力，但是效果一直不太明显。因为我没有对这些松散知识点进行总结，使之“系统化”。界面里的每一个元素都不是以独立的个体而存在的，它们相互联系，相互影响。罔顾整体的影响，就会使得我们对个体的学习很片面，不得要领。因此，“设计理论系统化”是我一直追求的目标，而市面上这样的书很少，这本书算是我的一次探索和尝试。在本书中我用通俗易懂的文字深入浅出地阐述设计原理，书中的每一个理论，我都会加上产品实例加以论证，方便读者理解。

本书内容

本书共分为 5 章，各章内容介绍如下。

第 1 章 ：不管是产品经理还是设计师，我们的目的都是为了提升产品的用户体验。那么用户体验到底是什么？我们怎么衡量一款产品的用户体验水平？本章开门见山地介绍了产品用户体验的基本概念，将用户体验分为六大基本原则 ： 有用性、可见性、易感知、易用性、容错性和一致性，并且针对每个原则进行了详细而系统的阐述。

第 2 章 ：本章主要列举了几个让设计师比较头疼的问题，例如 ： 设计规范、界面适配、手势设计、异常场景设计。这些问题也会让很多工作好几年的设计师经常犯晕，这里我结合了大量的产品实例对其进行了深入的讲解。

第 3 章 ：界面中的元素主要分为 8 类 ： 色彩、布局、间距、文字、图标、按钮、图片和动效，这些元素共同构成了产品的界面。设计师的职责就是在界面中合理地分配这些元素，让用户更好地使用。本章主要介绍了界面设计中基本元素的设计思路。

第 4 章 ：界面里的每一个元素都不是以一个独立个体而存在的，它们相互联系，相互影响。所以，设计师在设计的过程中，着眼点应该是整个产品。本章主要通过介绍常见设计体系的构建探讨设计师如何从产品的维度进行设计。

第 5 章 ：本章主要介绍常用组件的使用方法。很多设计师对于组件只做到了浅尝辄止 ：只会使用Toast 通知用户，只会使用文本框让用户录入信息。他们不会深究每个组件最适用的场景。对一个优秀的设计师来说，一旦一个功能可以由多个组件完成，他就需要选择出那个最合适的组件。

致谢

感谢本书的编辑王静，她在 2017 年 10 月就向我邀稿。2018 年 5 月，我正式下定决心开始写书，到现在本书出版，整整一年，感谢她一直以来给予巨大的帮助。

感谢我的朋友夏彩云，在我最开始翻译文章的时候，远在德国的她一直在帮我审核文章的内容，保障了我的文章的质量。

感谢孙律明老师在 2016-2018 年这两年来的启发和引导，让我明白设计不止于界面设计。感谢贾考祥在我 2018 年转型的时候给予我的巨大的帮助。感谢所有关注我的朋友，你们的认可和支持是我埋头写书最大的动力。

勘误与互动

本人虽然已经竭尽全力，但是书中难免会有一些错误，欢迎大家在我的个人微信公众号“王 M 争”中直接反馈问题。我也会定期发布书籍的勘误信息。

作 者

第 1 章 用户体验入门 ／ 001

1.1 什么是用户体验 ／ 002

1.1.1 产品 ／ 002

1.1.2 纯主观感受 / 心理反馈 ／ 003

1.1.3 用户体验的评价模型 ／ 004

1.2 有用性 ／ 006

1.2.1 需求分类 ／ 006

1.2.2 用户体验地图 ／ 008

1.2.3 用户视角 ／ 009

1.3 可见性 ／ 012

1.3.1 合理的信息架构 ／ 012

1.3.2 跳转动作 ／ 015

1.3.3 快捷入口 ／ 015

1.4 易感知 ／ 020

1.4.1 信息优先级 ／ 020

1.4.2 缩短路径 ／ 021

1.4.3 信息可视化 ／ 023

1.4.4 化繁为简 ／ 024

1.4.5 隐藏机制 ／ 026

1.5 易用性 ／ 028

1.5.1 减少操作步骤 ／ 028

1.5.2 降低交互成本 ／ 031

1.5.3 减少场景转换 ／ 033

1.5.4 合理的限制 ／ 036

1.5.5 定制化 ／ 037

1.6 容错性 ／ 039

1.6.1 引导 ／ 039

1.6.2 报错 ／ 042

1.6.3 解决 ／ 046

1.7 一致性 ／ 050

1.7.1 品牌基因 ／ 051

1.7.2 平台的差异性 ／ 053

1.7.3 终端一致性 ／ 054

1.7.4 有用大于统一 ／ 055

1.7.5 设计规范 ／ 055

第 2 章 概念 ／ 057

2.1 MD 和 iOS 设计规范 ／ 058

2.1.1 阴影 ／ 058

2.1.2 导航体系 ／ 060

2.1.3 配色 ／ 064

2.1.4 组件 ／ 066

2.2 适配 ／ 068

2.2.1 像素与分辨率 ／ 068

2.2.2 适配原则 ／ 070

2.2.3 全面屏手机适配 ／ 072

2.2.4 小结 ／ 074

2.3 手势 ／ 076

2.3.1 “拇指法则” ／ 077

2.3.2 功能可见性 ／ 078

2.3.3 滑动优先 ／ 081

2.3.4 场景 ／ 083

2.4 异常场景 ／ 086

2.4.1 网络故障 ／ 086

2.4.2 空页面 ／ 094

2.4.3 超越临界值 ／ 098

第 3 章 元素 ／ 099

3.1 色彩 ／ 100

3.1.1 为什么要配色 ／ 100

3.1.2 配色规范 ／ 108

3.2 布局 ／ 112

3.2.1 视觉吸引力 ／ 113

3.2.2 可拓展性 ／ 114

3.2.3 信息量 ／ 117

3.3 文字 ／ 119

3.3.1 标题类文字 ／ 119

3.3.2 正文类文字 ／ 121

3.3.3 提示类文字 ／ 121

3.3.4 交互类文字 ／ 122

3.3.5 文案的力量 ／ 124

3.4 图标 ／ 127

3.4.1 可识别性 ／ 127

3.4.2 网格 ／ 127

3.4.3 视觉统一 ／ 129

3.5 按钮 ／ 130

3.5.1 形状 ／ 130

3.5.2 填充 ／ 132

3.5.3 内容 ／ 135

3.5.4 状态 ／ 135

3.5.5 按钮组 ／ 137

3.6 间距 ／ 140

3.6.1 块内间距和块外间距 ／ 140

3.6.2 间距与分割线 ／ 142

3.6.3 间距的替代品 ／ 143

3.6.4 慎用间距 ／ 144

3.7 插画 ／ 146

3.7.1 提升信息传达效率 ／ 146

3.7.2 插画 or 图像 ／ 147

3.7.3 尺寸比例 ／ 147

3.8 动画 ／ 151

3.8.1 引导 ／ 151

3.8.2 吸引用户的注意力 ／ 153

3.8.3 转场过渡 ／ 154

3.8.4 对“花瓶”说“不” ／ 154

第 4 章 体系 ／ 157

4.1 导航体系 ／ 158

4.1.1 基本元素 ／ 158

4.1.2 组合样式 ／ 160

4.1.3 容器 ／ 163

4.2 搜索功能 ／ 166

4.2.1 搜索入口 ／ 167

4.2.2 信息录入 ／ 170

4.2.3 搜索结果 ／ 173

4.3 返回功能 ／ 176

4.3.1 两种返回 ／ 176

4.3.2 返回路径 ／ 178

4.3.3 手势 ／ 180

4.4 反馈机制 ／ 183

4.4.1 为什么要反馈 ／ 183

4.4.2 实时性 ／ 184

4.4.3 自身反馈 ／ 186

4.4.4 轻量化 ／ 187

4.4.5 反馈的种类 ／ 189

4.5 分享功能 ／ 194

4.5.1 动机 ／ 194

4.5.2 能力 ／ 195

4.5.3 触发器 ／ 197

4.5.4 载体 ／ 198

4.6 引导页 ／ 200

4.6.1 启动页、引导页和开屏广告 ／ 200

4.6.2 引导页设计要素 ／ 202

4.6.3 不只是引导页 ／ 204

4.7 顶部栏 ／ 206

4.7.1 去标题化 ／ 206

4.7.2 可点击 ／ 208

4.7.3 背景色 ／ 209

4.7.4 导航栏 ／ 212

4.7.5 隐藏 ／ 213

第 5 章 组件 ／ 215

5.1 弹框 ／ 216

5.1.1 模态弹框 ／ 216

5.1.2 非模态弹框 ／ 222

5.1.3 弹框体系的建立 ／ 226

5.2 表单 ／ 228

5.2.1 标签 ／ 228

5.2.2 输入框 ／ 231

5.2.3 容错性设计 ／ 232

5.2.4 按钮 ／ 234

5.3 tab ／ 238

5.3.1 位置 ／ 238

5.3.2 状态 ／ 241

5.3.3 使用场景 ／ 243

5.3.4 tab 与 Segment Control ／ 244

5.4 标记系统 ／ 246

5.4.1 角标 ／ 246

5.4.2 标签 ／ 247

5.4.3 红点 ／ 248

5.4.4 印章 ／ 249

5.4.5 场景和层级 ／ 250

5.5 信息录入 ／ 252

5.5.1 列表 ／ 252

5.5.2 单选按钮 ／ 253

5.5.3 开关 ／ 255

5.5.4 计数器和滑块 257