让等待不再枯燥
迈尔斯(1985)证明进度指示使等待更易忍受,梅斯特(1985)指出无所事事、不知何时结束的等待感觉更长。骨架屏结合两者,预先展示即将出现内容的形状。
研究怎么说
哈里森等(2007, 2010)表明仅改变进度条节奏或视觉效果就能让相同时长显得更短。梅伊托夫特等(2018)发现骨架屏往往感觉更快,但差异可能不大。反馈不能替代真正的提速。
用好的方法
按真实布局尺寸绘制骨架,内容进入时不会挤动页面,不损害核心网页指标中的CLS。加载不足1秒时省略,长任务用进度条。正如峰终定律所示,结束时的平滑过渡也很重要。
常见问题
- 骨架屏和转圈有何不同?
- 转圈只表示“请等待”,骨架屏则预示即将出现的结构。
- 什么时候不用?
- 加载不足1秒或任务极长时。
来源核查日期:2026-10-27
参考文献
- Myers, B. A. (1985). The importance of percent-done progress indicators for computer-human interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 11–17). ACM. 证明进度指示让等待更易忍受的经典研究。
- Maister, D. H. (1985). The psychology of waiting lines. In J. A. Czepiel, M. R. Solomon, & C. F. Surprenant (Eds.), The service encounter (pp. 113–123). Lexington Books. “空闲时间感觉更长”等等待心理原则。
- Harrison, C., Amento, B., Kuznetsov, S., & Bell, R. (2007). Rethinking the progress bar. In Proceedings of the 20th Annual ACM Symposium on User Interface Software and Technology (pp. 115–118). ACM. 显示进度条的节奏会改变感知时长。
- Harrison, C., Yeo, Z., & Hudson, S. E. (2010). Faster progress bars: Manipulating perceived duration with visual augmentations. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1545–1548). ACM. 仅靠视觉效果就让相同等待感觉缩短约11%。
- Nah, F. F.-H. (2004). A study on tolerable waiting time: How long are Web users willing to wait? Behaviour & Information Technology, 23(3), 153–163. 表明有无反馈会改变可容忍的等待时间。
- Hohenstein, J., Khan, H., Canfield, K., Tung, S., & Perez Cano, R. (2016). Shorter wait times: The effects of various loading screens on perceived performance. In Proceedings of the 2016 CHI Conference Extended Abstracts on Human Factors in Computing Systems (pp. 3084–3090). ACM. 比较转圈、进度条等加载界面对感知性能的影响。
- Mejtoft, T., Långström, A., & Söderström, U. (2018). The effect of skeleton screens: Users' perception of speed and ease of navigation. In Proceedings of the 36th European Conference on Cognitive Ergonomics (pp. 1–4). ACM. 少有的直接比较骨架屏效果的实验。
