用户体验设计指南：从方法论到产品设计实践

现如今，在互联网领域，用户体验逐渐成为一个炙手可热的关键词，用户体验设计师也逐渐成为产品开发设计团队重要的成员。可以说，这是个用户体验为王的时代，人人都在讨论用户体验并发表自己的见解，然而什么是用户体验，它是怎么产生的，现状又如何呢？本书由百度，阿里，腾讯各出一位设计师，为大家分析目前用户体验的现状，以及在国内领头的互联网行业里，作为用户体验设计师应该掌握那些技能。

蔡贇

本科毕业于清华大学美术学院

英国中央圣马丁学院硕士

曾任百度MUX 交互设计师

现任阿里巴巴体验设计专家

康佳美

本科、研究生毕业于清华大学美术学院工业设计系

曾实习于LG 电子中国设计中心、Kindle 部

现任百度资深交互设计师

王子娟

本科毕业于华南理工大学，信息显示专业

曾任职于ETU design

曾任百度MUX 交互设计师

现任腾讯高级交互设计师

百度，阿里，腾讯的用户体验设计师用自己经验分享给读者在当前互联网行业里，用户体验设计师需要解决的问题。业内多位大咖力荐

现如今，在互联网领域，用户体验逐渐成为一个炙手可热的关键词，用户体验设计师也逐渐成为产品开发设计团队重要的成员。可以说，这是个用户体验为王的时代，人人都在讨论用户体验并发表自己的见解，然而什么是用户体验，它是怎么产生的，现状又如何呢？

“用户体验，即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。”

——摘自ISO 9241—210 标准

感性又严谨的用户体验

之所以用这么矛盾的形容词来描述用户体验在于我们从怎样的视角去看它，这包含用户体验之于体验者和用户体验之于相关从业人员。

在用户面前，用户体验是感性而无处不在的。可以说，用户体验即生活。回忆一下上一次使用打车软件的出行经历，是什么让你选择尝试使用叫车软件而不是站在路边打车？也许你当下所处的地理位置很难打到车，也许你需要预约一个特定时间，又或者需要帮助家里的老年人叫车并且保证他们安全抵达目的地。这时候你产生了借助叫车软件的想法，你在手机里找到这款应用。接下来呢？体验才刚刚开始……是否能够很快叫到车？司机有没有准时到达？约定的上车地点是否位置准确且方便找到？乘车体验（车内环境、司机的服务态度）如何？行车路线是否合理？如果赶去机场的话能否提前到达不耽误接下来的行程？从叫车、出行、到达、支付这一系列过程中，用户的感受和体验直接影响到他对这款产品的看法和评价。简单说来，一款好产品应当是能够为用户带来快乐和幸福感的。在日常生活中，出行、吃饭、装修、看病、购物处处涉及体验，离不开手机、电脑，以及各式各样的产品和服务。在与这些产品打交道的过程中，用户的主观感受、心理状态和反馈都来自产品为其带来的体验。好的体验不仅能够很好地满足用户需求，为产品带来用户的同时也带来了商机，吸引用户为之买单。

对于设计师乃至从业人员来说，用户体验严谨又理性。站在用户视角，挖掘产品问题，解决问题，从而为用户带来更为优质的产品体验和使用感受。追溯到用户体验设计的历史，用户体验（user experience）这个词最早被广泛认知是在20 世纪90 年代，由用户体验之父唐纳·德诺曼提出，他致力于做令用户快乐的产品设计，强调用户体验的重要性，也成为第一位用户体验架构师。自此用户体验设计逐渐职业化，成为当下互联网领域不可或缺的职能。对于从业人员来说，用户体验设计是一门理性的学科，注重理论和依据，需要具备很好的逻辑性，而不是像艺术创作一样依赖于感觉和创想，极其考验设计师的逻辑思考能力。从业人员负责设计思考，发现问题并解决问题，在专业的维度想得周到全面，才能为用户带来轻松自在的产品体验。来看看一些国际大咖，这些用户体验设计界的标杆都是怎么绞尽脑汁来迎合用户的？

还记得iPhone Home 键吗？

苹果公司的产品战略本质就是用户体验至上，是注重体验而为产品带来成功的经典案例。起初为了适应用户手掌大小坚持做能够“一手掌控”的4 英寸屏幕的智能手机，随着流量和网速提升带来了大量观看视频的用户需求，于是推出了大屏手机。目前，无边框全面屏成为iPhone 标配。还记得第一代iPhone 发布时，Home 键的设计为“果粉”们带来的惊喜吗？按压Home 键的体验让你联想到什么？对了，就是马桶的冲水按钮。试想如果这个实体按键被触摸屏幕取代会怎样，是不是那一瞬间的爽感全无？于是，经典的Home 键被沿用了10 年，成为苹果手机最具辨识度的标志。然而在屏幕触感反馈和人脸识别技术发展成熟的今天，曾令苹果引以为傲的Home 键悄然下线，成为体验升级的又一次自我革命。我们看到技术更迭为用户带来的影响，缔造了新的行为和需求，而对于用户体验孜孜不倦的追求，造就了一个又一个伟大产品。

Facebook 社交网络也能报平安

2015 年年底巴黎发生了大规模恐怖组织袭击，事件发生后，Facebook 第一时间开通了该地区的“Safety Check”功能。用户只需点击界面中的“I'm safe”或者是“I'mnot”按钮便可让亲友们了解自己当下的状况。受灾地区的用户可通过这一功能让亲友们知道自己是否安好，同时也可接收来自其他受灾人员发来的“报平安”信息。Facebook 这个全球最大的社交网络信息平台，出于对用户迫切需求的捕捉和对于新闻事件的积极响应，想到了“报平安”的绝妙想法。此功能在特定时期和场景及时地满足了用户迫切了解家人朋友是否平安的需求，一经推出获得一致好评，为产品口碑带来了极其正向的影响，是用户体验快速响应的经典案例。

从PC 端到移动端

从一个最易于理解的现象谈起，从我们坐在电脑前工作、购物、使用QQ 聊天，到现如今可以轻松地使用手机回复邮件，往购物车放入心仪的商品，直接通过微信与好友语音对话，一切变得更加自由，方式也更为丰富多变。现在我们拥有多种智能设备，需要在各个场景各个设备上随时切换，可以看到从PC 转移到各手持设备的趋势越来越明显。这就是从PC 端向移动端的转变。随着移动设备的浪潮的到来，对于互联网从业人员来说，既是契机，也是挑战。对于产品在移动端包括手机、平板电脑乃至智能手表上的呈现形式，信息展现空间变小，场景多变，交互方式更为丰富，这些特点势必需要针对性的设计，重新定义分析，以更好地满足在移动场景下的用户体验。在移动领域的争夺战中，为了统一跨设备间的界面和交互，让用户得到连贯的体验，iOS 和Android 两大平台都针对用户从PC 端向移动端转移的趋势做出了响应，为移动平台设计适配了更适用于移动平台信息展现和交互方式的规范。苹果移动设备界面扁平化（Flat Design）趋势和Google 的“Material Design”应运而生。可以说，如果一个产品在PC 端和移动端的界面是完全相同的，那这一定是失败的设计。因为无线平台的快速迭代、移动设备硬件的技术升级，以及移动用户使用场景的多元化，使得移动端界面体验设计与PC 界面存在极大差异，移动端的体验设计空间也更加丰富广阔。在本书最后的章节也会为大家介绍用户体验的趋势、未来和前景。

从方法论到实战

随着科学技术的进步以及设计创新的推进，用户体验作为一门学科得到突飞猛进的发展。从用户体验概念的提出，到其成为产品成功的重要要素；从企业开始重视用户体验，到见证用户体验为产品带来的巨大价值；从用户体验逐渐融入产品开发环节，到其成为团队的关键职能，其重要性不言而喻。产品以及技术的发展，不断促进着新体验模型的诞生，其应用于数以万计的产品，通过用户的验证，快速迭代掉不合理的部分。而可用性强的用户体验设计模型得到沉淀，使得成熟的体验设计模型有理可循。互联网从业人员有必要了解甚至精通用户体验这门学科。与此同时，更需要系统化的培养，锻炼思维方法，通过积累更多的实战经验，形成自己的逻辑和方法论，以便于更专业地运用到工作中去。本书基于移动端浪潮为大家准备了满满干货，作为互联网从业人员的入门读物极其适合，真正地帮助读者提高产品设计开发能力。

01 成为用户体验设计师

1.1 了解产品项目团队 / 03

1.2 了解用户体验团队中的常见职位 / 07

1.3 升职记 / 20

1.4 用户体验的价值 / 26

02 从方法论到实战

2.1 基本产品设计流程 / 31

2.2 产品迭代方式 / 34

2.3 准备工具 / 36

2.4 需求挖掘 / 45

2.5 设计调研/ 用户研究 / 53

2.6 概念设计阶段 / 81

2.7 详细设计阶段 / 112

2.8 设计评估与决策 / 125

2.9 打造产品数据后台管理系统——产品用户体验监测模型 / 137

2.10 规范和组件库 / 147

2.11 开发支撑上线 / 155

2.12 项目中的通用能力 / 158

2.13 项目实战：从已知探索未知 / 162

2.14 商业数据产品设计实战 / 180

03 交互原型制作工具

3.1 了解常用原型制作工具 / 191

3.2 Keynote / 194

3.3 Sketch / 199

3.4 Axure RP / 203

3.5 Origami / 211

3.6 纸面原型 / 216

3.7 Kite Compositor / 220

3.8 Principle / 224

04 设计模式与设计思考

4.1 从PC 端到移动端 / 233

4.2 移动端界面设计模式库 / 248

4.3 移动端交互设计趋势 / 268

4.4 前端时代的到来 / 275

4.5 To B 设计 / 278

05 屏幕之外与技术创新

5.1 人工智能 / 285

5.2 可穿戴设备 / 289

5.3 智能家居 / 292

5.4 无人驾驶 / 296

5.5 VR、AR、MR / 300

5.6 智能聊天机器人（Chatbot） / 315

5.7 未来设计师 / 322