Material Design コンポーネントまとめてみた ダイアログ編

ダイアログはユーザに特定のtaskを知らせる。重要な情報やユーザの意思決定、複数のtaskを含んでいてもよい。

iOS

---

ダイアログ探してみた！

使用方法

□ 公式に書かれていること

⚡ ダイアログを使用して、ユーザーが情報に基づいて行動できるようにする
⚡基本画面と全画面画面の 2 種類
⚡単一のタスクを完了することに専念する必要があります
⚡タスクに関連する情報も表示できます
⚡進行状況の削除など、リスクの高いアクションを確認するためによく使用されます

左:基本画面,右:全画面

□ よくある使い方と特徴

• ダイアログは、重要な情報を提供したり、決定を求めたりするためにアプリのコンテンツの前に表示されるモーダル ウィンドウです

• ダイアログは、表示されるとアプリのすべての機能を無効にし、確認されるか、閉じるか、必要なアクションが実行されるまで画面に表示されたままになります。

• ダイアログは意図的に中断されるため、使用は控えめにする必要があります

□ カードの利点：集中的なユーザーインタラクション

• Dialogはユーザーの注意を特定の情報やアクションに集中させるためにデザインされており、他のUI要素からの乱れを減少させることで、ユーザーが必要なタスクや決定に専念できるようにします。

使い方NG例

優先度が低または中程度の情報にはダイアログを使用しないでください。代わりに、バナー (閉じることができます) またはスナックバー (自動的に消えます) を使用してください。

曖昧な質問を引き起こすダイアログ タイトルは使用しないでください

否定的なアクション  を確認アクションの右側に配置しないでください。代わりに、確認アクションの左側に配置します。

✨スタイル

Basic dialogs

1. Container

2. Icon (optional)

3. Headline

4. Supporting text

5. Divider (optional)

6. Text button

7. Scrim

Full-screen dialogs

1. Container

2. Header

3. Icon (close affordance)

4. Headline

5. Text button*

6. Divider (optional)

以上！次回は日付ピッカーについてまとめていきます！

参考
引用元 Google - Material Design
URL：https://material.io/