VISUAL LANGUAGE / DESIGN GUIDE

动效驱动

Motion-Driven

用时间和空间变化解释界面结构、任务进展和状态转移。它是一种交互策略,动画只有在帮助理解变化时才值得承担成本。

动效驱动设计指南

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

设计原理

用时间和空间变化解释界面结构、任务进展和状态转移。它是一种交互策略,动画只有在帮助理解变化时才值得承担成本。

适用场景

分步引导、空间导航、内容展开或有清晰状态转移的工具。

不适用与取舍

紧急监控、重复录入、易受运动影响的用户,以及必须立即获得信息的任务。

实现方法

为每个动画写清触发、起止和目的;优先 transform 与 opacity。核心状态立即可读,动画可中断,减少动态效果时提供直接切换。

具体界面示例

任务从待办移到完成时短暂位移说明去向,计数立即更新;用户可继续操作,不必等待动画结束。

常见误区

持续运动、强制开场和滚动劫持会延迟任务;不要让动画承担唯一的结果反馈。

延伸阅读

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

继续比较

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

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