研究主题：微交互发展带来的意义

研究对象：微交互

随着互联网时代的成熟发展，人们上网已不再只是为了获取信息，极简的界面、舒适的阅读感、强有力的视觉冲击，在正确的时间、正确的位置上使用微交互，不仅可以改善用户体验，还可以使 UI 栩栩如生。

“平庸的产品与伟大的产品，差别就在细节上。”Dan Saffer在《微交互：细节设计成就卓越产品》一书中把微交互分为4个要素：触发器、规则、反馈、循环与模式。

什么是微交互呢？我们可以这么界定：微交互是同数码设备进行的基于任务的单个交互。是用户在完成某个小任务的瞬间产生的交互反馈。这些微妙的交互可以快速传递信息或者反馈可视化操作结果，协助用户迅速明白如何操作。值得注意的是，绝大多数的这类交互都是微小而不引人注意的，但是它会为你提供平滑、自然的感觉。

如何在产品中加入更为人性化和智能化的微交互体验，是一个值得研究的方向：

· 轻触标题的细微动效即可增强用户直接操作的体验；

· 在个性化的定制中，不经意间的划出与转变帮助用户看到行为的结果，避免误操作；

· 用户在与新闻内容的互动中，不论评论、转发还是收藏，都可以提供细微优美的反馈、通知和操作指南；

· 在等待刷新以及切换的过程中，微交互可即时传递信息，同时不会让用户无聊或分心，以此来节约时间（它必须吸引用户的注意）；

· 只有了解用户的阅读习惯与背后的语境，微交互才能更加准确、有效；

· 在每天的阅读中要经得起长期使用，第一眼看上去好玩的微交互在第100次使用后，可能变得特别烦人；

· 在每个小细节和环节上设计人性化的微交互，一定要看着顺眼。动作手势需要设计得顺滑流畅，这样微交互才能真正生动起来。

接下来，辞典酱结合具体的案例，展示如何通过用微交互来唤起用户的注意力，提升用户操作体验：

-显示系统状态

Jakob Nielsen 首次针对 UI 设计进行启发式设计时指出：“系统应始终在合理的时间内通过适当的反馈，使用户了解发生了什么。” 这意味着用户界面应通过提供反馈，使用户了解正在发生的事情。应用程序不应该让用户猜测，它应该告诉用户发生了什么，因此，产品界面需要向用户指明此刻正在发生的事。

使用微交互展示上传/下载的状态。在这个案例中，微交互同时显示了下载了多少 M 字节，动画进度条为无聊的下载过程增添了乐趣。

by Nick Buturishvili

该组的另一个知名动效是“下拉刷新”，它启动了移动设备上的内容更新过程。令人愉悦的刷新动画会使用户感到有趣。

by Toma Reznichenko

Takeway：动画提供应用程序进程状态的实时通知，使用户能够快速了解正在发生的事情。

-使按钮和控件有形

用户界面元素（例如按钮和控件）应该看起来是有形的，即使它们位于屏幕的后面。视觉和动作提示，可以通过立即确认输入，并以看起来和感觉像直接操纵的方式进行动画处理来弥合这种差距，UI 按钮可以模拟与常见物理对象的交互。简而言之，你可以通过对用户输入的视觉响应来增加清晰度。

按钮和其他活动控件应通过视觉反馈响应用户操作。（图片来源：Behance）

by 谷歌

Takeway：视觉反馈之所以有用，是因为它吸引了用户对确认的自然渴望。点击应用程序感觉很好，总感觉就像你知道发生了什么。

-建立有意义的过渡

你可以使用动画在导航上下文之间平稳地运输用户，解释屏幕上元素排列的变化或加强元素的层次结构。

图标可以从一种形状变形为另一种形状，在不同的时间提供双重功能。

by 谷歌

运动设计可以通过告知和愉悦的方式有效地引导用户的注意力。这对于移动设备和智能手表尤其有用，因为无法在这些屏幕上显示很多信息。

苹果的 iOS UI 是有意义过渡的一个很好的例子。在下面的示例中，用户选择一个文件夹或应用程序，然后放大到其详细视图（或直接缩放到应用程序的主屏幕）。

by Rian Van Der Merwe

另一个很好的动画例子，它通过颜色和持久性元素在两个状态之间创建视觉连接。这使过渡变得顺畅而轻松。

by Ehsan Rahimi

Takeway：微交互可以在页面之间建立视觉连接，并为 UI 添加清晰度。

-帮助用户入门

在入驻流程中的完美UX和动效可能会对首次用户与该应用的互动方式产生巨大影响。在应用启动后，它们通过突出显示最重要的功能和控件来指导和教育用户。

by Ramotion

Takeway：微交互揭示信息并帮助用户有效地实现其目标。

-突出显示用户界面中的更改

在许多情况下，动效是用来吸引他们注意重要细节（例如通知提醒）的。但是，请确保动效具有功能性目的并且适合你的用户。

by Arjun Kani

Takeway：微交互对于用户而言可能是很好的视觉提示。

-添加令人愉快的细节

微交互动画的最基本用途是过渡。但是，当以超出标准动作范围的方式使用动画时，应用程序可以真正使用户满意。下面的按钮无缝更改状态并提供双重功能：通知用户并创造奇迹。

by 佐藤启

Takeway：关注用户情绪，这在 UI 交互中起着重要作用。

微交互表明，关注小细节可以带来强大的结果。正如查尔斯·埃姆斯（Charles Eames）曾经说过的：“细节不是细节。他们做设计。” 设计的每个要素都很重要。细节让你的应用程序在竞争中脱颖而出，因为它们要么实用而容易被遗忘，要么令人印象深刻、有用而难忘。

相关引用

《设计师+：无限可能的未来，设计师如何接盘互联网+》

https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/

-图片、GIF来自网络

欢迎关注微信公众号：UX辞典，获得更多UX设计干货

Powered by Froala Editor