本书是《用户体验草图设计》的配套阅读图书，将指导你如何一步一步地用草图来表达你 的设计理念，并介绍了多种草图方法。这些方法将成就你做草图的基本功，其中有的适用于完善想法，有的可以帮助你在工作组织内部交流基于体验的设计。各种草图方法会让你的设计灵感一一实现，这本书所描述的方法将成为行业标杆模型。

序　言 此书缘自何处 一本书的完成可能是因为各种机遇巧合，而本书的由来更可以称得上是一场意外。几年前，Bill Buxton 决定作为一名倡导者去进行积极的宣传推广：公司在进行软件开发之前应该开始一定的设计。然而他意识到一个问题，许多交互设计师（甚至是他们的设计经理）都没有进行过“设计师”般的正式训练。因此，他便编写了Sketching the User Experience 以试图解决这个难题。在书中他展示了草图可以是人们进行设计伊始的一 个简单却有力的工具。然后，他通过自己巡讲的方法将这种信息理念传递给很多学院派以及实践者，同时还借由其微软研究主管的身份影响着微软公司的其他职员。 与此同时，Saul Greenberg 在大学里执教人机交互导论的课程。他察觉到自己的学生总是在拥有灵感后，马上就进行开发编程。由于着手编程需要花费大量的劳动，很多想法在一开始就夭折了。即使有所产出，大多数也只能算是已有传统设计的改版。虽然也有一些产出会有不错的创意点，可当他们开始进行可用性研究时，这些创意点也会因为大量涌现的可用性问题而遭到抛弃。这其实并非是由于他们的想法不够好，而是因为他们还没有真正地深思熟虑这些想法。因此Greenberg 在一个设计工作室里开设了这门课程，在这门 课程里较之可用性而言他更看重设计。他向学生们展示出新鲜的科技，再让他们围 绕这些科技创造有趣的概念点。学生们的第一份递交物就是一系列的草图，他们必 须用其来阐述自己的想法。在他们触及设计之前，Greenberg 不允许他们提交他们自 己的任何想法。由于大多数学生都会担心自己缺少绘画技巧，认为“我画不了草图”， Greenberg 便开始向他们介绍一些适合非艺术专业人的简单的草图绘画技巧。 凑巧的是，Bill 和Saul 都是户外运动的爱好者，他们每年都会一起进行几次滑 雪或是山地车运动。在他们的旅途中，他们偶尔也会闲聊彼此的工作。Saul 非常喜 欢Bill 的书，但是觉得那本书在“实践层面”还有所欠缺。它可以促使人们开始想 去关注并注重设计，但是却没有提供一些技巧来告知人们该从何下手。Bill 也非常 喜欢Saul 的课程练习，但是也觉得可能这些练习需要进一步的系统化。因此二人 开始涌现出“练习册”的想法，觉得这本练习册可以作为Bill 书的实践篇。两本书 可以分来进行阅读，但如果能结合使用的话会事半功倍。 同时，曾与Saul 在Calgary 大学共同创办交互实验室的Sheelagh Carpendale，因对大学所倡导的跨学科活动与现实之间的差距有些不满，因为让非计算机科的学生接受传统计算机科学几乎是不可能的。因此，她创建了计算机媒体设计课程，让拥有不同背景的学生们（艺术、设计、音乐、计算机科学）能在计算机科学、艺术及设计的有机结合下完成他们的毕业设计。所以她很自然地参与到此书的创作中来，在这里她不仅能充分发挥自己的双重背景优势，并且还为如何促使不同学科的人参与到设计进程与草图设计，带来了她自己的思考。 Nicolai Marquardt，Saul 的一名博士毕业生，以一个协助者的角度观察了整套课程。他曾在德国Bauhaus 大学中接受了Tom Gross 教授的媒体系统的硕士级训练，他同时拥有了设计及计算机科学领域的背景。画草图已经完全融入他的生活中去了，而且他认为画草图应该是一位用户体验设计师的自然属性。他不仅拥有大量在各种场景下绘制的草图，还会搜集别人的草图作为启发。所以我们邀请他加入我们的团队来完成这本书。 综上所述，本书所有的作者都认为设计思维可以帮助我们创造出完美的用户体验，而草图则可以让我们开始像设计师一样进行思考。此书的最大愿望就是为你的草图、你的设计，以及你自己的用户体验，提供强有力的工具。 序言中的草图 当你看到我们序言中四位作者的草图画像时，是否已经有不妙的预感了呢？虽然它们离 艺术品还有一定距离，但你可能已经觉得这已大大超出你的能力之外了。或许与其他很多人一样，你可以回忆起的上一次进行的绘画大概是在久远的五年级了吧。 但也请不要失去信心。上面的草图是由作者之一进行绘制的，其实他也并没有什么绘画 技巧。他只是用一种照片追踪的方法对已有的照片进行了临摹，所以才能快速地形成这些草图。我们稍后将向你介绍这种照片追踪的以及其他更多的方法，利用这些方法，即使是非艺术专业的人也能画出及格的草图。 致谢 很多人为此书付出了他们的心血。 Annie Tat 是我们最初的排版设计师。她勾画出了几种不同的设计，并准备了一个示范章节。此范例的风格运用在了所有之后的章节中。 June Au Yeung 和Lindsay MacDonald将我们的原始文字和图片初稿转变成了现在的排版。他们与我们共同奋战，不仅为了适应我们的材料而努力调整每章节的排版，也处理所有各种烦琐的事情。 Calgary 大学交互实验室的学生们带给了我们持续不断的灵感：草图和设计对于他们创建出漂亮的系统至关重要。我们从他们身上学到很多，也用了一些他们的作业作为此书的案例。 更广泛来说，HCI 社团与设计社团是我们不可否认的智慧来源。此书中的方法并不都由我们创建。我们读了许多关于草图绘制与设计的文章和书籍。我们通过互联网看到了他人设计的很棒的草图和视频。我们也看其他教育者的网站，依次了解他们是如何来教授设计的。我们还与同事和从业者交流，从他们身上汲取知识。 非常感谢所有直接或间接为本书做出贡献的人。

目　录 序言 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 快速画出想法——任何地点，任何时候——抓取想法的精髓 来鼓励交流 第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 把你的草图创意呈现出来，请大家提建议