交互设计那些事儿

人人都是产品经理/起点学院、云课堂、百度阅读联合力荐！

一部尽是精华的交互设计实用指南！窥探交互设计师的成长之路！

作者倾力传授交互设计方法与提升秘诀，解读交互设计工作思路与设计技巧！

交互设计入门与进阶宝典，助你轻松跨入交互设计殿堂！

交互设计是一个正在快速发展的新兴行业，它包含界面、产品架构、信息逻辑、人机交互、用户体验等方面的内容。越来越多的互联网、移动互联网行业的从业人员关注到了交互设计，越来越多的软件产品项目组开始配备专职的交互设计师。《交互设计那些事儿》从实践出发，系统地介绍了交互设计的概念、职责要求、知识体系、工作思路、设计技巧，并系统介绍了交互设计的入门方法和进阶方向。

《交互设计那些事儿》立足于实际工作，从交互设计的各个阶段所遇到的不同问题出发，以交互设计工作生命周期为主线，依次介绍交互设计基础、交互设计工作场景、交互设计架构相关能力、交互设计流程、原型设计相关内容，以及大量交互设计说明文档的案例，就交互设计相关的方方面面做了一次鸟瞰，让没有基础的学习者看完之后能快速熟悉交互设计，节约学习时间。

无论是交互设计从业者、用户体验从业者，还是互联网行业的技术人员、网站UI 设计师、移动终端UI 设计师、工业设计从业者、互联网创业者，以及传统行业的从业设计人员和广大学生群体，都可以从《交互设计那些事儿》中获益。

阿西UED，本名王广西，现担任互联网公司产品经理。先后担任项目经理、交互设计师及产品经理。2014年创建并维护专注于交互设计的网站“交互设计学堂”（iamue.com）,目的在于分享交互设计知识与经验。

阿西的这本《交互设计那些事儿》从人机交互设计相关的方方面面介绍了它们与交互的关系，你需要怎么理解，以及怎么配合团队一起默契地成长。对你从更宽的视野上理解交互设计很有帮助，希望通过阅读本书，你能找到你的兴趣所在，并扎根其中，在交互设计的道路上不断成长、进步。

——尹广磊Axure中文社区创始人

如何通过分析获取到实际的需求？如何清晰地完成交互的流程与逻辑？如何将交互与功能完美地结合在一起？如何通过原型将交互直观地呈现？如何完成交互文档的撰写？如何组织评审获取反馈？如何在实际工作中和其他关联岗位默契配合？这些都是很实际的问题，也是作为交互设计人员需要具备的能力。在阿西这本书中，你能够看到解决这些问题的答案。

我建议许许多多在产品经理或者产品助理岗位上的人读一读这本书，特别是没有系统学习过产品知识的人，更要读一读这本书。这本书的主要内容虽然是交互设计，但却有着实实在在的与产品经理相关的内容，有着作为产品经理这个综合素质要求较高的岗位需要掌握的一些方法与技巧。不管是需求分析还是交互文档、业务流程或者沟通评审，都是值得当下很多产品新手学习与借鉴的宝贵内容。

——小楼一夜听春语

Axure原创教程网创始人；《Axure RP 7.0 从入门到精通》图书/ 视频作者

当前市场上有关交互设计的相关书籍包括一些公认的著作，多是从理论指导和原则规范的角度告诉我们如何去做交互设计，设计素养的培养的确非常重要，但是新入门的从业者还需要这样一本书，它能简单而有效地告诉我们如何成为一位交互设计师，交互设计师都需要做什么，以及怎样去做。阿西的这本《交互设计那些事儿》从基础的设计能力、设计工作模式、设计方法理论、设计输出物制作评审、设计沟通管理等方面告诉还在这个行业门前徘徊的同仁，如何快速地入门，有效地提高自己的工作能力。

——杨本植UXRen社区交互设计金牌讲师

阿西在这本书中把自己经历过的、学习过的理论和实践通过简单清晰的语句表达出来，让没有交互设计基础的学习者能够很快理解并掌握所需知识。书中还细致入微地介绍了一些常见的入门工具，这些工具的简单操作可以让很多新手快速掌握一些基础技能，能够尝试做一些Demo，快速体验交互设计过程，所以说一旦接触到交互设计，学起来并不是一件很难的事情。

这是一本介绍交互设计的入门书。如果你是一位想做交互设计的青年，推荐你阅读本书，它会带领你迈出“改变世界”的第一步；如果你是一位互联网领域的从业者，推荐你阅读本书，它会带领你深窥交互设计师们的世界。

——孙振兴妈妈帮移动研发总监；前百度输入法研发Leader

《交互设计那些事儿》是国内干货颇多且较为接地气的交互设计书籍之一。书中结合了行业特性和行业现状，同时指明做好这一门职业的学习方向，以及自我培养和提升的方法。从作者全面叙述交互设计的这些事中不难看出，本书是作者入行多年的经验总结。本书采用通俗易懂的语言把交互设计的概念、知识体系、职责、行业现状，以及发展方向等方面很好地串联起来，是一本帮助读者快速入门和成长的入门书籍。

——文人文产品经理；设计夹联合创始人

第1 章 交互设计基础知识 / 1

1.1 交互设计的基本概念 / 2

1.1.1 名词解释 / 3

1.1.2 交互设计发展史 / 5

1.1.3 交互设计的应用 / 7

1.1.4 交互设计职业上升空间 / 8

1.2 交互设计师应具备的能力 / 10

1.2.1 交互设计师的自我修养 / 11

1.2.2 交互设计师的岗位职责 / 11

1.2.3 交互设计师的执行内容 / 12

1.2.4 不同等级的交互设计师的要求 / 13

1.3 交互设计师的知识体系 / 15

1.3.1 需求分析能力 / 16

1.3.2 流程逻辑设计 / 18

1.3.3 产品功能设计 / 18

1.3.4 原型设计 / 19

1.3.5 编写文档（DRD 文档）与流程图 / 21

1.3.6 演讲与演示（PPT、Demo） / 22

1.3.7 文案编写 / 23

1.3.8 顶层战略设计 / 23

1.3.9 用户研究 / 24

1.3.10 代码编程（仅需了解） / 25

1.4 交互设计师业务相关职位简介 / 26

1.4.1 用户体验设计师简介 / 26

1.4.2 产品经理简介 / 26

1.4.3 UI 设计师简介 / 27

1.4.4 程序员简介 / 28

第2 章 交互设计工作场景 / 30

2.1 UED 组织架构 / 31

2.2 交互设计师在工作中的沟通场景 / 32

2.2.1 交互与设计的沟通 / 32

2.2.2 交互与开发、测试的沟通 / 33

2.3 项目组工作场景 / 33

2.3.1 需求评估场景 / 34

2.3.2 功能设计场景 / 35

2.3.3 产品评审场景 / 35

2.3.4 交互设计作业场景 / 37

2.3.5 交互设计方案评审场景 / 39

2.4 交互设计师日常工作场景 / 40

2.5 交互设计的工作思路 / 41

第3 章 交互设计中的架构与顶层设计 / 44

3.1 了解什么是顶层设计与架构设计 / 45

3.2 怎么进行顶层设计 / 48

3.3 为什么交互设计师要学会顶层设计 / 49

3.4 实例: 顶层设计图例 / 49

3.5 顶层设计注意事项 / 52

第4 章 业务流程与交互设计 / 54

4.1 业务流程图 / 55

4.1.1 流程图的概念 / 55

4.1.2 流程图的种类 / 55

4.2 业务梳理与功能设计 / 56

4.2.1 业务抽象流程图 / 57

4.2.2 功能组织图 / 60

4.3 交互设计中的流程图制作 / 61

4.3.1 流程图绘图工具 / 61

4.3.2 部门流程图 / 62

4.3.3 业务流程图 / 64

4.3.4 逻辑流程图 / 65

4.3.5 交互页面流程图 / 66

4.4 业务流程案例 / 67

4.5 流程设计技巧 / 75

4.5.1 技巧一：充分理解需求 / 76

4.5.2 技巧二：提取核心业务流 / 77

4.5.3 技巧三：逻辑描述清晰 / 78

第5 章 原型设计 / 79

5.1 原型和原型设计的概念 / 80

5.2 原型设计的历史 / 81

5.3 原型设计未来发展趋势 / 83

5.4 原型设计与产品设计的关系 / 86

5.5 常用原型设计工具 / 87

5.5.1 需求与逻辑：使用思维导图理清产品细节 / 88

5.5.2 Axure 原型设计工具 / 92

5.5.3 Justinmind 原型设计工具 / 101

5.5.4 Visio 原型设计工具 / 126

5.5.5 原型设计总结 / 132

第6 章 高保真原型设计 / 133

6.1 什么是高保真原型 / 134

6.2 关于高保真的争论 / 134

6.3 实例：制作高保真原型 / 136

第7 章 测试并评估交互设计原型 / 143

7.1 常用的测试方法 / 145

7.2 设计测试用例 / 148

7.2.1 确定用户场景 / 148

7.2.2 明确任务 / 148

7.3 测试和评估交互原型总结 / 149

第8 章 交互设计说明书的制作 / 150

8.1 交互设计说明书的类型 / 151

8.1.1 正式版交互设计说明书 / 151

8.1.2 Visio 版页面逻辑流程交互设计说明书 / 152

8.1.3 Axure 版本PRD 或交互设计说明书 / 153

8.2 如何编辑交互设计说明书 / 155

8.2.1 交互设计说明书的阅读对象 / 155

8.2.2 交互设计说明书包含的内容 / 157

8.3 交互文档写作建议 / 162

8.4 交互设计说明文档实例（界面元素版） / 163

8.4.1 封面 / 165

8.4.2 第一部分：前言 / 166

8.4.3 第二部分：交互设计需求与功能列表 / 169

8.4.4 第三部分：交互说明 / 172

8.4.5 第四部分：其他补充说明 / 201

8.5 交互设计说明文档实例（页面逻辑版节选） / 202

8.5.1 第一部分：前言 / 202

8.5.2 第二部分：页面元素定义 / 205

8.5.3 第三部分：交互逻辑（主要流程） / 209

第9 章 组织交互设计评审会 / 215

9.1 组织交互设计评审的意义 / 216

9.2 如何组织交互设计评审 / 216

9.3 实例：评审会会议纪要 / 218

第10 章 产品与交互设计都要懂 / 221

10.1 使用互联网模式“造桥” / 222

10.2 需求与需求变动故事 / 228

第11 章 自学交互设计指导 / 235

11.1 获取基础理论知识 / 237

11.1.1 Quora 社区 / 237

11.1.2 知乎网 / 239

11.1.3 博客 / 240

11.1.4 微信公众号 / 241

11.1.5 图书 / 243

11.2 软件与技能 / 244

11.3 交互项目经验 / 245

11.4 进阶交互设计能力 / 246

11.5 注意事项 / 246

附录 / 248

附录A 协作工作技巧 / 249

附录B 交互设计概念手册 / 253

后记 / 259

序1

目前学校还没有开设交互设计专业课程，特别是人机交互设计课程，从业者基本都是在模仿中寻找对比和感觉，在摸索中形成自己的一些判断。而我们今天所有积累的源泉基本都是苹果这类先驱公司在一代代的产品中不断试出来的。

人机交互设计包括产品功能结构上的设计，也包括单界面中的布局，以及过渡变化的一些设计。这两项对能力的侧重要求不同，所以一般并不是UI 设计师就一定能成长为比较好的交互功能设计师，这需要对产品策划上的定位有比较好的理解，然后才能确定何为好的结构，最后才有顺利的交互过程。这些还都是在“术”上解释交互设计做什么，而在“道”上，我们为什么需要做交互设计？思考这个问题的人更是少之又少，“术”带你成长技能，而“道”让你理解方向。

我有一个著名的“洋葱理论”：人面对的屏幕虽然是平面线性呈现信息的设备，但是人需要像剥洋葱一样一层层地理解事物。正是这个矛盾产生了设计的必要，让我们需要把线性呈现的设备通过设计加工成有包含层次递进的感觉。通过这种感觉还原人更自然地理解事物的本来面貌，减少了认识负担，提升了认知体验。

阿西的这本书基本上从人机交互设计相关的方方面面介绍了它们与交互的关系，你需要怎么理解，以及怎么配合团队一起默契地成长。对你从更宽的视野上理解交互设计很有帮助，希望通过阅读本书，你能找到你的兴趣所在，并扎根其中，在交互设计的道路上不断成长、进步。

尹广磊

Axure 中文社区创始人

序二

为书写序，我这是第二次，第一次我给了自己。

我写的书是关于Axure 这款原型设计工具的使用。原型制作过程中会包含很多交互效果的实现，但并不等于能够制作原型就能够掌握交互设计。就像画画一样，你能很好地临摹别人的作品，但却无法创作自己的作品，因为你可能还不会观察事物的结构、特征，没有理解色彩的搭配，甚至没有很好地掌握绘画的技巧与手法。所以，从临摹到创作，总是需要经过一个漫长的学习与思考过程。交互设计也是这样，我们能够看到很多优秀的交互设计，并且能够一丝不差地进行模仿，但当自己去完成交互设计工作时，却完全无从下手。这是因为很多问题还没有解决。

如何通过分析获取到实际的需求？如何清晰地完成交互的流程与逻辑？如何将交互与功能完美地结合在一起？如何通过原型将交互直观地呈现？如何完成交互文档的撰写？如何组织评审获取反馈？如何在实际工作中和其他关联岗位默契配合？这些都是很实际的问题，也是作为交互设计人员需要具备的能力。

在阿西这本书中，能够看到解决这些问题的答案。

我比较看重写书的出发点。但不管出发点有多少种，我始终认为只有一个出发点是最正确的，那就是写一本有益且方便读者学习的书。但是，这个目标不容易实现。对专业书籍的写作过程，我最大的感悟就是六个字：枯燥！枯燥！枯燥！重要的事情说三遍！

写专业书籍不像写小说，没有天马行空的故事场景可以去想象和发挥，一切内容都是被具体的知识点所约束的，只能在有限的范围内“活动”。但这并不等于机械地列出提纲，写完所有的知识点就能够交差。我认为，一个负责任的作者不能再把枯燥传递给读者。

我觉得阿西在写这本书的时候，跟我的想法不谋而合，那就是在写作中极力把文字口语化、案例生活化，能够让读者把呆板陌生的知识内容联系到生动熟悉的生活场景中，达到快速理解的目的。因为，我们希望每一个读者的感受都是：我能读得下去，并且愿意读完。我能感觉到你为了我能学到更多有益的内容，不辞辛苦，反复琢磨。我能感觉到，你在敲打每一个文字时，倾注的那份期待和热情。

最后，我还要建议许许多多在产品经理或者产品助理岗位上的人读一读这本书，特别是没有系统学习过产品知识的人，更要读一读这本书。这本书的主要内容虽然是交互设计，但却有着实实在在的与产品经理相关的内容，有着作为产品经理这个综合素质要求较高的岗位需要掌握的一些方法与技巧。不管是需求分析还是交互文档、业务流程或者沟通评审，都是值得当下很多产品新手学习与借鉴的宝贵内容。

小楼一夜听春语

Axure 原创教程网创始人

《Axure RP 7.0 从入门到精通》图书/ 视频作者

序三

随着互联网行业的高速发展，良好的用户体验被视为产品成功的关键因素。用户体验设计涵盖了产品设计、交互设计、视觉设计等诸多领域，而作为中间枢纽的交互设计，更是起着举足轻重的作用。交互设计师也往往是这样一群人，他们自如地穿梭于理性世界和感性地带之间，他们思维严谨却又富于艺术敏感度，他们的工作成果是逻辑性与感染力的完美结合体。这些都是交互设计专业赋予从业者的职业魅力。交互设计（尤其是数字产品的交互设计）是在工作实践中逐渐形成的一个专业领域，它没有特定的学科及完整的教育体系。面对市场对交互设计日益提升的专业度要求以及越来越多的人才呼唤，我们这些较早踏入这一领域的从业人员有责任做知识储备和人才培养的先行者。

交互设计行业在不断发展并成熟，对交互设计师的要求也日趋提高，要求从业者同时具有T 型知识结构与跨界处理问题的能力。以交互设计文档为例，要有对产品策略和需求的良好理解、严谨的逻辑思维能力、精准的文字表达能力，以及专业的视觉审美。此外，交互设计师的工作还包括用户测试、原型制作、文案编写、方案评审等，这也要求交互设计师是个多面手。从另一个侧面来看，交互设计师的工作也是多层次多角度的，要从用户、产品经理、视觉设计师、工程师等不同角色看待设计，使产品最终达到平衡。所以，如何培养交互设计师去胜任岗位是一个值得关注的课题。

当前市场上有关交互设计的相关书籍包括一些公认的权威著作，多是从理论指导和原则规范的角度告诉我们如何去做交互设计，设计素养的培养的确非常重要，但是新入门的从业者还需要这样一本书，它能简单而有效地告诉我们如何成为一位交互设计师，交互设计师都需要做什么，以及怎样去做。UXRen 社区是用户体验从业者的专业社区，旨在通过广泛的业内交流让从业者和学生群体获得专业提升，让交互设计从业者从0 到1，提升基础能力和系统设计思维，培养更多专业的人才。

阿西的这本《交互设计那些事儿》的写作思路与我们不谋而合，他从最基础的设计能力、设计工作模式、设计方法理论、设计输出物制作评审、设计沟通管理等方面告诉还在这个行业门前徘徊的同仁，如何快速地入门，有效地提高自己的工作能力。作者以通俗的语言、严谨的逻辑向我们阐述了什么是交互设计，交互设计师都做些什么，怎样学习交互设计。

如果你还不知道这些，那么，阿西的这本《交互设计那些事儿》是你最好的选择。

杨本植

UXRen 社区交互设计金牌讲师

序四

我和阿西是妈妈帮的同事，我们俩比较有缘，在同一天加入妈妈帮这个大家庭，对阿西的第一印象是“这是一位有想法、敢表达的傻大个”。

加入公司后，随着合作的深入，我发现阿西是一位工作态度特别积极、产品思路特别清晰的人。我是一名程序员，虽然有六七年的工作经验，但对交互设计的理解并不是很深刻，读完这本书，让我对阿西有了新的认识！他把自己经历过的、学习过的理论和实践通过简单清晰的语句表达出来，让没有交互设计基础的学习者能够很快理解并掌握所需知识。书中还细致入微地介绍了一些常见的入门工具，这些工具的简单操作可以让很多新手快速掌握一些基础技能，能够尝试做一些Demo，以最快的速度体验交互设计过程，所以说一旦接触到交互设计，学起来并不是一件很难的事情。

这是一本介绍交互设计的入门书。如果你是一位想做交互设计的青年，推荐你阅读本书，它会带领你迈出“改变世界”的第一步；如果你是一位互联网领域的从业者，推荐你阅读本书，它会带领你深窥交互设计师们的世界。

孙振兴

妈妈帮移动研发总监

前百度输入法研发Leader

序五

《交互设计那些事儿》是国内干货颇多且较为接地气的交互设计书籍之一。书中结合了行业特性和行业现状，同时指明做好这一门职业的学习方向，以及自我培养和提升的方法。从作者全面叙述交互设计的这些事中不难看出，本书是作者入行多年的经验总结。本书采用通俗易懂的语言把交互设计的概念、知识体系、职责、行业现状，以及发展方向等方面很好地串联起来，是一本帮助读者快速入门和成长的入门书籍。

文人文

产品经理

设计夹联合创始人

本书是关于交互设计的入门书，主要介绍交互设计从业人员的工作场景、工作内容、协同工作方式，以及需要掌握的基础技能。因此，本书的目的是为没有交互设计基础但准备从事交互设计工作的设计人员提供帮助。

注意，如果您是经验丰富的交互设计人员，能够独立完成交互设计方案，制作交互设计文档等，就不需要阅读本书。不过，如果您想再了解交互设计背景的一些知识，本书也可以作为扩展阅读资料。

本书结构

全书共分11 章，大部分章节都是相互独立的，你可以按照任意顺序阅读，找到自己感兴趣的部分主题。

第1 章是基础知识，主要介绍交互设计领域的很多专有名词、相关概念，以及交互设计的展历史。交互设计者入门需要学习什么？要掌握什么内容？都可以从本章找到需要掌握的知识体系。另外，还讨论了交互设计的协作单位有哪些，以及交互设计师的上升空间、职位要求等一些入门必备的“知识套餐”。

第2 章介绍交互设计的工作场景、沟通场景，以及项目中怎么与需求分析人员、产品开发人员、UI 设计师等进行协作的场景，同时还介绍了交互设计师日常工作实例和交互设计整体工作思路。

第3 章介绍架构与顶层设计，包括怎么从高层的角度宏观地看待项目整体，不止是局部进行作业。同时还介绍了什么是架构、顶层设计，以及如何开展顶层设计，怎么通过顶层设计确认项目的架构与交互设计的框架。另外，也介绍了交互设计与顶层设计的关系。

第4 章介绍流程。交互设计主要就是流程设计，把业务流程转化为程序的逻辑流程，介绍么是业务流程，如何通过业务流程抽象出程序的逻辑流程，最后介绍了通过软件制作流程图的方法。

第5 章是原型设计，主要介绍原型的基本概念、现状与发展趋势。原型设计是交互设计工作中最常见的一个工作任务，通过设计方案来确认需求与执行的产品模型，也可以快速确认需求与想法能否被满足，同时也介绍了常见的几种原型设计工具的使用方法。

第6 章介绍高保真原型，主要讨论是否需要高保真原型，并用实例形式展示了一个高保真原型的制作过程。

第7 章介绍测试原型。与软件开发一样，原型也需要测试，测试原型中是否存在功能点、流程、状态、交互动作等方面的Bug。为了让文档交付对象能够完整地理解交互设计方案，理解交互设计师的思路，需要交互设计师自测其交互设计原型，以确保文档没有问题。

第8 章介绍如何制作交互设计说明书，主要包括什么是交互设计说明书（DRD）、用Visio 如何制作DRD，以及使用常见的Axure 如何制作DRD，详细说明了交互设计说明书的使用场景、交互设计说明书应有的重点。展示了UI 设计师偏重的界面元素版文档实例，提供给程序人员的文档则相对重视页面逻辑的展现。

第9 章介绍了交互设计方案的评审需要业务部门、研发部门、测试部门、项目管理部门、领导层等关心项目进度的人参与，他们都要了解交互设计方案与设计理念，需要在完成交互设计方案之后组织交互设计评审会，以确保设计方案会被项目后续环节里的开发人员、测试人员等消除对设计方案的误解，同时也对需求方的需求进行印证，并确认是否满足了需求。

第10 章介绍了关于产品设计与交互设计两个岗位的关系，用易于理解的示例解释为什么交互设计师需要懂产品设计。

第11 章介绍了如何自学交互设计，列举了获得行业知识的一些渠道，以及一些交互设计软件和交互设计基础的技能。附录中列出了交互设计的关键词概念手册，以及交互设计师常配合的研发人员、视觉设计人员相关的工作经验技巧分享。

致谢

本书主要由阿西UED编写，参与编写的人员还有王付民、陈爱芝、王帅、张福玲、章静、郭容等，在此对他们表示感谢。

本书的出版也要感谢电子工业出版社博文视点与本书编辑、审校、印刷工作相关的所有编辑，是他们辛勤的付出才使本书得以顺利出版。

感谢我的家人对我的支持，这本书献给我的父母，是他们永远给我支持和鼓励。特别要感谢的是我的妻子Tinathy，她对我生活上无微不至的照顾，让我没有琐事的烦扰，能全身心投入写作，Tinathy 还在书稿完成之际协助我做了审校。

最后要感谢百度阅读平台、网易云课堂平台。很多读者就是从这里先阅读了电子版，然后才了解到本书的。

勘误信息

因作者水平有限，书中难免会出现错误与不妥之处，恳请读者批评、指正，作者的联系邮箱是assey@iamue.com。大家也可以将遇到的问题添加到https://iamue.com/feedback 网页，我们会对这些问题进行一一解答。

如果您还希望获取更多的网络学习资源，并与本书其他读者沟通，可以访问IAMUE 博客网站（https://iamue.com）。该博客网站是基于Web 系统的，您可以选择感兴趣的技术文章，并与其他读者或技术用户交流，博客提供了一个订阅功能，你可以根据需要选择订阅。

作 者