用一篇文章，让你掌握「微交互」的基础知识！

编者按：文总结微交互基础知识和三大作用，作者用大量优秀微交互案例演示让你观感受到微交互强大，适合微交互不熟悉新学习。

@木须  ：微互以反映系统状态、支持防错设计以及传达品牌。它们由触启动，还能让验变得更加迷人。

一、什么是微交互？

我们每天与电脑进行的互涉及到大量的微互。微互以反映系统状态或者帮助用户防错的方式给予用户反馈。此外，微互还能用品牌推的媒介。

定义：微互指的是成对的「触」和「反馈」。其中「触」以是用户行为，也以是系统状态的变更；「反馈」是针对触的回应，通用户界面微小的、高度相关的变化（通常为视变化）传达出来。

用户启动的触以是 GUI 命令、手势或者语音形式，而系统启动的触则需要满一系列预先确定的条件。若微互由 GUI 命令触，视反馈元素通常显示在它的邻近。

△ 微互的流程——不论是用户触还是系统触，通用户界面的微小变化反馈给用户

微交互包含了的数字元素，但并非每元素都微交互的一部分。一直显示的静态元素不能算微交互，因它们被明确触发。此外，由多行构的流程也不微交互。下表列出了微交互的一些例子。

Dan Saffer 2014出版的《微交互》一书中义了这概念，并简略描述了义微交互的模型。

在这篇文章中，将聚焦于为何交互对于用户体验是至关重要的，并会提供一些来用户视角的典型案例。

二、微交互为何重要？

使用科产品的最大趣之一来授权用户和用户参。令人愉快的体验指的不只是能用而已，它还需要引人入胜，而这恰恰是交互较为擅长的地方，它能积极地响产品或服的外观和给人的觉。

微交互可通过列方式升产的户体验：

• 鼓励参
• 显示系统状态
• 提供防设计
• 传达品牌

比起下刷新类现代元素，滚动条这标准微交互常不太可能会设计很。主要是这些新兴交互要求我们必须付出更多努力和思考才能创造出充满意义、设计优良用户体验。

我们来看一个微互的优案例吧。

了理日常任务，我使用了任务理具 Asana。该具的某些方面我尤喜欢的，比如它的标签视觉设。但到目止，我喜欢 Asana 的方还于每当我完某项任务时偶尔会独角兽飞过浏览器这一点。这其实微交互的一例子。

当用户将任标记为完成，会有一个较的对话框出现在页面的左下角。该对话框提供了系统的反馈——任已经被标记为完成，同还有一个防错选项用于撤销之前的行为，以防那是一个误操作。对话框出现后的大约一秒，会有一只独角兽穿过浏览器的左下角域，用以祝贺用户出色地完成了相应任。在这个案例中，共有2个交互：实用的对话框和受游戏化计所启发的独角兽动画。

△ 在 Asana 网站，当用户将任标记为完成，会显示一个包含确认息和撤销之前操作的按钮的对话框。另外，偶尔还会有独角兽飞过屏幕

如果你使过任务管工具，你应该知道可择的工具实很多，如 Asana、Jira、Trello 或者 Wrike，这些产有很多共通之处。他们有相同的功，如将任务指派给团队成员、创建看或者跟他产进行整合。然而，如果仔细分析这些产的微交互的话，它们之间的差异就相当明显了。如在 Trello 中 ，将任务移到已成列表并会发生额外的特别明显的特效。对很多人来说，这已经足够契合他们的期望。然而我渴望在成任务时还看到独角兽，对我个人来说这算是一种正面强。

然了，微交互不是让用户感觉舒服而已。微交互能做事情括显示系统状态、支持防以及传品。在这些场景微交互应用能够带来巨大价值，此这也使微交互成为了让你品区于竞争手关键。微交互过反馈来告知用户信息，并保证用户可以继续使用前品，没有它们，你用户体验将会相糟糕。

三、显示系统状态

过让品变易于理解并实时显示系统前状态，能让用户体会到掌控感和参与感。任何系统状态显示都是微交互，为它们天然具备了触发（不管是用户为是系统状态变化）和反馈。

1. 显示进度

进度指示是微交互个子，它能让用户知系统仍在运，可以随时回应他们为。进度指示大多为线性或圆形组件，它们能够显示明确或不确定等待时。在用户等待操作结反馈时，这元素能够鼓励他们继续留在前品。

用户下拉刷新信息流的场中 LinkedIn 使用的是圆形进度条。该组件以明确表示系统仍在运行，因此用户不必反复猜测它是否还能识别他们的行为。亏样的微互，用户愿意等待更的帖子进行加载，从而持续停留在 LinkdIn 中。

△ 用户在 LinkedIn 中下拉刷新信息流时，有进度条显示系统正在响应请求

2. 待命

有时系统需要表明它们在等待用户进一步的输。在开始的触之，微互提示用户系统已经待命，并需要更的信息输。一类的微互鼓励用户继续跟当前的产品进行互。

例如，当 iOS 的桌面屏幕按某 app 的图标，系统会通过轻微抖动所 app 的方式予以回应。该活动表明系统已待一的行（也就，不轻点 app 左角的「X」删除应用还将图标拖到另一置）。

△ 用户按 app 时，iOS 使用微交互（抖动图标）表示系统待一的输入

交互并不局限于网站。Google Home 之类的语音助在等待用户的命令，也使用了交互来显示待命模式。在用户说完「Hey Google」之后，该备会显示一个包含四个圆点的动画。这些圆点着会立即构成一个带有妙闪烁动效的方块。通过这的视觉反馈，用户就能立马知道备已经在等待命令，因此可以开始问它「气如何？」之类的问题了。

△ Google Home 在听触发词「Hey Google」后会亮起来，这表示它已经在等待用户的语音命令

四、防错

防错聚焦于避免容易出错的情况，还可以提供确认操作。

微交互将这些情况传达给户，并通过支持撤销操作和避免重复工作来升令人满意的户体验。

1. 支持撤销操作

人人都会犯错，这在数字世界里指的是有时候我们会小心点击了某处。因此系统应该要确保撤销操作可变得容易一些，免户得历经重重障碍才逆转他们的无心之失。微交互可显示 UI 组件的当前状态，还够示户他们可进行进一步的交互了。

微交互可以说是撤销操作最完美支持，为它们能够明确提示用户系统状态已经发生变化。

Gap.com 允许你收藏喜欢的品，只要点击图右上角的心形图标就行。个微互使用跳动的心形动画来表达你已经收藏某件品。你以很容易的通次点击心形图标撤销收藏的行为，它就恢复为原来的灰状态。

这种跳动的形动效利用动画吸引用户注意的恰当方式，因：

• 它够微妙，没有粗暴的将用户的注意力从主要任务中猛拉开（相反的，明显的动画对用户造成极大的干扰）。
• 只很短的时间内显示该动画，因此它仍然可以算作微交互，不合时宜久显示截然不同。
• 跳动的心形动效跟常规的点亮颜色的心形图标的别在于它更有助于传达系统状的变化，并能够引导用户留因外操作而产生的潜在响（这在触摸驱动的用户界面中常常发生）。

△ Gap.com 使用微互来表示用户收藏某件品

2. 避免重做

在账号创建的流程中，比在点击最的提按钮收到错误提示说你的密码不符合要求（之前并未说明要求），还有不少情是更加令人崩溃的。但是使用微互的就以用来提示用户所输的密码是否符合要求，以大大避免重复的输操（比重新填写表单）。果没有微互，用户在注册的程中随时感到抓狂，并且果注册并不是必须操的，他们便立马离开。

eBay 的注册表单使用了微交互效避免验证时的错误发。例如，密码输入框被激活后，会出一列表显示对应的密码设置的求。输入的过程中，每当密码满足其中任一求，该列表都会自动新。如果输入的内都不符合求，它的下方则会出色的错误提示。这一系列的微交互组合起保证了用户可以得到一致的反馈流畅的体验。

△ eBay 其注册表单中使用微交互反馈密码否符合求

五、传达品牌

微交互不应该空洞无的，服务于某目的，因此我们也可以用它行品牌传达。如果的品牌形象充满乐趣且色彩斑斓，那么让它体微交互中相当合的。相反，若的品牌需传达出专业可靠的感觉，那么下拉刷新的微交互中使用搞的方式（比如圈）就相当欠缺考虑了。就的文案拥某种口吻一样，的微交互也它自己的口吻。

在使用苹果的息App 发送生日快的消息，屏幕中会出现的气球动画。苹果将定位为一个含创同以人为本的品牌，而这个生日的交互以创造情化的官体验的方式完美契了身的品牌性。

△ 用户向某人发送「生日快」的息，息App 会通过交互来表达祝福

Snapchat 利了微交互来表示两位 Bitmoji 户处在同一个聊天口中。如果对方正在输入，他的 Bitmoji 上会显示表示正在思考的气泡。而如果他在阅读消息，对应的 Bitmoji 则会显示为正在偷偷查看消息输入框。在这个案例中，微交互供的反馈会鼓励户继续进行对话并持续使这个 app 。

△ Snapchat 使微交互来显示有两个户处于相同的对话口中。对方阅读消息时，他的 Bitmoji 会在左角偷看（左图）。如果对方正在输入，他的 Bitmoji 上则会显示表示对方正在思考的气泡（右图）

许多品严依赖视觉来进传，其实声音也拥有相程度感染力。假设有要求你画出某个保险公司 Logo 或者唱出他们广告歌曲，你认为哪个会更容易呢？如你经常看电视，那么你首先想起来很有可能是它广告歌曲。其实微交互也会用到听觉反馈。例如，在用户启动 Xbox One 时系统会予听觉和视觉反馈：Xbox 按钮亮起来，系统发出简短特旋律。Xbox One 用户是很有可能将这个声音跟关时声音，以及跟其他游戏平台声音区分开来。此这个微交互既成为了与系统交互签名元素，也是 Xbox 品个明显特征。

△ 击观看视频

用户打开电源时，Xbox One 通听和视方式进行反馈。对用户来说，听反馈是一个以被立即识别的系统特点。

结论

设计优的微互以显著影响到用户验。它们以为与用户进行流的媒介产生其相应的价值。微互能提供系统状态的视反馈或者帮助用户避免错误。此外，微互还能以传达品牌的方式富你的产品，能够极大的鼓励用户选择你的产品而不是竞争对手。总而言之，微小的细节以让的产品蜕变成优的产品，从而让用户沉迷其中。

原文链接：《Microinteractions in User Experience》  Alita Joyce

图片素材来源：undraw.co