交互设计的艺术

《交互设计的艺术》从建立体验设计观出发，沿交互设计的工作流程学习，明确了交互设计师岗位的意义，展望了行业未来发展趋势，并落实到具体案例，带领读者一同探寻交互设计的艺术，深入浅出地介绍了交互设计的相关知识理念方法。风趣的介绍中穿插生动的举例，可指导读者了解交互设计相关知识，具有极高的可读性与专业性。标准化了一些行业内部约定俗成的简语以及国际术语的中文名称，为国内交互设计行业体系的搭建做出了贡献。零基础读者可以按书中流程对交互设计产生自己的理解，有一定了解的学生或相关从业者也可以从中获得启发，规范自己的知识体系。

常成，体验设计及设计管理资深人士。前清华同方E人E本副总裁兼首席产品官；前万达网络科技集团UED设计中心总经理、首席设计师；联想集团UCD用户体验设计中心创始成员；设计师的咖啡馆联合创始人；中国互联网大会-海峡两岸数字内容设计大赛专业总评委；IXDC中国交互设计专业委员会主讲人；UXPA中国用户体验专业委员会特约撰稿人；清华大学美术学院信息设计系特约授课专家；2008北京奥运会火炬“祥云”创作团队核心成员、祥云图案主设计师、人机交互主设计师。

前言

人与产品的交互行为是个永恒的课题，无论是手工艺时代的人造物品、工业制造时代的纯硬件产品、

信息时代的互联网技术（Internet Technology，IT）产品，还是互联网时代的网站和客户端产品，“人”

与“产品”之间的需求关系、使用关系、对话关系、互动关系、价值关系以及利益关系都从未停止过演

进与创新的脚步。尤其是在当下，人工智能（Artificial Intelligence，AI）技术及其催生出的智能化产

品迅猛发展的全新时代，“人机交互设计”（Man-machine Interaction Design）这个有趣而又神秘

的专业更是被业界推崇到了备受关注的前沿位置。

任何时候，无论是工作还是生活，人们总是希望陪伴在身边的产品能够变得更加安全、高效、准确、

简单、生动、有趣、亲切、自然，越来越像一位能力强大而又平易近人的朋友，能够服务和改进我们的

工作和生活。而这，正是交互设计永恒不变的核心目标，也是企业赢得当下与未来的制胜法宝。

企业是创新的主力军，人才是企业的竞争力。然而，目前设计师“美工化”的现象非常严重，不会

动脑而只会动手的“美工”岗位遍布于众多的企业之中。再加上日益加重的市场竞争压力与日益加快的

产业格局变化，使得大量的企业忽视、压缩产品的设计周期，造成一批又一批的年轻设计师们变得越来

越被动，还不会“走”就得去“跑”了，除了一味服从上游产品经理或者老板们的“意图”而机械执行

之外，设计师自身完全没时间、没精力、没权力、没能力去分析和研究用户需求、市场机会、产品定位

和技术优势，所掌握的设计方法也仅限于视觉、听觉、动效等表面技法，自然也就谈不上拿出真正具有

创新价值与核心竞争力的产品设计方案了。

为了满足企业对核心人才的需求，拥有一批真正懂设计、懂用户、懂产品、懂技术、有方法、敢创

新的设计人才，我自2002年起，在当时所任职的一家世界500强IT企业里，探索和确立以用户为中

心的设计理念、设计标准与设计流程。那时候，国内还没有针对用户体验和体验设计的学科体系，甚至

找不到任何系统表述体验设计理念、流程和方法的书籍。只有ISO-9241和ISO-13407两部国际标

准里有些许段落，对使用电脑的基本人机工程学要求进行过一些原则性的界定。 那时的我作为公司设计

中心里第一位“可用性设计师”，只能一边在日常产品设计项目中探索和尝试着以用户体验增值和需求

增值为原动力的改进创新，一边点滴赢取事业部的客户们的认可，以逐渐撑起体验设计这一专业的生存

空间。随着一个又一个具有鲜明用户体验创新价值的IT产品获得集团内部客户的认可与青睐，随着这

些设计方案的研发和上市，我所倡导的“软硬件一体化交互设计”理念也逐渐得到了市场的验证与企业

的重视。

终于，在2004年，我与两位从事软件交互设计工作的同事在集团总部的工业设计中心内共同创立

了国内第一个“以用户为中心的产品设计部门——UCD（User-Centered Design Center）”，开

始正式设立和培养交互设计师、视觉设计师和用户研究员等专业岗位。从那时起，我开始从各个艺术设

计院校及相关专业招聘具备基础素质的“好苗子”，通过一个个实体产品设计项目逐渐启发、教育、培

养他们，使他们逐步形成系统的“体验设计观”；并把我在实际项目中逐步研究形成的一套“交互流程图”

设计方法教给了他们，运用到全线的交互设计项目之中。时至今日，这套图法已经通过我和我的学生们

传播到了中国IT和互联网行业的多家一线企业之中，广泛发挥着价值，成为中国交互设计专业领域通

用的标准设计方法和文档输出规范之一。

2019年，恰逢新中国70岁生日，这是我自1994年起开始学习工业设计专业的第25年，也是我

开始探索用户体验设计学科的第17个年头。在中国迎来蓬勃创新的时代，我将多年来在一线企业里实

践和总结的行之有效的产品创新设计，以及用户体验设计（User Experience Design，UED）团队管

理的相关经验、方法和理念系统地撰写成册，提供给同样热爱产品创新设计的朋友们参考使用。那么，

在这本书里，我们先来谈谈“交互设计的艺术”吧。

常成

2019年10月1日　于北京

目录

Contents

001 第1章　建立体验设计观

001 1.1　从人造物的四个层次说起

006 1.2　从“以产品为中心”到“以用户体验为中心”的设计理念

006 1.2.1　商品经济时代的设计理念特征

006 1.2.2　体验经济时代的设计理念特征

008 1.3　“商品经济时代”与“体验经济时代”

011 1.4　体验经济的构成要素

011 1.4.1　价值认同

012 1.4.2　需求重建

014 1.4.3　过程参与

015 1.4.4　智能服务

016 1.5　产品的体验层次构成—“骨骼+皮肤”

016 1.5.1　骨骼与皮肤

017 1.5.2　产品的体验层次构成

033 1.5.3　体验层次与岗位职责

034 1.6　企业中的UED设计流程

035 1.6.1　项目启动阶段Kick-off Phase

035 1.6.2　产品规划阶段Product Planning Phase

036 1.6.3　产品设计阶段Product Design Phase

037 1.6.4　测试阶段Testing Phase

039 第2章　用户的任务流程

039 2.1　什么是流程

041 2.2　流程的三要素

041 2.2.1　节点

VIII

041 2.2.2　路径

042 2.2.3　任务

043 2.3　发现生活中的流程—任务流程

043 2.3.1　一只蚊子引发的流程

044 2.3.2　任务流程

045 2.3.3　任务流程图

048 2.4　任务流程与交互流程的关系

049 2.5　UI的本质是流程，是实现用户利益的流程

051 2.6　产品机会的蓝图—体验地图

055 2.7　交互设计的提纲—任务列表

056 2.7.1　从功能列表转化为MENU TREE功能菜单

057 2.7.2　从MENU TREE功能菜单转化为任务列表

059 第3章　交互设计的黄金标尺

059 3.1　体验标准（Experience Standard）

060 3.1.1　Level-1有用Useful

060 3.1.2　Level-2可用Usability

061 3.1.3　Level-3易用Easy to Use

061 3.1.4　Level-4爱用Joy to Use

063 3.2　可用性设计原则（Usability Design Philosophy）

064 3.2.1　一致性

065 3.2.2　可逆性

066 3.2.3　可察性

066 3.2.4　操作信息完备性

067 3.2.5　反馈信息完备性

068 3.2.6　连续性

068 3.2.7　效率性

069 3.2.8　易学习性

069 3.2.9　易记忆性

070 3.2.10　容错性

070 3.2.11　清晰的导航

070 3.2.12　用户的语言

目录

IX

073 第4章　交互设计的必要知识

073 4.1　操作与反馈

074 4.2　技术逻辑与使用逻辑

074 4.3　用户的直接利益与间接利益

074 4.4　流程

075 4.5　任务流程

075 4.6　时间轴

075 4.7　大、小交互流程

075 4.8　用户角色Persona

076 4.9　用户界面

077 4.10　交互模式

077 4.10.1　1尺交互模式

078 4.10.2　2尺交互模式（坐姿）

079 4.10.3　2尺交互模式（立姿）

081 4.10.4　10尺交互模式

082 4.10.5　0尺交互模式

082 4.10.6　手眼交互—鼠标交互模式

083 4.10.7　手眼交互—触屏交互模式

083 4.10.8　口耳交互—语音交互模式

085 4.10.9　复杂交互模式

089 第5章　交互流程设计-1：页面

090 5.1　交互流程的四要素

091 5.2　页面的构成

091 5.2.1　页面架构—托盘

092 5.2.2　控件—筷子和勺子

096 5.2.3　信息—饭和菜

102 5.3　UI系统架构

103 5.3.1　浅宽式UI架构

104 5.3.2　窄深式UI架构

107 5.4　交互流程图中的页面—UI原型页面

111 第6章　交互流程设计-2：路径

112 6.1　初识路径

112 6.1.1　路径的绘制方法

112 6.1.2　路径的基本使用方法

120 6.1.3　交互流程图的动脉和静脉

120 6.2　推进路径

121 6.2.1　层进路径

123 6.2.2　快进路径

124 6.2.3　执行路径

126 6.2.4　完成路径

127 6.3　返回路径

128 6.3.1　层退路径（BACK）

132 6.3.2　首页返回路径（BACK）

134 6.3.3　退出路径（CLOSE/EXIT）

135 6.3.4　返回主页路径（HOME）

137 6.3.5　取消路径（取消、再想想、以后再说）

141 6.4　路径设计的一次实战

159 6.5　跳转路径

160 6.5.1　应用跳转路径

163 6.5.2　流程跳转路径

167 第7章　交互流程设计-3：操作方式

167 7.1　单击

170 7.2　双击

172 7.3　长按

174 7.4　横拨、纵拨

178 7.5　自由移动

178 7.6　双指缩放

180 7.7　手写

180 7.8　操作方式的图法表达

182 7.9　操作方式的定义与设计

目录

185 第8章　交互流程设计-4：逻辑判断

185 8.1　判断的基本概念和图法表达

186 8.2　使用逻辑判断

187 8.3　技术逻辑判断

188 8.4　业务逻辑判断

189 8.5　判断一下自己是否掌握了判断

195 第9章　交互流程设计-5：复杂交互流程

195 9.1　双任务交互流程

201 9.2　双用户交互流程

203 9.3　硬件交互流程

211 第10章　交互设计师

211 10.1　什么是设计师？

213 10.2　什么是交互设计师？

214 10.2.1　交互设计师的专业价值

215 10.2.2　交互设计师的工作区间

215 10.2.3　交互设计师的工作职责

218 10.3　交互设计师的自我修养

220 10.4　交互设计师的职业发展

223 第11章　人工智能时代的交互设计

224 11.1　从“有趣”到“有爱”

226 11.2　AI人工智能产品的三个“进化特征”

227 11.2.1　Level-1智能识别—“看得懂、听得懂”

228 11.2.2　Level-2智能学习—“记得住、学得会”

228 11.2.3　Level-3智能创造—“想得出、做得到”

229 11.3　一个关于“入睡”的智能应用场景

233 11.4　对话式交互流程的设计

242 11.5　智能化设计理念

243 11.6　手写也智能

246 11.7　AI智能产品的人机交互发展趋势

251 第12章　交互设计的艺术

252 12.1　点石成金的艺术—激活潜在的用户界面

259 12.2　系统重构的艺术—O2O逛街平台

284 12.3　导航的艺术—“我的花园”

290 12.4　行为引导的艺术—不用培训和惩罚销售人员

296 12.5　硬件交互的艺术—第一项发明专利

310 12.6　东方文化的艺术—奥运火炬“祥云”

343 尾声：前辈的嘱托

345 结束语

346 致谢