微交互设计指南
本站编写的设计取舍与实现建议;实例是说明用的界面方案,不是客户案例、官方截图或效果承诺。目录中的部分条目是交互策略、业务布局或平台设计系统,并非同一层级的视觉流派。
设计原理
围绕一次小操作给出局部反馈,让用户知道输入是否被接受、状态是否改变。微交互的价值是解释动作结果,不是给每次悬停添加弹跳。
适用场景
收藏、开关、保存状态、表单校验等高频动作。
不适用与取舍
不能可靠确定服务端结果的乐观提示,以及无意义的持续装饰动画。
实现方法
拆分触发、处理中、成功、失败四种状态;真实结果与视觉反馈同步。使用 aria-live 提供必要状态消息,键盘与触摸有同样反馈,允许重试。
具体界面示例
保存按钮先显示处理中,成功后显示保存时间;失败保留用户输入并提供重试,不显示假成功勾号。
常见误区
悬停反馈在触屏上不存在;不能把 loading 消失当成成功,也不要反复播报无关信息。
继续比较
结合材料、布局或父子变体比较选择。