Master-Detailパターン
一覧(Master)から項目を選択すると詳細(Detail)が表示される、UIの構造化パターン。情報の階層構造を自然に表現できる。
特徴
- 情報解像度が段階的に上昇
- 一覧で概要を把握し、詳細で深掘り
- ナビゲーションが直感的
実装パターン
分割ビュー型
左右または上下に分割し、一覧と詳細を同時表示(メールアプリなど)
遷移型
一覧画面から詳細画面へ画面遷移(モバイルアプリで多い)
ドロワー型
詳細をサイドパネルやモーダルで表示
例
- メールクライアント
- ファイルマネージャー
- 設定画面
- ECサイトの商品一覧→商品詳細