通过微交互更好的用户体验

在设计产品时，有很多方法可以改善用户体验，包括定义角色、结构良好的信息架构和精心编写的内容。 但是在设置了这种高级结构之后，为用户创造愉悦感的是较小的交互设计细节。

这些被称为微交互的细节是产品中的各个时刻，旨在完成单一任务，同时增强自然产品流程。 向上滑动以刷新数据、喜欢内容或更改设置都是微交互。 它们还可以包括简单的 UI 动画——例如，菜单在点击时滑入的方式，或者卡片在滑动时滑出屏幕的方式。

通常，用户甚至不会有意识地注意到微交互，但它们微妙的细节使产品更有趣、更易于使用，从而改善了用户体验。

微交互的好处

微交互和 UI 动画非常重要，它们可以决定设计的成败——或者正如家具设计和建筑领域的名人 Charles Eames 所说：

细节不是细节。 他们做设计。

将微交互整合到产品中的一些主要好处是：

• 由于更流畅的 UI 交互，对用户产生积极的情感影响
• 根据用户采取的行动向用户提供即时反馈
• 以更流畅、更直观的方式引导用户浏览应用程序
• 鼓励用户通过响应通知或在共享内容时与应用交互
• 防止用户错误

微交互设计最佳实践

现在我们已经围绕微交互的作用建立了一些定义和背景，并给出了它们如何改善用户体验的示例，让我们讨论创建微交互的最佳实践。

识别并理解用户的问题

任何用户体验设计的第一条规则是发现和理解用户问题——微交互也不例外。 了解用户需求的最佳方式是进行调查或访谈，或通过用户研究观察行为。 Toptal 设计师 Ivan Annikov 在他的文章“Going Guerrilla: Affordable UX Research Tips And Alternatives”中更深入地了解了用户需求。

保持微交互自然

目标是以直观和自然的方式弥合用户和产品之间的差距，因此避免加载时间过长或可能分散用户注意力的奇怪动画。 相反，创建与产品无缝衔接的设计。 微妙是微交互的关键。 不要让用户感到困惑和思考，“那是什么？”

测试和迭代用户测试的结果

即使是经验丰富的设计师也很少在第一次尝试时就完全正确地完成设计。 这就是为什么使用用户测试和迭代设计过程是在产品发布之前减少可用性缺陷的简单方法。

在用户测试阶段，对微交互进行可用性测试和分析，并在下一个设计阶段进行修改。 重复此过程，直到可用性问题和痛点得到纠正。

遵循微交互的结构

根据 Twitter 的高级产品设计师和“微交互：细节设计”一书的作者 Dan Saffer 的说法，微交互有四个部分。

1. 触发器——触发器启动微交互。 一种类型的触发器是打开和关闭功能的拨动开关。
2. 规则——规则确定微交互如何响应触发器并定义交互期间发生的情况。 例如，手电筒应用程序使用按钮作为打开和关闭灯的触发器。
3. 反馈——反馈告诉用户在微交互过程中发生了什么。 反馈的一个例子是带有内联验证的注册表单——如果字段填写正确，边框颜色会变为绿色，如果有错误则变为红色。 通过这种方式，用户立即知道某事是对还是错。
4. 循环和模式——循环和模式定义了微交互的元规则以及微交互在重复使用时如何变化。 例如，在电子商务中，当用户之前购买过该商品时，“立即购买”按钮可能会更改为“购买另一个”。

解构微交互设计

为了展示设计微交互背后的思考过程，让我们解构 Google 的一个微交互：Google Docs 中的文件名建议微交互。

这种微交互采用文档的第一行，并建议将那段文本作为文档的名称，从而使名称创建过程更加直观。

设计微交互的过程与任何设计任务相同：识别用户痛点并修复它。 在牢记之前的最佳实践的同时，让我们开始找出问题所在。

用户问题

保持文档井井有条的一种简单直观的方法是简单地描述性地命名它们。 在大多数文本编辑器中，“命名您的文档”字段保持空白，即使文件名很有可能最终与文档的内容相关。 这是一个值得通过微交互来解决的过程。

谷歌的解决方案

Google Docs 以两种方式处理此问题，具体取决于用户的选择：1) 用户可以在输入任何内容之前单击名称字段并立即更改文档名称，并将“无标题文档”更改为他们选择的名称，或 2 ) 一旦用户键入第一行文本，Google 就会自动将其填充为文档名称。 用户可以保持原样，也可以更改它。

让我们检查一下细节：

触发器

可能有一些可能的触发器来命名文档，使用文件 > 另存为菜单功能，或者在 Mac 上按键盘上的cmd+s （在 Windows 上按ctrl+s ），就像在桌面应用程序中一样。 但这些都没有利用网络的交互性，也没有特别增强用户流量。

相反，Google Docs 的主要触发点是简单地单击文档名称字段。 字段上的悬停状态显示“重命名”工具提示。 第二个触发器是File > Rename ，它突出显示名称输入字段。

规则

规则定义单击触发器后发生的情况。 在这种情况下，第一行文本将显示为文档名称。 但是如果用户不想将第一行文本作为名称怎么办？ 当用户点击姓名输入栏时，所有的文字都会被选中，并会随着任何击键被删除，这样用户就可以很容易地创建一个新的姓名。

回馈

更改输入字段边框的颜色是一种常见的交互模式，Google Docs 在这里使用它来为用户提供即时反馈。

循环和模式

用户成功创建了文档名称，并且触发器保持不变，但有一个关键区别：文档现在已命名。

此时，用户可能只想更改几个字母或在名称中添加日期，而不是更改他们之前定义的整个名称。 在这种情况下，与之前的规则相比，突出显示整个文档名称的规则被禁用。

结果

在定义问题并专注于微交互的所有四个部分之后，结果是一种更自然、用户友好的体验。 Google Docs 文件命名解决方案可帮助用户使用正确命名的文件保持井井有条，并简化命名文档的过程。

行动中的微交互：真实世界的例子

重新排序任务列表

Apple iOS 提醒通过允许用户点击、按住和拖动列表项以更改其在列表顺序中的位置，帮助用户保持井井有条并消除几个步骤。

对社交媒体帖子做出反应

通过单击竖起大拇指按钮或图标“喜欢”内容已成为许多应用程序和网站中常见的 UX 设计模式。 Facebook 建立在这种交互之上，通过微妙的微交互添加了“喜欢”之外的多个选项。

品牌文本突出显示

在大多数浏览器中，可以覆盖默认的文本选择颜色。 宜家使用这种交互模式通过以标志性的黄色和蓝色突出显示文本来添加微妙的品牌细节。

分享您的位置

Google Hangouts 假设用户可能想要分享他们的位置的时间之一是有人发短信“你在哪里？”

当用户查看此消息时，“共享您的位置”按钮会显示为上下文选项。 然后，他们可以点击该按钮将其位置地图自动发送给其他用户。

滑动选择

微交互可用于回答应用程序中简单的“是”或“否”问题。 Tinder 通过让用户向左或向右滑动（否/是）来做到这一点，具体取决于他们是否喜欢他们可能的匹配项。

搜索扩展

Google Inbox 应用程序不仅可以智能地将邮件与捆绑包进行分组，还可以通过语音进行搜索，或者通过单击从最近的联系人中进行选择。

快速添加朋友的联系信息

SeatGeek 通过轻按“从联系人添加”按钮自动填写来自用户联系人的信息，从而简化了表单填写过程。

了解有关微交互的更多信息

微交互是改善用户体验的关键部分，有很多资源可以用来了解更多关于它们的信息，下面列出了其中的一些。

要全面了解微交互的更多信息，请访问 Microinteractions，该网站是为前面提到的 Dan Saffer 所著的《微交互：详细设计》一书而创建的网站。 在该网站上，有对微交互的详细解释以及有关众所周知的微交互的起源的信息，例如自动更正、自动完成和剪切和粘贴。 本书的第一章也可以免费下载。

如需微交互灵感，请访问 Little Big Details，这是数字产品中微交互的精选集合。 它展示了 Apple、Trello 和 Stack Overflow 等公司如何实现微交互和 UI 动画的示例。

要了解如何在 Framer 中创建微交互，请阅读 Toptal Designer、Wojciech Dobry 的文章 Framer 教程：改进原型的 7 个简单微交互。

让我们知道您的想法！ 请在下方留下您的想法、评论和反馈。

• • •

进一步阅读 Toptal 设计博客：

• 设计原则及其重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 探索完形设计原则
• Adobe XD 与 Sketch – 哪种 UX 工具适合您？
• 顶级设计师使用的 10 个 UX 可交付成果