微交互
一、定义
通常关注与单个事件或者单个任务，这些交互元素遍布于整个APP的角落。这些微交互存在的目的是让用户感觉顺畅、体验更加迷人，设计师借此让用户在这一瞬间感受到人性化
facebook
上面的微交互案例案例实现了三个功能：呈现状态并给予反馈；增强用户的操控感；帮助用户看到交互的结果。
二、分解微交互
通常由四部分组成：触发+规则+反馈+循环和模式
image.png
不论是用户触发还是系统触发，都会通过用户界面的微小变化反馈给用户
a.触发：可以是用户触发也可以是系统自动启动。用户触发通常是发起了一个动作才能启动，可以是GUI命令、手势或者语音形式；而系统触发通常是APP检测到满足某些预先确定的条件才会触发。若微交互由GUI命令触发，视觉反馈元素通常会显示在它的临近
b.规则：设计师决定触发之后会发生什么
c.反馈：页面上的反馈让用户知道发生了什么。任何用户在交互发生时看到的，听到的，感受爱到的都是反馈
d.循环和模式：什么状况下微交互会再次出现，条件变化时微交互会怎么随之变化
Dan Saffer在14年出版的《微交互》定义了这个概念，并简略描述了微交互的模型
三、微交互为何重要
1.使用科技产品的最大乐趣之一来自授权用户和用户参与。令人愉悦的体验指的不只是能用而已，它还需要引人入胜。而这恰恰是微交互较为擅长的地方：微交互让用户更容易理解功能，它是在情感层面的设计。它们使得你的产品更容易导航；用户更容易和网站进行互动；为用户提供了操作后的即时反馈，用户会明白他们该做什么，以及他们做的对不对；给用户信息的提示；告知用户控件是否可交互；鼓励用户分享、点赞和评论内容；让产品更加感性，更加人性化，使用户整个体验变得愉悦。
2.微交互可以通过下列方式提升产品的用户体验：
a.鼓励参与
b.显示系统状态
c.提供防错设计
d.传达品牌
注意：比起淘宝二楼下拉进入之类的现代元素，滚动条这种标准的微交互通常不太可能会设计得很差。新兴的交互方式要求我们必须付出更多的努力和思考才能创造出充满意义、设计优良的用户体验
四、常见的微交互
1.滑动交互：比点击更加顺畅的一种交互，有助于用户快速切换标签、页面，用户心智模型已经基本形成可以下意识执行。
80E1A1CB0A1F49568371BC4C95CB0818.gif
2.数据输入：我们清楚创建新账号和修改密码需要大量交互，诸如密码强度的测试和输入建议会让用户更好的推进这个过程，尽量借助细节和建议来提升整个输入过程的体验和成功率
3B91E533804642448517897453CBEBAF.gif
3.动画：作为微交互的一部分存在，让交互和流程更加完整顺滑。许多微妙的动效在实际操作中并不会被直接注意到，但如果缺少它，会让人明显感到缺失感。动效目的是吸引用户，但是不能分心或产生挫败感，过于新奇的风格或者动画耗时太多，都会产生不良效果，或让人混淆。
A26B25CC98C74A508A116A61317FC0A1.gif
4.系统状态：当前的系统状态用户始终应该了解。通过微交互让用户确切了解当前的系统状态，多长时间能完成加载，或者是信息已经被完全提交等。通过让部分产品变得易于理解并实时显示系统的当前状态，能让用户体会到掌控感和参与感。任何系统状态的显示都是微交互，因为它们天生具备了触发（不管是用户行为还是系统状态的变化）和反馈。
a.显示进度
f6f700f1e1ab448180e35ce16d2d4ee8.gif
3F6667C5A7034C76805D040037A88E6B.gif
下拉刷新信息流就是一个显示进度的例子。Linkedln领英使用圆形进度条（loading）。该组件可以明确表示系统仍在运行，因此用户不必反复猜测它是否还能识别他们的行为。多亏了这样的微交互，用户愿意等待更多的帖子进行加载
下拉刷新信息时，loading显示系统正在响应请求
5.让使用教程有趣
5857ac1b77634b18bdc6f3934950ee84.gif
6.行为召唤
行为召唤的原理就是通过行为指引、成就感灌输和同理心，来吸引用户的注意力，促使用户执行特定的交互。微交互和行为召唤元素的结合，能够更好地推动用户与APP交互。
ef2f1b37cabc49ab8ef617470a3b3f07.gif
a.待命
有时候系统需要标明它们在等待用户进一步的输入。在开始的触发之后，微交互会提示用户系统已经待命，并需要更多的信息输入，这一类的微交互鼓励用户继续跟当前的产品进行交互。
例如Ios系统长按编辑主屏幕，系统会通过轻微抖动所有app的方式来予以回应。该活动标明系统已在等待进一步的行为（不管是轻点app左上角的【x】来删除应用海慧寺将图标拖放到另一个位置）
用户长按触发抖动微交互来标明系统正在等待进一步输入
语音助手小度 在双声唤醒后等待用户的命令时，也使用了微交互来显示待命模式。设备顶部显示渐变动效的光圈，通过这样的视觉反馈及语音助手聊天反馈“我在，请说”，用户就能立马知道设备已经在等待命令，因此可以开始问它【天气如何？】之类的问题了。
7.防错
防错聚焦于避免容易出错的情况，还可以提供确认操作。微交互将这些情况传达给用户，并通过支持撤销操作和避免重复工作来提升令人满意的用户体验。
a.支持撤销操作
人人都会犯错，在数字世界里我们会不小心点击了某处。系统应该要确保撤销操作可以变得容易一些，以免用户不得不历经重重障碍才能逆转他们的无心之失。微交互可以显示UI组件的当前状态，还能够提示用户他们可以进行进一步的交互了。微交互可以说是对撤销操作最完美的支持方式，因为它们能够明确提示用户系统状态已经发生变化。
举例：应用中收藏喜欢的内容，只要点击图片右上角的心形图标就可以了。这个微交互用了跳动的心形动画来表达你已经收藏了某个内容。你可以很容易的通过再次点击心形图标撤销收藏的行为，然后它就会恢复为原来的灰色状态。
这种跳动的心形动效是利用动画吸引用户恰当方式，因为：
a.它足够微妙，没有粗暴的将用户的注意力从主要任务中猛然拉开（相反，过于明显的动画会对用户造成极大的干扰）
b.只是在很短的时间内显示该动画，因此它仍然可以算作微交互，跟不合时宜地长久显示截然不同
Gap.com
b.避免重做
在账号创建的流程中，点击最后的提交按钮然后收到错误提示说你的密码不符合要求是很让用户崩溃的。但使用微交互的话就可以用来提示用户所输入的密码是否符合要求，这可以大大避免重复的输入操作（比如重新填写表单）。如果没有这些微交互，用户很可能感到烦躁，可能会立马离开。
举例
eBay的注册表单使用了微交互来有效避免验证时的错误发生。例如密码输入框被激活后，会出现一个列表显示对应的密码设置的要求。在输入的过程中，每当密码满足其中任一要求，该列表都会自动更新。如果输入的内容都不符合要求，它的下方则会出现红色的错误提示。这一系列的微交互组合起来保证了用户可以得到一致的反馈和流畅的体验。
注册表单使用微交互来反馈密码是否符合要求
8.传达品牌
微交互不应该是空洞无物的，而要服务于某个目的，因此我们也可以用它来进行品牌传达。如果你的品牌形象充满乐趣而且色彩斑斓，那么让它体现在微交互是相当合适的。相反地，如果你的品牌需要传达出专业和可靠的感觉，那么在下拉刷新的微交互中使用搞笑的方式就欠考虑了。就像你的文案拥有某种口吻一样，你的微交互也有它自己的口吻。
举例：
在使用苹果的信息app发送生日快乐的消息时，屏幕中会出现满满的气球动画。苹果将自己定位为一个富含创意同时以人为本的品牌，而这个生日的微交互以创造情感化的感官体验的方式完美契合了自身的品牌特性。
信息app通过微交互来表达祝福
Snapchat利用了微交互来表示两位用户处在同一个聊天窗口中。如果对方正在输入，他的Bitmoji上会显示表示正在思考的气泡。而如果他在阅读消息，对应的Bitmoji则会显示为正在偷偷查看消息输入框。在这个案例中，微交互所提供的反馈会鼓励用户继续进行对话并持续使用这个app。
snapchat
注意：
许多品牌严重依赖视觉来进行传达，其实声音也拥有相当程度的感染力。假设有人要求你画出脑白金的logo或者说出他们的广告语，你认为哪一个会更容易呢？如果你经常看电视，那么你首先想起来的很有可能是它的广告歌曲。
所以微交互也会用到听觉反馈。例如在启动语音助手系统会给予视觉和听觉的反馈：按钮亮起来，系统发出简短但特别的旋律。
比如天猫精灵，小度，小爱的开关机反馈可以相互区分出来。因此这个微交互既成为了与系统交互的签名元素，也是各类品牌的明显特征。对用户来说，是一个可以被立即识别的系统特点。
五、如何设计微交互
1.站在用户的角度看待问题，用尽办法让他们明白如何使用你的产品
2.创造功能性的动画，不仅要有美感，而且能够增强体验
3.让你的用户开心，用户使用时的主观感受，决定了他们是否要继续用下去。如果用户感到愉悦，他们会回来
4.不要让人觉得烦躁，过多的动效会让人觉得头疼，而这个会让用户离开你
5.说人话，而不是技术术语来表达，因为后者更容易让人觉得沮丧。
六、结论
设计优秀的微交互可以显著影响到用户体验。它们可以作为与用户进行交流的媒介产生其相应的价值。微交互能提供系统状态的视觉反馈或者帮助用户避免错误。此外，微交互还能以传达品牌的方式丰富你的产品，这能极大的鼓励用户选择你的产品而不是竞争对手。总之，微小的细节可以让好的产品蜕变成优秀的产品，让用户沉迷其中。
人类对于即时性满足有先天追求，在更大的愉悦感面前，主观上忽略细节是一种常见的倾向，但这种【忽略】并非看不到而是更接近于不在意，如果缺失了，会感知到。细节是魔鬼，正是有了这些细节上的用心设计，才造就了伟大的设计和强大的功能，保证了优秀的用户体验
