首先出现骨架屏幕然后

Arzina988#

视觉占位符。它提供完全渲染页面的低保真预览以给人更快加载时间的印象。骨架屏幕由浅色的形状线条和文本组成它们在最终内容加载到位之前概述了页面的结构。骨架屏一词是由产品设计师于年在一篇关于减少感知等待时间的博客文章中引入的。在帖子中他解释了逐渐显示的页面内容如何将用户的注意力转移到正在加载的内容上而不是加载时间本身。我们可以看到早期应用程序之一上使用的骨架屏幕示例骨架屏示例极地图片来源从左到右查看这些屏幕我们可以看到加载过程如何从预览页面基本结构的骨架屏幕开始与线框不同。屏幕逐渐填充内容直到呈现整个页面。自最初的帖子发布以来的方法已被主要网站网络应用程序和移动应用程序广泛采用。

让我们看几个更多的网站示例。这是来自的一个当您访问主页时您首先会看到这个骨架屏幕骨架屏幕示例占位符加载屏幕不久之后最终页面内容取代了它骨架屏幕示例完全渲染的页面这是的另一个例子。这是用户加载页 手机号码数据 面时首先看到的内容骨架屏幕示例页面占位符加载屏幕这是完全渲染的页面骨架屏幕示例完全渲染的页面一些骨架屏幕还添加了动画组件。从左到右移动渐变的骨架屏幕是很常见的如下所示动画骨架屏示例图片来源要自己编写动画骨架屏幕您可以遵循几个教程。我们推荐这个骨架屏为何能发挥作用骨架屏幕并不能真正提高页面加载速度。




相反它们的设计目的是让人感觉页面加载速度更快。骨架屏幕具有与旋转器和其他加载动画类似的功能用户必须等待一段时间才能加载内容的视觉提示。旋转负载动画示例图片来源然而与旋转器不同的是骨架屏幕会产生一种进步的错觉。旋转动画与内容无关并且不会告诉我们需要等待多长时间。使用骨架屏幕就好像我们正在观看进入视野的内容一样。因此即使等待时间相同用户也会认为显示骨架屏幕时的加载时间比显示旋转屏幕或空白屏幕时的加载时间更短。坦率地说骨架屏在我们没有意识到的情况下欺骗我们以获得更好的