交互设计完整入门指南| 人人都是产品经理

一、什么是交互设计？

交互设计协会（IxDA）的定义如下：

“交互设计定义了交互系统的结构和行为，交互设计师致力于在人们和他们使用的产品和服务之间建立有意义的关系，从计算机到移动设备再到应用等。交互设计的实践范围与世界的发展同步。”

从第一个屏幕被设计的那天起，交互设计就诞生了，从按钮、链接到表单字段都是交互设计的一部分。在过去的几十年中，出版了许多书籍从各方面来解释交互设计，并探索它与体验设计交织重叠的方式。

交互设计已经发展成为促进人与环境之间关系的交互，与考虑系统内所有与用户有关的因素的体验设计不同，交互设计师只需关注用户与屏幕之间的特定交互。当然，在实践中并没有这么清晰的界限。

二、常用设计方法

虽然交互设计涵盖了Web站点、移动应用程序等类型，但依然存在一些可供所有设计人员借鉴的方法。这里我们将探讨一些常见的方法：目标驱动设计、可用性、五个维度、认知心理学和人机界面指南。

1. 目标驱动设计

Alan Cooper最早在他的著作《The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity》（1999年出版）中提出了目标驱动的设计方法。

Alan将目标驱动设计定义为一种“ 把解决问题作为最高优先级 ”设计。换句话说，目标驱动设计首先关注的是满足最终用户的特定需求和愿望，而不是旧设计方法，后者侧重于技术方面的可行性。

在今天开来，Alan提出的一些观点似乎很显而易见，因为设计师很少仅根据开发限制来选择交互。然而，从本质上讲，以“满足最终用户的需求和愿望”为设计目的在今天同样有必要。

Alan认为在目标驱动设计的过程中，需要作为交互设计师的我们进行五次转变。

（1）Design first，program second

设计第一，程序第二。

换句话说，目标驱动设计首先应考虑用户如何交互以及界面如何展现，而不是从技术考虑开始。

（2）Separate responsibility for design from responsibility for programming

将设计责任与编程责任分开，指的是对最终用户负责的交互设计师的必要性，而不必担心技术限制，设计师应该信任他开发人员能够处理技术方面的问题。事实上，Alan Cooper认为如果不这样做，设计师就会陷入利益冲突。

（3）Hold designers responsible for product quality and user satisfaction

让设计师对产品质量和用户满意度负责，虽然利益相关者或客户会有自己的考量，但交互设计师对屏幕另一侧的用户负有责任。

（4）Define one specific user for your product

为您的产品定义一个特定用户，这个特殊的想法现在已经发展成为与用户研究相关的东西：人物角色。

然而，Alan提醒我们将人物角色连接回产品，并不断问：这个人会在哪里使用它？他们是谁？他们想要完成什么？

（5）Work in teams of two

以两人一组的方式工作。最后，交互设计师不应该在孤岛中工作，与Alan Cooper称之为“设计沟通者”的其他人的合作是关键。虽然Alan在1999年设想的设计传播者，通常是为产品提供营销文案的广告撰稿人，但今天已经扩展到包括项目经理、内容策略师、信息架构师在内的许多人。

2. 可用性

可用性可能让人觉得是一个模糊的术语，但从本质上讲，设计师们只是在问：“ 有人能轻易地使用它吗？ ”

书上和网络上有很多解释，我们一起回顾这些不同的解释来看看其中的共同主题和细微差别。

在Alan Dix、Janet E. Finlay、Gregory D. Abowd、Russell Beale等人合著的《 Human Computer Interaction 》一书中，可用性有三个原则：

易学性： 新用户是否可以轻松学习如何浏览界面？

灵活性： 用户可以通过多少种方式与系统交互?

健壮性： 当用户面临错误时，我们如何支持他们?

同时，Nielsen和Schneiderman解释说可用性是由五个原则组成的：

易学性： 新用户能多容易学会浏览界面？

效率： 用户执行任务的速度有多快？

可记忆性： 如果用户有一段时间没有访问过系统，他们对系统界面的记忆程度如何？

错误： 用户会犯多少错误，他们能多快从错误中恢复？

满意： 用户喜欢使用这个界面吗?他们对结果满意吗？

国际标准（ISO 9241）也将可用性分解为五个原则：

易学性： 新用户能多容易学会浏览界面？

可理解性： 用户如何理解他们所看到的？

可操作性： 用户在界面中有多少控制权？

吸引力： 界面的视觉吸引力如何？

可用性合规性： 界面是否遵循标准？

显然，有一些共同的主题构成了界面“可用”的含义。无论设计师遵循什么样的可用性原则，对任何界面来说，它都是一个重要的考虑因素。

3. 五个维度

在Bill Moggridge的《Designing Interactions》一书中，交互设计领域的学者Gillian Crampton Smith介绍了“交互设计语言”的四个维度的概念。换句话说，这些维度构成了交互本身，因此它们构成了用户和屏幕之间的沟通。

最初的四个维度是： 文字、视觉表现、物理对象或空间、以及时间 。最近，IDEXX实验室的高级交互设计师Kevin Silver又增加了第五维度： 行为。

文字： 应该是简单易懂的，并且以一种易于与最终用户交流信息的方式书写。

视觉表现： 图形或图像，所有非文本的东西。它们应该适度使用，以免被过犹不及。

物理对象或空间： 指的是物理硬件，无论是鼠标和键盘，还是用户与之交互的移动设备。

时间： 用户与前三个维度交互所花费的时间，包括用户查看进度进度的方式，以及声音和动画。

行为： 是Kevin Silver在他的文章《What Puts the Design in Interaction Design》中加入的，是用户与系统交互时的情绪和反应。

使用这五个维度，交互设计师可以更关注用户在与系统沟通和连接时的体验。

4. 认知心理学

认知心理学研究的是大脑如何工作，以及在那里发生了什么心理过程。根据美国心理学协会的说法，这些过程包括：“注意力、语言使用、记忆、感知、解决问题、创造力和思考”。

虽然心理学是一个非常广泛的领域，但有几个关键元素是特别值得重视的，事实上一定程度上助推了于交互设计领域的形成。Don Norman在他的书《The Design of Everyday Things》中提到了许多。

下文是其中一部分：

心理模型： 心理模型是用户脑海中对某种交互或系统的期望。通过研究用户的心理模型，交互设计师可以创建更直观的系统。

界面隐喻： 利用已知的操作方式引导用户进行新的操作，例如：大多数计算机上的垃圾图标类似一个物理垃圾桶，以便提醒用户进行预期的操作。

可视性： 可视性不仅是设计某事物的功能，而且是把它们设计成能完成某功能的样子。例如：一个看起来可以按下的像物理按钮的按钮，是一个可视性设计，以便不熟悉该按钮的人仍然能够理解如何与它交互。

5. 人机界面指南

这个描述可能有点不恰当，实际上并没有一套确定的人机界面指南。然而，创建人机界面指南背后本身就是一种方法论。大多数主要技术研发企业都制定了指南，包括Apple和Android，Java和Windows。

它们的目标都是一样的： 向潜在的设计人员和开发人员提供建议和指导，以帮助他们创建通用的直观界面和程序。

三、日常工作任务和交付成果

交互设计师是整个开发过程中的关键参与者，他们有一系列对项目团队至关重要的工作要完成，包括制定设计策略、确定线框图关键交互和原型交互等。

1. 设计策略

虽然界限比较模糊，但可以肯定的是： 交互设计师需要知道他们为谁设计，以及用户目标是什么 。

通常，这是由用户研究员提供的。反过来，交互设计师要评估目标并制定设计策略，要么独立完成，要么是在团队其他设计师的帮助下完成。设计策略将帮助团队成员理解，需要通过哪些交互来促进用户目标。

2. 线框图及关键交互

在交互设计师很好地了解设计策略之后，他们可以开始绘制界面以及必要的交互。

这里的关键在于细节：一些专业人士会在记事本/白板上记录这些交互，而另一些人会使用桌面应用程序来帮助他们完成这个过程，还有一些人会使用两者的组合。或协作完成或独立完成，这完全取决于交互设计师及其特定的工作流程。

3. 原型

根据项目流程，交互设计师的下一步要做的是创建原型。团队可以运用多种方式对交互进行原型设计，这里不再详细介绍，例如：html/css原型或纸质原型。

4. 保持进步

成为一名交互设计师最难的部分之一就是应对行业变革的速度，每天，新的设计师都会将媒介推向不同的方向，而用户希望这些新的互动方式能够出现你的的网站上。谨慎的互动设计师会通过不断探索进行新的互动，并利用新技术来应对这种演变。

但同时需要明确正确的互动或技术才是最能满足角色需求的，而不一定是哪些最新的或最令人兴奋的，交互设计师也可以通过关注社交媒体上的思想领袖以推动自己学习和进步。

四、行业杰出贡献者

1. Alan Cooper

Alan Cooper 于1992年联合创立了Cooper公司，他以在软件设计领域中人性化技术方面开创性的工作而闻名。他还著有《About Face: The Essentials of Interaction Design》(1-4版)和《The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity》等书，被认为是“Visual Basic之父”。

他还创造了目标导向的设计方法，并发明了“personas”（角色）这种实用的交互设计工具，以创造出令用户满意的高科技产品。

2. Brad Frost

Brad Frost正在领导一次变革“Death to Bullshit”（死于废话）。“Death to Bullshit”的目标是“让世界摆脱胡说八道的呐喊，以及尊重用户和他们的时间的需求体验。”

Brad Frost以网页设计师的经验鼓励同行作为作家、顾问和演讲者参与到这次变革中。虽然Brad在技术上是一名前端开发人员，但开发人员和交互设计师之间的界限本就不明显，他的工作对交互设计社区产生了巨大影响，当前部分原因在于他创建的工具和资源。

这些资源包括：This Is Responsive、Pattern Lab、Styleguides.io、WTF Mobile Web和Mobile Web Best Practices。Brad还提出了Atomic Design（原子设计）的概念，并写了一本书。

3. Whitney Hess

Whitney Hess给自己的人生使命是“让人性重回商业”，Whitney致力于推动“Designing Yourself”, 除了写在自己的博客Pleasure & Pain中, 还在全球的会议和协会发表演讲。她在卡内基梅隆大学（Carnegie Mellon University）获得人机交互硕士学位、专业写作和HCI学士学位，并于2014年成为New Ventures West的认证教练。

4. Kim Goodwin

Kim Goodwin是畅销书《Designing for the Digital Age》的作者，Kim目前为航空、消费电子和零售等不同行业的客户提供咨询服务。

在过去十年的大部分时间里，她在Cooper公司担任副总裁、设计和总经理，负责交互、视觉和工业设计师的综合实践，以及著名的“Cooper U”设计课程的开发。她丰富的经验和对教学的热情，使她成为世界各地会议和协会的作家和演说家。

5. Brenda Laurel

Brenda Laurel参与了人类使用计算机的几个主要变革：虚拟现实，互动叙事以及一些新的游戏和人工智能方法。

她曾担任加州艺术学院设计研究生课程的创始主席和教授，她曾在Atari工作，和别人共同创办了游戏开发公司Purple Moon，并担任多家公司的互动设计顾问，包括：Sony Pictures、Apple和Citibank。

6. Mat Marquis

Mat Marquis是另一位互动设计师，他模糊了设计师和开发人员之间的界限。他是A List Apart的技术编辑，负责设计师和开发人员的文章，以帮助设计界的教育，他还参加过几次An Event Apart的会议。

他是Responsive Images Community Group的主席，这是一个在响应式设计中寻求图像解决方案的组织。他还是开源社区的积极成员，帮助其他设计师通过相互合作来推动他们的工作。Mat最近在一家建立开源项目的网络平台咨询公司Bocoup。

7. Karen McGrane

Karen花费了超过15年的时间通过可用性、用户体验设计和内容策略使网络变得更加美好。2006年，她创立了Bond Art + Science，这是一家为The Atlantic，Fast Company，Franklin Templeton以及Fidelity等公司提供用户体验咨询的公司。

Karen参与内容策略、用户体验和信息架构的工作，并在纽约视觉艺术学院的交互设计课程中教授设计管理。除此之外，Karen还担任风险投资公司Ignite Venture Partners的数字副总裁，并通过A Book Apart平台编写Content Strategy for Mobile and Going Responsive的内容。

8. Mike Monteiro

Mike Monteiro是Mule的联合创始人，Mule是一家以探索位置领域而闻名的设计机构，包括：内容策略、在线认证、以及通过经典永恒的设计把尖端网络技术融合在一起。

Mike已经写了两本书，《Design Is a Job》和《You’re My Favorite Client》。在这本书中，他向世界宣扬他对努力工作的热爱，自我意识以及优秀裁缝的重要性。

Mike 继续在世界各地的会议和聚会上进行前卫的真诚的演讲，例如：“This is the Golden Age of Design (and we’re screwed)”类似的主题。

9. Theresa Neil

Theresa Neil是一位德克萨斯州奥斯汀市的用户体验顾问，自2001年以来，她主导了100多个网络，桌面和移动应用程序的设计。客户包括财富500强企业，非营利组织和奥斯汀市本地的初创企业。

她与Bill Scott（设计师和开发人员）共同撰写了《Designing Web Interfaces》一书，并撰写了《Mobile Design Pattern Gallery》以帮助设计人员进行移动应用和智能手机设计。她的作品可以在www.theresaneil.com上看到。

10. Don Norman

Don Norman研究真实的人如何与设计互动，探索设计师的意图与普通人的实际需求之间的鸿沟，他的作品已经成为了经典书籍，包括《The Design of Everyday Things》在内，这本书被认为是用户体验设计经典的入门书籍。

11. Dan Saffer

Dan Saffer在Twitter工作，负责战略设计项目。他以前是Jawbone的新产品创意总监，在那里他为可穿戴设备和消费电子产品设计了下一代产品和服务。

Dan撰写了许多关于设计的书籍，包括《Designing Devices》、《Designing for Interaction》、《Designing Gestural Interfaces》。他的新作《Microinteractions》也于2013年出版了。

12. Brenda Sanderson

Brenda Sanderson是拥有50,000多名成员的IxDA协会的执行董事，IxDA是致力于全球网络的交互设计专业实践。超过15年的设计经验为Brenda带来了设计工作室、印刷店、报纸出版公司和广告公司。她因其优秀的设计工作、研究技术对创意领域的影响，而在全国范围内获得知名度。

13. Bill Scott

Bill Scott于2006年帮助雅虎创建了设计模式库，自那时起，他对模式库的研究已经影响了全世界的设计师。 Bill是一名设计师和开发人员，他的工作包括创建3D图形库，为NATO做界面设计以及负责许多开源项目。他与Theresa Neil共同撰写了《Designing Web Interfaces》，并经常作为会议发言人出席活动。

五、推荐工具

交互设计师使用许多不同的工具来完成他们的工作，无论是在餐巾纸上绘制还是向客户展示原型，他们的目标都是相同的： 通过对话进行沟通。

1. Balsamiq Mockups

Balsamiq Mockups是一款Adobe Air应用程序，可轻松实现线框图交互。 Balsamiq团队的工作非常出色，为用户提供了许多与当代应用程序设计完美契合的交互设计模式。

更重要的是，Balsamiq始终保持界面简单，使用手绘风格的元素和手写字体。通过消除无关的设计元素，设计师和利益相关者可以将他们的工作（以及他们客户的反馈）集中在交互上，可以把它想象成纸质原型的在线版本！

2. InVision

InVision 是一款适用于Mac和Windows的免费网络和移动原型制作工具，InVision旨在促进沟通，并可以和Photoshop、Sketch、Slack、Jira等其他应用程序集成。

设计人员可以通过网络上传线框并将它们串联在一起，形成2D导航体验。客户、利益相关者和同事，都可以直接在设计上添加评论，通过InVision的实时演示工具LiveShare，该应用程序可实现实时白板。

3. LucidChart

LucidChart是一款灵活的图表软件，适用于从Android和iOS体验设计到流程图、站点地图、线框和网站模型的所有内容。

LucidChart提供了许多有用的集成，包括Google Suite、InVision、Atlassian、Slack等。该工具配置非常复杂，但同时又直观且灵活，它深受设计和用户体验团队以及IT支持团队和工程师的喜爱。

4. Patternry

没有人愿意浪费时间重新发明轮子，优秀的交互库可以节省时间和精力进行设计或编码通用交互，并确保设计的一致性。Patternry允许交互设计团队，在一个中心位置（即库）共享和存储他们的设计和代码资产。 Patternry的优点在于它不仅仅是一个存储库，它还提供了一个起点，有许多常见的交互模块。

5. Sketch

Sketch是一种设计工具（仅限Mac），最适用于图标或中高保真模型。作为Adobe Photoshop的轻量级替代品，Sketch提供图层，网格和画板等功能。

简而言之，交互设计师可使用其中的视觉元素快速创建线框和模型。Sketch还有许多插件，如：Zeplin等。

6. Axure

Axure RP可以说是市场上最好的交互设计工具，拥有比Balsamiq更强大的功能，如：协作和共享，以及轻松将线框转换为原型的能力，Axure似乎提供了一切。一个缺点是它提供太多功能，这意味着它的学习曲线很慢。

7. Principle

Principle是一个开源平台，专注于功能和转换。它基于Sketch画板进行布局，并提供各种各样的动作。这是一个免费，易于学习的界面，提供一整套YouTube教程和帮助文章。

最酷的部分是，当你将画板构建成一个动人的，有凝聚力的东西时，Principle会为你提供一个可以在单独窗口播放的工作原型，它也有一个内置的屏幕录像机。

六、行业内知名协会

寻找其他设计师是与该交互设计领域的其他人，建立联系和学习的一种很好的方式。以下这些协会都可在美国查询到，有些也存在于国际上。

1. IXDA

用他们自己的话说：IxDA提供了一个在线论坛用于讨论交互设计问题，和其他平台一样供那些热衷于交互设计的人收集信息和推进该学科的发展。IxDA还为设计师提供年度会议，名为“互动周”，该会议遍布全球，为行业持续行业专家的一流内容和见解。

http://www.ixda.org/

2. AIGA

虽然AIGA（American Institute of Graphic Arts美国图形艺术学院）最初是为平面设计师创立的，但该组织意识到平面设计师更频繁地为新媒体设计作品，其中交互设计起着重要作用。会员遍布美国各地，并举办各种活动，从Photoshop Layer Tennis到艺术展览等。

http://www.aiga.org/

3. An Event Apart

在过去的13年里，An Event Apart在美国各地举办，汇集了最新的网络和互动设计的声音。这个会议以密集的三天单轨形式提供，最多有18个演讲嘉宾。主题清晰易懂，涵盖开发人员、设计人员、用户体验和用户界面专家、客户经理、项目经理等相关内容。An Event Apart一直拥有一些业界领先的思想家和实干家。

https://aneventapart.com/

3. Meetup

坦白说没有一个Meetup小组，这就是它的美妙之处：在Meetup界面上搜索“交互设计”或访问http://ia.meetup.com/，您将找到大量的网络组、教育组和社交组。

如果您碰巧生活在尚未存在交互设计（或用户体验设计）聚会的区域，那么现在是时候开始了！碰巧，Meetup的界面也可以轻松启动新组。

http://www.meetup.com/

七、推荐书籍

与交互设计相关的书籍清单特别多，在这里，我们将列表缩小为几本经典书籍。但是，如果您真的想要扩展您的库，请查看我们为您推荐的用户体验书籍。

《Designing for Interaction: Creating Innovative Applications and Devices (2nd Edition)》

by Dan Saffer

Dan Saffer介绍了我们周围的世界，以及我们每天所经历的互动，他的书打开了设计世界，并以一种易于理解的方式展现出来。它同时是一本示例书，以及创建可用产品和设计策略的方法。

《Designing for the Digital Age: How to Create Human-Centered Products and Services》

by Kim Goodwin

在为数字时代设计时，Kim Goodwin认为：我们需要接受所有的产品和服务因其技术限制和机遇而变得更加复杂的事实。无论有多么令人难以置信的功能，我们都不能忽视数字领域给用户带来的混乱。Goodwin探索了设计师面临的利益和挑战，并提供流程和活动，以减少混乱并提供更好的体验。

《Designing Interfaces》

by Jenifer Tidwell

多年来，《Designing Interfaces》已经变得无处不在，它的绰号“带有鸟的书”已经为人所知。它如此受欢迎是因为：Jenifer Tidwell解释了最佳实践，提供丰富的例子，为读者留下足够的方法和指导来激发未来的设计。

《Interaction Design: Beyond Human-Computer Interaction》

by Yvonne Rogers

在第三版中，Rogers的书提供了我们在技术和道德方面的设计方式。每一章都有助于为“如何设计增强和扩展人们交流，互动和工作方式的互动产品”提供基础。本书包括案例研究、示例、问题以及对未来趋势的洞察力。

《The Design of Everyday Things》

by Don Norman

《The Design of Everyday Things》是经典之作，正是这本书将设计从“最好有”变成了必需品。在其中，Don Norman探索了在日常生活中可用且直观的设计的价值，他总结了了一系列要遵循的规则，以便创建简单，实用的产品和轻松的体验。

《Don’t Make Me Think》

by Steve Krug

一本简短但有力的书，《Don’t Make Me Think》兼具趣味和信息。在其中，Steve Krug介绍了已被证明的交互的基础知识。Krug作为可用性顾问的经验为他提供了大量现实世界的例子，并为每个交互设计师要面对的问题提供了具体的解决方案。

翻译：Complete Beginner’s Guide to Interaction Design

原文地址：http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/

本文由 @张鹏涛TAO 翻译发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

人人都是产品经理（woshipm.com）是以产品经理、运营为核心的学习、交流、分享平台，集媒体、培训、社群为一体，全方位服务产品人和运营人，成立12年举办在线讲座1000+期，线下分享会500+场，产品经理大会、运营大会50+场，覆盖北上广深杭成都等20个城市，在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监，他们在这里与你一起成长。 ©2010-2020 - 人人都是产品经理 - 粤ICP备14037330号 - 粤公网安备 44030502001309号企业内训/课程咨询和合作: 18682011582 其他合作/投诉/意见反馈: 18123776760