空の状態 vs. スケルトン
空の状態とは、コンテンツがない状態を意味します。スケルトンはコンテンツがまだ読み込まれている状態で、その形状が既知であることを示します。
何もない理由と次に何をすべきかを説明するには、空の状態を使用してください。レイアウトが分かっている短い読み込みにはスケルトンを使用してください。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
空、エラー＆成功状態 — 学習バンドル
この学習バンドルは、3つの異なるアプリ状態をカバーします。Emptyはまだコンテンツがないことを意味します。Errorは何かが失敗したことを意味します。Successは完了したことを確認します。それぞれに独自のメッセージと次のステップが必要です。このバンドルは、標準的な状態用語ではありません。
Save a guide to keep the patterns your team uses most within reach.
新しいプロジェクトリストは、最初の項目を作る方法を説明するよ。ネットワークがつながらないときは Retry が表示されて、フィルターは保存されたままになるよ。
- 以下の場合に使用します
- このガイドをチェックリストとして使用します。データに依存する各ビューの各状態を設計します。
- 以下の場合は使用しないでください
- 空白の画面や行き止まりを残さないでください。失敗を説明し、成功を確認してください。
- コードで使用する名前
status state machine
骨格
スケルトンは、これから表示される内容と同じ形をした、シンプルなプレースホルダー（仮の枠）です。
プロフィールページは、写真と文章のためのスペースを確保しておくよ。データが届いても、レイアウトは動かないよ。
- 以下の場合に使用します
- レイアウトが分かっていて、待ち時間が簡単に気づかれる場合に使用します。
- 以下の場合は使用しないでください
- 偽の詳細を考えたり、永遠にきらめかせたり、コンテンツがほぼすぐに表示される場合にスケルトンを使ったりしないでください。
- コードで使用する名前
aria-busy="true"
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| 空、エラー＆成功状態 — 学習バンドルEmpty, Error & Success State — Learning Bundle | このガイドをチェックリストとして使用します。データに依存する各ビューの各状態を設計します。 | 空白の画面や行き止まりを残さないでください。失敗を説明し、成功を確認してください。 | status state machine |
| 骨格Skeleton | レイアウトが分かっていて、待ち時間が簡単に気づかれる場合に使用します。 | 偽の詳細を考えたり、永遠にきらめかせたり、コンテンツがほぼすぐに表示される場合にスケルトンを使ったりしないでください。 | aria-busy="true" |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンを空、エラー＆成功状態 — 学習バンドル (Empty, Error & Success State — Learning Bundle)、骨格 (Skeleton)から選んでください。このルールを使用してください: 空の状態とは、コンテンツがない状態を意味します。スケルトンはコンテンツがまだ読み込まれている状態で、その形状が既知であることを示します。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。