1.1 设计中的交互设计
交互设计是一门随着计算机技术的发展而产生的新兴学科。交互设计师是近年来各大互联网公司的热门职位。本章的内容旨在为大家系统学习交互设计的理论和技巧打下基础：首先，介绍设计的目的，这是一个根本性的指导原则，它为设计师进行交互设计指明了前进的方向；其次，介绍交互设计的内容；之后，介绍交互设计的系统性学习方法；最后，介绍现在互联网行业对交互设计师的要求，以便读者更有针对性的学习。交互设计是讲求有理有据地进行设计的学科。设计师要通过分析理清思路，根据逻辑安排流程，遵循原则设计界面。因此，交互设计是有“法”可循的设计学科。相信大家通过本书的学习，能快速系统地掌握交互设计的方法，成为一名优秀的交互设计师。下面，本书先从设计的目的开始介绍。
1.1.1 设计的目的：满足需要
这是一个设计师在第二次世界大战中立功的故事。第二次世界大战初期，德国空军曾一度取得了欧洲战场的空中优势，并且宣称“没有任何敌机能在白天飞临柏林上空”。但是在1943年1月31日上午和下午，英国空军战机编队两次飞过柏林上空，不但使德国原定的阅兵式被迫取消，而且让德国人夸下的海口变成了笑话。这种让德国人束手无策的战机，就是历史上赫赫有名的德·哈维兰蚊式战斗轰炸机（简称蚊式轰炸机）。它是第二次世界大战中设计最成功的飞机之一，如图1.1所示。
图1.1 蚊式轰炸机
蚊式轰炸机是由英国的德·哈维兰（de Havilland）飞机公司设计制造的。在设计这款战机的时候，设计师充分考虑了在战争时期，制造战机的传统材料——铝很可能会匮乏，而掌握飞机金属结构制造技术的工人也将十分短缺，因此采用木材代替铝材，这样能够摆脱大型冶炼工厂和专业机械的限制，减少战略资源的消耗，降低制造难度和成本。这样的战略考虑，让英国的橱柜厂、钢琴厂、家具厂都能参与到飞机生产中，从而保证了即使在物资和人员匮乏时期，飞机仍然能够高速产出。同时，为了满足战机“生存性好”的基本需要，蚊式轰炸机取消了炮塔，并减少载员数量，让战机更轻更快。
在整个第二次世界大战期间，这款“身轻如燕”的木制轰炸机出动近4万架次，投下10多万颗炸弹，仅有254架被击落，平均每2000架次行动才会损失1架，战损率只有一般轰炸机的1/3。蚊式轰炸机创造了英国空军轰炸机作战生存率的最佳纪录，成为英国人的骄傲，拥有“木头奇迹”（The Wooden Wonder）的美誉。
蚊式轰炸机的成功，与设计师充分考虑了战争的现实需要密不可分：飞机采用木制，保证了物资匮乏时代仍可以高效地制造；减轻重量，使其速度更快，能够躲避敌人的攻击。
这是一个充分体现设计学科特性的生动案例：设计有着强烈的目的性，而设计师需要考虑现实情况，在一定的限制条件下进行创作。这一点也使设计与艺术有了鲜明的区别。设计的目的是满足需要，而艺术的目的是表达艺术家对世界的看法。这一点从设计学科的发展历史中便能看出其中的渊源。
1919年，德国成立了世界上第一所完全为发展设计教育而建立的学院——包豪斯（Bauhaus），如图1.2所示。从此，设计这门体现人类聪明和智慧的“可爱”学科，才算得上是真正建立起来了。
图1.2 包豪斯校舍
包豪斯首次将“理性思维”的观念注入了设计活动中，提出了关于设计的三个基本观点：
①设计是艺术与技术的新统一；
②设计的目的是人而不是产品；
③设计必须遵循自然与客观的法则来进行。
这些观点使现代设计逐步由理想主义走向现实主义，即用理性的、科学的思想来代替艺术上的自我表现和浪漫主义。
为了实践这个理念，包豪斯实践了许多前所未有且影响深远的举措。
①首次提出要为大工业生产而设计。包豪斯主动将学校和企业界、工业界联系起来，使学生能够体验工业生产与设计的关联。这样的做法，让学生能够设计出真正符合生产标准的作品，而避免了产出看起来美好却无法量产的作品。
②包豪斯奠定了现代设计教育的结构基础。包豪斯把课程分为对平面和立体结构的研究、材料研究和色彩研究三个方面，使视觉教育第一次比较牢固地建立在科学的基础上。在此之前，设计都是被划分在艺术的门类下面，设计本身也被认为是靠感性来进行创作的一项活动。
③包豪斯首次提出了“以解决问题为中心”的设计理念。设计是为了解决问题，这奠定了设计的本质。不论是设计一个水壶，还是一款手机应用软件（Application，App），设计师都是在为他人服务，在帮使用者解决问题。
包豪斯强调形式追随功能，强调突出功能，去掉不必要的装饰，例如灯具的功能就是用来照明的。下面这个例子生动说明了包豪斯的理念，如图1.3所示。
图1.3 台灯对比
包豪斯“以解决问题为中心”的设计理念深深地影响了设计界。设计是理性和感性的结合，并以解决问题、满足人们的需要为目的。日本最大、最权威的综合出版社之一集英社编辑出版的《日语大词典》，对“设计”一词的解释是“考量作品或者商品的美和技能（功能）而构思出来的形态”。从这个定义里，可以看到设计是美和功能的结合。中国现代设计和现代设计教育的重要奠基人之一、美国设计教育最高学府——美国艺术中心设计学院教授王受之在他的著作《世界现代设计史》中写过这样一句话：“设计是为他人服务的活动。”日本当代国际级平面设计大师、无印良品（MUJI）艺术总监原研哉在《设计中的设计》一书中也有类似的表达：“设计的实质在于发现很多人都遇到的问题然后试着去解决的过程。”设计更倾向于是一种社会性的行为，设计师在用自己的巧思帮助人们解决普遍遇到的问题，而“艺术说到底是个人意愿对社会的一种表达”。图1.4所示为艺术家毕加索的作品《格尔尼卡》和德国著名品牌博朗（Braun）设计的留声-收音一体机，体现了艺术作品和设计作品的对比。
图1.4 艺术作品和设计作品的对比
从上面的例子可以看到，无论是蚊式轰炸机还是台灯，设计师们都用精妙的创意满足了需要，因此它们都是优秀的设计。设计的目的是用设计方案来满足用户的需要，而不是单纯产出设计师认为美观的方案。这是设计过程中最重要的原则之一。在进行交互设计的过程中，它能指引设计师将精力放到解决问题上。具体到交互设计，它又有哪些特点呢？下面将进行详细的介绍。
1.1.2 什么是交互设计
交互设计是近几年逐渐兴起的一个新词，它代表了一个全新的设计领域。交互设计是设计什么的？下面的例子可以给出答案。
1979年3月28日凌晨，美国宾夕法尼亚州哈里斯堡东南16km处的三里岛核电站2号反应堆发生了放射性物质外泄事故，事故导致核电站附近80km半径范围内的自然生态环境受到污染与破坏。这是人类发展核电以后首次引起世人关注的核电站事故。
事故发生后，调查组对事故原因进行了调查，发现操控员的处理以及控制室仪表盘的界面都存在严重问题。其中，控制室的仪表盘没有提供监视堆芯温度的仪表，监控阀门的指示灯只显示了电导管是否通电，却没有显示是哪里的阀门出现了问题。这样的设计使操控员在出现问题几小时后都无法确定问题发生的位置，导致问题越来越严重，最终发生了爆炸。
在这起事故中，控制室的仪表盘由于没有准确地显示问题的位置，导致维修人员对设备的修复无从下手，只能一点点排查，耽误了宝贵的抢修时间。在这个监控系统的交互设计方案中，缺少了对关键部件的监测反馈。这个糟糕的交互设计方案成为导致事故发生的主要原因之一。图1.5所示为早期核电站的控制室。
图1.5 早期核电站控制室
与核电站缺少有效反馈的原理相同，下面这个手机App的例子，也很好地说明了设计良好的交互方案的重要性。当笔者在某手机App中某只股票的“交易”界面，输入了价格和买入的股票数量，点击“买入”按钮后，会出现图1.6所示的警告框。警告框中的文案只说明了操作失败，但没有说明原因。后来笔者几经周折，最终通过联系客服进行查询，才得知买入失败的原因是“身份证信息已过期，需要重新提交审核”。
图1.6 某手机App的错误提示
与之形成鲜明对比的是微信登录页错误提示的设计。当用户第一次密码输入错误时，会出现图1.7（a）所示的提示；当第二次输入错误时，微信会提示是否需要找回或重置密码，如图1.7（b）所示。找回密码对于多次输入错误的用户，可以帮助其解决“密码总是输入错误”的问题，并且有助于用户完成登录操作，因此是合理的设计方案。
图1.7 微信登录页面的错误提示
在处理错误信息这个问题上，更进一步的交互设计方案是“防患于未然”，例如支付宝转账功能的设计方案。
支付宝转账功能比较早期的方案如图1.8所示。用户点击图1.8（a）中的昵称，则进入图1.8 （b）所示的页面。由于用户对“转账”行为早就有了“输入转账金额”的预期，很多用户在这个页面会马上输入转账金额（例如“244”），随即点击“发送”按钮。对方则只能收到“244”这个文本信息。支付宝的设计师发现了这个问题，于是在用户输入数字后，会在输入框的上方出现“给对方转账244元”的提示，如图1.8（c）所示，点击则进入专门的转账页面。
图1.8 支付宝转账流程（旧）
后来，支付宝的设计师更进一步进行了改进：用户点击昵称后，直接进入转账页面，从流程上直接进行了优化，避免了用户犯错，如图1.9所示。
图1.9 支付宝转账流程（新）
上面三个例子，都是关于错误信息处理的。用户进行操作过程中，系统或程序在用户操作错误时给予及时反馈，能带给用户掌控感，提升用户体验。反馈的设计是交互设计中重要的一部分，但也只是交互设计内容的冰山一角。那么，什么是交互设计？交互设计都包括哪些内容？
交互设计中“交互”一词，英文是interaction，其中inter是“互相”的意思，action就是“行动”，所以interaction直观上解释就是“互相的行动”，也就是主体行动一下，客体再行动一下，彼此往复，你来我往，如图1.10所示。
图1.10 交互示意图
交互设计即设计这一系列“互相的行动”，使用户能更好地使用物品，物品能更好地服务用户。在上面核电站的例子中，监控系统一直在监测核电站的各项指标，一旦有异常，就需要发出警告，这是监控系统的行动。但在这个行动中，缺少了对关键部件的监测，因此事故出现时无法发出警告，最终酿成大祸。
“交互设计之父”艾伦·库伯（Alan Cooper）在其经典著作《About Face 4：交互设计精髓》（About Face 4:The Essentials of Interaction Design）里写道：“交互设计是设计可互动的数字产品、环境、系统和服务的实践（Interaction is the practice of designing interactive digital products, environments, systems, and services.）。”从这个定义我们可以看到，交互设计覆盖了内容丰富的领域，有数字产品、环境，还有系统和服务。在这些领域中，包含着大量人与另一个目标的互动。
由于交互设计本身覆盖了多个领域，所以交互设计与许多设计分支都存在重叠。其中，交互设计与人机交互的重叠区域最大，与工业设计、建筑设计、信息架构设计、视觉设计都有交集。本书主要介绍交互设计在移动互联网行业中的应用，它包含在交互设计与人机交互的重叠区域内，如图1.11所示。
图1.11 用户体验领域和交互设计
交互设计是对人与数字产品、环境、系统、服务等如何进行互动的设计。这些互动的过程，主要发生在若干个节点上。以用户在ATM机取款为例，如图1.12所示。
图1.12 操作ATM机
用户插入银行卡并输入密码。
（节点1）ATM机验证密码，询问用户操作何项目。
用户在ATM机上操作，给ATM机发出第一项指令。
（节点2）ATM机执行第一项指令并给出反馈。
ATM机问用户下一项指令的内容。
用户在ATM机上操作，给ATM机发出第二项指令。
（节点3）ATM机执行第二项指令并给出反馈
ATM机问用户下一项指令的内容。
（节点4）：……
通过这些节点，ATM机一步步执行用户的指令，完成取款操作。而节点与节点之间的过程，系统需要让用户明白需要做什么，发生了什么，以便进行下面的步骤。交互设计师处理的就是用户与这些关键节点的互动，让用户知道自己现在所处状态、该做什么、操作之后有何种效果这三种关键信息，辅助用户完成任务。