web-dev-qa-db-ja.com

ソリッドまたは透明な背景を持つモーダルダイアログ?

ダイアログボックスが透明な背景で開くことは誰もが知っていますが、最新のデザインでは、ページの右上に閉じるボタンが付いた無地の背景で、多くのダイアログがページ全体で開くのを見てきました。最新のデザイントレンドに従うべきか教えてください。

enter image description here

enter image description here

3
Pradeep

全体として、これは単に設計上の決定であり、標準はなく、アプリケーションに最適なものに完全に依存します。

しかし、これを背景の不透明度と閉じるボタンの位置の2つの個別の決定に分割すると、決定が容易になると思います。確かに、透明な背景ダイアログには、ページの右上に閉じるボタンと単色があるので、後者を相互に排他的に考える理由はありません。

透明対固体:

ユーザーがダイアログで行わなければならない決定に関連する基本情報です。多くの場合、ダイアログで「この画像を削除してもよろしいですか?」のようなメッセージが表示されることがあります。その場合、背景のオーバーレイを透明にしておくと、ユーザーがこの決定によって影響を受ける画像を確認できるので非常に便利です。ただし、このダイアログがポップアップして「セッションの有効期限が近づいています。続行するには[OK]をクリックしてください」と表示された場合、ダイアログとは関係がないため、基礎となるページを表示する必要はありません。重要なメッセージに焦点を合わせるための無地の背景。

閉じるボタンの場所:

これは本当にデザインの選択のより多くです。それはあなたのコンテンツによりよく適合するものに帰着します。しかし、私が考えることができるいくつかのユースケース:

  • 単に閉じるのではなく、モーダルで決定の1つを行うようにユーザーに指示する場合は、ページの右上に閉じるボタンを配置して、クリックする可能性を低くすることができます。モーダル。

  • モーダルに画像などのフルサイズのコンテンツがある場合、大きな「X」を配置すると見栄えが悪くなる可能性があるため、「X」をモーダルからページの上部に移動することをお勧めします。

  • モバイルの場合、ダイアログボックスは全画面表示になります。デスクトップ間のオーバーレイからモーダルに閉じるボタンを移動する方法を理解するのではなく、デバイス間の一貫性のためにモーダルに「X」を残しておく方が簡単な設計かもしれません。携帯上の体。

概要:

結局のところ、これを行う方法についてのグローバルなガイドラインや基準はありません。各側面を比較検討し、どの部分がアプリケーションにより適しているかを判断します。

3
DasBeasto