ポップオーバーメニュー、ドロップダウンメニュー、フライアウトメニューの違いは何ですか？
ポップオーバーメニュー、ドロップダウンメニュー、フライアウトメニューの違いは何ですか？ 機能で同じですか、それとも異なりますか？
いいえの場合、なぜそれほど多くのバリエーションがあるのですか？
ポップオーバーメニュードロップダウンメニュー
フライアウトメニュー
参考：
https://experience.sap.com/fiori-design-web/quickview/https://lightningdesignsystem.com/components/popovers/ - https://getbootstrap.com/docs/4.0/components/dropdowns/
注：これらは参考値です!!
いいえ、すべて異なります。
ポップオーバーメニュー：すべてのセカンダリアイテムまたはアクション（例：編集、保存、更新、削除）を折りたたんで、シングルクリックトリガー（アイコンまたはボタン）に表示する場合に使用します。 。定期的にそれはタッチパッドとipadで使用されます。
ドロップダウンメニュー：選択したオプションに基づいて開始プライマリアクションです。
フライアウトメニュー：リンクのカテゴリとサブカテゴリが他のページにリダイレクトするときに使用されます。
私の情報源：
https://www.nngroup.com/articles/drop-down-menus/
https://docs.nextcloud.com/server/12/developer_manual/design/popovermenu.html
私の意見では、これらのUI要素はすべて異なります。私はこれらについて私が考えることについて話し合います：
ポップオーバー
要素またはボタンに関する基本的な情報をユーザーに表示するため。ポップオーバーは通常、より多くのコンテンツと役立つ情報を備えた高度なツールチップです。それらは主に、ユーザーが手動で閉じる必要なく、ホバーと自動非表示に表示されます。方向は通常、上、下、左、右のいずれかですが、斜めではありません。さらに、ほとんどの場合、子要素はありません。あなたが投稿で言及した例は、ポップオーバーではなくドロップダウンです。
例：
落ちる
のドロップダウンはselect要素のようなものです。要素をクリックまたはホバーすると、その子要素がアニメーション化され、その下に表示されます。クリックまたはホバーした後、単に「ドロップダウン」します。ほとんどの場合、ポップオーバーとドロップダウンの違いは、ドロップダウンに子要素があることです。
飛び出します
フライアウトは、上向き、下向き、放射状など、ドロップダウンと比較して複数の方法で子要素を表示できます。子要素は、外側にアニメーション化する場合としない場合、つまり親から飛び出す場合があります。
バランスのとれた議論のために、これらのメニューは基本的に同じである（つまり、同じ問題を異なる方法で解決する）との見方をします。
問題1-常にすべてを表示するスペースよりも多くのコンテンツがあります。
問題2-必要なときに必要な相互作用を適切なコンテキストで提供するにはどうすればよいですか？
関心のあるポイントでより多くのコンテンツを表示するというユーザートリガーの相互作用は、ユーザーが要求した場合にのみ追加のコンテンツ/相互作用を非表示にすることで、両方の問題を解決します。これにより、常に必要とされないときにすべての情報を表示するためのスペースを増やす必要がなくなり、デスクトップアプリケーションよりもモバイルアプリケーションで重要な、よりコンパクトで乱雑なデザインが提供されます。
提供されている例からわかるバリエーションは、さまざまなソースからのものです。
デザインパターン：トリガーはボタンのようなインターフェース要素、ドロップダウンセレクターインターフェース要素、ナビゲーション/メニューコンポーネントから発生する可能性がありますが、ユーザー主導のアクションに基づいて情報を表示および非表示にするという本質的な相互作用は変わりません。レイアウトのどこに配置され、どの設計/開発フレームワークが使用されているかによって、外観と動作が決まります。
情報の量：公開された情報のコンテナが作成される方法は、表示する必要のある情報の量と利用可能なスペースの量によって異なります。デスクトップデバイスとモバイルデバイスの違い、および画面の解像度やアスペクト比を確認するのは自然なことです。
インタラクションのタイプ/複雑さ：このデザインパターンは、単純なクリックまたはホバーインタラクションをサポートし、ユーザーがフォーカスしているメインウィンドウまたは領域にフォーカスを戻します。あるいは、選択されたアイテムは、ユーザーをアプリケーションの別のビューまたは画面の別のセクションに移動するリンクにすることもできます。
このようなUI設計用語を使用すると、同じものに対して多くの一般的な用語が存在する可能性があります。企業は、ビジネス上の理由および法的な理由のために、意図的に独自の用語を使用します。専門用語であるため、用語は誤用されます。メニューは間違いなく技術的な言葉ですが、これらの用語はそうではありません。
ただし、これらは非常に一般的な用語です。たとえば、垂直方向に展開するすべてのメニューはドロップダウンです。マテリアルデザインガイドラインでは、ドロップダウンという用語をほとんど使用しません。ドロップダウンメニューは単にメニューと呼ばれます： https://material.io/guidelines/components/menus.html#menus-simple-menus
UIの用語を見つけたり検証したりするには、一般的な設計ガイドラインを参照してください。設計ガイドラインで使用されている用語自体は、設計者と開発者が共同で設計したものです。
一般に、UIには2種類のメニューがあります。最初のタイプのメニューは、コマンドのリストです。コマンドはアプリケーションに何かをさせます。これは、元のコアプログラミングUIです。 2番目のタイプのメニューは、唯一の選択ツールです。メニューにはコマンドが1つだけあり、メニューの項目はそのコマンドのオプションにすぎません。ナビゲーションメニューはこのタイプのメニューです。
あなたが尋ねている用語には違いがあります。ドロップダウンメニューはデスクトップデザインです。ポップオーバーメニューはタッチデザインです。フライアウトメニューは、デスクトップのドロップダウンメニューのサブメニューです。
ドロップダウンは、デスクトップ上のテキストメニューを拡張するために与えられた元の説明です。ドロップダウンとは、メニューを開いたときの視覚効果を指します。したがって、すべてのメニュードロップダウンですが、この用語は一般に、タッチメニューではなく、キーボードとマウスのメニュー（デスクトップ）に使用されます。
ポップオーバーとは、視覚的にすべての上に表示されるメニューの視覚効果を指します。したがって、すべてのメニューがポップオーバーします。この用語はタッチメニューに使用されます。
フライアウトとは、垂直方向ではなく水平方向に開くことです。この用語は、デスクトップのドロップダウンサブメニューに使用されます。フライアウトはドロップダウンです。
以下は、GoogleのマテリアルデザインガイドラインとAppleのMac OSおよびiOS向け人間操作ガイドラインのドロップダウンとポップオーバーの例です。また、Appleが "popover"ではなくMac OSに "popup"を使用する方法も示しています。
