Modality
hr.icon
モダリティとは、コンテンツを一時的に表示し、終了するために明示的な操作を必要とするデザイン手法のことです。
コンテンツをモダリティで表示すると、次のようなことが可能になります。
自己完結したタスク、または密接に関連した一連のオプションに集中できるようにする
重要な情報を確実に受け取り、必要であれば行動する。
https://gyazo.com/350be90ab6a9c0bdaeb3963dfd615892
https://gyazo.com/ba3d9906e8411bc959b872a6afcd37d6
アプリケーションでカスタムモーダル コンテンツを表示するには、次のプレゼンテーションスタイルのいずれかを使用します。
Automatic(自動)
デフォルトのプレゼンテーションスタイル(通常はシート)を使用します。
Fullscreen(全画面)
前のビューを覆い、閉じるためのボタンが必要です。
Popovers(ポップオーバー)
横長環境ではポップオーバーを、コンパクト環境ではシートを表示します。
Page sheet and form sheet(ページシートとフォームシート)
前のビューを部分的にカバーします。
Current context(現在のコンテキスト)
特定の前のビューをカバーします。
Custom(カスタム)
カスタムのコンテナでコンテンツを表示するために、カスタムのアニメーションを使用します。
注意事項
現在のコンテキストモーダルビュースタイルを使用して、モーダルコンテンツを分割ビューペイン、ポップオーバー、またはフルスクリーンでないその他のビュー内に表示する場合、モーダルコンテンツをコンパクトな環境で表示する場合は、シートの使用に切り替えてください。
モダリティは意味があるときに使う。
モーダルな体験は、現在のタスクとは異なる選択またはタスクの実行に人々の注意を集中させることが重要な場合にのみ作成してください。
モーダルエクスペリエンスは、人々を現在のコンテキストから引き離し、解除するためのアクションを必要とするため、明確な利益をもたらす場合にのみ使用することが重要です。
アラートは、必要不可欠な、そして理想的には実用的な情報の配信に限定してください。
一般的に、アラートが表示されるのは、何か問題が発生したときです。
アラートは現在の体験を中断させ、タップして解除する必要があるため、その中断が正当であると人々に感じてもらうことが重要です。
一般に、モーダルタスクは、シンプルで短く、焦点を絞ったものにします。
モーダルタスクが複雑すぎると、モーダルコンテキストに入ったときに中断したタスクを見失ってしまうことがあります。
アプリの中にアプリがあるようなモーダルエクスペリエンスを作成しないように注意してください。
特に、モーダルタスクの中でビューの階層を表示すると、元のタスクへの戻り方を忘れてしまうことがあるので、注意が必要です。
モーダルタスクにサブビューを含める必要がある場合、階層を通る単一のパスと、完了までの明確なパスを提供します。
タスクの完了以外の目的で完了ボタンを使用しないようにします。
没入感のあるコンテンツや複雑なタスクには、フルスクリーンモーダルスタイルの使用を検討してください。
フルスクリーンモーダルでは、気が散るのを最小限に抑えられるので、動画、写真、カメラビューを表示したり、文書のマークアップや写真の編集などの複数ステップのタスクを実行したりするのに適しています。
モーダル表示を解除するボタンを必ず配置します。
たとえば、DoneやCancelを使用することができます。
ボタンを含めることで、モーダルビューを支援技術で利用できるようにし、解除のジェスチャーに代わる手段を提供します。
必要に応じて、モーダルビューを閉じる前に確認を取ることで、データの損失を回避することができます。
ユーザーがビューを閉じるのに、解除ジェスチャーを使うかボタンを使うかにかかわらず、その操作によってユーザーが作成したコンテンツが失われる可能性がある場合は、状況を説明し解決策を示すアクションシートを提示します。
モーダルビューのタスクを簡単に識別できるようにする。
ユーザーは、モーダルビューに入ると、それまでのコンテキストから切り替わり、すぐには戻れないかもしれません。
モーダルビューのタスク名を示すタイトル、またはタスクの説明やガイダンスを示す追加テキストを提供すると、ユーザーがアプリ内で自分の位置を維持しやすくなります。
モーダルビューの外観をアプリと調整する。
たとえば、モーダルビューにナビゲーション バーが含まれる場合、アプリのナビゲーション バーと同じ外観を使用する必要があります。
アプリで意味のあるモーダル遷移スタイルを選択します。
アプリと協調し、一時的なコンテキストシフトの認識を高める遷移スタイルを使用します。
デフォルトのトランジションは、モーダルビューを画面の下から上にスライドさせ、終了すると下に戻すものです。
アプリ全体で一貫したモーダル遷移スタイルを使用します。