设计等待的体验。
加载不是边缘情况。它是界面对请求的回应,帮助用户建立预期,并保持对进度的感知。
原则
说明正在发生什么
对短暂且进度未知的任务,使用通用加载动画。任务耗时较长或有明确阶段时,请显示具体状态:搜索、读取、上传或完成中。
保留结果的结构
骨架屏应勾勒出即将出现的内容。请匹配最终的间距与层级,而不是用灰色矩形填满所有空白区域。
克制地使用动效
加载动效应能在视野边缘被识别,无需争夺注意力。优先使用变换与透明度,保持流畅循环,并始终提供减少动态效果的状态。
选择样式
行内操作通常需要紧凑的指示器,并保持控件宽度。页面级数据适合结构化骨架屏。智能体任务则需要具体的状态文字,以及持续活动的轻量提示。
无障碍
为变化中的区域设置 aria-busy="true"。为有实际意义的加载指示器设置 role="status" 并提供简洁文字。请对辅助技术隐藏纯装饰动画,并避免仅以动画表示状态。