web-dev-qa-db-ja.com

モーダル、ポップアップ、ポップオーバー、ライトボックスの違いは何ですか?

ユーザーに通知して警告する、またはモーダル、ポップアップ、ポップオーバー、ライトボックスなどの情報を表示するメッセージボックスを説明するために使用される多くの用語を見てきました。

これらのコンポーネントの違いは何ですか?

これらの各コンポーネントをいつどのタイプのテキストで使用する必要がありますか?

96
Tot Zam

これらのUIコンポーネントはすべて、現在表示/操作しているコンテンツの上に表示されるコンテナー/ウィンドウです。異なる名前は、注目に値するもの、あなたがいるコンテキスト、それらとどのようにやり取りできるかに基づいています。

アラート-これらのメッセージはすぐに注意が必要です。通常、ウィンドウ/コンテナはロックされています。つまり、内容を明示的に確認するまで、ボックスを閉じたり、目的の操作を続行したりすることはできません。これは通常、コンテナ内のボタンをクリックして行われます。このウィンドウのボタンは通常「OK」または「キャンセル」です。 (これらの多くを表示している場合、ユーザーの期待がUIの期待と一致していないため、通常は設計の失敗です。)

enter image description here

Modal/Dialog-これらは作業を完了するためのものです。 (例:「友達を招待」と書かれたボタンは、あなたが招待できる友達のリストを含むそのようなコンテナを開きます)。これらを使用すると、メイン画面にすべての情報を表示する必要なく、より多くの作業を行うことができます。これらのメッセージはロックされておらず、任意の場所をクリックしてコンテナを閉じることができます。
enter image description here

Popup-これらのメッセージをすぐに処理する必要はありませんが、これらのメッセージは消えないため、ある時点でアクションを実行する必要があります明示的に言うまで、もう周りにいたくないと言います。
enter image description here

Flash通知/グロー通知-これらの通知には、関連付けられた時間があります。すぐに対処するか、何もしない場合は、一定の時間が経過すると解雇されます。
enter image description here

ライトボックス/シアター-これらは、画面の一部を拡大してフォーカスするために使用されます。これらのコンテナは、画像の表示に最もよく使用されます。通常は、別のサムネイルを閉じてクリックすることなく、同様のコンテンツ(ギャラリーの次の写真)をナビゲートできます。これらはロックすることもしないこともできます。ユーザーがいたコンテキストを返すか、新しいコンテキストスレッドを続行するかによって異なります。
enter image description here

Popover/Tooltip/Hovercard-これらは、より多くの情報を表示するための受動的なアプローチです。これらは、簡単な指示や説明を追加したり、リンクをクリックしたときに何が起こるかを予告するために使用されます。
enter image description hereenter image description here

出典: https://www.quora.com/Whats-the-difference-between-a-modal-a-popover-and-a-popup

93
Tot Zam

ポップオーバーは、ツールチップの拡張機能であり、単純なテキスト以外のコンテンツも含まれます。彼らはしばしばタイトルを持ち、画像などを含めることができます。

ツールチップは単なるテキストです。

2
doublejosh