什么是微交互？微交互（即Micro-Interaction）是一种相对微观的人机交互方式，包含于产品内，是用户在完成某个小操作的特定瞬间产生的交互体验。

细心观察，其实这类微交互遍布于我们生活中。例如：打开健康码/付款码时手机屏幕自动变成高亮、手机切换静音模式时伴随着短暂震动提醒和静音icon浮现、邮箱登录时自动补全@xxx.com结尾、密码输入时自动脱敏处理成*号、浏览下拉时内容以瀑布流形式无缝刷新、钉钉内出现相同消息会自动合并降低刷屏情况......我们通常可能不太会注意到它们，但却能明显感知到它们的存在。

微交互的存在，是因为它能满足人们探索事物时对认知反馈的自然需求。用户希望在操作之后的得到即时的响应反馈，以确认他们的操作结果。

一、微交互的定义与组成

历史上微交互最早的出现是工程师Larry在给文字软件设计程序时，开创性的加入了鼠标操作和GUI图形界面，并在此基础上发明了复制、粘贴功能键。复制、粘贴就是精心设计过的微交互，没有任何提示、自然而然的完成指令，一直沿用至今。

Dan Saffer在《微交互》书中第一次描述了微交互的概念——这些微小的细节通常服务这些基本功能：向用户传达一个交流反馈或动作结果；帮助用户完成一个单独的任务；增强用户的直接操控感；让用户的操作得到视觉化以避免误操作。

最常见的开关和灯，就是一个微相互作用事件。分解微交互结构，主要由触发器、规则、反馈、循环与模式四要素组成。

触发器：任何微交互的第一部分都是触发器，触发器是微交互的起点。清晰的交互感知，可以是用户启动或系统启动。手动触发器包含控件、控件状态、文本或图示标签；系统触发器则只要满足一个或多个条件就会自动触发。

规则：微交互启动之后，软件检测到满足某些条件参数并引发动作，这就需要一套规则决定微交互的工作过程。设计规则时，需要结合实际交互情况，考虑是否可以映射出某种通用规则，并尽可能地细化到可执行层面。

反馈：让用户知道发生了什么，帮助用户理解系统规则，在微交互发生时看到、听到或感受到的都是反馈。设计反馈时要考虑环境变化、持续时间、强烈程度、重复次数。

循环与模式：循环与模式是影响微交互的元规则。循环的核心是设定持续时间及出现频率，决定微交互随时间的推移如何变化，扩展微交互的生命周期。不同模式场景，则可以快速设定不同的交互状态。

二、微交互的作用

微交互正在成为产品设计中越来越重要的部分，好的产品往往把产品功能和细节处理做到极致。产品功能能将用户吸引过来，而赏心悦目的细节则能留住他们。微交互区别于功能，功能是具体复杂的主体，微交互是简单明了的辅助。虽然微交互通常只起到附属的或相对次要的辅助作用，但只要被用户注意到就赋予了更深层次的意义。功能差不多的情况下，微交互是决定用户印象的关键之一，优秀的细节设计使我们的产品从众多竞品中脱颖而出。微观交互与宏观功能完美契合是最强大的。

微交互的作用有三点：（1）辅助用户在预期的场景下使用产品，提供的即时反馈符合用户的本能预期，提高契合度和认可度；（2）促进用户按预期的使用方式使用产品，引导理解逻辑和规则；（3）提升愉悦感，增加用户黏性，培养产品价值观和用户忠诚度；

三、微交互的应用体现、设计指南

微交互设计要结合产品性质、结构模式了解你的用户和使用场景，才会更加精准有效。微交互可以围绕主功能插入到各式各样的地方，结合之前工作中出现的一些问题，整理归纳后在日常设计中主要体现在以下几方面：

1、按钮形态

按钮常常可以作为一个综合性的信息传达的工具来使用，设计师需要关注它的颜色、形状、布局和特效，确保用户体验上的无缝。这就需要我们注意区分按钮在默认、Hover、点击、不可用时状态下对应的不同形态。布局上，新规范中内容区统一主按钮在左，符合Z字阅读习惯和自然眼动轨迹；在模态框中主按钮在右，遵循从上到下、从左到右的视觉落点原则。

2、显示状态进度

产品界面需要向用户指明正在发生的事，实时展示状态及进度变化。渐进式的信息呈现，能够友好地维持用户对产品的信任。例如上传/下载进度条，能够让用户了解进度消除疑惑。

3、可视化输入

数据输入在任何程序中都是非常重要的环节，不论什么语言文本输入的成本一直都很高。可视化显示能够帮助用户理解信息格式、输入建议，是否正确输入了信息。视觉输入建立了用户的信任，相对立体地推进这个过程。例如，自动补全（自动填充）能通过预测在一定程度上提前给用户正确的输入内容，提供便捷提升效率。

4、校对验证信息 

表单设计中最容易被忽视的，就是对于出错信息的处理。表单，尤其是长表单，填写内容极易出错。这时我们能做的微交互就是结合实时验证，让用户在输入的过程中就发现错误并进行修改，不用等到提交的时候再回过来处理。例如输入框校验到内容错误会出现红色光标焦点定位并给出提示。

5、减少操作步骤

对于微交互而言，少即是多。很多时候，一步能做到的不要两步才完成，一个界面能完成的不要来回跳转才完成。避免过于复杂，有时剔除某些元素反而能使界面更加简洁高效。微交互应是小而简单的，可以使用被人忽视的东西作为传达信息的载体。例如改良后的日期时间选择框，在一个界面能同时操作完日期和时间，就比来回切换友好很多。

6、行为引导

微交互中的提示、执行、奖励构成了习惯闭环，在用户重复执行相同动作时无形中塑造成习惯。通过鼓励用户与产品交互，引导用户参与执行特定的交互过程。例如蒙层引导、气泡教程就是行为引导的重要载体。

7、适当加入动效

动效常常作为环节之间的过渡，让转场和流程更加流畅平滑、降低卡顿或等待的焦虑。功能性动画能够减少用户对于场景切换/状态改变的认知负担，防止发生变化盲视；愉悦性动画则让微交互过程更加有趣，柔和的传达为界面注入生气。例如趣味加载等待动画，可以礼貌地告诉用户何时完成加载，使用户保持参与降低跳出率。

8、情感化设计

在交互中融入温度，一定程度上能给用户体验过程带来更多的情感化反应。如果能以一个自然人的姿态来同用户交流互动，赋予产品人格化，提升体验效果。例如缺省图的应用，比直白的文字更为生动有趣：

四、设计微交互的工具

移动端：Xcode、Android studio；网页端：Framer、CSS动画；界面之间的交互，可以使用 InVision、Marbel；想设计更详细的交互可以使用 Principle、Adobe CC、Origami Studio、Protopie；想设计动效，可以使用 After Effects等。

见微，是对生活中痛点的洞察，发现设计中的小而美，重视日常中的微交互。霍洛效应——如果用户喜欢产品的某个方面，可能会放大以至于对整个产品都有积极的态度，反之亦然。如果能够善用这一原理，在进行产品设计的时候能够事半功倍，真正优秀的微交互处处体现对需求的用心打磨。

作为一名设计师，应以用户为中心，认识到了解并作出好的微交互的重要性。伟大的设计都是全栈性的，从功能到微交互都伟大。“那些令人爱不释手的应用，和那些令人难以忍受的应用，差别可能就在于微交互上”——这句话也是Dan Saffer 说的。

最后，希望通过本文有限的探索，启发各位读者和设计从业者们创造出更多小而美的创意。

Powered by Froala Editor