关于 enterprise-b2b
面向企业与 B2B 界面的动画设计指南，将迪士尼 12 条原则用于提升清晰度与可信度。内容强调动画应提供反馈、维持方向感并传达状态变化。
主要功能
- 01将动画原则应用于企业界面
- 02覆盖表格、面板和流程等场景
- 03提供常见交互时长与缓动参考
- 04强调反馈、方向感与状态提示
适用场景
- 01设计数据表格和仪表板更新
- 02为表单提交和数据操作提供反馈
- 03制作向导流程与报告生成动效
- 04提示同步、验证和保存状态
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/enterprise-b2b确认已加载。
详细介绍
企业与 B2B 动画原则
运用 Disney 的 12 条原则，打造值得信赖、高效的体验，优先保证清晰度和专业可信度。
12 条原则的应用
1. 挤压与拉伸
- 几乎从不使用：企业环境要求极高的专业性
- 数据点：实时更新时轻微脉动
- 按钮：尽可能少用变形，最好不用
2. 预备动作
- 表单提交：短暂显示处理中状态
- 数据操作：确认前的瞬间提示
- 导航切换：轻微的预备提示
3. 演出布局
- 数据表格：突出主要内容
- 操作按钮：清晰但不炫目
- 通知：放置在不干扰的位置
4. 连续动作与关键姿势
- 仪表板：实时数据流（连续动作）
- 向导／流程：明确的步骤进展（关键姿势）
- 报告生成：按顺序生成
5. 跟随动作与重叠动作
- 表格更新：先高亮行，再刷新数据
- 面板展开：容器先打开，内容随后出现
- 筛选器应用：界面先调整，再加载数据
6. 慢入与慢出
- 所有过渡：采用平滑、专业的缓动
- 模态框打开：自信利落，耗时 250-300ms
- 状态变化：动作从容、适度
7. 弧线运动
- 尽量少用：直线体现效率
- 拖拽操作：略带自然弧度
- 数据流图：使用弯曲的连接线
8. 次要动作
- 保存指示器：处理期间显示轻微的旋转动画
- 同步状态：提示后台活动
- 验证：输入过程中提供行内反馈
9. 时间控制
- 高效：大多数交互控制在 150-250ms
- 绝不延误工作：速度体现对用户时间的尊重
- 即时反馈：输入响应控制在 100ms
10. 夸张
- 完全避免：企业体验必须含蓄克制
- 例外情况：重要警报需要引起注意
- 仅用于里程碑：克制地呈现重大成就
11. 扎实绘制
- 数据准确性：图表必须精准
- 字体排版：使用清晰易读的商务字体
- 图标系统：保持一致、专业的风格
12. 吸引力
- 专业信任：通过动效建立可信度
- 隐形润色：精致但不炫目
- 可靠性信号：行为一致且可预测
行业时间标准
| 操作 | 时长 | 缓动 |
|---|---|---|
| 按钮反馈 | 100ms | ease-out |
| 模态框打开 | 250ms | ease-out |
| 表格行更新 | 200ms | ease-in-out |
| 面板过渡 | 300ms | ease-in-out |
| Toast 消息 | 200ms | ease-out |
核心原则
企业用户是在工作，而不是在玩。动画的唯一作用是提供反馈、帮助用户保持方向感，并提示状态变化。每一毫秒的动画都必须凭借实用价值证明其存在意义。
评论
支持 Markdown