我们在使用应用程序时，经常能留意到有趣的动态交互。举个例子：当我们打开Facebook，设置个人资料，创建帖子的时候，我们会留意到各种有趣的表情符，这些可爱的动画效果令人忍不住赞叹，在整个产品使用流程增加了WOW的效果，这就是微交互对产品或应用程序的强大功能。
作为消费者，我们每天都在不知不觉中看到并与这些微交互进行交互。“赞”按钮是最简单的示例之一。除此之外还有：
- 滚动鼠标时出现的滚动条（scroll bar）
- 向左滑动即可清除iPhone主屏幕上的通知(swipe left)
- 能够看到对方在消息传递应用程序上“打字”(typing)
- 进度条指示下载百分比(progress bar)
- 拉动刷新，以重新加载应用程序屏幕上的内容(pull to refresh)
- 交互式错误页面，例如Google chrome和Windows上的恐龙游戏(error page)
那么，为什么这些微交互十分有效？为什么每个应用程序都要加入这些效果？
我们需要了解：什么是微交互（Micro-Interactions）？
微交互就像与设备的任何其他交互一样，用于与用户进行有意义的反馈。当您单击按钮，滚动页面，将商品添加到购物车，向左滑动卡片时，通常会期望发生某些反馈，让您的任务路径变得更加清晰。
那么，为什么要使用这些微交互？
为了更好地理解这些内容，以下是一些成功实现移动应用程序的示例，这些应用程序将微交互用于各种各种场景。
滑动手势（Swipe Gestures）
通过使用手势滑动操作完成一些动作项，这些类型的交互可用于节省更多操作模块在移动设备上的空间。例如，您可以使用向左滑动将电子邮件删除，向右滑动将电子邮件存档。同样，在锁定屏幕上取消/清除通知也有类似的快捷方式。
快速行动（Quick Actions）
一个简单的快速操作示例就是在Apple设备上点击并按住应用程序图标时进行3D触摸，它为您提供了用户最常使用的操作选择项，可以大大节省用户额外的点击和时间。
交流信息（Communicating Information）
这些类型的交互会分解复杂的信息，并使用视觉，动画将消息轻松传达给消费者。一个完美的例子是解释信用卡上的利息费用。例如下述势力，Apple Card通过使用圆形互动动画和颜色差异来告知用户最低和最高费用，大大提升了用户体验。
互动参与（Interactive Engagement）
有时，您希望提升用户的互动和参与。我们可以看看下图的实例：Robinhood App最近发布了一张借记卡，其候补名单超过100万人。要在候补名单中上移您的位置，用户可以转到其应用并点击该卡（最多60次）。这是使用户与应用程序交互的一种有趣方式。
提供反馈（Providing Feedback）
在用户触发某些内容或输入某些内容之后，动效可以用于向用户发送反馈。下图的示例展示了应用程序正确和不正确密码输入的反馈。
用户界面指导（Teaching the interface to the user）
每当新启动具有精美功能的产品或应用程序时，如果用户发现它太难理解，将会造成不好的体验。因此，应用程序可以利用微交互来向用户介绍新功能的使用。例如，N26 Fintech App使用动画来演示用户如何将钱从一个储蓄账户转移到另一个。
吸引用户的注意（Directing User’s Attention）
当移动屏幕上的大多数空间都充满信息时，很难突出显示我们希望用户注意的特定功能。通过使用动画和过渡效果，微交互可以在为用户带来愉悦感方面发挥至关重要的作用。例如，在Slack上，在您开始键入之前，发送按钮会变灰，一旦开始键入，它就会变成蓝色。
使加载屏幕有趣（Making Loading Screens Interesting）
大多数加载屏幕都很无聊，但是微交互和动画可以将它们变得非常有趣。每当加载或设置过程中，Google都会利用等待时间为其用户创造出色的直观体验。例如：
创建微互动的工具：
另外，小编为大家总结了制作这些微交互的各种工具。
如果您熟悉编码，可以在不同的平台上分别使用：
- 手机端：Xcode，Android Studio
- 手机或网页端：Framer
- 网页端：CSS动画
如果要使用简单的拖放选项创建更详细的交互，您可以选择下述这些原型设计工具：Principle，Adobe XD，Origami Studio和Protopie。
另外，如果要创建更精细的交互+动画，After Effects是一个不错的选择。
微交互的应用是无限的。但是，请记住，这些内容应以一种微妙的方式使用，不能破坏整体的用户体验。除此之外，功能动画应该比视觉动画具有更高的优先级。
以上就是小编今天分享的微交互设计的内容，感谢大家的阅读：）
