动效驱动设计指南
本站编写的设计取舍与实现建议;实例是说明用的界面方案,不是客户案例、官方截图或效果承诺。目录中的部分条目是交互策略、业务布局或平台设计系统,并非同一层级的视觉流派。
设计原理
用时间和空间变化解释界面结构、任务进展和状态转移。它是一种交互策略,动画只有在帮助理解变化时才值得承担成本。
适用场景
分步引导、空间导航、内容展开或有清晰状态转移的工具。
不适用与取舍
紧急监控、重复录入、易受运动影响的用户,以及必须立即获得信息的任务。
实现方法
为每个动画写清触发、起止和目的;优先 transform 与 opacity。核心状态立即可读,动画可中断,减少动态效果时提供直接切换。
具体界面示例
任务从待办移到完成时短暂位移说明去向,计数立即更新;用户可继续操作,不必等待动画结束。
常见误区
持续运动、强制开场和滚动劫持会延迟任务;不要让动画承担唯一的结果反馈。
继续比较
结合材料、布局或父子变体比较选择。