UX Pedia Presents
本文约2275字，阅读需要6分钟
微交互的全面发展
研究主题：微交互发展带来的意义
研究对象：微交互
随着互联网时代的成熟发展，人们上网已不再只是为了获取信息，极简的界面、舒适的阅读感、强有力的视觉冲击，在正确的时间、正确的位置上使用微交互，不仅可以改善用户体验，还可以使 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）曾经说过的：“细节不是细节。他们做设计。” 设计的每个要素都很重要。细节让你的应用程序在竞争中脱颖而出，因为它们要么实用而容易被遗忘，要么令人印象深刻、有用而难忘。
／End. 
相关引用
《设计师+：无限可能的未来，设计师如何接盘互联网+》
https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
-图片、GIF来自网络；封面动图 by Google
-未经UX Pedia允许不得转载
往期推荐：
【辞典说】如何度量体验，阿里PTECH/UES模型
如何度量体验，Google HEART模型
渐变、材质、颜色可用性？筛选了100个配色工具后，我挑出了这25个！
撬动UX面试，快速解决设计挑战（下）
  UX 辞典  
策划│雪诗
撰文│缓缓
编辑│梦奇
• 扫码加辞典酱 •
• 成为学习交流小队一员吧 •
形象理解用户体验，时刻关注设计趋势
Powered by Canopy Institute of Design
2020©UX Pedia. All Rights Reserved
「喜欢UX辞典的推送，请设置个 星标☆ 」
「下次就能 第一时间 看到惹」
 赞了吗  在看吗 
 戳下这里呗  别害羞 :  ) 
继续阅读
阅读原文