Material designのガイドをざっくり読んだのでざっくりまとめます。
マテリアルデザインについてのざっくりまとめ ～Components編その2～
マテリアルデザインについてのざっくりまとめ ～Components編その3～
マテリアルデザインについてのざっくりまとめ ～Components編その4～
この記事ではComponentsの Bottom sheets ～ Dialogs についてまとめます。
Bottom sheets
- 画面の下から出てくるシート。
- 3つ以上の説明不要なアクションを並べる場合に適している（これ以外はメニューやダイアログを検討すべき）
- 他のアプリに関連する動作に使用することも可能（例：共有・コピー、撮影など）
Buttons
- Floating action button
- その画面でのメインのアクションをするための丸いボタン。
- Raised button
- 四角の枠に囲まれた一般的なボタン。
- 文中など、Flat buttonにするとボタンであることがわかりにくい場合にはRaised buttonを使用すべき
- Flat button
- 枠なしでテキストのみのボタン。
- ダイアログやフッターなど、固定レイアウトではRaised buttonではなくFlat buttonを使用すべき
Cards
- 異なる種類のものから構成されるもの、異なる種類のものを並べる場合、複数の操作を持つもの、変化しやすい値を表示する場合などに使用する。（同種のものを並べる場合はリストやグリッドでの表示でOK）
Chips
- カレンダーや連絡先選択など、簡易な情報を表示する場合に使用する。
Dialogs
- Alerts
- 操作時に確認を求める場合などに使用する。
- Yes/No などの選択肢ではなく、Delete/Cancel など、その後どのような動作をするかがわかるような文言にするのがよい。
- タイトル付きAlertの場合は、タイトルで明示的な問いをすべき。（「Are you sure?」等はよくない）
- Simple menus
- リスト内の項目の選択肢を表示して選択させる場合などに使用する。
- Simple Dialogでも同じようなことができるが、Simple Menu のほうがユーザーの混乱が少ないので好まれる。
- Simple dialogs
- 選択肢を表示する場合などに使用する。
- 選択肢のリスト以外にボタンは持たない。
- Confirmation dialogs
- 入力・選択に確認が必要な場合に使用する。
- 確認して進むボタンと、明示的にキャンセルボタンを配置すべき。
- Full-screen dialogs
- 複数の項目を設定する場合などに使用する。
- 操作の確認には明示的に動作を表す文言（「Save」「Send」など）にすべき。
- ダイアログ左上のアイコンが矢印（←）の場合はタップ時に保存され（この場合はSaveなどのボタンは不要）、×の場合は破棄されることを意味する。