菜单加载状态：Skeleton 与 Spinner 最佳实践

布尔萨格鲁克莱一家 14 桌的校园咖啡馆将数字菜单中的旋转 spinner 替换为 shimmer-skeleton 后,移动端跳出率从 18% 降到 11%。相同的数据、相同的图片、相同的 3G 网络。

Nielsen Norman 2023 研究

Nielsen Norman Group 2023 年研究显示,skeleton 屏幕将感知加载时间降低 38%,而传统 spinner 反而增加 12%。大脑接受勾勒出的结构远比接受动画化的空白要容易。

对餐厅菜单这一点至关重要。顾客坐在桌前,手里拿着手机,想要快速决定。两秒钟的白屏就会种下怀疑——"没网了吗?"。Skeleton 立即消除这种怀疑。

thMenu 默认:shimmer-skeleton

thMenu 对产品卡片、分类标签和图像占位符使用 CSS 渐变 shimmer 动画。图片加载期间显示 blur-up placeholder 加 skeleton 框架。

• 分类标签:5 个灰色药丸,shimmer 1.5 秒
• 产品卡片:图片 + 2 行文字 + 价格占位
• 购物车抽屉:行 skeleton 而非 spinner

何时使用 spinner?

用于操作确认——"提交订单"、"处理支付"、"呼叫服务员"——小的 inline spinner 更合适。这里等待的是 结果,而非内容。

规则:数据用 skeleton,操作用 spinner。thMenu 在点击"加入购物车"后 200ms 内显示 inline spinner,随后弹出成功 toast。

常见问题

skeleton 动画过慢有害吗?是的。超过 2 秒的周期令人烦躁。理想 1.2-1.8 秒;thMenu 默认 1.5 秒。

网络极差时 skeleton 够用吗?Skeleton + 8 秒以上后的 toast + service worker 离线回退。

skeleton 兼容无障碍吗?是的,配合 aria-busy="true" 和 aria-label="菜单加载中"。

觉得有用?分享给朋友。