关于 fluid-design
fluid-design 是一套让界面交互呈现连续运动感的设计方法，面向构建交互体验的设计与开发人员。它强调可中断的动效、手势中的速度延续、输入方式适配和减少动态效果的替代方案。
主要功能
- 01交互位移优先采用弹簧效果
- 02确保动画可中断
- 03在手势边界延续速度
- 04按输入方式调整交互
- 05用布局动画保持空间连续
- 06提供减少动态效果的替代方案
适用场景
- 01设计可拖动并可反向的交互
- 02让界面转换保留对象连续性
- 03为触控、鼠标和键盘调整交互
- 04为减少动态效果模式保留操作能力
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/fluid-design确认已加载。
附带文件references/motion-recipes.mdreferences/principles.md
详细介绍
流体设计
让界面呈现连续物理系统般的感受，而不是离散的状态切换。
与其他技能的配合
- 此技能负责交互应带来的感受。
modern-css-html负责在能实现这种感受的前提下，采用最原生的实现方式。- CSS/HTML 能表达所需行为时，优先使用它们。
- 需要中断、速度继承、手势连续性，或 CSS 无法流畅表达的弹簧物理效果时，使用 JavaScript/Motion/SwiftUI。
默认原则
- 交互式位移和缩放优先使用弹簧，而非固定时长的缓动。
- 用户可触发的动画都必须可中断。
- 对象可被抓取时，优先使用直接操控，而非只能通过按钮间接操作。
- 在手势边界（松开 → 稳定/关闭）之间保留速度。
- 状态/路由变化时，只要同一对象仍然存在，就保留其共享身份。
- 根据输入方式（鼠标、触控板、触控、键盘）调整交互模型。
- 空间连续性优先使用 FLIP、布局动画或 View Transitions。只有当组件适合且已评估渲染成本时，才直接为布局属性添加动画。
- 在边缘添加渐进阻力，在边界添加橡皮筋效果。
- 安排动画编排顺序：被操作的对象先动，周围元素让位，随后稳定下来。
- 提供减少动态效果模式，在使用更安全的替代方案时仍保留相应功能。
优先采用 / 避免采用
| 优先采用 | 避免采用 |
|---|---|
交互动作使用 type: "spring" | transition: all |
颜色/透明度使用 CSS transition | 没有充分理由或性能检查就进行开销大的布局动画 |
| 提供其他减少动态效果布局 | 将 animation: none !important 作为唯一的无障碍方案 |
| 在密集区域基于速度控制悬停触发 | 让人感觉迟钝的防抖悬停，或未加门控的频闪效果 |
| Transform + opacity | 用户必须等待播放完毕的冗长锁定关键帧序列 |
起始调优参数
- UI 弹簧：刚度
200–400，阻尼20–30，质量0.8–1.2 - 布局重排：约
200–350ms，或使用阻尼良好的弹簧 - 手势关闭：结合偏移阈值 + 速度阈值
- 密集悬停区域：使用 EMA 平滑速度，并设置不同的触发/取消触发阈值
输入与无障碍
- 桌面端 + 动态效果：按设计使用弹簧、偏转和速度门控。
- 桌面端 + 减少动态效果：保留层级结构和控件；以更柔和的透明度/颜色/吸附模型替代空间物理效果。
- 触控：优先采用拖动/滚动的交互方式，而非依赖悬停来发现功能。
- 键盘：无需精确使用指针，也能操作每个交互区域。
审查清单
- 用户能否在动画进行中反向操作或改变方向？
- 移动距离/速度是否会改变动画响应？
- 交互动画是否只作用于适合合成器处理的属性？
- 减少动态效果后，用户是否仍能完成相同任务？
- 列表/网格重排是否保留空间记忆？
- 悬停密集区域是否针对指针快速扫过进行了门控？
- 是否因为 CSS 无法表达所需行为，才使用 JS？
参考资料
- 阅读 Motion recipes，查找相应手势或过渡效果的实现方法。
- 决定连续性应如何表现时，阅读 Principle notes。 仅加载任务所需的参考资料。
评论
支持 Markdown