YES SHARE｜如何通过微交互来改善您的用户体验设计？

-Yeeeees,我们是你的设计生涯加油站！-

全球数十亿人每天与智能手机互动以执行各种操作，例如：关闭手机声音或按下YouTube视频的播放按钮，登录社交网站，向下滑动屏幕以刷新页面...可能性是无穷无尽的。这些动作中的每一个都发生在微交互中。

简而言之，微交互是内置于应用程序中的微小诱人时刻，一旦被用户发现，就会刺激幸福感。这是提供即时愉快反馈、提高客户满意度和提高保留率的最佳艺术技术之一。

什么是微交互？

微交互是用户和设计交互的小时刻。当它们设计良好时，微交互可以增强用户对设计的体验。当它们设计不佳时，它们会损害体验。

根据《微交互：用细节设计》一书的设计师和作者Dan Saffer的说法，微交互是“围绕单个用例包含的产品时刻”。它们是我们几乎不会注意到的互动类型，直到它们不存在。

想想Facebook的“喜欢”按钮，一个拉到refesh操作，或者聊天窗口中的打字指示器。这些是我们每天遇到的微互动，它们改变了我们的互动模式。

通过微交互实现更好的用户体验

微交互是产品中的单个交互时刻，可增强工作流程并使产品更愉快。在设计产品时，有很多方法可以改善用户体验，包括定义角色、结构良好的信息架构和深思熟虑的内容。但是在设置了这个高级结构之后，能够通过较小的交互为用户创造快乐。

这些详细信息称为微互动，是产品中旨在完成单个任务同时增强自然产品流的单个时刻。例如，向上滑动以刷新数据、喜欢内容或更改设置都是微交互。它们还可以包括简单的 UI 动画，例如，点击菜单时滑入的方式，或轻扫卡片时滑出屏幕的方式。

通常，微交互甚至不会被用户有意识地注意到，但它们的微妙细节使产品更加出色。愉快和更易于使用，从而改善其用户体验。

微交互的好处

由于更流畅的 UI 交互，为用户创造积极的情感效果

 根据用户采取的操作向他们提供即时反馈

 以更流畅、更直观的方式引导用户完成应用

 鼓励用户通过回复通知或共享内容来与应用交互

 防止用户错误

微交互设计的最佳实践

# 识别并了解用户的问题

任何用户体验设计的第一条规则都是发现和理解用户问题——微交互也不例外。了解用户需求的最佳方式是进行调查或访谈，或通过用户研究观察行为。

# 保持微交互自然

目标是以直观自然的方式融合用户与产品之间的差距，因此请避免加载时间过长或可能分散用户注意力的奇怪动画。相反，需要创建与产品无缝流动的设计。微妙是微互动的关键，不要让用户感到困惑并思考“那是什么”。

# 测试和迭代用户测试的结果

即使是经验丰富的设计师也很少在第一次尝试时就完全正确设计，这就是为什么使用用户测试和迭代设计过程是在产品发布之前减少可用性缺陷的简单方法。

在用户测试阶段，微交互被用来测试和分析设计的可用性，并在下一个设计阶段进行修改。重复此过程，直到可用性问题和痛点得到纠正。

遵循微交互的结构

根据Twitter的高级产品设计师、《微交互：用细节设计》一书的作者丹·萨弗（Dan Saffer）的说法，微交互有四个部分。

触发——触发器启动微交互。触发器可以是用户启动的，也可以是系统启动的。

规则——规则确定微交互如何响应触发器，并定义交互期间发生的情况。例如，手电筒应用使用按钮作为触发器来打开和关闭灯。

反馈——反馈告诉用户在微交互期间发生了什么。反馈的一个示例是具有内联验证的注册表单：如果字段填写正确，边框颜色将变为绿色，如果内容不正确，则边框颜色将变为红色。这样，用户就会立即知道某些事情是对还是错。

循环和模式——循环和模式定义了微交互的规则以及微交互在重复使用时如何变化。例如，在电子商务中，当用户之前购买过商品时，“立即购买”按钮可能会更改为“购买另一个”。

使用微交互改善用户体验的技巧

遵循以下设计和实现微交互的一般准则，您将很好地对用户体验产生巨大影响：

 不要让你的用户感到无聊。让他们了解情况并（至少在视觉上）参与其中。

 保持简单。如果使用动画进行页面或状态更改，则在两个视觉对象之间的转换应该清晰、流畅且轻松。

关注用户情绪。它们在用户交互和用户习惯中发挥着巨大作用。

 可预测。用户被调整为一组行为模式。微交互不是试图改变长期建立的模式的地方（比如“绿色意味着去，红色意味着停止”）。

微交互示例

# 滚动条

向用户提供视觉反馈，更改页面中的位置

# 下拉刷新动画

向用户操作提供视觉反馈

# 滑动动画

提供用户已轻扫元素的视觉反馈

# 数字报警

为满足的时间条件提供听觉（和视觉）反馈

# 通知

向用户提供新通知已到达的反馈

精心设计的微交互可以对您的用户体验产生重大影响，微交互提供系统状态的视觉反馈或帮助用户防止错误。此外，这些小细节可以将一个好的产品变成一个伟大的产品，将一个不参与的用户变成一个参与的用户。

参考文章：

https://www.toptal.com/designers/product-design/microinteractions-better-ux

https://uxplanet.org/how-micro-interactions-have-become-an-essential-part-of-great-products-2ac8e02b5f2

https://www.invisionapp.com/inside-design/use-microinteractions-improve-ux-design/

END