关于 trust-reliability
面向设计师和开发者的动画设计技能，提供建立可信赖体验的运动原则、时长建议与一致性规则。重点是可预测、克制的动画，并要求尊重系统的减少动态偏好。
主要功能
- 01可信赖动画原则
- 02按界面元素提供时长建议
- 03CSS 缓动曲线示例
- 04动画一致性规则
- 05尊重减少动态偏好
适用场景
- 01设计支付与交易反馈
- 02规划表单和身份验证动效
- 03制作设置与确认对话框
- 04设计进度指示器
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/trust-reliability确认已加载。
详细介绍
信任与可靠性动画
创建动画，带来信心、一致性和可靠的用户体验。
情感目标
信任通过可预测、可控且符合用户预期的动作逐步建立。可靠性意味着动画行为一致，绝不会带来负面惊吓。
建立信任的迪士尼原则
挤压与拉伸
尽量减少拉伸（最多 5-10%）。可控的形变能体现稳定感。元素应显得坚实、稳固，而非像橡胶一样有弹性。
预备动作
轻微但清晰（50-100ms）。短暂的准备动作能传达接下来要发生什么，避免意外。用户应始终清楚接下来会发生什么。
演出布局
呈现清晰明确。一次只执行一个动作。重要元素应一目了然。避免隐蔽或令人困惑的动作。
连续动作法
避免用于建立信任。优先采用姿势到姿势的方式，以获得可预测、可控的效果。每一帧都应经过刻意设计。
跟随动作与重叠动作
克制地使用跟随动作。元素应迅速稳定下来，避免过度弹跳。动作完成时应显得专业、可控。
缓入与缓出
采用平滑、对称的缓动。ease-in-out 能带来可预测、专业的动感。避免突然加速或突兀停止。
弧线
采用柔和、可预测的曲线。相似交互应使用一致的弧线路径。避免不稳定或出乎意料的轨迹。
次要动作
尽量精简且有明确目的。辅助动画应起到强化作用，而非分散注意力。加载指示器应保持平稳、沉静。
时间节奏
采用适中且一致的时长（250-400ms）。不要太快（显得仓促），也不要太慢（显得故障）。相同元素应始终以相同速度播放动画。
夸张
尽量极少（5-10%）。接近真实的动作显得专业、可信。注重细微润色，而非戏剧化效果。
扎实绘制
保持比例准确。避免扭曲或变形。元素应显得稳定、结构合理。
吸引力
设计应简洁、平衡。对称能传递稳定感。专业美感优先于俏皮的魅力。
时间建议
| 元素 | 时长 | 缓动 |
|---|---|---|
| 过渡 | 250-350ms | ease-in-out |
| 反馈 | 150-200ms | ease-out |
| 加载 | 连续 | linear |
| 模态框 | 200-300ms | ease-out |
CSS 缓动
--trust-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--trust-enter: cubic-bezier(0, 0, 0.2, 1);
--trust-exit: cubic-bezier(0.4, 0, 1, 1);
一致性规则
- 相同动作始终使用相同动画
- 时长偏差：最多 ±50ms
- 不使用随机或可变的时间设置
- 遵循系统的动态效果偏好
- 禁用动画时应优雅降级
适用场景
- 金融交易与支付
- 表单提交与数据录入
- 身份验证流程
- 设置与配置
- 进度指示器
- 确认对话框
- 企业应用
评论
支持 Markdown