交互设计及经典案例点评(txt+pdf+epub+mobi电子书下载)

作者：陈根 编著

出版社：化学工业出版社

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

交互设计及经典案例点评试读：

前言

交互，顾名思义，交流互动的意思，我们生活的社会交互无处不在，离开了交流互动将寸步难行。往大了说，人类的发展历史就是一个不断改进交互方式，获取更舒适交互体验，达到更好互动需求的过程。以我们一天普通得不能再普通的生活、休闲、工作为例，清晨被闹钟或手机的铃声叫起，起床洗漱蹲厕所，男人剃须女人化妆，钻进厨房做个简单又营养的早饭，然后拎包坐公交挤地铁或走路或开车，进了公司刷卡上班，打开电脑使用各种应用处理一堆的文件资料，与上司、同事争吵交流工作上的不同观点……使用网站、软件、消费产品、各种服务的时候，实际上就是在同它们交互，我们一天当中不知道与多少的产品或服务在发生着这种关系，使用过程中的感觉就是一种交互体验。

随着网络和新技术的发展，各种新产品和交互方式越来越多，人们也越来越重视对交互的体验。在2015年1月22日北京国家会议中心举办的2015年互联网产业峰会上，与会者一致认为，未来智能的基础是交互，所谓真正的智能产品之间的连接应该让产品和产品之间尤其是不同品牌的产品之间能够产生联动和交互，这是未来真正意义上智能的基础。对于消费者而言，在消费者体验层面，从购买到使用再到产品之间的关联，以及随后产品之间的联动，也有了打造统一链条的基础，这样的体验将来会是无缝的。

那么到底什么是真正的走进人心的交互设计呢？怎么才能做出这样的设计呢？

本书共包括交互设计学科，交互设计的核心概念，交互设计的程序与方法，交互设计师与创意，用户，可用性和测试，交互技术发展概览和交互设计案例精选7大篇章。由

“闲”话

书中图文并茂，紧跟交互设计流行趋势，案例极具代表性和实用性，对企业在研究交互思维、动机和行为、如何产生打动人心的交互设计、如何修炼成为一名出色的交互设计师等各方面所遇到的问题提供了积极的解决思路。

本书读者可包含：

1.高等院校设计、心理学、管理、营销等专业的老师和学生；

2.各行业内从事品牌建设推广、产品设计、市场营销、广告宣传等相关方面的人员；

3.想要进入设计、营销、心理学等相关领域的人员及喜爱设计及研究心理学的普通读者。

本书由陈根编著。陈道双、陈道利、林恩许、陈小琴、陈银开、卢德建、张五妹、林道娒、李子慧、朱芋锭、周美丽等为本书的编写提供了很多帮助，在此表示深深的谢意。

由于作者水平及时间所限，书中不妥之处，敬请广大读者及专家批评指正。编著者“闲”话

交互无处不在

交互，顾名思义，就是交流互动的意思。我们生活的社会交互无处不在，离开了交流互动将寸步难行。往大了说，人类的发展历史就是一个不断改进交互方式，获取更舒适交互体验，达到更好互动需求的过程。比如人类从茹毛饮血，单纯地、被动地接受自然界既有的食物，到偶尔捡食口感更佳的被雷电击中灼烧过的动物肉体，从中受到启发而主动思考，发明钻木取火，再到如今人们会利用更多香料烹煮食物获取更丰富的多感官饮食体验。

以我们乘坐的交通工具火车为例，中国铁路从无到有，1876年第一条上海吴淞铁路是0的突破，1909年京张铁路是中国人自己设计修建的第一条铁路，时隔100年的2009年12月26日开行我国武广第一趟高铁，用10年时间赢得了40年的发展步伐。如今，高铁从初步开行到不断成熟，深刻改变着人们的生活交流方式和体验深度。

再以我们一天普通得不能再普通的生活、休闲、工作为例，清晨被闹钟或手机的铃声叫起，起床洗漱蹲厕所，男人剃须女人化妆，钻进厨房做个简单又营养的早饭，然后拎包坐公交或挤地铁或走路或开车，进了公司刷卡上班，打开电脑使用各种应用处理一堆的文件资料，与上司、同事争吵交流工作上的不同观点……使用网站、软件、消费产品、各种服务的时候，实际上就是在同它们交互。我们一天当中不知道与多少产品或服务在发生着这种关系，而使用过程中的感觉就是一种交互体验。

不断颠覆的交互方式

随着网络和新技术的发展，各种新产品和交互方式越来越多，人们也越来越重视对交互的体验。

移动互联网时代的到来，智能手机的流行已成为手机市场的一大趋势。与传统功能的手机相比，智能手机以其便携、智能等特点，在娱乐、商务、时讯及服务等应用功能上更好地满足消费者对移动互联的体验。在诸多的应用当中，

移动社交

社交网站Facebook的首席执行官扎克伯格曾经对于社交关系有一个非常精辟的定义，他是这样说的：“下一个时代，将被今天的社交网络和赋予用户在联系上的深度所定义，我们的工作就是找到最好的方法让用户分享自己。”扎克伯格的观点反映了社交关系的真正核心所在。随着社会性网络服务（Social Networking Services，SNS）的兴起，我们越来越多地关注人与人之间的社交关系，以及由这种关系可以创造的商业价值。但就社交关系的内涵而言，它恰恰反映了人的内在的、本质的需求，那就是充分地分享自己。

微信在移动社交应用上具有不可撼动的地位和影响力。如今走在街上，随处可见的是“低头一族”在用微信与朋友圈互动。

随着物联网、云计算等密切相关领域技术的飞速，在应用交互方面，智能手机发展与可穿戴设备相连接，你可以足不出户用手机买更多东西，智能手机可以知道你的健康程度、在家里控制更多的设备、应用会知道你的位置，以及你买过什么东西……在安全交互方面，依靠人脸识别和摄像头拍照进行解锁或者身份验证，已经不算是罕见的创新技术。

在智能穿戴设备领域，对于该产业的先行者们而言，2014这一年是激情与迷茫相互伴随的一年。激情是智能穿戴产业日新月异，每天都有让人兴奋、激动的信息；迷茫则在于自身涉足的产品似乎并不能通过市场收获预期的目标。换句话说，创新的想法繁若星辰，但真正让用户能够获得出色的交互体验过程和使用效果的产品寥寥可数。在2015年，硬件战持续爆发，但更关键的是在硬件爆发的同时，对于不同设备之间的互联、互通、互动已成为业内重点思考的问题。未来，我们更将进入一个颠覆性的交互世界。

交互的本质

孩子今年还不到一岁半，前段时间有一天，我去客厅倒茶、削水果，回到卧室突然发现他竟然抱着iPad在玩网鱼的游戏（尽管玩iPad、玩手机、看电视是现阶段我明令禁止的），虽然还不懂游戏的真正玩法，只是在那用手指一通乱点。我惊诧于孩子怎么一步一步操作进入游戏里面的……今年春节家庭聚餐，一个有趣的现象就是几个长辈都在玩iPad。我们一些晚辈们都笑他们好潮啊，这高科技的玩意儿他们怎么会接受。没想到三姨父说：“这算啥，拿起就玩，聊微信、打麻将、拍照、愤怒的小鸟、抢红包、听歌看电影听京剧，小case。”客厅里顿时一片欢声笑语……

这真真是个很奇怪的现象：为什么iPad无论老人小孩都会用，基本操作甚至很少需要别人的协助和说明书！究竟是孩子容易接受电子产品，还是电子产品容易让孩子接受？

这不禁让我思考，什么样的交互设计才是成功的。iPad用户体验主要体现在淡化程序UI，以便用户关注所需的内容；美观的内容形式，富有真实感；充分利用设备的性能来增强内容的交互性。

那么，交互设计就不该是“精英式”的，更该是“傻瓜式”的，去追求一种更“本能”的简单操作，就像吃饭穿衣一样简单。事件2　Coolest Clock：距离“歧途”仅一步之遥

The Coolest Clock是维也纳团队à tout le MondeStudios开发的一款产品，与传统的挂式钟不同，它没有实体指针，也没有滴答的声响，是一个投影时钟。

Coolest Clock的外观更像是一个灯饰，安装在墙壁上，投影灯下面会根据不同场景，比如客厅、卧室、厨房等呈现出不同界面来展示时间、天气、社交网络信息、新闻订阅和消息提醒等内容。与大多数智能设备类似，Coolest Clock需要配合APP来设定投影在墙壁上的界面风格、时间显示方式、消息等内容。

在我看来，Coolest Clock这款众筹的产品却走入了智能硬件的双重困境。

当下，像这种轻智能产品，最佳也是唯一的出路，就是细分市场、细分人群，以简单、独特、个性定制才能获得小众用户的关注。从这个层面来看，Coolest Clock的做法毫无疑问是对的。

尽管它还是很难对主流钟表市场产生影响，但对于创业小团队而言，能够切入一个细分市场，并从边缘来分化主流市场，这是目前智能产业的一种普遍打法。

但CoolestClock就错在，在功能上犯了大部分智能硬件创业者的病，就是对一款产品寄予太多蓝图。在我看来，不能再做加法，而要做减法。既然它是个钟，购买者更看重的是其对于时间的另类表达形式，而不是一只迷你智能宠物。

许多雷同的功能随便在一款智能设备上都能找得到，所以Coolest Clock目前已有的社交网络信息展示、新闻订阅功能，以及后期欲添加的音乐和收音机功能等，我认为必须砍掉。

原因很简单，其一社交需要私密性，这与钟表的时间展示属性冲突；其二这是个资讯过剩的时代，给本来难得清静的墙上再贴上新闻，除了收获讨厌还是讨厌。

可以说，Coolest Clock距离“歧途”仅一步之遥。但是，这种游走于“至简至尚”与“无所不能”的双重困境之间的状况，或许是目前大部分轻智能硬件创业者的通病。

在2015年1月22日北京国家会议中心举办的2015年互联网产业峰会上，与会者一致认为，未来智能的基础是交互，所谓真正的智能产品之间的连接应该让产品和产品之间尤其是不同品牌的产品之间能够产生联动和交互，这是未来真正意义上智能的基础。就消费者体验层面而言，从购买到使用再到产品之间的关联，以及随后产品之间的联动，也有了打造统一链条的基础，这样的体验将来会是无缝的。

那么到底什么是真正的走进人心的交互设计呢？怎么才能做出这样的设计呢？带着这两个问题我们继续探讨。第1章交互设计学科1.1　交互设计的“初心”

人机交互设计的发展史犹如一团乱麻，但这千头万绪乱糟糟的野蛮发展却又能碰撞出各种机遇。

这些自诩为科技创新但实际上是不合时宜且毫无必要的技术的案例不胜枚举。就在2015年1月份举行的国际消费电子展上，从可触摸操控的外联网智能电冰箱到解放司机双手和双眼的便携投影仪表盘产品，一系列创新技术和产品令人眼花缭乱，目不暇接。但是任何一个现代化的产品创新经理都可以随意在一款产品上加上触摸显示屏，并向大家介绍产品的新增特性及与过往产品的区别。笔者认为好好反思这其中所丢失的东西非常重要。

消费者们似乎已经患上了“新奇特”疲劳症。人们在产品中挖掘其意义，在交互设计中寻找人性。在笔者看来从曲面屏幕到能够自动分析液体成分的智能杯子就似乎有点多余，这些交互设计师就像任何一个身处市场链却在拖延解决问题的人一样备受指责。认识到这个问题仅仅是第一步，交互设计的未来在于再次回归人性。

我们在开启天马行空的设计思维模式之前，要好好回顾一下交互设计的前世今生。1.1.1　交互设计的前世

早在20世纪初，交互设计什么也不是，市场对它的需求几乎为零，那个时代人们更加依赖实体物理按键来直接操控各种机械设备。如车床把手所转动方向即为车床齿轮所转动方向，非常直观。也许当时人们需要做的顶多就是如何将把手设计得更适合人手把握，而非交互设计底层认知中常常提到的诸如“如何让用户理解并重视这个交互界面”、“这个晦涩的界面设计会起到什么作用”抑或“这种交互式设计对我们的产品品牌带来何种影响”。

貌似现如今交互设计理念的早期案例则是打字机（图1.1），这是一个文字处理器和打印机的超级综合体，并且还无须担心电量。尽管从结构上来看是完全机械化的，但键盘按键同输出效果之间还是具有一对一关系的。尽管如此，一些人还是设想以特定的非线性规律即以在实际英语使用中单词出现的频率这种抽象的方式来排列按键。此外键盘按键还考虑到人的触觉因素，比如人的手指所能覆盖的最远平均距离以及键盘按键之间的间距。图1.1　打字机

这项科学创新在引入了迎合人类手指头形状的专利弯曲键帽之后则更显人性化。这就是人类早期交互设计的典范，这个几近完美的设计历经140年从未发生改变。如图1.2所示，从1878年生产的雷明顿2号打字机到1984年第一代苹果Macintosh个人计算机到2003年黑莓推出的全键盘智能手机再到2007年苹果第一代iPhone智能手机的虚拟键盘。尽管打字机看起来是一个概念更为抽象的设备，但是其设计内核中所洋溢出来的那种自然、人性、简单和感性的特质的确值得大家学习、领会并在今后的设计工作中融会贯通并加以应用。图1.2　打字机的发展

人类的交互是如此基本和自然，而工具却依旧在进化发展，我们曾在人机交互过程的抽象和有形、数字和模拟中不断纠结和挣扎。笔者真的想不出一个更为抽象的发明抑或一个能凸显人机对话的方式。20世纪中期的计算机也能完成现如今计算机所承担的任何工作任务，只不过运行速度慢些罢了。事后来看，计算机的处理速度并非其获得大众接收和认可的障碍，问题在于即便是当时发明了性能超级强大的计算机，也会因几乎没有人知道如何使用从而被大家抛弃。

数字时代的突破并非添加显示器和键盘这么简单，也不是将举世瞩目的半导体微型化的技术。就笔者看来，数字时代的到来源自20世纪70年代一项驯化计算机这只超级大猛兽的发明，那就是图形用户界面（GUI），人机交互设计史上最为伟大的理念和产品。

世界上首个图形用户界面来自当时名不见经传的施乐（Xerox）公司（图1.3）帕克研究中心（Palo Alto Research Center，PARC），实际上现如今大家都耳熟能详PARC的发展史以及世界上首部个人计算机施乐奥托（The Xerox Alto）的故事。就连比尔·盖茨和史蒂夫·乔布斯都是当时施乐的粉丝，这两位计算机巨头偷师学艺施乐并最终成就了两个伟大的公司微软和苹果。图1.3　施乐（Xerox）公司官网

施乐的首台个人计算机（PC）（图1.4）奠定了现代计算机的基础，从网络办公室、写字板、图标、菜单到电子邮件（数不胜数）都深受PC鼻祖施乐的影响。可以说，施乐在图形用户界面以及“桌面比拟”（Desktop Metaphor）的引入上开创了现代计算机的先河。图1.4　1979年施乐个人计算机同苹果1984年第一代Macintosh个人计算机用户界面的对比

施乐将计算机中那些只有技术宅才能理解的晦涩抽象的工具，形象化地处理成小孩子都能理解并掌握的图形化界面，这一切都要归功于“桌面比拟”将抽象的数字世界“翻译”成具体的图形。现在的我们早已理解如何去进行计算机操作，比如文件、文件夹、回收站、剪切和粘贴等。这些20世纪70年代之前还挺抽象的概念已经成为我们现代生活密不可分的一部分。说起来都有点不可思议，笔者有的时候竟然对真实的照片文件进行剪裁和缩放操作，现如今高度发达的图形化界面真的是模糊了虚拟和现实世界的界限。1.1.2　交互设计的今生（1）交互设计的迷失和顿悟

实际上我们可以在很多国家和地区成百上千的人群中去展开调研，来了解人们是如何关联这些工具的。我们当然可以从这些特定的调查个案中找到一些有用、可用且令人满意的结果。但是对于笔者而言，看着一岁半大的儿子独自玩耍的过程就十分具有启发性。小孩子更喜欢有触感的实际物体和动作，比如点击、扭曲、泡沫包装、铃铛和块状玩具，最近对磁力积木（图1.5）很感兴趣，即使他的手部协调能力和大脑的思维开拓能力还很微小。图1.5　磁力积木

即便是对于成人而言，使用走在人类科技发展最前沿的极其复杂的设备，最好的微交互也是那种直接的、人性化、实体化且符合人类感官逻辑的，谷歌的Material UI（图1.6）就恰如其分地把握住了这种微妙的平衡。人类如何感触和理解周边世界万物当然是根本，但仍不要忘记交互设计也是在创造一种全新的体验，无论是在零售、数字还是消费电子领域。图1.6　Google更新了安卓的设计语言，material design浮出水面

创新设计人员应该具备将事物简明扼要且清晰明了地展现出来的能力，而非仅仅是解决各种问题。最终，我们将这些交互“翻译”成人性化、感官的、情绪化和功能性的表达。听起来简单，但要真正实现可不简单。动辄放出“加一块触摸显示屏”是很简单，但是这中间缺失了根本意义上的重回质朴的创新交互设计精神内核。（2）尽显多余的触摸设计

现如今满城尽是触摸屏，其实很多地方本不应该采用触屏设计。即便是特斯拉汽车公司极具人气的创新设计师在Model S车型上也剑走偏锋，忽视了传统驾车体验的潜能。就笔者个人而言，更愿意重新设计Model S的中控台，将那个超大尺寸的类似于iPad的控制触屏（图1.7）扔出车外，且以为触屏控制在驾车操控的便捷性、安全性和稳定性上都无法比拟传统的物理实体按键。图1.7　Model S超大尺寸的类似于iPad的控制触屏

当然我们无法在任何单一环境中都依赖施乐PARC式的比拟设计思路。交互设计师们必须再三评估数字交互和模拟交互的设计权衡，将一个巨大的触摸显示屏置于汽车中控台并将几乎所有汽车的操控都整合其中。但在这种交互设计的“翻译”过程中，用户又失去了一些东西。在触摸屏操控的确炫酷，但这东西吸睛度太强，别忘记你是在开车，要用眼睛来观察路面情况。出于安全因素考虑，感官上的满足也不足一提。

1800年的打字机、1970年的施乐奥托个人计算机、1980年的苹果Macintosh个人计算机、1990年的MUJI收音机、2000年的iPod多媒体播放器、2005年的耐克运动传感器、2007年的iPhone手机以及2014年的谷歌Material Design都位列白榜；而1980年的带计算器功能的手表、2000年的索尼的爱宝机器狗、2005年的激光投影键盘、2007年的带触摸显示屏的冰箱、2012年的特斯拉Model S电动车、2014年的谷歌眼镜再到目前三星的曲面显示屏和Vessyl智能水杯（图1.8）都不幸位列黑榜。如图1.9所示。图1.8　Vessyl智能水杯图1.9　交互设计产品案例黑白榜示意图（3）更懂人性的交互设计才是真

教授兼作家Donald Norman（唐纳德·诺曼）曾说过：“当技术满足了基本需求，用户体验便开始主宰一切。”人性化的交互设计的实质就是根据情景环境来在感性和抽象中寻找平衡，需要设计人员深入洞悉每一种全新设计所面临的风险，必须潜心解构其间的普适性和新奇性，精密权衡新技术的所失与所得。总而言之，找到完美的交互设计的平衡，对于人性化关注的回归才是终点。1.2　交互设计的界定

开始先向大家提个问题，“交互设计”一词里面的每个字相信大家都懂，“那合起来的意思是什么呢？你能不能用最简单的一句话，告诉大家交互设计到底是什么？”相信很多人表述出来肯定五花八门，含糊不清，就算是正在从事或想从事这个专业的人也不一定厘得清，交互设计似乎是个很难解释，有点“虚、空、玄”的东西。

一个严肃的问题来了，居然连交互设计的概念是什么都搞不清，我们凭什么跟别人说“我是一名资深交互设计师，我设计的产品客户肯定会满意的”或者“我告诉你们什么是交互设计吧，我就是做这个的……”

那接下来还等什么，我们“吹毛求疵”，打破砂锅求到底，来重新好好认识一下我们的老朋友“交互设计”或者对于想要了解交互设计的人来说，我们今天就来结交一下“交互设计”这个新朋友吧。1.2.1　Interactive vs· Interaction“交互设计”所造成的混淆感，有一大部分其实来自于专有名词在经过翻译之后，难免会被过滤掉的那一分精致。查看英汉字典，英文的interaction是“交互作用，互相影响”，而interactive则是“交互作用的，互相影响的”。两者极为相近，其间唯一的差异，只不过就是一个平凡不过尔尔“的”字儿。因此，英文的interactive design和interaction design，通常也都被一视同仁地翻译成“交互设计”。

这种翻译方式，在绝大多数情况下，其实并不会造成太大的问题。但如果我们要精究，就会发现这两者在英文本意上是有差异的。直接从词性上来看，interaction是名词，也就是说，它指的是“互动”这个行为本身。然而，interactive是形容词，也就是说，它是用来形容某种东西蕴含有“互动”这种功能或特质。从这个观点出发进行讨论，我们其实就能够发现，这个“的”字儿其实具有关键意义，它绝对不是可有可无的赘字。Interactive design，应该翻译为互动“的”设计才比较精确。因为“互动”二字在这里是形容词，用来表述后面所提的这个“设计”蕴含有与使用者互动的能力和特质。

而interaction design比较麻烦，也许把它改写成“设计交互”会比较容易理解。因为它所指的，其实是规划出一种模式，让互动行为在这个架构之内，合理、成功而且有效率地产生；甚至可能因为互动形态上的优越性，让整体设计产生一种独特的魅力。所谓的人机互动（Human-Computer Interaction，HCI）就是典型的interaction design，因为它所探讨的，是如何在人与计算机之间，设计出一种互动的架构，让使用者能够有效率地操作器械与数字信息互动。

广义地说，这种设计互动的概念，可以运用在人与人、人与信息、人与数字软硬件产品，或是人透过科技与其他人沟通的各种互动模式。也就是说，设计客服流程、设计数字信息平台、设计手机或者设计一个国际通信网路，都必须运用到interaction design的概念。1.2.2　交互设计的专业化

当然，笔者不会天真地认为只要分析字义，就能够完全厘清或者是界定“交互设计”一词。如果事情这么好办，也不需要我们在此大张旗鼓地进行探讨。就像本书开头所说的人从诞生以来就开始了和环境、产品的多元互动，互动存在于许多不同的设计中。就拿做饭吃饭来说，人与锅碗瓢盆、桌子、椅子、筷子、切菜板、洗菜盆、煤气灶、微波炉等厨房用品都有其相异的互动方式。既然这并不是数字产品才有的特质，那为什么所谓的交互设计，却是在这几年才被热烈讨论呢？仅在数十年前，第一个互动系统首次亮相，交互设计也就由此产生。新的界面带来了新的挑战，涌现出一批新的设计师来接受这个挑战。随后，一系列书籍纷纷出版，以阐释这个未知领域的方方面面。原因我们似乎可以归结于互联网技术和数字科技的迅猛发展为互动提供了许多新的可能性，同时也将它复杂化，因此它必须被抽离出来，独立成为一门专业来探讨。

比如书本和网站，同样都是传递信息的媒介。要去阅读一本书，你必须翻页。也就是说，人必须和书的硬件结构与内容信息作互动。但除非你是在设计亲子互动书那种有机关和游戏的书本，不然绝大多数时候，人与书之间的互动模式是固定、单纯且不需要花太多去创新的。也就是说一本书的设计师，并不需要绞尽脑汁去设计互动，而需要他们用心和注意的地方是在视觉引导，也就是文字、图版、色彩等的编排。有时候，如果在设计书籍时刻意要求改变它的互动模式，不但不会加分，甚至还会出现反效果。相对的，在数字的世界里，使用者和网站的互动模式不但五花八门，而且还必须日新月异。互动模式是否方便、合理、有趣或有效率，能够成就一个网站，也足以摧毁一个网站。因此与书籍恰巧相反，“设计交互”在网站建构过程之中，不仅是一个需要费心思量的议题，而且还必须交由专人或专业团队负责。

不只是网站，在数字科技的加持之下，所有软硬件产品都可以拥有无限的互动可能性。只要拿文书处理软件和打字机相比，PDA和记事本对照，iPad和纸本杂志比较，我们很快就能够理解：在数字时代，错综复杂的互动产品无处不在。因此交互设计不但必须成为一项专业，而且在人才供不应求的情况下，它一定会快速崛起成为一项很赚钱的专业。

交互设计概念之所以在近几年广为讨论，主要是因为许多厂商开始意识到，绝大部分数字产品在市场上的失败，并不是因为美学或者实质功能方面的缺憾，而是因为互动模式设计上的错误，导致使用者不想或根本不知道该如何使用这个产品。例如苹果公司在G3时代推出的圆形鼠标，从美学上来看，它的外形非常可爱；从性能上来看，它在灵敏度方面也绝对没有问题。但它正圆的形状，却让使用者无法用触觉来找到正确的使用角度，因此在可用性上出现了明显的瑕疵。这是一个交互设计上的严重缺失，被许多人认为是计算机史上最失败的鼠标。这就是失败的interaction design，导致产品在市场上遭滑铁卢的典型范例。1.2.3　网页设计=交互设计？

另外，相信当我们向周遭的人询问什么是交互设计时，肯定有不少人会这样回答：“交互设计？你指的是网页设计吗？”如果我们依循前面所架构出来的逻辑，你就可以发现，网页设计是一种interactive design，因为网络这个科技媒体具有互动的特质，因此网页设计与传统的平面设计不同，它是一种互动“的”设计。然而在设计网页时，必须依使用者的需求和习惯去考虑互动流程、组织信息架构、安排按钮和选项，以及设计和规划视觉引导策略等。这许多设计方面的考量，都是为了让使用者能够享受使用这个系统的操作过程。所以你是在设计互动的机制，建构人和数字信息之间的方便门。这个过程，就是interaction design，因为你在“设计”一种“交互”的模式。

所以，“网页设计是不是交互设计”这个问题其实是诡异的。因为网站是一种互动的设计（interactive design）；而在建构网页的过程中，则需要运用设计互动（interaction design）的观念和原则，才能在人和数字信息之间设定出合理的互动模式、界面和机制。

简而言之，interactive design的重点，在于促成互动的这个“科技”层面；interaction design考量的重点，则在于如何帮助和照顾使用系统或产品的“人”。尽管两者之间有相当的差异，但在很多国家或地区，将interactive design及interaction design都译成“交互设计”，似乎已经是一种惯例。因此，笔者也不便逆势而行，在本书的内容范围之内，笔者将会沿用“交互设计”。但笔者所指的，是创造、设计和规划互动模式的艺术，也就是interaction design。1.2.4　界面设计=交互设计？

界面设计与交互设计这两个专有名词之间的差异，比“网页设计是不是交互设计”更难说明。因为不管是界面（interface）、使用者界面（user interface）或人机界面（human-computer interface），其实都是交互设计成果的具体呈现，因此界面设计与交互设计几乎被认为是同义词。

界面的基本定义，就是使用者（user）与系统（system）的接触面，使用者必须透过这个表面来理解和操作系统，系统也必须透过这个表面来向使用者传达信息。因此不管你如何称呼它，界面设计所聚焦的重点都是在这个表面的构成，而且它通常是设计互动过程中最后一个关键环节。曾经在一个讨论交互设计的部落格看过一个不错的图示，以非常简单的方式说明了界面与交互设计的对应关系。由图1.10我们可以看出，界面是交互设计的具体呈现，而整体设计从最初的抽象概念出发，一直发展到最后的具体的界面，其间的整体过程都必须以交互设计观念和思考为轴心。图1.10　界面设计与交互设计的关系示意图1.2.5　到底什么是交互设计

关于交互设计成为一个专业的必要性，可以参考知名软件设计师米契·卡波（Mitchell Kapor）的说法。在数字科技发展的初期，软件的开发被视为是一项技术性的工程，因此大多是由撰写软件的科学家来一手包办。卡波在20世纪80年代，开始将“设计”的概念带入当时正在萌芽的软件工业。以现在的眼光来看，卡波的工作内容就是所谓的交互设计，他也因此被许多人公认为是第一位专业的软件设计师。

1990年，卡波发表了著名的《软件设计宣言》（A Software DesignManifesto）。在这篇宣言中卡波如此表示：什么是设计？在怎样的情况下，设计会成为一个需要重视的问题呢？这个情况，就出现在你同时涉足“科技”与“人类需求”，而必须尝试将两者连接起来的时候……以建筑为例，当你想要盖一间房子，你首先必须和“建筑师”沟通，而不是去和“工程师”沟通。为什么呢？因为要盖出一栋好房子所需要的条件，并不属于工程技术的范畴。你需要把卧房安排在安静的位置让人可以休息，你要让厨房邻近餐厅……这些都不是大自然的定律，也不是技术性的知识，而是一种设计上的智慧。同理可证，计算机软件之所有元件和元素的选择，都必须以使用者的需求以及使用上的状况为依据，这就必须透过有智慧、深思熟虑的设计才能达成。”卡波的这一番话，为交互设计做出了一个明确的定位。因此我们可以归纳出以下这个结论：交互设计是一种超越技术性，能够以使用者的需求和使用经验为中心去考量的大智慧，其终极目的在于创造出科技与人类之间的完美连接。

交互设计所牵连的范围很广，界面设计、软件设计、人因工程、人机互动、信息工程等，都需要用到与交互设计相关的专业知识。在美国，工业设计公司、网络设计公司、软件设计公司、媒体设计公司、数字广告公司等，近几年来都纷纷成立交互设计部门，因为科技与人类的互动与结合，已经成为一个必然的趋势。以刚被选为本世纪最具代表性数字广告公司的R/GA为例，每一个广告案件，都会由交互设计师、视觉设计师和程序设计师组成团队共同负责，因为他们相信如此打造出来的创意，才会人性、美感和技术兼备，就像是完成一栋好房子，需要建筑师、室内设计和工程师的通力合作一样。

丹·赛弗（Dan Saffer）的交互设计及其他相关领域关系如图1.11所示。图1.11　丹·赛弗（Dan Saffer）的交互设计及其他相关领域关系

在揭示何谓交互设计时，IDEO公司的交互设计部负责人督恩·贝（Duane Bay）曾经将交互设计整理归纳成以下三大类。（1）透过荧幕的体验

这应该是大家最熟悉的交互设计形态，网站、软件、电玩等使用者必须透过荧幕体验的互动，都属于这个类别。（2）互动产品

这种交互设计与工业设计息息相关，像手机、相机、鼠标等，都隶属于这个范畴。因为产品具有实体，因此在交互设计过程中，除了视觉，还必须考虑材料、硬件结构、人因工程等元素。（3）服务

所谓的服务交互设计，指的是公司与客户群之间的互动，它并没有固定的管道、形态或产品。因应个案的需求，会有不同的计划和策略，目的在于提供良好的互动经验，借以提升用户对于公司或其产品的信赖度与忠诚度。客服电话语音系统、互动营销（Interactive Marketing）、展场内查询数据的互动装置等，都是属于以服务为出发点的交互设计。1.3　用户体验设计简史

在聊用户体验之前，先回忆一下我们去餐馆吃饭的经历吧（图1.12）。图1.12　餐馆的用户体验

是什么让你选择这家餐馆？刚进去的时候，餐馆给你的第一印象是什么？服务员是否让你在等候一阵子之后才领你去合适的座位？菜单放在桌子上的什么位置？浏览体验如何？你点了哪些菜？上菜的速度够快吗？味道地道吗？服务员够不够勤快体贴？你是否还想去这家餐馆吃饭？

所有的这些问题都关乎你对于这家餐馆印象的好坏，也直指这家餐馆的用户体验本身。

当然，我们通常所说的用户体验（UX）所针对的对象大多是数字和科技产品或服务。这也就意味着，用户体验设计本身至少有着进一步提升的可能性。

现如今，用户体验设计已经成为一门重要的学科，快速地发展，并且拥有极大的成长空间。虽然这是一门拥有多学科背景的新兴学科，但是向上追溯它的发展历程之时，我们会发现早在文艺复兴时期之前它就已经存在了。

在争论用户体验设计会带领我们走向何方这个大命题之前，回顾一下用户体验设计发展史上的精彩瞬间，应该能给我们许多启发。1.3.1　公元1430年左右：达·芬奇的“厨房噩梦”

Michael Gelb在他的著作《如何像达·芬奇一样思考》（How to Think like Leonardo da Vinci）中讲述了米兰公爵委托达·芬奇为高端宴会设计专属厨房的故事。这位伟大的艺术大师将他一贯的创造性天赋运用在这次厨房设计中，他将技术和用户体验设计融入整个厨房的细节里面，比如用传送带输送食物，也首次在厨房的安全设计中加入了喷水灭火系统。

有意思的是，达·芬奇的设计和很多开创性的设计一样，不足也非常明显。传送带是纯人工操作，工作不太正常；更麻烦的问题出在喷水灭火系统上，失灵的设计捎带手毁了不少食物。

虽然达·芬奇的这次尝试令厨房化身为噩梦，但是作为用户体验设计的早期实践，却有着无比重要的历史意义。

达·芬奇与他以人体力学为主题的画稿如图1.13所示。图1.13　达·芬奇与他以人体力学为主题的画稿1.3.2　20世纪初：Taylorism和工业革命

作为最早的管理顾问之一，机械工程师Frederick Winslow Taylor撰写了《科学管理原理》一文，深刻地影响了工程效率领域的研究。随着Henry Ford的福特汽车（图1.14）实现大规模生产，Taylor和他的支持者们也逐渐完善了劳动者和工具之间高效协同交互的早期模式。图1.14　福特汽车1.3.3　1948年：丰田人性化的生产系统

和福特一样，丰田不仅在设计和生产效率上非常重视，而且对于人工输出效率也非常关心。生产过程中装配工人受到了更多的重视，几乎不亚于对技术的关注。精益生产模式的巨大成功，使得人与技术之间的交互得到了更多的重视。丰田人性化的生产系统如图1.15所示。图1.15　丰田人性化的生产系统1.3.4　1955年：Dreyfuss《为人的设计》

美国著名工业设计师Henry Dreyfuss在这一年写下了著名的设计书《为人的设计》（Designing for People）（图1.16）。图1.16　美国著名工业设计师Henry Dreyfuss《为人的设计》

在书中，他写道：当产品和用户之间的连接点变成了摩擦点，那么工业设计师的设计就是失败的。

相反，如果产品能让人们感觉更安全，更舒适、更乐于购买、更加高效，甚至只是让人们单纯地更加快乐，那么此处的设计师是成功的。

随着人与产品的接触越来越多，他在书中所讲述的许多设计规则，也被大家越来越多地引用。1.3.5　1966年：迪士尼和开心效应

在迪士尼世界早期建设阶段，Walt Disney在公告中是这样描述它的：“……它（迪士尼世界）（图1.17）会成为一个坚持使用最新的技术改善人们生活的地方……”他的想象力和技术的结合，为全世界所有人带来了无限的开心和喜悦，并激励着设计师们（尤其是用户体验设计师）前行。图1.17　迪士尼世界1.3.6　20世纪70年代：施乐PARC和个人电脑

作为施乐最出名的研究机构，PARC为随后大范围普及的个人电脑（图1.18）的设计形态和交互逻辑定下了基调。Bob Taylor，作为一名训练有素的心理学家和工程师，带领着他的团队构建出人机交互领域最重要也是最普及的工具，包括图形化界面（GUI）和鼠标（随后乔布斯和盖茨先后访问了PARC，参考了施乐之星的设计，为今天的苹果和微软开辟了通向未来的道路）。图1.18　施乐PARC和个人电脑1.3.7　1995年：Don Norman，第一个用户体验专家

身为电气工程师和认知科学家的Don Norman（图1.19）加盟苹果公司之后，帮助这家传奇企业对他们以人为核心的产品线进行研究和设计。而他的职位则被命名为“用户体验架构师”（User Experience Architect），这也是首个用户体验职位。图1.19　电气工程师和认知科学家Don Norman

在这个阶段，Don Norman还撰写了经典的设计书《设计心理学》（The Design of Everyday Things），直到今天它依然是设计师的必读书。1.3.8　2007年：iPhone

2007年MacWorld上，乔布斯发布了iPhone（图1.20），称之为“跨越式产品”，并承诺它会比市面上任何智能手机都要易用。随后，iPhone不仅兑现了乔布斯的承诺，而且彻底改变了智能设备领域的格局，苹果公司再一次登顶，成为世界上最成功的公司之一。图1.20　乔布斯和iPhone

iPhone的绝妙之处在于，它融合了当前最卓越的软件和硬件系统，借助于革命性的电容触摸屏而非传统的物理键盘来同用户进行交互。可以说，初代的iPhone所提供的用户体验，远远优于同时代的任何手机。

这也在无意中让智能设备的软硬件研发和相关领域将重心放到用户体验上来。苹果公司强调他们是通过提供出色的用户体验赢得市场成功和无上荣誉，其他人自然而然就跟随着他们的脚步前进。第2章交互设计的核心概念2.1　affordance——交互设计界最夯的字

如果真要票选出一个近几年来在交互设计界最夯的字，相信“affordance”应该能够勇夺榜首。这个高级的字眼儿一出口，似乎马上就能够提升个人的气质修养、作品的内涵深度。但有点让人讨厌的是，affordance是一个在字典上查不到、辞海里找不着的词汇。它不仅在定义上有些含糊不清，就连应该如何翻译也长期处于一个众说纷纭的随性状态。如果上网去搜寻，你就会发现affordance曾经被千家百口翻译成为：承担特质、承担性、可用性、特征属性、功能可见性、诱发、示能性、预设用途、可操作暗示、支应性等。

从字面上来看，affordance是及物动词“afford”加上字尾“ance”。afford本身的直接翻译是“提供”“给予”，也常与can、could、be able to连用，借以表示“买得起”“有足够的”“可以承担的”等语意。英文字尾“ance”，则通常是加在动词之后，意指发生此动作的情况或形态。单就字面上的意义来做连连看，“承担特质”或者是“承担性”，似乎是一种理所当然的合理翻译。但仔细探究，这种直率的翻译方式，似乎又无法完全展现出affordance所蕴含之诸多层面的意义。

在交互设计的专业领域中，affordance是一个非常重要的核心概念，因此在本书第2章的第1节，我们必须先从“求甚解”的角度出发做学问，超越字面层次的解说，以更精确、深刻的方式，去探讨affordance字的起源及其深层意义。（1）affordance概念的起源

affordance的概念，起源于美国心理学家詹姆士·吉布森（James J.Gibson）的学说。吉布森于1977年在“The Theory of Affordances”一文之中，首度自创了affordance这个字。1979年，吉布森在《视知觉生态论》（The Ecological Approach to Visual Perception）一书中进一步将affordance定义为：“环境中的affordance，就是这个环境所提供给生物无论好或坏的一切。你在字典之中可以找到afford这个动词，但找不到affordance这个名词。这是我自创的，我用它来指称一种与动物和环境都有关，但却没有任何字词可以形容的东西。affordance所意指的，是动物和环境的一种对应关系。”

乍听之下，吉布森的说法似乎很抽象，但如果我们从佛家的角度来看，也许就会比较容易懂。简单地说，吉布森认为动物与环境之间的关系，是超越人为的命名与分类的，也就是一种类似“名实之辨”的哲思观念。吉布森提道：“如果你知道如何运用一个物件或者它有什么功用，那你如何称呼它其实并不重要……我们习惯性地会把具有相同特征的东西归类、命名，而affordance的理论，能够将我们从这种哲学式的混淆中解放出来。”这种论调和佛家强调突破名相的概念，有着异曲同工之妙。

吉布森认为，人们会去坐在椅子上，是因为这个东西拥有承受“坐”这个行为的本质，而不是因为这个东西叫“椅子”。就像说，院子里面的一棵树，是小孩的“秋千”、松鼠的“家”、白蚁的“大餐”，所以它的名字应该是什么呢？讲到这里，相信有慧根的你应该懂了：因为所提到的人和动物和树的互动模式都不同，所以它叫什么其实并不重要。重要的是，人和动物因应其自身的需求和能力，找出环境对象的各种affordance，或者说：人和动物有寻找自身与环境对象对应关系的本能。如图2.1所示。图2.1　孩子喜欢在床上蹦跳，是因直觉而产生的自然反应和行为

吉布森所谓的affordance，指的就是动物对与其周遭环境物件互动的所有可能性。而且，这是一种超越名称、知识甚至教育的本能和直觉。例如，相信没有家长会教小朋友如何在床上玩耍，但床本身的结构和材质会自然而然地让小朋友产生在柔软表面上面弹跳应该很有趣的一种直觉。因此无论家长如何三令五申，通常也难以阻止家中宝贝无法遏止的欲望。同理可证，所有人都知道“楼梯”不是“椅子”，楼梯是用来登高的工具，而椅子是用来坐的工具，可是我们有时候反倒觉得坐在楼梯上看书喝茶是一种惬意。

这一切affordance的存在，不仅超过其物件名称的规范，也不受限于认知能力。比如，对于一个从来没有见过筷子的外国人而言，他当然不知道这两支棍子状的物品叫作“筷子”，也看不出来这是一种“餐具”，但这些都不会影响筷子可以用来夹食物的事实，也不会抹灭老外“不知”而“误用”，甚至顺手将筷子拿来打毛线的可能性。从这种角度来讨论，吉布森的观点，其实和“世界、非世界、是名世界”的禅学思想有些关联；或者我们可以说，吉布森的affordance，是指超越名相限制的一种功能性相。吉布森认为affordance的论述，能够将我们由过度理性的名相钳制之中解放出来。（2）Donald　Norman的论述

吉布森的论述，让他成为20世纪视知觉（Visual Perception）领域中最重要的心理学家之一。但若要讨论affordance概念在交互设计方面的运用及影响，则必须介绍界面设计理论大师——唐纳·诺曼（Donald Norman）。1988年，当时任教于加州大学圣地亚哥分校（University of California，San Diego）的诺曼，出版了著名的《日常物品之心理学》（The Psychology of Everyday Things）。在这本书中，诺曼将吉布森的affordance论述延伸，用来阐述一些将日用物品设计成功的原则和方法，他在书中提到：“affordance这个字，是指物件本身在认知以及实际上的属性，特别是那些影响和决定这个物件如何被使用的特质……运用得当的affordance，让使用者一看就知道如何操作，不需要图示、标签或说明。”

有趣的是，吉布森和诺曼两人对于affordance的注解，尽管息息相关，但若仔细探究，在出发点上却有着极大的差异。如果我们再回到椅子这个范例来做说明，诺曼所强调的是：一把设计良好的椅子，外观上就提供了足够的视觉线索，因此能够让人清楚地意识到，以“坐上去”这个行为来与此物件互动，是一种合理的行为，因为椅子本体的结构和特质就清楚地展现了它可以被“坐”的功能。相反地，吉布森的affordance论述重点则是：理性的认知，让所有人都知道“椅子”是拿来“坐”而不是用来“打人”的，但倘若是正在享受路边摊的当下，突然有人拿了把西瓜刀冲过来，相信绝大多数的人都会顺手抄起椅子应战。因为从affordance的角度来看，筷子太短、冰箱太重、碗公太脆弱，而椅子的结构让我们直觉地相信它举起来不会太过吃力，也不至于被一刀两断，因此在这个关键时刻，这个物件是否叫“椅子”，以及它通常是用来坐的这项功能根本无关紧要，人类能够从观察中了解物件各种用途可能性的直觉，才是此刻保命的关键。

如果我们要精究、严谨地做学问，吉布森的原意，是实际物体的“真实affordance”（real affordance）；而诺曼所探讨的，其实应该称为“认知上的affordance”（perceived affordance）。也就是说，吉布森所强调的，是动物与物件对应关系所有的客观可能性；而诺曼的着眼点，则在于人类对于功能以及使用方式的一种主观认知。就像是网站界面的按钮（图2.2），其实不过是一些光点的组合，实际上它并不能被“按下去”，但它虚拟的图示形状，却足以让人主观地认为应该要用鼠标去“按”它，这就是以认知上的affordance来暗示操作方法的案例。而错误的affordance，则会造成使用者的混淆和不确定。图2.2　模仿实体按钮的数字界面的按钮和选项

近几年来，诺曼在界面设计及人机互动方面的论述，已然成为交互设计界所认同的核心观念。因此affordance一词也跟着水涨船高，成为设计界所广泛引用和讨论的一字箴言。这种滥用的现象，甚至已经到了连诺曼本人都感到不可思议的地步。在一次交互设计研讨会中，因为不断听到affordance被众人朗朗上口地运用、应用，甚至“硬”用，诺曼曾经自责地说：“这里一句affordance、那里一句affordance，全是一些没有实质内容的看法。令人作呕！我到底带给这个世界怎样的一个东西啊？”

在如此广泛使用的情况之下，affordance的含义逐渐趋于扁平化，成为“暗示功能的视觉元素”的代名词。不仅丧失了当时吉布森在心理学层面辩证时的深刻意涵，也不再有诺曼论述时的精致。因此，在学习交互设计的过程中一定要特别注意，我们必须深刻地去了解affordance的概念，但千万不要将它当成一个朗朗上口却有口无心的虚荣词汇。因为再多饶嘴的专业术语，就算满足了一时面子上的虚荣，也无法堆砌出骨子里深刻的内容涵养。

透过以上的讨论我们可以发现，将affordance翻译成“承担特质”，似乎是合情合理的。直接给“承担”（afford）加上“特质”二字用来强调字尾“ance”，虽然不能说有错，但笔者认为这种方式似乎略显僵硬。特别是对于吉布森或诺曼论述没有涉猎的人而言，“承担特质”这四个字虽然都是中文，但却很有可能会让人“有看没有懂”。

笔者认为，如果一定要将affordance翻译成中文，那么“功用直觉”比较贴切。因为它所指的，就是让设计师去善用各种元素，适当地引导使用者，让他们对于物件的“功”能和“用”途产生一种“直觉”。也许透过这种着眼于字义而非执着于词汇的翻译方式，才能让这个专业术语在中文语句里面产生合理的运用。

佐藤雅彦在《创意人生小小哲学》中曾经提到：“一个好的工具，其本身的设计重点，已经主动透过形状、外观告诉人们应该如何使用它。”这么简单的一句话，其实就已点出了交互设计最重要的精神。2.2　与交互设计相关的两个重点因素

有这样一个冷笑话：不懂英文的阿力到美国看女儿。早晨出门散步遇见隔壁的外国老太太，老太太很有礼貌地打招呼说：“How are you？”阿力心想，初次见面，老太太应该是在自我介绍，所以就客气地回了一句：“我叫阿力。”第二天，两人再次碰面，老太太还是对他说：“How are you？”阿力满腹狐疑，心想，昨天不是已经自我介绍过了吗？但他还是硬着头皮回了一句：“我叫阿力。”回家问过女儿之后，阿力这才恍然大悟，“How are you？”原来不是自我介绍，而是美国人见面时的招呼语。用心在家练了几次，第三天早上两人又碰面，阿力得意地抢着大声说：“How are you？”不料这时老太太竟然洋腔洋调地回了一句：“我叫阿力！”

这个笑话虽然冷，但它其实有两个和交互设计相关的重点。其一就是在沟通的过程中，接收的一方，永远只能依照自己的认知和经验来解读所接收到的信息。其二则是在互动的过程中，人们会依照自己对于状态的臆测，来推断下一步所应该采取的步骤和反应。2.2.1　沟通的艺术

美国数学家克劳德·夏农（Claude Shannon）在1948年10月，发表了著名的《通信的数学理论》（A Mathematical Theory of Communication）（图2.3）。这篇论文可以说是现代通信理论研究的开端，夏农也因此被人尊称为“信息论之父”。夏农在这篇论文中，将通信系统界定为五大部分：信息源头（information source）、传递器（transmitter）、通道（channel）、接收器（receiver）和目的地（destination） 。夏农的研究重点，在于阐述信息传递时所必须克服的基本问题，并且为通信的相关研究找出一个合理的概念模型。图2.3　夏农所提出的“通信的数学理论”

虽然夏农的研究重点是信息科学，但他所提出来的通信理论，却对于艺术和设计有着深远的影响。著名的现代主义设计大师伊姆斯夫妇（Ray and Charles Eames）（图2.4），在1953年拍摄了一部名为《通信入门》（Comunications Primer）的影片。在这部影片中，伊姆斯夫妇除了进一步阐释夏农的论述之外，还特别将它和设计与艺术创作结合起来，讨论创作者与观众之间的连接。

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

下载完整电子书