微交互可以提高产品的可用性。一般会出现在一些简单的小操作小任务上，例如打开或者关闭声音、或者点击一个like按钮。它不仅可以降低用户的操作成本，提高用户的参与感，多角度的且自然的融入到用户体验当中
与以往静态页面的设计不同，微交互增强了信息呈现的方式，并增加了动态性。但是，就像任何其他的设计元素一样，它也不应该让用户从手头的任务当中去分散注意力。
而避免这种情况最好的方法是有目的的进行动画制作。接下来这些设计技巧能帮助你去做到这一点。
微交互是动态的
一个网站就像一个自行车。而自行车又是框架、轮子和链条在内各个部件的组合体。为了让所有的零部件能共同运作，就需要有人在座椅上保持平衡，推动脚踏板并且操作好把手。没有了这些元素的协调并行，骑自行车将会是一种不可能的用户体验，而微交互就是组成这个体验的零部件。
微交互随处可见
无论是现实世界还是数字模拟的互联网世界，微交互使我们日常生活中必不可少的一部分。大多数的微交互都非常简单，甚至于很多时候我们也并不会注意到它。你在一台自动售货机上按下了最喜欢的苏打水的按钮，那么你就已经执行完成了这个交互操作。除了售货机出现故障之外，这在大多数情况下是一个毫不费力的交易。也不需要你去按照分步指南去操作。在微交互的世界里需要以同样直观的方式去运作
微交互的构成
微交互包括四个部分组成：
1. 触发器是交互发生的前提动作。跟你在早上按下按钮去烤一片面包的手动操作一样，你在网站上的操作也会触发微交互。虽然有一些是通过手动触发的，但是大多数操作都是在无意识的情况下自动完成的。自动触发的操作会在满足某些标准或者发生一系列事件时候时候去触发。例如，探探给你的手机推送一条通知：有人看了你的资料，觉得你很酷，并且给你发了一条消息。这条消息激活了触发器，并引申出了一系列其他的操作
2.规则是允许交互运作的基本说明。物理世界中邮箱上的旗有个简单的规则，直立起来旗子的表示向邮递员发送信号，表示需要发送信件，而向下的时候就表示不需要发送信件。产品设计也有一套相应的规则，比方打开和关闭音频的时候以不同的信号指示灯来提示，跟邮箱上的旗子一样，他们都需要遵循一定的规则去运行。
3.产生反馈让用户知道操作是否成功。接到一个电话，当你向右滑动并接通是会产生一个振动，又比方你在笔记本电脑上调节音量增减时提示的画面都是操作反馈的常见示例。如果没有反馈，用户会对操作是否有效这件事情产生疑惑。
4.循环或者模式会影响微交互的时间和场景。微交互可以是固定的时间，也可以随着不同的操作产生不同的连续反馈。微交互可以是静态的，也可以每次操作都发生变化。点击知乎上的鼓掌按钮是一个持续不断的微交互，按下按钮的时间越长，你所提供的鼓掌就越多。但是不管你点击多少次，微信的点赞都只是一个单一的循环操作。你点击过，或者每点击都会有相对应的展示。模式影响功能，最明显的是飞行模式，它可以完全限制手机的大多数功能。自行车上的每个齿轮可以作为一个模式，使你骑车的过程变得更难或者更容易。
微交互可以做什么？
微交互可以做很多事情，但是在抽象的情况下，通常是以下四个作用之一：
1.在进行操作时提供反馈，为了让用户知道他的操作原理
Linkedin使用简单而有效的微交互来表明你正在关注某个人。（虽然它可以处理的更好，但变宽的按钮也更容易让用户去做区分）
2.允许单一的操作
推特通过一个简单的微交互去提高用户的活跃度
3.改变设置
YouTube使用这种微交互技术来开启和关闭视频的自动播放。解释交互按钮的作用也是非常重要的
4.帮助用户减少误操作
微交互引导人们在浏览你的网站时，通过一些小巧的步骤轻松访问内容，使得每一步操作都变得自然流畅，让用户减少停下来思考的时间。
不要让用户感到焦虑
杂货店琳琅满目的货架会让人感到沮丧。停车场找车位、排长队甚至有人插队。如果从设计的角度来看，杂货店的购物过程用户体验是非常令人沮丧的
我们都有过这样的体验，你走进一家超市，本来想买几件之前就期望的东西。你在货架上查找的过程当中，看到许许多多的的标识，节日促销、特价打折。每一个标识都在想你招手，一下子有这么多的信息来轰炸你时，很难再专注于自己所期望的那一件商品，也会感觉非常的累。
想想使用微交互的一些网站，Youtube定义的交互是竖起大拇指或者大拇指向下。Medium则是使用鼓掌按钮，因为它简单、设计精良，而且不会因为它而去做任何选择，所以它能脱颖而出，并且让我们记住了它，这也使得它成为了Medium的品牌标识特征之一。
亚马逊在选择书籍的格式的时候添加了一个简单的悬停效果，这种状态下让用户的选择变得更加容易，并且能减少它的误操作。
重点：定义你希望用户在你产品上需要去做的最重要的操作。然后使用微交互让它尽可能以最简单的方式来呈现
留在品牌上
无论如何，品牌的交互需要始终保持一致。当然，品牌会随着时间改变，举个例子：现在老Spice的声音要比20年前更加有趣，但是无论他的声音如何，他都唱同一种风格的歌。
微交互也应该符合品牌的特征。比如你正在给一家有趣的公司设计交互，比如制作玩具，那暗色和深沉的的微交互就不会出现。豪华公寓开发的网站应该也跟其他网站不同，交互需要符合它的优雅和奢华就不能出现过于浮夸的动作。
我们来看看两个截然不同的品牌在相似的微交互上的差异：保时捷和Jamba Juice：
这两种方法都使用悬停效果来显示Hover状态，并且也都展示出了更详细的说明信息。保时捷给我们提供了一个菜单来活的更多关于Panamera车型的信息。而Jamba Juice给了更多关于他们麦子草的信息。每款产品都需要跟品牌的特性保持一致，比方保时捷的流畅优雅和Jamba Juice的明亮流行。
重点：微交互，就像网站上的其他设计元素一样，应该体现核心品牌属性。
确保你的微交互不会降低效率
加载的时间会影响转化率。过度的动画和交互可能会使用户的体验陷入恶性循环。用户可能会在他们有机会完全加载出来之前从页面当中退出来。在设计中，普遍认为微交互都应该在0.1s内给出相应，为了防止用户注意力不集中，产品也需要快速的交付结果给用户。
但是，如何在保持设计有趣的同时保持用户的聚焦？如果我们回顾亚马逊设计师在不同书籍格式之间选择使用的悬停效果，他并没有添加全新的功能---不论任何操作，这些选择都会一直呈现在用户的屏幕上。尽可能将微交互添加到现有的设计元素上，而不是添加复杂的，减缓速度的元素
微交互需要扎根在实用性当中。创造力固然重要，但是创造出的内容没有实际价值时，他也就是一个噱头而已。新鲜感会消磨的非常快，有一段时间，弹性动画非常流行，但是他的实际价值并没有多大。但他的娱乐价值很快就会过去。于其把微交互设计的如此愉快，让人变得只关注交互本身，而不考虑它的创造目的，并不是我们所鼓励的创造方式。
例如：Facebook扩大表情的动画目的不是让人们选择表情，而是让他们变得有趣。
重点：尽可能寻找现有的UI元素来添加微交互，而不是创造一个全新的元素。并且确保它的目的性-主旨在于推动用户去操作，而不是分散用户的注意力。
有目的地进行微交互
想要你的设计融入设计的微交互之中。最终的目标应该考虑的事如何让用户的体验更好。它可以用来当做装饰或者增加视觉效果，但是过度的使用它们只会让它失去目的性。
这是我们作为设计师的工作，让用户找到他与产品互动的最简单方法。最好的微交互一般需要用户做出最少的思考就能使用，但往往背后都是有着设计师绞尽脑汁的思考和尝试。
本文翻译来自 Webflow
动效设计师带你了解更多动效相关知识/软件技能/公开课程：
