web-dev-qa-db-fra.com

Quelle est la différence entre le menu contextuel, le menu déroulant et le menu déroulant?

Quelle est la différence entre le menu contextuel , le menu déroulant et le menu déroulant ? Sont-ils identiques dans la fonctionnalité ou varient-ils?

Si non, pourquoi tant de variations?


enter image description here

Menu contextuel menu déroulant

enter image description here

Menu volant enter image description here

Pour référence:
https://experience.sap.com/fiori-design-web/quickview/https://lightningdesignsystem.com/components/popovers/ - https://getbootstrap.com/docs/4.0/components/dropdowns/

Remarque: Ce sont juste pour les références !!

8
NB4

Non, tous sont différents.

  1. Menu Popover: il est utilisé lorsque nous voulons réduire tous les éléments ou actions secondaires (Ex: Modifier, Enregistrer, Actualiser, Supprimer) pour afficher en un seul clic déclencheur (icônes ou boutons). régulièrement, il est utilisé dans le pavé tactile et les iPads.

  2. Menu déroulant: il s'agit de lancer les actions principales en fonction de l'option sélectionnée.

  3. Menu Fly out: il est utilisé lorsque nous avons des catégories et sous-catégories de liens pour rediriger vers une autre page.


Mes sources:
https://www.nngroup.com/articles/drop-down-menus/
https://docs.nextcloud.com/server/12/developer_manual/design/popovermenu.html

9
B.Sadashiv

À mon avis, tous ces éléments de l'interface utilisateur varient. Je vais discuter de ce que j'en pense:

Popover

Pour afficher des informations de base sur un élément ou un bouton à l'utilisateur. Les popovers sont généralement des info-bulles avancées avec plus de contenu et d'informations utiles. Ils apparaissent principalement en survol et en masquage automatique sans que l'utilisateur ait besoin de les fermer manuellement. Les directions sont généralement en haut, en bas, à gauche, à droite mais pas en diagonale. De plus, la plupart du temps, ils n'ont pas d'éléments enfants. L'exemple que vous avez mentionné dans le post n'est pas un popover mais un menu déroulant.

Un exemple:

Menu déroulant

Une liste déroulante dans le est comme un élément select. En cliquant ou en survolant l'élément, ses éléments enfants sont animés et exposés en dessous. Ils "descendent" juste après un clic ou un survol. La différence entre popover et dropdown dans la plupart des cas est que dropdown a des éléments enfants.

Envoler

Un menu déroulant peut montrer ses éléments enfants de plusieurs manières par rapport à une liste déroulante, comme vers le haut, vers le bas, radialement, etc. Les éléments enfants peuvent ou non s'animer vers l'extérieur, c'est-à-dire voler hors du parent.

2
K K

Juste pour un argument équilibré, je considérerai que ces menus sont essentiellement les mêmes (c'est-à-dire qu'ils résolvent le même problème mais de différentes manières).

Problème 1 - il y a plus de contenu qu'il n'y a d'espace pour les afficher tous à tout moment.

Problème 2 - comment pouvons-nous fournir les interactions requises au point de besoin dans le bon contexte?

L'interaction déclenchée par l'utilisateur consistant à révéler plus de contenu au point d'intérêt résout les deux problèmes en masquant le contenu/l'interaction supplémentaire uniquement lorsque l'utilisateur le demande. Cela élimine le besoin de plus d'espace pour afficher toutes les informations quand elles ne sont pas nécessaires tout le temps, offrant ainsi une conception plus compacte et moins encombrée, ce qui est plus important dans les applications mobiles que dans les applications de bureau.

Les variations que vous voyez dans l'exemple fourni proviennent d'un certain nombre de sources différentes:

  • modèles de conception: le déclencheur peut provenir d'un élément d'interface de type bouton, d'un élément d'interface de sélection déroulante, d'un composant de navigation/menu, mais l'interaction essentielle de l'affichage et du masquage des informations sur la base d'une action pilotée par l'utilisateur reste la même. L'endroit où il se trouve dans la mise en page et le cadre de conception/développement utilisé détermine à quoi il ressemble et se comporte.

  • quantité d'informations: la façon dont le conteneur pour les informations révélées est créé dépend de la quantité d'informations que vous devez afficher et de l'espace disponible. Il est naturel de voir les variations entre les appareils de bureau et mobiles, ainsi que les résolutions d'écran ou les rations d'aspect.

  • type/complexité de l'interaction: ce modèle de conception prend en charge une simple interaction de clic ou de survol et renvoie le focus à la fenêtre ou à la région principale sur laquelle l'utilisateur se concentre. Alternativement, l'élément sélectionné peut être un lien qui mène l'utilisateur à une vue différente de l'application ou à une section différente de l'écran.

1
Michael Lai

Avec des termes de conception d'interface utilisateur comme ceux-ci, il peut y avoir de nombreux termes populaires pour la même chose. Les entreprises utiliseront volontairement une terminologie unique pour des raisons commerciales et juridiques. Les gens vont abuser de la terminologie parce que c'est technique. Le menu est certainement un mot technique, mais ces termes ne le sont pas.

Ce sont des termes très génériques. Par exemple, chaque menu qui se développe verticalement est une liste déroulante. Les directives de conception des matériaux utilisent rarement le terme liste déroulante. Les menus déroulants sont simplement appelés menus: https://material.io/guidelines/components/menus.html#menus-simple-menus

Consultez les directives de conception courantes pour trouver ou valider la terminologie de l'interface utilisateur. La terminologie utilisée par les directives de conception est elle-même conçue par des concepteurs et des développeurs travaillant ensemble.

En général, il existe deux types de menus dans l'interface utilisateur. Le premier type de menu est une liste de commandes. Les commandes font que l'application fait quelque chose. Il s'agit de l'interface utilisateur de programmation de base d'origine. Le deuxième type de menu est uniquement un outil de sélection. Le menu n'a qu'une seule commande et les éléments du menu ne sont que des options pour cette commande. Un menu de navigation est ce type de menu.

Il y a des différences entre les termes que vous demandez. Le menu déroulant est une conception de bureau. Le menu Popover est un design tactile. Le menu volant est un sous-menu du menu déroulant du bureau.

Le menu déroulant est la description originale donnée à l'expansion des menus de texte sur le bureau. La liste déroulante fait référence à l'effet visuel de l'ouverture du menu. Donc tous les menus déroulants mais le terme est généralement utilisé pour les menus du clavier et de la souris (bureau) par opposition aux menus tactiles.

Popover fait référence à l'effet visuel du menu apparaissant au-dessus de tout visuellement. Donc, tous les menus apparaissent. Le terme est utilisé pour les menus tactiles.

Fly-out fait référence à l'ouverture horizontale par opposition à la verticale. Le terme est utilisé pour les sous-menus déroulants du bureau. Les fly-outs sont des listes déroulantes.

Voici des exemples de liste déroulante et de popover des directives de conception de matériaux de Google et des directives d'interaction humaine d'Apple pour Mac OS et iOS. Montre également comment Apple utilise "popup" pour leur Mac OS par opposition à "popover".

enter image description here

0
moot