SuperAPI AI 工具集

comfort-safety

设计与创作

查看项目

更新于 10-15 21:36

技能介绍

comfort-safety 是一套面向界面动效的设计技能,用途是创建能安抚用户、降低焦虑、传达保护与安全感的动画。其情绪目标是:舒适来自可预测、轻柔、绝不惊吓的运动;安全则意味着动画要传达保护、稳定与用户掌控感。

主要能力围绕迪士尼动画原则展开:挤压与拉伸保持极小且柔和(5-10%),像坐垫一样吸收冲击而不失结构;预备动作清晰、令人安心(150-200ms),让用户始终知道将要发生什么;舞台化采用封闭、受保护的构图与清晰边界;避免直进式动作,因为安全需要可预测性;跟随与重叠动作要轻柔缓冲、缓缓落位;缓入缓出贯穿全程,避免突变;弧线采用柔和自然的曲线,形成环抱感;次要动作只用于令人安心的提示,如对勾、盾牌、锁;时间节奏适中不匆忙(300-450ms);夸张为零或极小,保持真实可信;扎实的造型要求稳定平衡、重心偏低;吸引力方面使用温暖柔和的色彩与柔软边缘。

时间建议:过渡 300-400ms 用 ease-in-out;反馈 200-250ms 用 ease-out;确认 350-450ms 用 ease-out;保护性揭示 400-500ms 用 ease-in-out。CSS 缓动变量为 --comfort-smooth: cubic-bezier(0.4, 0, 0.2, 1); --comfort-gentle: cubic-bezier(0.45, 0, 0.55, 1); --comfort-settle: cubic-bezier(0.25, 0.1, 0.25, 1);。资料还给出 comfort-embrace 与 comfort-check 两个关键帧模式,以及 .safe-element 使用 comfort-embrace 400ms ease-in-out forwards 的示例。

安全信号包括:所有操作都有清晰可见的反馈;用撤销动画展示可逆性;进度不意外倒退;过渡保持方向感;模式一致可依赖。适用场景包括银行与金融、医疗应用、密码与安全流程、数据隐私控制、保险平台、备份与恢复、家长控制、敏感数据处理。限制方面,资料未提供具体平台支持范围、性能开销或无障碍兼容性说明。