SuperAPI AI 工具集

loading-states-and-perceived-performance

设计与创作

查看项目

更新于 10-15 17:22

技能介绍

用途:该技能用于设计加载状态与感知性能,让等待中的界面显得更快、更易理解。资料给出按等待时长选择模式的建议:短于1秒用按钮内联旋转指示器,1至3秒用骨架屏(卡片、列表、仪表盘、个人页),超过3秒用确定性进度条(上传、导出、重处理),整页加载用错落入场动画。

主要能力:旋转指示器用于小型局部操作,建议按钮进入禁用状态防止重复提交,动画用缓入缓出的“弹簧式”旋转比线性旋转更精致。骨架屏模仿最终布局以降低布局偏移,使用最浅灰色并加缓慢微弱的 shimmer 渐变;数据到达后用150至200毫秒淡入真实内容而非突然出现。整页可用错落入场动画引导视线,如 .section 依次设置 animation-delay: 100ms、200ms、300ms。

使用方式:按用户价值顺序加载,先渲染首屏关键内容,次级面板与列表用骨架占位并随后流入;只取当前视图所需数据,标签页、抽屉和屏外区域延迟加载;对可预测的下一步做后台预取,不要推测性加载全部。乐观 UI 可先更新界面、失败时回滚并显示错误,适用于点赞、开关、重命名、删除等。

适用场景与限制:等待超过2秒可加入品牌化微文案、品牌动画或加载进度说明。资料强调光标不是加载状态;超过约10秒需真实进度与取消方式,超过约30秒用户会视作卡死。若请求经常跨过阈值,应修请求本身;真正不可缩短的等待应改为后台任务并通知用户。检查清单要求尊重 prefers-reduced-motion,并避免全局阻塞旋转器、骨架与最终布局不匹配、单个页面过多旋转器等反模式。