在实际内容加载时显示内容形状的网页设计模式的名称是什么?


12

单页应用程序(SPA)网站在加载内容之前先加载并显示网站布局是很常见的。最近,我注意到,这些站点不仅显示等待旋转消息或“正在加载...”消息,还显示了将要填充内容的模板/布局,其中文本和图像用平面几何填充形状。

来自Slack的示例

这似乎是个好模式,因为它比一小行等待文本替换为大的消息转储或其他内容要少,因此不会造成任何麻烦。我想阅读该模式,也许在我的网站上找到一个可以更轻松地完成此操作的库,但是我不知道该怎么称呼,而且甚至很难简洁地描述它以有效地搜索网络。我能找到的最接近的例子是这篇旧文章,没有给实践指定一个具体的名称。

我首先想到的是“占位符”,但是<input>标签现在已经具有实际placeholdler属性,很多人询问填充文本或其他内容(Lorem Ipsum,Kitten Ipsum等),因此结果往往无济于事。我希望业界已经为这种做法约定了一个独特的描述性名称,但我还没有找到。


2
您的文章说“内容占位符”;这个名字怎么了?我不确定是否有“官方名称”
Luciano

我确实看到使用该特定字符串的一些提及(通常是按名称呼出Facebook)。最好的线索是该库,但我认为它与Angular声明式/反应式模型不太匹配。我会继续挖掘,谢谢。
编码员

1
@Luciano问题在于“内容占位符”也很可能是Lorem Ipsum和类似的东西。这也是在平面设计有用的,所以术语模糊的。
2017年

Answers:


18

我想到的第一件事是,在您的示例中显示的类型建议肯定称为“ 打招呼”

搜索“在加载屏幕时使用的问候语”使我找到了多篇有关此UX技术的文章,尤其是这篇将“ 内容占位符”称为“ 内容占位符”的文章

和我想的一样好。

因此,在这里具体来说,您有greekingimage占位符,并且整个内容统称为Content Placeholder。


2
有趣的是,我想知道“问候”一词的起源是什么?
Digital

1
@DigitalLightcraft可能与“对我来说全是希腊”一词有关。有关更多信息,请随时发布有关English.SE的问题:SE
Vincent

很高兴我能提供帮助,是的,“打招呼”的起源对我来说是未知的,我敢打赌这很有趣。
mayersdesign

2
关于与lorem ipsum相关的起源的有趣一点:“使用greeting(也称为虚拟文本)可以使页面设计者将文本放置在页面上,而不会引起实际内容的干扰。greeding的历史尚不清楚,但是最初是在20世纪中叶使用的,文字是根据罗马领导人西塞罗(Cicero)的话写成的,他的著作受到钦佩,他说和写的语言是拉丁语而不是希腊语,因此该假文字的命名具有误导性。 ” 来源
Jamie Bull

4

这个魔术词似乎在招呼(谢谢!),但是这帮助我找到了“骨架屏幕”一词,它看起来像是在布置模拟内容以获得应用程序的一般形状的非常具体的做法。我认为理论是,它可以减少对加载时间的焦虑


2

您的一些开发者朋友可能将其称为Facebook的闪光效果,因为Facebook以轻微的闪光效果普及了内容占位符技术,并开源了他们的代码

闪烁效果的目的是指示实际内容仍在加载中,以使用户不会认为页面被卡住并刷新。

在此处输入图片说明


-1

当我使用了这种模式后,我们将其称为框架页面。对生成动态内容的大页面超级有用。


4
这如何添加到现有答案中?看起来Coderer已经提到过“骨骼”一词
Zach Saucier

欢迎来到平面设计!如果您有足够的声誉,则可以投票认为您认为正确的答案。或者,将问题“标上星标”作为收藏夹,任何新的答案都将通知您。
卢西亚诺

-4

它们称为骨架屏幕。


嗨,尼克,欢迎来到GD.SE。请不要重复发布其他答案中已经提到的信息。谢谢!
文森特
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.