リストの詳細デザインパターン

リストの詳細パターンには、メインウィンドウとコンテンツの詳細ウィンドウがあります。メインウィンドウは通常、リストビューです。リストの項目を選択すると、詳細ウィンドウが更新されます。このパターンは、必然的に、広い表示領域がある場合に適しています。メールやアドレス帳によく使われます。

2 つの異なる画面を利用し、自然な境界にスナップすると、一方の画面を使用して項目一覧を表示し、もう一方の画面を使用して選択した項目の詳細を表示できます。

ナビゲーションまたは概要を詳細から分離することで、ユーザーは、リスト全体または集計での位置に関する基礎を維持しながら、コンテンツをより深く掘り下げることができます。

図は、ナビゲーションとコンテンツが異なる画面でのリストの詳細デザインパターンを示しています。

ベストプラクティス

この設計パターンを適用する際に役立つシナリオをいくつか次に示します。

図は、一方の画面にリストを示し、ヒンジを越えるリスト要素の代わりに、もう一方の画面にコンテンツを表示します。

推奨	非推奨
画面の左側を使用してリストを表示し、右側にリストから選択した項目の詳細を表示します。	2 つの画面に一覧を表示しないでください。詳細ビューには 2 番目の画面を使用します。

図は、ヒンジを越えず、画面の一覧側の下部メニューを示しています。

推奨	非推奨
左側の画面の一覧に関連して、左側の画面に下部のメニューナビゲーションを表示します。	左側の画面に下部のメニューナビゲーションがなく、リストが 2 つの画面にまたがることはありません。

図は、両方の画面にまたがる下部メニューではなく、リスト画面でサイドメニューを使用していることを示しています。

推奨	非推奨
左側の画面の一覧と右側の画面の詳細を含むサイドメニューナビゲーションを使用します。	リストの詳細で 2 つの画面にわたる下部メニューナビゲーションを使用しないでください。

図は回転ビューを示しています。このビューには、リストではなく、両方の画面のコンテンツのみが表示されます。

推奨	非推奨
デバイスが二重の横向きに回転したときに詳細を表示します (リストに戻る戻るボタン付き)。	デバイスが 2 つの横向きに回転する場合は、一方の画面に一覧を表示したり、もう一方の画面に詳細を表示したりしないでください。

図は、リスト画面の画像のコレクションを示し、2 番目の画面には拡大された画像が表示されます。

推奨	非推奨
2 番目の画面を使用して、イメージギャラリーの一覧から大きな画像を表示します。	ヒンジを通過する 2 つのディスプレイにリストギャラリーを表示しないでください。

これらのプロジェクトは、アプリで使用できるリスト詳細設計パターンの簡単な実装を示しています。

注意

リスト - 詳細ビューで作業する場合

1 つの画面からスパンリスト詳細モードに移動する場合は、詳細ビューのユーザーを表示する項目を選択します。そうしないと、詳細ビュー画面がユーザーに壊れていると感じる可能性があります。ユーザーを困らせる可能性があり、情報を入力するためのアクションを必要とします。

一部のオプションには、リストビューの最後にタッチされた項目、リスト内の最上位の項目、または最後に変更されたアイテムが含まれます。

次の他の設計パターンを検討してください。