跳转到使用指南
Motion System作者 Owl-Listener

Motion System Skill.

让动画决策可跨组件和团队复用。

  • 设计系统
  • 动态效果
来源审查 · Motion SystemSKILL.md
任务 设计系统 产出 • 带名称及预期用途的时长和缓动令牌。 • 针对元素组、错开时序和方向的编排规则。 • 减少动态效果的覆盖规则及文档要求。 开始之前 需要令牌实现或平台上的等效机制;来源并未规定必须使用某个动画框架。
编辑摘要 · 已审查来源 2026-10-07 · 非生成示例

01 功能说明

创建共享的动态效果词汇体系

为整个产品定义共享的动态效果令牌、协调规则和减少动态效果的替代方案。

基于来源的工作流程并非执行基准测试

工作方法

Motion System 将动态效果视为一个设计令牌层,而不是一系列彼此无关的组件选择。它定义了一套精简的时长尺度、语义化缓动角色,以及针对元素同时进入、离开或移动的协调规则。

来源还在系统层面处理减少动态效果。这与动画发布后再逐一调整有实质区别:令牌覆盖规则和替代行为可以一致地应用于整个产品。示例时长是一套起始词汇,并不能证明每个界面都应使用相同的值。

预期交付物

  • 带名称及预期用途的时长和缓动令牌。
  • 针对元素组、错开时序和方向的编排规则。
  • 减少动态效果的覆盖规则及文档要求。
查看示例简报

从简报到审查

  1. 01
    梳理动态效果角色

    识别即时状态变化、进入、退出及较大范围的过渡。只创建足以覆盖不同需求的令牌。

  2. 02
    定义协调方式

    规定语义组内的统一时序、错开时序限制和一致的移动方向。

  3. 03
    构建无障碍版本

    记录哪些动态效果会消失、由什么取代,以及如何确保关键状态信息仍然可见。

02 适用场景

适用场景

需要令牌实现或平台上的等效机制;来源并未规定必须使用某个动画框架。

适合的情况

  • 组件动态效果不一致适用于不同团队已积累了互不兼容的动画时序的情况。
  • 扩展令牌系统将动态效果纳入已用于管理颜色和间距的同一共享流程。

需要检查的限制

  • 并非成品动画各项交互仍需进行编排和实现。
  • 示例需要测试来源中的时长和曲线需要结合产品、设备及无障碍要求进行验证。

请准备这些输入

  • 组件清单列出现有动画及各动画所传达的信息。
  • 动态效果原则描述期望的产品特质,以及不应使用动画的交互。
  • 平台与无障碍提供实现目标和减少动态效果方面的预期。

03 关键决策

关键决策

  1. 精简的词汇体系

    与大量任意时长构成的目录相比,较少的语义化选项更容易发现不必要的例外。

  2. 全局无障碍

    系统级覆盖规则可降低某个组件忽略动态效果偏好设置的概率。

04 示例任务

尝试聚焦型简报

下方的示例简报尚未经过测试。使用前请检查该技能的设置说明。

查看设置说明

使用仓库中记录的安装方式,并保留其中引用的所有配套文件。此条目描述的是一种聚焦的设计方法,而非可执行应用程序。

上游源文件
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md

需要令牌实现或平台上的等效机制;来源并未规定必须使用某个动画框架。

从一项交付物开始

运行该技能前,请根据需要调整此简报的范围、来源材料和约束。

示例简报
使用 motion-system 统一我们的工具提示、抽屉、对话框和页面过渡。提出一套精简的令牌尺度和进入/退出缓动角色,定义错开时序限制,并编写能够保留状态信息的减少动态效果行为。包括不应使用动画的情况,并将时长标为需要在设备上测试的提案值。

检查结果

依据以下可观察的标准检查实际输出。

  • 每个令牌都有明确不同的角色和具体值。
  • 成组元素遵循相同的已记录编排规则。
  • 在系统层面规定减少动态效果行为。

OpenDesign 为编程智能体提供本地设计工作区。此条目并不表示该技能已内置,也不表示其外部工具、凭据和软件依赖项已包含在内。

05 来源与许可证

来源与许可证

本页面描述的是下方链接所指向的固定来源修订版。上游行为和要求可能会发生变化。

来源所有者
Owl-Listener
许可证
MIT
已审查的快照
2026-10-07 · 9a6930cf84a8
编辑来源摘要
为整个产品定义共享的动态效果令牌、协调规则和减少动态效果的替代方案。

由 OpenDesign 根据所链接的来源撰写的原创摘要。仓库星标数是带有时间属性的受欢迎程度信号,并不代表技能使用量或质量评分。

06 开始前的问题

开始前的问题

应该设置多少个时长令牌?

来源建议采用精简集合,通常为四到六个,并且仅为真正不同的情况添加值。

减少动态效果是否会移除所有反馈?

不会。关键状态信息应予以保留,并在适当情况下禁用动态效果或以其他方式取代。

它面向哪种实现?

它描述了 CSS 自定义属性或等效的平台令牌,以及将它们纳入现有令牌导出流程的做法。

OpenDesign

为下一轮设计迭代留出空间。

将简报、来源材料和设计工作集中保存在本地工作区中。将该技能加入工作流程前,请检查其自身的设置说明。

上游源文件
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md