実際のコンテンツの形状に固執する
コンテンツの構造を知る場合はスケルトンを使用します。データが利用可能であることを意味するものではありません。
スケルトン デザインシステム
レイアウトをジャンプさせることなく、今後のコンテンツを示します。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
実際のコンテンツの形状に固執する
読み込み結果カードには、画像領域、タイトル、および 2 つの説明行があります。
バリエーションと利用場面
フレームは実際の構造に忠実です
置換コンテンツによってレイアウトがジャンプしないように、表示される画像とテキストの領域に応じたプレースホルダー。
待機中のフレームを長いヘッダーを持つ実際のデータと比較します。メインの高さが安定します。
例 画像カードには、読み込まれたカードと同じ正方形の領域と作成者フッターがあります。
表示名アクティブデータ型別の形状
役割に応じてサークル、テキスト、または写真のブロックを選択します。すべてに 1 つの大きなブロックを使用しないでください。
アバターや写真付きのリスティングを試してみてください。視聴者は、どのようなコンテンツが表示されるかを推測できます。
例 待機中のアバターは丸い枠、タイトルは短い線、画像は四角い枠になっています。