微交互：15 个示例以及如何设计它们
微交互解释：定义、Dan Saffer 的四个部分、按类型分组的 15 个真实示例、设计规则以及如何在 CSS、Framer Motion、GSAP 或 ExodeUI 中构建它们。
核心要点
微交互是界面中一个小的、包含的时刻，它执行一件事：喜欢帖子、切换设置、确认表单或完成手势。该术语及其剖析来自 Dan Saffer，他定义了四个部分。触发器启动它，规则决定发生什么，反馈显示结果，循环或模式控制它随着时间的推移所做的事情。好的微交互是短暂的，响应用户自己的输入，并且保持可中断。
什么是微交互？
微交互是产品中最小的完整交互：具有开始、变化和结束的单个任务。这不是一个完整的流程。点赞帖子是一种微互动；撰写和发布评论是一个流程。这个想法及其结构来自 Dan Saffer 的书《微交互》，该书将每一部分分为四个部分。
微交互的四个部分
Dan Saffer 的框架将微交互分为四个部分。给它们命名很有用，因为大多数错误和最糟糕的运动都存在于四个之一中，而不是整体中。
扳机
启动它的事件。用户启动（点击、悬停、长按、拖动）或系统启动（下载完成、网络错误到达）。图片来源：丹·萨弗。
规则
启动后会发生什么：有效状态、拖动边界或最小值和最大值等约束以及事件顺序。图片来源：丹·萨弗。
反馈
产品如何告诉用户发生了什么：弹簧稳定、颜色变化、图标变形、文本更新。这是大部分动作设计的所在。图片来源：丹·萨弗。
循环和模式
随着时间的推移，交互会发生什么，以及模式如何改变它。相同的切换在暗模式或紧凑布局中可以有不同的行为，而无需改变其逻辑。图片来源：丹·萨弗。
为什么微交互很重要
微交互是指界面如何在没有一段文本的情况下回答用户。它确认已收到操作，表明某些内容仍在工作，或解释刚刚发生的更改。当它们缺失时，同一个产品会感觉更重：用户点击两次，因为没有任何信息告诉他们第一次点击已落地，或者他们在没有任何进展迹象的屏幕上等待。好的东西更多的是被感受到而不是被注意到，这就是重点。
15 个微交互示例
这些按其通信内容进行分组。如果 ExodeUI 提供了匹配的示例，则会给出名称，以便您可以打开并编辑它。
按钮和开关（按下和状态）
1. 按钮按下：指针向下时缩放至约 0.92，释放时弹回（ExodeUI 示例：果冻按钮）。 2. 切换开关：基于 spring 的翻译，提交时颜色变化（Gooey Toggle）。 3. 模式开关：分段控件，可滑动其指示器并改变活动标签（运动开关）。
表单反馈（验证和提交）
4. 无效的输入摇动：一个简短的水平轻推，在没有对话框的情况下显示“检查此字段”（摆动文本输入）。 5. 正在提交：该按钮成为进度指示器，因此用户永远不会失去自己的位置（动画发送按钮）。 6. 成功确认：动作落地时按钮上会发出轻微的庆祝声（火箭发射按钮）。
加载和进度
7. 循环进度：填充至实际值并用弹簧（径向计）固定的环。 8. 电平或活动计：对音频电平（声波）等传入数据进行实时反应的条。
导航
9. 菜单切换：在两种状态之间变形并显示菜单的图标（变形导航）。 10. 停靠放大：光标附近的项目会抬起并放大，然后稳定下来（磁性停靠）。 11.选项卡选择：在选项卡之间滑动而不是闪烁的指示器（液体选项卡栏）。
空状态和成功状态
12. 空状态：一个小插图，一次动画以软化空白屏幕。 13. 奖励揭晓：当达到一个里程碑时，您会满怀期待地打开一份礼物或徽章（惊喜礼盒）。
下拉刷新
14. 拉动刷新：弹性过度滚动，跟踪拖动，然后弹回并在释放时稳定下来。反馈是拉伸，而不是旋转。
触觉式反馈
15. 确认脉冲：元素上的简短刻度和发光反映了移动设备上的触觉点击，因此相同的操作在没有振动电机的设备上感觉相同。
保持良好状态的设计规则
有一些规则可以区分有益的微交互和令人烦恼的微交互。
- 保持简短：最完整的时间大约为 200-400 毫秒；小元素上较长的运动感觉很慢
- 在与输入相同的帧中开始；延迟开始破坏了因果关系
- 保持可中断：如果用户在运动中反转动作，则以速度重定向而不是从零重新开始
- 尊重更喜欢减少运动：提供静态或交叉淡入淡出后备，仍然传达变化
- 给它一份工作：如果交互需要多个决策，那么它就是一个流程
如何构建微交互
正确的工具取决于相同的交互必须在多少个平台上运行。
仅CSS
适合简单、独立的情况：悬停升降机、聚焦环和由 :checked 或类更改驱动的切换。过渡和 @keyframes 就足够了，除了样式表之外没有任何东西可以传递。
Framer Motion 或 GSAP（网络）
当动作需要弹簧、手势或编排并且只需在网络上运行时，这是很好的选择。两者都为您提供可中断的弹簧，并且可以由 React 状态驱动。
ExodeUI（来自一个文件的 Web、iOS 和 Android）
当相同的交互必须在 React 应用程序、SwiftUI 应用程序和 Flutter 中表现相同时，请使用此选项。您可以在 .exode 文件中编写一次，然后运行时在每个平台上播放它，因此没有针对每个平台的重写。
生产实施片段
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}要记住的关键 Principle
- 微交互是一项小任务，具有触发器、规则、反馈和循环或模式，这四个部分由 Dan Saffer 命名
- 大多数好的程序在大约 200-400ms 内完成，在与输入相同的帧中启动，并且保持可中断
- 反馈是有效的：它确认操作并解释发生了什么变化，通常没有任何文字
- 始终提供首选减少运动后备，在没有运动的情况下携带相同的信息