用户体验草图设计工具手册（全彩）

序言 vii

致谢 ix

第1 章　进入角色 1

现在让我们开始草图设计之旅。什么是用户体验？为什么草图设计是思考与创建用户体验的好方法？为什么有那么多设计师随身携带绘画本，你又为什么要加入他们的队伍？你如何开始通过草图来激发并改进自己的设计想法？

1.1　介绍 3

设计用户体验草图

1.2　为什么要设计草图 7

Buxton《用户体验草图设计——正确地设计，设计得正确》一书的概要

1.3　绘画本 13

用来记录、演进、展示、收藏想法的基本材料

1.4　10 加10：收敛设计漏斗 17

拓展10 种不同的想法，并对选出的想法进行改良

第2 章　对现实世界进行取材 29

尽管大部分人认为草图是一种创建新想法的方法，然而草图的很大一部分其实是关于快速收集现有想法。从我们周围世界中进行取材是有巨大价值的。当你从他人处获得想法时，你可以使用那些想法作为起始点，来激发你产生不同的方向，进行头脑风暴，将现有想法发展为新想法，或对大量想法进行融合。你不必一个人做这件事情，有一些方法来记录这些获取的想法，使你可以与同事们进行分享和讨论。

2.1　涂鸦式草图 31

快速画出想法——任何地点，任何时候——抓取想法的精髓

2.2　用相机取材 35

抓取启发性的瞬间

2.3　收集图片和剪报 43

成为半组织性的搜寻者/ 收集者

2.4　玩具箱和物理收集 51

收集实体物品

2.5　分享发现的物品 63

通过看彼此的收藏物来鼓励交流

第3 章　单一图像 67

典型的草图将能及时捕捉一个单一瞬间，通常是你设想的用户体验中的单一场景。然而我们不会教你如何成为艺术家，我们会向你展示可以用来创造草图的不同方法。

3.1　草图前的热身 69

始终有所收获的草图练习

3.2　画出你所见 75

绘画精确性的练习

3.3　草图词汇表 85

画物体、人和他们的行动

3.4　普通草图 91

草图的基本元素：绘画、注释、箭头和备注

3.5　合作式草图 95

用草图来进行头脑风暴，表达想法，促进交互

3.6　绘图软件 99

用常见的数码呈现工具来画草图

3.7　用办公用品进行草图绘制 105

使用常见办公用品来创建可编辑草图

3.8　模板 109

预先画好草图中固定、不变的部分，作为使用及重用的模板

3.9　照片描图 117

创建草图轮廓集，以建立草图构成基础

3.10　混合草图 127

合并草图与照片

3.11　用塑料泡沫设计草图 133

在物理介质上设计草图

第4 章　及时抓拍：视觉化叙述 145

想象一个人与系统一段时间内的交互行为是交互设计的特别之处。故事板用一系列独立的图像来捕捉这些时间元素，这些图像一屏接一屏地描述发生了什么。

4.1　顺序故事板 147

视觉化说明一段时间内的交互顺序

4.2　状态转变图 153

一种视觉化描述一段时间内状态、转变及决策路径的方法

4.3　分支故事板 159

视觉化说明一段时间内的交互决策

4.4　叙述性故事板 167

讲述一段时间内关于使用情境的故事

第5 章　让用户体验活灵活现 179

如果故事板中的每幅草图间都已经有了良好的起承转合，那么你就可以将这个故事板升级成为一个可互动的视频。这些视频可以通过回放这些故事，展示故事的分支剧情来进行可视化的叙述。

5.1　动态的任务流 181

将交互流程制作成一个图像配准的动画

5.2　动作路径 187

流畅的动画效果可以突出人机交互时的体验

5.3　动画分支 193

利用不同的路径实现动画中的支线剧情

5.4　关键帧和渐变动画 199

创造更为复杂的动画原型

5.5　线性视频 209

使用视频去展示一段纸面的交互流程

第6 章　邀请他人参与草图设计 215

动画原型可以通过回放故事或是呈现故事不同的分支剧情对交互流程提供可视化的叙述。其另外一种用途是引领目标用户进入这种可视化叙述，让用户进行真实的行为操作并获得自己真实的感受，产生真正的用户体验。然后你可以探寻用户对于这个动画原型的真实感受。或者你还可以向他人展示你的工作，然后请他们为你提出建议。

6.1　探寻原始的心智模型 217

了解人们是如何通过草图上的可视化元素对界面进行解释

6.2　绿野仙踪 227

草图在人类“魔法师”的操纵下对人们的操作进行反馈

6.3　发声思考 235

获知用户在使用界面草图时的真实想法

6.4　草图板 241

将草图张贴到布告栏与同事进行分享

6.5　审查 247

把你的草图创意呈现出来，请大家提建议

......(更多)