実際のコンテンツの読み込み中にコンテンツの形状を表示するWebデザインパターンの名前は何ですか?


12

シングルページアプリケーション(SPA)サイトでは、コンテンツを読み込む前にサイトレイアウトを読み込んで表示するのが一般的です。最近、待機スピナーや「読み込み中...」メッセージを表示する代わりに、これらのサイトの多くは、コンテンツが配置されるテンプレート/レイアウトを表示し、テキストと画像がフラットな幾何学で埋められていることに気付きました形。

Slackの例

これは、1行の待機テキストを大きなメッセージダンプなどで置き換えるよりも不快感が少ないため、良いパターンのようです。私は自分のサイトでパターンを読んで、もっと簡単にそれを行うためのライブラリを見つけたいかもしれませんが、それを何と呼ぶべきかわかりません。 。私が見つけた最も近い例は、この古い記事で、練習に特定の名前を付けていません。

「プレースホルダー」は私が最初に考えることができますが、もちろん<input>タグには実際のplaceholdler属性があり、多くの人がフィラーテキストまたは他のコンテンツ(Lorem Ipsum、Kitten Ipsumなど)について尋ねているため、結果は役に立たない傾向があります。業界がこの慣行の一意で説明的な名前に同意することを望んでいますが、まだ見つけられていません。


2
あなたの記事には「コンテンツプレースホルダー」と書かれています。その名前の何が問題になっていますか?これには「公式名」があるのか​​わかりません
ルチアーノ

その特定の文字列を使用したいくつかの言及(通常は名前でFacebookを呼び出す)が表示されます。最良のリードはこのライブラリーですが、Angularの宣言型/反応型モデルにはうまく適合しないと思います。掘り続けます、ありがとう。
コーデラー

1
@Luciano問題は、「コンテンツプレースホルダー」も簡単にLorem Ipsumや類似のものになる可能性があることです。これはグラフィックデザインでも役立つため、この用語あいまいです。
yo

回答:


18

私が最初に思いついたのは、あなたの例に示されているタイプの提案は、確かにグリーキングと呼ばれているということでした

「ロード画面で使用されるあいさつ」を検索すると、このUX技術に関する複数の記事、具体的にはこの概念をコンテンツプレースホルダーと呼ぶこの記事につながりました。

私が思うに良い言葉です。

ここでは具体的には、greekimageのプレースホルダーがあり、全体をまとめてContent Placeholderと呼ぶことができます


2
面白い、私は用語「Greeking」の起源は...あるのだろうか
デジタルLightcraft

1
@DigitalLightcraftは、「私にとってギリシャ語だ」という表現と関係があるかもしれません。詳細については、English.SEに質問を投稿してください。:P-
ビンセント

私が助けることができてうれしい、はい、「greeking」の起源は私には知られていない、私はそれが面白いに違いない。
mayersdesign

2
起源がlorem ipsumに関連していることについて興味深いこと:「グリーキング(ダミーテキストとも呼ばれます)を使用すると、ページ設計者は気を散らすように実際のコンテンツなしでテキストをページに配置できます。グリーキングの歴史は不明ですが、 20世紀半ばに最初に使用されたこのテキストは、彼の著作が賞賛されるローマの指導者キケロの言葉に基づいていた。彼が話し、書いた言語はギリシャ語ではなくラテン語であるため、このダミーテキストの命名は誤解を招く。 」 ソース
ジェイミーブル


2

Facebookがコンテンツプレースホルダーテクニックをわずかなきらめき効果で普及させ、コードをオープンソース化したため、開発者の友人の何人かはこれをFacebookのきらめき効果と呼ぶかもしれません。

きらめき効果のポイントは、実際のコンテンツがまだロードされていることを示すことです。これにより、ユーザーはページがスタックして更新されているとは思わなくなります。

ここに画像の説明を入力してください


-1

このパターンを使用したとき、スケルトンページと呼びました。動的コンテンツを生成している大きなページに非常に便利です。


4
これは既存の回答にどのように追加されますか?Codererが既に用語「スケルトン」に述べたように見えます
ザックSaucier

グラフィックデザインへようこそ!十分な評判があれば、正しいと思う答えに賛成票を投じることができます。または、質問にお気に入りとして「スター」を付けると、新しい回答が通知されます。
ルチアーノ

-4

スケルトンスクリーンと呼ばれます。


こんにちはNICK、GD.SEへようこそ。他の回答で既に言及されている情報を二重投稿しないでください。ありがとう!
ビンセント
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.