用途:让界面显得有意图、快速且物理可信,而不只是“能用”。目标是产品手感——布局、动效、响应性、无障碍与微小交互细节叠加出的整体感受,而非装饰。适用于 UI 打磨、交互与组件行为设计、动效/过渡/手势/微交互、前端代码手感与无障碍评审、把粗糙界面变得可交付、设计组件 API、诊断界面缓慢或廉价感;不适用于纯后端、无 UI 执行的品牌策略、与具体界面行为无关的大型设计系统治理。
使用方式:采用“操作循环”——识别用户动作、期望的物理响应,判断动效是否有帮助,保证首帧即时响应,保持空间连续性,用最不易出错的基元实现,并测试慢速、快速、被打断、重复、仅键盘、触摸与减弱动效等场景。动效决策按频率判断:每天数百次的操作(命令面板、键盘导航)不加动效或近乎瞬时;每天数十次(悬停、行聚焦)仅最小反馈;偶发(对话框、抽屉、Toast)可用标准动效;罕见场景可允许愉悦感。缓动默认:入场/出场表面用强 ease-out,屏内移动用 ease-in-out,悬停/颜色用标准缓动,循环用 linear,拖拽释放用弹簧/惯性。时长参考:按压 80–160ms、悬停/焦点 100–180ms、Popover/菜单 140–220ms、Toast 180–260ms、对话框/抽屉 200–320ms、页面/路由过渡 200–400ms(仅当保持方位感),临时 UI 退出通常比进入更快。只动画 transform 与 opacity,避免 transition: all;避免从 scale(0) 出现,改用 scale(.96)+opacity:0;关注 transform-origin 与触发器的关系;为按压提供可见响应;使用可中断的 CSS 过渡,优先 @starting-style 做入场并渐进增强。
评审输出:建议用“Before / After / Why”三列表格,并报告 Changed(改动文件/区域)、Verified(执行的命令/浏览器/设备检查)、Remaining(未解决事项)。
限制与要求:键盘发起的操作通常不应有动画;必须实现 prefers-reduced-motion,减弱动效不是可选;触摸设备没有悬停,不要用悬停隐藏必需功能;禁用态需有解释而非静默禁用;动效需经受重复、打断与连续点击测试。资料未提供具体收费、价格或平台信息。