VISUAL LANGUAGE / DESIGN GUIDE

微交互

Micro-interactions

围绕一次小操作给出局部反馈,让用户知道输入是否被接受、状态是否改变。微交互的价值是解释动作结果,不是给每次悬停添加弹跳。

微交互设计指南

本站编写的设计取舍与实现建议;实例是说明用的界面方案,不是客户案例、官方截图或效果承诺。目录中的部分条目是交互策略、业务布局或平台设计系统,并非同一层级的视觉流派。

设计原理

围绕一次小操作给出局部反馈,让用户知道输入是否被接受、状态是否改变。微交互的价值是解释动作结果,不是给每次悬停添加弹跳。

适用场景

收藏、开关、保存状态、表单校验等高频动作。

不适用与取舍

不能可靠确定服务端结果的乐观提示,以及无意义的持续装饰动画。

实现方法

拆分触发、处理中、成功、失败四种状态;真实结果与视觉反馈同步。使用 aria-live 提供必要状态消息,键盘与触摸有同样反馈,允许重试。

具体界面示例

保存按钮先显示处理中,成功后显示保存时间;失败保留用户输入并提供重试,不显示假成功勾号。

常见误区

悬停反馈在触屏上不存在;不能把 loading 消失当成成功,也不要反复播报无关信息。

延伸阅读

下列技术规范或官方文档可用于核对实现;本站示例与设计取舍由本站编写。

继续比较

结合材料、布局或父子变体比较选择。

启用 JavaScript 可切换浅深色、收藏、使用组件演示并复制提示词。实例用于解释设计,不代表真实业务业绩。