微交互：细节设计成就卓越产品(txt+pdf+epub+mobi电子书下载)

作者：[美]DanSaffer著

出版社：人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

微交互：细节设计成就卓越产品试读：

前言

实现优秀的微交互有几个步骤。首先，对有些程序员来说，就是要搞清状况。为此，必须要有极强的观察能力，看看别人如何互动，再看看自己的交互习惯，找到突破口，从逻辑上分清先后，再决定怎么做最恰当。观察什么？比如错误提示，比如对话框，它们都会呈现出一些信息，而这些信息通常会暗示下一步可以做什么。那么，为什么不在呈现信息这一步就包含“下一步”按钮呢？

要想设计出优秀的微交互，就要了解产品的最终用户，知道他们想达成什么目的，需要经历哪些步骤。还要求理解不同情形下交互的操作环境。所以，对用户的移情或者同理心，观察用户的本事以及把产品的方方面面（或者把不同编程团队甚至不同部门的产出）融入交互细节的能力都至关重要。这本书第1章非常清楚地介绍了做到这一切的原则。遍及全书各处的例子也折射出了微交互承载的机会。看完本书，你会发现一切还是取决于你自己。每个人自己的观察体悟是发现新的微交互机会的源泉。最关键的是，假如方案要求跨公司跨部门协作，千万不要像苹果的开发人员那样各自为战。记住，为用户考虑周详才是伟大产品的真义所在。

让微交互赢得用户的第二步就是实现。这一步需要考虑诸多设计问题：触发、规则、反馈、循环，还有模式。这些本书都一一给出了精彩的诠释。

微交互真有那么重要吗？好，我再给你讲一讲我最近花了不少钱买的一辆新车。每次我走到车前，握住门把手，把手上的灯就会亮起，车内的灯也会打开。门开了，我坐进车里，座椅、后视镜会自动调到让我感觉舒适的位置，甚至收音机都调到了我喜欢的频道。打开门，我座位上的灯就会点亮。我的乘客打开门，相应座位上的灯也会点亮。要是我和妻子轮流开车，每次换人，车都会根据我们各自的偏好重新设置。设计师是怎么设计出这一系列自动控制功能的？他们怎么知道该控制什么，不该控制什么？凭借他们的智慧，这才有了智能的微设计。这些都是细节吗？是。我们可以手工完成这些设置吗？可以。但是，当车子主动为我们做了这些事之后，坐到车里你会有一种情不自禁的喜悦，一种因为拥有这样的车而产生的自豪感。这难道不是所有汽车制造商都希望自己的客户能体验到的感觉吗？

为细节欢呼吧，要知道我们每天都生活在细节当中。我们不必再为下一步该做什么而浪费分分秒秒，为此喝彩吧，跟那些粗陋的过渡设计说再见。为 Dan Saffer 和他的这本书叫好吧，通俗易懂的讲解再配上丰富的示例，简直无敌了！我自认为在观察人们与技术产品交互方面颇有心得，但读了这本书之后，突然发现自己的能力又增长了一大截。现在，我更加关注细节，更加关注被忽视的机会。我也知道了什么产品的哪些细节做得好。知道好与不好，是做好产品的第一步。

现在轮到你了。拿出行动来，去征服世界吧！让我们的生活更简单，更丰富多彩。让微交互从理论付诸实践。

唐·诺曼简介

唐·诺曼（Donald Arthur Norman），美国认知心理学家、美国计算机协会会士、工业设计家，认知科学学会的发起人之一。现为美国西北大学计算机科学系和心理学教授，是尼尔森-诺曼集团（Nielsen Norman Group）咨询公司的创办人之一，曾担任苹果公司先进技术部副总裁。1999年，Upside杂志提名诺曼博士为世界100精英之一。2002年，诺曼获得了人机交互专家协会（SIGCHI）授予的终身成就奖。2006年，他获得了计算机和认知科学“富兰克林奖章”。前言

本书主题

开启家电、登录网站、在手机应用里查询天气，这些都是微交互的例子。微交互只涉及一种使用场景，只做一件事。这种功能本身就可以做成一个应用，也可以只是某应用众多功能中的一个。真正优秀的微交互高效、顺畅、时尚，而且处处体现对用户需求和意图的心领神会。一个深受喜爱的好产品和一个让人觉得凑合用的一般产品，区别往往就在于微交互带给人的体验。本书的目的就是深入分析微交互，帮助读者设计出优秀的产品。我们首先会介绍微交互的模型，然后逐章详细讨论该模型的一个方面，力求揭示出每一种微交互最优化背后的原理。如此一来，读者就可以知道从哪些地方着手改进自己的产品，从而增加用户黏性，塑造客户（及品牌）忠诚度。

读者对象

本书写给那些希望把产品——特别是数字化产品，做得更出色的人。产品经理、设计师、程序员、研究人员、评论家和公司老总都是本书的读者对象，本书能引发你的思考，提高你的品味，增强你的竞争力。

如果你认为某个小功能值得实现，它能让产品更加出色，并为此想说服自己的客户、开发人员、产品或项目经理，那本书尤其适合你！现在，这个小功能有了一个名字：微交互。你可以更加胸有成竹地据理力争了。

本书内容

这是一本小书，讨论因小见大的小功能。

• 第1章 设计微交互

介绍微交互的概念，解释为什么某些不起眼的地方那么重要。这一章会讨论微交互的构成，展示微交互要遵循的总原则。最后还会讨论微交互与项目集成的方式方法。

• 第2章 触发器

介绍触发器，也就是发起微交互的装置。主要讨论手工触发（用户启动）和系统触发，以及提前展示数据等规则。

• 第3章 规则

讨论影响微交互的不可见因素，以及这些规则的由来、贯彻方法，包括不要从零开始。

• 第4章 反馈

讨论正反馈，也就是用户怎么理解潜规则。有三种反馈形式：视觉反馈、听觉反馈和触觉反馈。介绍以人为本和使用被人忽视的东西作为传达信息的手段等原理。

• 第5章 循环与模式

讨论循环与模式，即微交互中“不可分割的”部分，包括不同的模式和循环，以及如何使用长循环。

• 第6章 综合实例

综合考虑微交互模型的各个方面，设计三个微交互示例，一个针对移动应用、一个面向在线应用，最后一个着眼于家电。这一章也将讨论如何把微交互组织起来构成好用的功能。

• 附录 测试微交互

介绍微交互功能的测试流程。

本书宗旨

过去的十几年来，设计师一直被鼓励提出宏大的思路，解决“棘手的问题”，使用“设计思维”解决商业和政府运作中的系统性问题。没有什么问题大到设计工具不适用，从业务流程重组到城市建设规划，设计重任几乎无所不包。

设计界这种资源投放的再集中会导致什么结果，现在还不清楚。但着眼于如此宏大的规模，往往会导致人们忽略设计中的一个重要方面：令人愉快的细节！我们喜爱的产品都关注细节，比如漂亮迷人的曲线，令人自信的点击，以及与人类心智模型契合的体验。

本书要讨论另一种思维方式：撇开壮观宏大、由上而下的设计，重视自底向上、精心构思的细节。这些小地方是设计师最擅长的地方，举手之劳，就能立杆见影、活灵活现。这是改变世界的另一种方式：在看似无关紧要的时刻释放令人心动的体验！

漂亮而且起作用的细节照样带给人快乐。这种快乐既是用户的，也是设计师的，但毋庸置疑这需要技能、时间和思考来创造。这事可不简单，做好了照样能像解决大问题一样流芳百世。从用户角度想一想，谁不愿意生活里有更多的乐趣呢？

排版约定

本书使用的排版约定如下。

• 楷体

表示新的术语、重要的概念等。

这个图标代表小窍门、建议或说明。

这个图标代表警告信息。

使用代码

本书就是要帮读者解决实际问题的。也许你需要在自己的程序或文档中用到本书中的代码。除非大段大段地使用，否则不必与我们联系取得授权。因此，用本书中的几段代码写成一个程序不用向我们申请许可。但是销售或者分发O’Reilly图书随附的代码光盘则必须事先获得授权。引用书中的代码来回答问题也无需我们授权。将大段的示例代码整合到你自己的产品文档中则必须经过许可。

使用我们的代码时，希望你能标明它的出处。出处一般要包含书名、作者、出版商和书号，例如：Microinteractions by Dan Saffer (O’Reilly).Copyright 2013 Dan Saffer, 978-1-449-34268-5。

如果还有其他使用代码的情形需要与我们沟通，可以随时与我们联系：permissions@oreilly.com。®

Safari Books Online

Safari Books Online（www.safaribooksonline.com）是应需而变的数字图书馆。它同时以图书和视频的形式出版世界顶级技术和商务作家的专业作品。

Safari Books Online 是技术专家、软件开发人员、Web 设计师、商务人士和创意人士开展调研、解决问题、学习和认证培训的第一手资料。

对于组织团体、政府机构和个人，Safari Books Online 提供各种产品组合和灵活的定价策略。用户可通过一个功能完备的数据库检索系统访问 O’Reilly Media、Prentice Hall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit Press、Focal Press、Cisco Press、John Wiley ＆ Sons、Syngress、Morgan Kaufmann、IBM Redbooks、Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、Jones ＆ Bartlett、Course Technology 以及其他几十家出版社的上千种图书、培训视频和正式出版之前的书稿。要了解Safari Books Online 的更多信息，我们网上见。

联系我们

请把对本书的评价和问题发给出版社。

美国：

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

中国：

北京市西城区西直门南大街2号成铭大厦C座807室（100035）

奥莱利技术咨询（北京）有限公司

O’Reilly的每一本书都有专属网页，你可以在那儿找到本书的相关信息，包括勘误表、示例代码以及其他信息。本书的网站地址是：

http://oreil.ly/Microinteractions

中文版地址：

http://www.oreilly.com.cn/index.php?func=book＆isbn=9787115331618

对于本书的评论和技术性问题，请发送电子邮件到：

bookquestions@oreilly.com

要了解更多O’Reilly图书、培训课程、会议和新闻的信息，请访问以下网站：http://www.oreilly.com

我们在Facebook的地址如下：http://facebook.com/oreilly

请关注我们的 Twitter 动态：http://twitter.com/oreillymedia

我们的 YouTube 视频地址如下：http://www.youtube.com/oreillymedia

致谢

非常感谢 Floris Dekker 和 Andrew McCarthy，他们是大名鼎鼎的Little Big Details 博客的编辑和收集人，本书使用的大多数插图都选自这个博客。毫无疑问，如果不是那么方便地得到这些示例，我不可能写出这本书。除了感谢他们两位，还要感谢为他们这个博客做出贡献的人。只要我能找到名字，就会在书中提到，以示感谢。

Jack Moffett 是 Design A Day 博客的撰稿人，理所当然也要接收我的谢意。不光是因为我从他的“In the Details”主题中撷取了很多例子，更因为他对那些细节的剖析长期以来给了我很多灵感，间接导致了这本书的问世。

本书技术审稿人通过鼓励、智慧和敏锐的眼光让这本书更上一层楼，他们是 Robert Reimann、Christopher Fahey、Dani Malik、Nick Remis、Dave Hoffer、Bill Scott 和 Scott Jenson。

尽管我在O’Reilly出版的上一本书业绩不能算骄人，但我的编辑Mary Tresler 和 O’Reilly 团队的其他同仁还是再次给了我机会，而且继续大力给我支持，让我完成这本关于微交互的小书。

一如往常，绝不能忽视我背后坚忍的女性（一位是人类，一位是犬科）。写本书是对我全家耐心的考验，因为我只能坐在客厅中央的高脚椅上写这本书，妨碍了大家正常的生活。我把这本书献给她们。

最后，感谢过去和当前我在学习和工作中遇到的师长和朋友。你们教给了我（有时候是强迫我掌握了）很多，让我关注细节的价值。一直以来，你们都认为细节决定体验，鼓励我把产品的细节做到极致。而这些正是本书所要揭示的。——Dan Saffer，2013年2月于旧金山第1章 设计微交互“天下没有大作品。”——维克多·帕帕奈克（Victor Papanek）

乐队指挥中止了演奏，观众席爆发出一阵阵的怒吼。纽约爱乐乐团已经演奏到了马勒《第九交响曲》最后那舒缓、沉寂的慢板。为欣赏这场音乐会，很多观众不惜重金，几百美元买一张票。一个多小时的乐曲接近尾声，观众全神贯注地聆听着这首曲子最安静、最庄严的时刻。

就在此时，出状况了。前排某位观众那儿传来iPhone手机的“马林巴琴”铃声，就是那种叮叮咚咚的高调木琴的声响，而且一遍又一遍，反复不停。这是手机闹铃响了。过了一会儿，没有停。又过了一会儿，还没有停。乐队指挥Alan Gilbert 示意停止演奏，但闹铃仍然响个不停。现场开始有观众大骂那个拿手机的人。后来乐团年长的管理者称，这个人是“赞助商X”，而且还是一个长期赞助交响乐团的人。纽约爱乐的主场地，林肯表演艺术中心艾弗里·费雪厅，本来是要迎来一片平静和安宁的，结果却变得人声鼎沸，骂声四起。[1]

2012年1月的《纽约时报》 报道，赞助商X一天前刚换了手机，他们公司把他原来使用的黑莓换成了iPhone。演出开始前，他把手机调成了静音，但他不知道iPhone的闹铃在静音模式下也会响。因此在闹铃响起时，甚至在令人难以忍受地响了很长时间后，他都没意识到是自己的iPhone在响。而当他意识到是自己的手机并关掉闹铃时，已经太晚了，整个演出都被搞砸了。

第二天，消息传开，引发了互联网上很多人的批评，有人也在拿这件事找乐。作曲家Daniel Dorff 发推文说：“为防万一，我把手机铃声改成了马勒《第九》。”很多博客也就此事发表意见，其中有些人赞成要静音，就禁止一切响声。比如在2012年1月份的一篇文章“Daring Fireball: On the Behavior of the iPhone Mute Switch”（关于iPhone 静音开关的行为）中，技术专栏作家Andy Ihnatko 写道：“我认为，与其让设备错误的决定招致难堪，还不如自己干傻事儿造成难堪更好些。”

还有一些人则认为，就算静音，闹铃该响还是要响（我认为这是对的）。正如苹果专家 John Gruber 指出的（http://t.cn/zQHeaA6）：“如果静音开关禁止一切响声，那么每天都将有上千人睡过头，因为他们进入梦乡的时候，可能意识不到手机处于静音模式。”

苹果的iOS Human Interface Guidelines（http://t.cn/apfVq1）也说明了为什么静音要这样处理：

例如，用户在剧院中要把设备切换成静音模式，以免打扰其他观众。此时，用户仍然希望能在设备上使用应用，只是不想被意外或没有明确要求的声音（比如响铃或短信提示音）惊扰。

响铃/静音（或静音）开关不会禁止用户专门或明确要求产生的声音。

换句话说，手机静音不会禁止那些用户特别要求发出的声音，而只会禁止非用户主观意愿下发出的声音（比如短信提示音、来电铃声）。这就是规则。与很多规则一样，它并不为人所知，而且除了开关上橙色的标记之外，屏幕上也没有任何指示说明铃声关闭了。假如苹果原来规定了不同的规则，即静音就禁止设备发出所有声音，那么还得为此规定其他规则和反馈机制。闹铃不响了那手机振动吗？手机处于静音模式时，需要某种提醒装置吗，比如唤醒手机时在屏幕上显示一个图标，或者点亮一个硬件的小LED指示灯？设计手机静音的方式太多了。

手机静音就是微交互的一个例子。微交互，就是产品中涉及一种使用场景的交互，只体现为一种功能，只完成一件事（图1-1展示了一个例子）。微交互可以是启动应用，也可以启动设备，但更常见的则是伴随或内置于另一个更大的功能。微交互只需瞬间，可能没人注意，甚至没人知道，也可能妙趣横生，令人愉快。修改设置、同步数据或设备、设定闹钟、更换密码、打开家用电器、登录、设置状态消息、收藏或标注“喜欢”……都是微交互。我们随身携带的设备里，家里的各种电器内，手机或电脑的应用中，乃至我们每天工作生活的环境中，到处都可以发现微交互。图1-1：常见的微交互：登录。社交网站Disqus的登录表单能根据你的电子邮件猜测你的名字（蒙Jakob Skjerning 和“Little Big Details”惠允使用）

微交互就是产品中这种通过交互来实现功能的细节，而正如[2]Charles Eames的名言 所说，细节不仅仅是细节，而是设计。细节可以让用户更方便、更愉快地使用产品，尽管人们事后不会记得它们。有些微交互实际上或者事实上是看不见的，也不太可能成为你购买一款产品的理由。相反，它们通常都是一些零零碎碎的功能，或者正式一点说，属于支持性或所谓的“完整性”功能。比如说，人们不可能因为一款手机的静音功能而购买它，但这个功能却是必需的。而且，诸如此类的微交互带给用户的体验却千差万别，有的很好，有的很差。有些微交互设计得很难用，有些根本没人知道或者让人想不起来，最好的微交互都是吸引人而又聪明乖巧的。本书要讨论的就是最后一类，即怎么设计出最好的微交互。“赞助商X”是因微交互而声名远播的一个例子，但这样的例子并不多。正如“赞助商X”一样，尽管我们每天都生活在各种微交互中，但往往只有在它们给我们带来麻烦之后，我们才会注意它们。然而，无论多么不起眼，多么难发现，微交互却是至关重要的。想想看，你喜欢某个产品或讨厌某个产品，往往就是因为这些产品中的某些细节。好的微交互能让我们的生活更加便捷、更有乐趣。这就是本书要讨论的主题：怎么设计好微交互？

这一章会告诉大家怎么区分什么是功能，什么是微交互，顺便简单介绍一下微交互的渊源。然后开始讨论微交互的结构，也就是本书的结构。作为一个模型，它为我们讨论和分析微交互的各个方面，进而设计好自己的微交互提供了参照。最后，我们会谈一谈微交互的设计流程。1.1 微交互不是功能，但很重要

微观交互与宏观功能完美契合是最强大的。用户体验设计的本质就在于此：既要关注细节，又要关注大局，只有这样用户才能获得最好的体验（见图1-2）。图1-2：Twitter的密码选择表单就是微交互的一个典型范例，反馈消息清楚明白（蒙“Little Big Details”惠允使用）

微交互与功能的区别，主要在于规模和范围。功能一般都比较复杂（多种用途），需要花较多时间熟悉，而且涉及认知的塑造。微交互一般都简单明了，认知上毫无压力（见图1-3）。比如，音乐播放器就是功能，而调整音量则是这个功能中的一个微交互。图1-3：如果有人在你的Facebook主页上用非默认语言发表了评论， Facebook 会显示“See Translation”（查看翻译）链接（蒙Marina Janeiko和“Little Big Details”惠允使用）

微交互适合如下应用场景：

• 只完成一项任务；

• 连接不同的设备；

• 只影响一个数据，比如股票价格或温度；

• 控制正在进行的过程，比如切换电视频道；

• 调整某项设置；

• 查看或创建一小部分内容，比如状态消息；

• 打开或关闭某个功能。

微交互不容小视

微交互可以是产品的组成部分，也可以是整个产品。以烤面包机为例，它只做烤面包这一件事。烤面包机只有一个使用场景：把面团放进去并按启动开关。然后，烤面包机就开始烤面包。烤好之后，仓门打开。仅此而已。当然，现在有的机器有了新的烘烤目标（比如烤百吉饼）。不过从本质上说，这种设备就只是一个微交互。

类似地，小应用也可以只是一个微交互。数以千计的小应用（包括桌面和移动设备中的应用）都只专注于做一件事，有的是转换温度（比如图1-4所示的Convertbot），有的是计算器，有的则显示天气预报。图1-4：Tapbot的Convertbot是基于一个微交互构建的应用，它只专注于把一个值转换成另一个值

微交互经常是在设计和开发产品的最后阶段才被考虑的事情，因此往往不受重视。但忽视微交互是个错误。最早的Android手机（G1）之所以让人觉得像个半成品，原因就在于微交互做得很差劲，跟iPhone简直无法相提并论。比如，有很多不一致的方式可以触发删除操作，此外在某些应用中按搜索键没有任何反应。如果微交互设计得很差劲，那么无论主功能如何完美，使用该功能的过程都是让人难以忍受的。产品设计得好坏，取决于产品中最小的那一部分设计得如何。

再想一想，几乎所有操作系统，包括桌面操作系统和移动操作系统，实际上都在做同样的事情：安装和启动应用程序、管理文件、连接软件和硬件、管理打开的应用程序和窗口，等等。但操作系统之间的差别，至少从用户角度来讲，则体现在你每天甚至每小时都要与之接触的微交互上（见图1-5和图1-6）。图1-5：本书作者OSX中的菜单栏，这些图标中的任何一个都对应着一个微交互图1-6：在网页中搜索某个词时，Chrome会在滚动条中显示目标词所在的位置（蒙Saul Cozens 和“Little Big Details”惠允使用）

当然，有些功能的确是特别有用或者特别强大的（或者受到知识产权法的特别保护），以至于微交互显得并不重要。很多医疗设备就是典型的例子，就像大多数技术刚刚诞生时一样，人们更多关注的是这些技术能做什么，而不是怎么做。比如2002年上市的第一代“鲁姆巴”（Roomba ）家庭保洁机器人既不会计算房间大小，也不能检测障碍物和脏物，但无论如何它在当时都是新奇的技术。而后来的机型（特别是在市场上有了竞争产品后的机型）则越来越专注于人类和机器人的微交互。

在竞争激烈的市场环境下，微交互显得格外重要。如果产品的功能类似，那只能靠使用产品的体验来扩大销量并提升品牌的忠诚度。而产品的整体体验严重依赖于微交互。微交互是产品观感中的“感”。Google+与Facebook相比，之所以让人觉得单薄乏味，追根究底在于其微交互不够好。比如把用户归入圈子，一开始还让人觉得有点意思，时间一长就变得特别无聊和小儿科。

另外一个重视微交互的原因，就是在如今多平台共存的生活环境下，微交互起到了至关重要的连接作用。微交互可以把多个移动设备、电视、桌面电脑、笔记本电脑、家用电器，以及Web应用中的功能连接在一起。虽然这些微交互可能因平台而有所不同，但它们体积小巧，因此可以保持某种一致性，而大型的功能却做不到这一点。特别是家用电器和移动设备，它们的小屏幕（或根本没有屏幕）看起来就像是专门为微交互量身打造的一样。小巧的微交互完美契合小设备。就拿Twitter来说吧。Twitter本身就构建于一个微交互：发送140字以内的短信。而用户几乎可以通过任何设备、在任何地方来做这件事。有些实体甚至可以独立地发推文，或者代表我们发。Twitter可以用来传播八卦新闻，也可以成为引导革命的消息平台。设计良好的微交互能够完美地适合各种平台，适应数百万用户（见图1-7）。图1-7：贴心的微消息。在Harvest网站上寻求帮助时，你会在他们的公布办公时间旁边看到当地目前是几点钟（蒙Nicolas Bouliane 惠允使用）

微交互也完美契合我们拥挤、复杂、碎片化的生活。我们需要甚至乐于快速浏览数据，在餐馆迅速签到、在地铁上随意评论。（“休闲游戏”这个类别实际上就代表着一类专门针对娱乐的微交互。）

微交互强迫设计师简化工作、注重细节，要求设计师比拼谁的设计更轻巧、更简明、更流畅，而不是更笨重（见图1-8）。图1-8：在Microsoft Office 中，文本旋转之后，相关的格式按钮也会随之旋转（蒙“Little Big Details”惠允使用）1.2 微交互秘史

1974年，一位年轻的工程师 Larry Tesler 在为 Xerox Alto 计算机开发一个名为Gypsy的应用程序。Gypsy属于第一代文字处理程序，在它之前则是具有开创意义的Bravo。Bravo是第一个真正“所见即所得”的文字处理程序，也是第一个具有更改字体功能的程序。虽然都是文字处理程序，但Gypsy却很不一样，因为它使用了鼠标和图形用户界面（GUI）。Larry 的任务是减少界面中的感觉体（modality ），以便用户不必切换到其他模式去执行操作。此后数十年，Larry一直为这个目标而奔走呼号。你看，他的网站是http://www.nomodes.com，Twitter是@nomodes，就连他的汽车牌照也是NOMODES（http://t.cn/zQHeT28）。Larry希望用户在按下字母键时，总能在屏幕上看到相应的字母以文本形式显示出来——这对文字处理程序而言，可不算是过分的要求。但Bravo就做不到这一点。在Bravo中，用户只能在特定的模式下输入文本，而在这个模式之外，敲击键盘会触发其他某种功能。

把文本从文档的一个部分移动到另一个部分也是文字处理程序的功能。在Bravo中（见图1-9），用户必须先选择目标，然后按“I”或“R”键，进入“插入”或“替换”模式，再查找并选择要移动的文[3]本，最后按Esc键执行复制 。Larry想出了一个更好的办法来执行这种操作，他的方案不仅利用了鼠标，而且大大简化了整个微交互。在Gypsy中，用户可以选择一段文本，然后按“复制”功能键，选择目标，最后再按“粘贴”功能键。不需要模式。剪切和粘贴就此诞生。图1-9：Bravo的“屏幕截图”（宝丽莱照片）。通过下方的窗口在上方窗口中生成表单（蒙DigiBarn Computer Museum 惠[4]允使用）

交互设计以及人机交互的历史，实际上就是微交互的历史。今天，我们在桌面和笔记本电脑中、在移动设备中习以为常的那些交互方式，都曾引发过微交互设计的革命。无论是保存文档，还是把文件拖放到文件夹，还是连接到Wi-Fi网络，都曾经是精心设计的微交互。就连滚动和打开多个窗口这么“基本的”交互方式，也都要经过设计。技术在快速发展，不断对微交互提出创新的要求。用户习惯了拿来就用，他们只会关注更好的交互方式，或者是那些由于技术发展催生的或强制必须使用的微交互方式。

没错，技术不断发展，支持这些技术实现的微交互同样也在不断发展。以滚动为例，Bravo最早支持一种原始的滚动机制，但直到Alan Kay、Adele Goldberg 和 Dan Ingalls 在 Xerox PARC 的另一个产品SmallTalk中引入滚动条才算基本成熟，时间大约在1973年到1976年之间。SmallTalk支持的滚动更加平滑，可以一个像素一个像素地滚动，而不是只能一行一行地滚动。（这是PARC当时给史蒂夫·乔布斯以及他带来的工程师演示的一个著名的功能，后来苹果在Lisa以及[5]Mac中都内置了这个功能，参见图1-10。）

随着文档变长，滚动条上会增加一个箭头图标，点击可以直接跳转到文档底部。此外，还会出现一个提示条，告诉你当前在文档中的什么位置。真正的变化开始于触控板和移动设备中的触摸屏技术。你现在是不是通过手指滑上滑下来滚动界面？苹果公司在发布iPhone之后，为了让笔记本电脑和移动设备统一成“自然滚动”，从 OS X Lion 开始改变了滚动方向（从上到下）。（可以读一读 Michael Agger 在Slate杂志上发表的文章“Apple’s Mousetrap: Why did Apple reverse the way we scroll up and down?”，链接为：http://slate.me/10nnZN8。）苹果还不惜引发众怒地隐藏了滚动条，只在滚动过程中或者在光标靠近可滚动窗口右边界时才显示它。这些都推动了微交互向前发展。图1-10：苹果1982年发布的Lisa个人电脑推出了一系列（从市场角度说）“新”的微交互（来源：Lisa Graphical User Interface Gallery Guidebook）

微交互并不局限于数字产品。实际上，微交互起源于第一代电子设备，比如收音机（1893年）、手电筒（1986年）和洗衣机（1900年）。正像设计师 Bill DeRouchey 在他的演讲“The History of The Button”中指出的，在（电子机械出现之前的）机械时代，用户可以直接跟踪自己的操作并看到结果。比如，拉动控制杆，可以看到齿轮转动，齿轮转动又带动车轮转动。输入和输出的关联很直观。电子技术的应用改变了一切。按一下墙上的按钮，房间另一边的灯应声点亮。没错，反馈是实时的，但实现方法却不是。正如 DeRouchey 在“The History of the Button”（http://slidesha.re/1049o1K）中所说：“按钮是一个标志，标志着人类动作的结果第一次完全不同于引发这个结果的动作。”动作变得抽象起来了。

进入数字时代，特别是GUI出现之前，动作甚至更加抽象。插入一叠穿孔卡片，或者拨动一排开关，产生的结果几乎无法预知。终于有一天，GUI诞生了，微交互得以简化。但是，摩尔定律（处理器速度每18个月增长一倍）、库米定律（硬件的耗电量每18个月降低50%）、克莱德定律（存储空间呈指数级增长），以及越来越快的网速和越来越便利的网络接入（先是局域网，后有无线网络，包括无线局域网和移动无线网），都对更多的微交互提出了需求，而这些微交互涉及的控制操作远比开灯抽象得多。比如在设备之间同步数据，这个概念本身就是抽象的，现实当中没有什么对应的类比。

输入方法同样大大改变了微交互。按键、开关、键盘、鼠标，这些传统的物理装置可以触发微交互；触摸屏、传感器、语音和手势，这些新兴的交互手段同样可以触发微交互。回首不远的过去，我们与身边环境交互的唯一方式只有通过物理装置手工调整它。从1956年Robert Adler 发明 Zenith Space Commander，即第一个电视遥控器起，这种局面被彻底打破（见图1-11），人类有史以来第一次可以不通过接触就能控制物体。图1-11：遥控飞机、遥控轮船早就有了（主要是军用），但让遥控器走进普通家庭的则是Space Commander 电视（蒙Peter Ha 惠允使用）

今天，要触发一次微交互，甚至不必在同一个房间。只要使用适当的设备，你可以在地球的另一边调整自己家里的温度（见图1-12）。再比如，到了合适的地点，进入某个街区，你的手机就可以提醒你该做什么，或者你的GPS设备就可以告诉你在哪里往左拐。在公共洗手间，只要把手伸进洗手池，水龙头就会喷出水来。你可以让自己的手机在附近找一家餐馆，可以在触摸屏上滑动手指显示出一个搜索条，可以在柜台上按一下手机买杯咖啡。这样的例子太多了。图1-12：Nest Learning Thermostat（学习型恒温器）通过距离传感器感知有人进入房间，然后开灯并显示温度，让人无需触碰，一目了然（蒙Nest惠允使用）

技术发展史的背景隐藏着微交互的发展史。微交互与技术之间的关系就像共生生物，它与技术相伴而生，如影随形，但却能影响、管理和控制技术。1.3 微交互的结构

有效的微交互不仅表现在大小上，更表现在它们的构成上。一个设计完善的微交互必须适当地处理四个不同的部分，接下来我们会依次讨论（见图1-13）。图1-13：微交互的结构

这四个部分是设计和分解微交互的一种方式：触发器启动微交互、规则规定微交互的工作过程、反馈向用户说明规则、循环与模式是影响微交互的元规则。

任何微交互的第一部分都是触发器。对于关闭iPhone的铃声而言，触发器是由用户拨动的，也就是说用户必须要做点什么（在这里就是拨动开关）才能开始微交互。因此，很多微交互都始于对用户需求的理解：用户想要做什么，什么时候会这么想，有多频繁。用户需求决定了触发器的使用情境、操作方式和存在时间。以手机静音为例，用户任何时候都有可能想要关闭铃声，而且是快速关闭。因此，触发器（响铃/静音开关）必须随时待命，无论当前运行着什么应用，都需要能够立即打开或关闭声音。这个功能实在太重要了，因此iPhone仅有的5个物理按键中就有一个专门用作静音的触发器。控件，无论数字的还是物理的，都是用户启动的触发器中最重要的组成部分，它不仅能让用户发起微交互（有时候还能让用户在过程中调整微交互），而且通常还能从视觉上表明微交互还在持续（见图1-14）。如果iPhone没有铃声开启/关闭开关，尽管你想要这个功能，也不知道去哪里找。在很多老款手机（甚至今天的很多手机）中，静音控件都被层层掩埋在了设置菜单里。就算用户知道到哪里去设置，打开或关闭铃声都需要多达10秒钟时间。而拨动物理开关则只需不到1秒钟。

当然，物理控件不一定非得是开关。尽管总能评出最佳设计方案，但再好的设计也能换种思路重新再设计一次。在 Windows Phone 中，静音触发器就是一个可以按下的摇杆按钮（也用于控制音量）。按下这个按钮，屏幕上会显示一个覆盖层，让用户选择响铃状态是“振动”还是“响铃+振动”。图1-14：触发器的例子。在iOS（以及Windows Mobile）中，手机锁屏时也可以使用相机。按一下相机图标，底部的滑动条就会向上抬起一段距离，表示向上滑动可以触发相机。当然，滑动解锁也可以

而且，触发器也不一定由用户启动。如果设备或应用检测到某些条件，同样可以由系统启动触发器，从而开始一次微交互。这种系统启动的触发器越来越多。触发条件多种多样，比如收到新邮件、到了预定时间，或者股票价格、用户位置变动，等等。比如手机静音，让手机与日程关联可以使它在开会的时候自动静音。或者与位置关联，让它在你进入电影院或音乐厅时自动静音。随着应用和设备的感应范围越来越广泛、环境感知能力越来越强，让它自己做决定的机会就越来越多。

第2章将介绍触发器。

就算不是所有用户都愿意了解能够启动触发器的各种手机元件，至少他们愿意了解这些功能的运作方式。就像“赞助商X”一样，他可能就想知道自己的手机静音之后到底会怎么样。换句话说，用户需要了解微交互的规则。

微交互被启动之后，就会引发一系列行为。换句话说，总会发生一些事情（见图1-15）。通常，这意味着要开始某种功能或者交互，而视觉上只会看到应用或设备的当前状态。微交互此时或许会根据数据来猜测用户想干什么。无论如何，此时都会有一条规则起作用，而这些规则通常是由设计师规定的。图1-15：规则的示例。使用音乐流播放服务Spotify并在另一个平台打开它，先前打开的Spotify应用会暂停。如果恢复第一个实例的播放状态，另一个平台上的实例就会暂停。这样就形成了非常一致的跨平台的体验（蒙Sebastian Hall惠允使用）

就拿目前最简单的微交互——开灯来说，只要一按下触发器（开关），灯就会打开。对简单的照明系统而言，此时只有一条规则：按下开关，开灯。如果增加一个调光器或运动检测器（在检测到没有运动的物体时关闭开关），就可以修改这条规则。但“按下开关就可以开灯”这条规则实在太简单了，简单到就连一个孩子都知道怎么开灯。

如果是应用程序或者电子数字设备，那么就算是很小的微交互，其规则都要微妙得多，而且也更不容易理解。比如“赞助商X”，他由于不了解自己手机静音的规则而导致了交响乐演出意外终止，如果他能得到反馈就好了（接下来我们会讲反馈），因为规则本身是看不见的。与19世纪的机械设备不同，今天的用户通常都看不到触发器启动之后的过程。（这个“特性”被黑客无数次地利用，从而让受害者在不知情的情况下把病毒安装到自己的计算机上。）

第3章将介绍规则。

在使用数字设备时，我们看到和听到的都很抽象。只有极少数用户知道自己在使用软件和设备时到底发生了什么。比如说，你根本就没有把“文件”放到过“文件夹”里，而你的“邮箱”里也从来没有收到过“邮件”。这些词不过是比喻，都是为了让用户理解交互过程才发明的。你所看到、听到或感受到的能够帮助你理解系统规则的东西，就是反馈，也就是微交互的第三部分。

反馈的形式可以多种多样，比如可以是视觉上的，可以是听觉上的，也可以是触觉上的（振动）。有时候，反馈会很突出也很明显，比如拨动开关时亮起的灯光；有时候，反馈会很微妙也很难发现，比如邮件应用或移动应用中的“未读”图标；有时候，在使用导航仪做好路线规划后，它会通过语音明确告诉你什么时候转弯；有时候，在某种复杂的情况下，闪烁的LED灯光又容易让人误解；有时候，口袋里的手机在收到短信时，会像放屁一样“噗”地一响，引来别人异样的目光；有时候，数字屏打开时的声音又像是“窃窃私语”。反馈最重要的是与动作相配，尽可能以最合适的方式传达信息。

在关闭手机铃声的例子中，让手机静音有两个反馈：一是开关在被打开和关闭时，屏幕上会短暂显示一个覆盖层；二是手机在静音状态下，开关上会显示橙色的细条。而根本看不见的，同时也让“赞助商X”颜面扫地的，则是铃声虽然关闭，但设定的闹铃照样会响。屏幕上也没有任何提示（除了只会显示几秒钟的覆盖层之外）说明铃声已经关闭。这些都是设计权衡的结果。

触发器和反馈更重要的地方在于表达产品的个性。实际上，可以说反馈（连同整个外观一起）完全决定了产品的个性。

反馈不局限于图片、声音和振动，还可以是动画（见图1-16）。微交互该如何出现又如何消失？物体移动时会怎么样：它跑得有多快？物体移动的方向有意义吗？图1-16：反馈的例子。在Coda2 中，“Process My Order”（提交订单）按钮会在被按下时变成进度条。不过，按钮文本应该依次变成“Processing Order”（正在提交订单）和“Order Processed!”（订单提交完毕！）（蒙Christophe Hermann 和“Little Big Details”惠允使用）

反馈也可以有自己的规则，比如什么时候出现，如何改变颜色，如何（在用户旋转手中的平板电脑时）旋转屏幕。这些规则本身也可以发展成微交互，因为用户可能希望手工设置它们。

第4章将介绍反馈。

微交互的最后一部分是循环与模式，它们构成了元规则。微交互随着时间推移会怎么样：交互状态要等到手工关闭才结束（就像响铃/静音开关那样），还是说等一小会儿就退出交互状态？有事件打断交互时或者条件变化时又会怎么样？图1-17展示了一个例子。图1-17：循环的例子。在eBay上，如果你曾经买过相同的商品，购买按钮就会由“Buy it now”（马上购买）变成“Buy another”（再次购买）（蒙Jason Seney 和“Little Big Details”惠允使用）

有些微交互会包含不同的模式（尽管通常不太受欢迎）。例如一个天气应用，其主（默认）模式就是显示天气，但用户有可能必须要进入另外一个模式，才能输入地名查看某地天气。

第5章将讨论循环与模式。1.4 微交互的设计理念

把微交互集成到产品中有三种方式。第一种方式是逐个设计微交互。在设计产品的过程中，或者在简化既有产品时，尽量找出所有可能的微交互。列一个微交互的单子，然后各个击破。针对每个微交互，按照本书已经介绍的结构周密考虑，争取让每个部分都有上佳表现。最终你会得到一流的微交互，可能还会创造出标志性时刻（Signature Moments）。

标志性时刻就是那些成为产品差异化标志的微交互。一个自定义的触发器控件（比如iPod早期版本中的滚动轮）或者一段漂亮的“加载中……”动画或者一种好听的声音（“您有新的邮件，请注意查收！”），都可以像功能一样加以宣传和营销，而且可以跨平台使用，或者在同一品牌下不同的产品中使用。这种标志性时刻有助于提升客户忠诚度和品牌差异化。就像Facebook的“Like”按钮，已经成为其品牌不可分割的一部分。

各个击破方式的挑战在于如何限定每个微交互的范围。有一种将微交互转换成功能的趋势，毕竟大多数设计师对设计功能都很熟悉。我们都恨不得抓住一些大问题，把一切都解决掉。微交互就是在限定条件下做设计的实践，而且要尽可能做小。应该明确各种约束条件，专注于把一件事件做好。极简主义建筑大师密斯·凡德罗（Mies van der Rohe）的名言“少即是多”，也应该成为微交互设计师的座右铭。

第二种看待微交互的方式，是把复杂的应用程序简化为个别的产品，每个产品构建于一个微交互之上。这是一种把微交互作为产品的策略，即让产品专注于一件事，而且把这件事做好。把产品简化到极至，尽显佛性（Buddha nature）。如果你觉得需要给产品增加另一个功能，那另一个功能本身就该做成一个产品。很多家电、应用和设备，包括早期的iPod，都遵循这个理念。这也是很多创业公司（至少是创业之初）的理念，比如Instagram和Nest：他们都坚持把一件事做好。这种“最小化的可行产品”可能就是一种微交互。这种方式可以保证和驱使你从根本上简化产品，让你能够对任何增加功能的声音说不。当然，坚守这种理念不容易，特别是在那些喜欢满足用户一切需求的公司里，就更难了。想象一下：你该怎么把 Microsoft Word 简化成一个个单独的产品？实际上，很多竞争性产品正在这么做。比如，WriteApp只负责写，剔除了文字处理程序的大多数功能，最后只专注于写，只为写作者服务。Evernote最初也源自一个简单的微交互：跨平台记事。

还有第三种看待微交互的方式，那就是把最复杂的数字产品掰开揉碎，发现它由几十甚至几百个微交互构成。可以把产品当成所有这些微交互和谐共处的结果。这也是 Charles Eames 说细节是设计的真正含义。一切都是细节，一切都是微交互。微交互就是取悦于人的机会，微交互就是给用户惊喜的机会。正如德国著名工业设计师迪特·拉姆斯（Dieter Rams）所说：

在我内心深处，永远有一块地方为细节而保留。我认为细节比蓝图更重要。没有细节，一切皆空谈。细节是本质，是评价质量的标准。[6]

试读结束[说明：试读内容隐藏了图片]

下载完整电子书