众力资讯网

下拉刷新上拉加载骨架屏加载状态设计指南⏳

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