Material designのガイドをざっくり読んだのでざっくりまとめます。
マテリアルデザインについてのざっくりまとめ ～Components編その1～
マテリアルデザインについてのざっくりまとめ ～Components編その3～
マテリアルデザインについてのざっくりまとめ ～Components編その4～
この記事ではComponentsの Dividers ～ Menus についてまとめます。
Dividers
- 文字列のリストを項目ごとに分割する場合や、グループ単位で区切る場合などに使用する分割線
- 画像をベースとしたGrid表示では、サブヘッダとスペースで区切りが明確であるため不要
Grids
- 同種のデータを並べる場合などに使用する
- ビジュアル的に識別しやすいもの（画像など）を並べるのに適している
- テキストであればList、異なるタイプのデータを並べるのはCardを使用する
- 基本は縦スクロール
Lists
- 同種のデータを並べる場合などに使用する
- 読解しやすいもの（テキスト）を並べるのに適している
- 3行以上必要になる場合はCardを、主要な要素が画像である場合はGridを使用する
List controls
- Listの文字列の横に配置されるアイコンで、リスト項目の状態・主アクション・副アクション・二次的な情報を表したりするのに使用する
- Checkbox：主アクションまたは副アクション
- Switch：副アクション
- Recorder：副アクション
- 移動可能なリスト項目であることを示すために使用される
- Expand/collapse：副アクション
- 展開・折りたたみ可能な項目であることを示すために使用される
- Leave-behinds
- リスト項目をスワイプ後にどうなるかを表すヒントに用いられる
- メニュー用のcontrol（通常のリストでは使うべきではない）：
- Check：項目が選択されていることを示す
- Inline information：キーボードショートカットなどの情報を表示する
- Nested menu indicator：サブメニューがあることを示す
Menus
- 一時的に表示されるシートで、リストの項目を選択することで何らかのアクションが発生する
- 静的コンテンツは利用頻度が高いものを上部に配置すべき。動的コンテンツは最近使用したもの順など、ユーザーのアクションによって変わる場合もある。
- メニューの入れ子はできるだけ1階層までにしたほうがよい
- 使用できないメニューは非表示にしない
- Simple Menus：リスト項目のオプションを表示するのに使用され、表示されたオプションを選択すると反映される