用户等待的每一秒都是流失风险。加载状态设计得好不好,直接影响用户体感
整理了一份完整的加载状态设计指南👇
🔄 下拉刷新 Pull to Refresh
只用在列表/feed流的顶部
下拉过程要有弹性反馈(动效)
刷新中显示 loading 指示器
刷新完成给一个轻量提示(如"已更新3条")
⬆️ 上拉加载更多 Load More
接近底部时自动触发,别让用户手动点
加载中在列表底部显示 loading
没有更多数据时明确告知"没有更多了"
加载失败提供"重试"按钮
🦴 骨架屏 Skeleton Screen
用在页面首次加载时,替代空白页面
模拟真实内容的布局形状(矩形块、圆形头像等)
加上从左到右的闪光动效(shimmer),暗示正在加载
比转圈 loading 好的原因:给用户一个"内容马上就来"的预期
🔘 按钮加载态
点击后按钮变为 loading 状态(转圈或文字变化)
同时禁用按钮防止重复点击
加载完成后给明确反馈(成功/失败)
📌 选择哪种加载方式?
首次进入页面 → 骨架屏 列表翻页 → 上拉加载 手动刷新 → 下拉刷新 提交操作 → 按钮加载态 全局数据加载 → 进度条(顶部细线型)
加载体验是用户感知产品"快不快"的关键因素,值得花心思打磨⚡






