Guide de décision · 02

Menu contextuel vs. Menu déroulant

La réponse courte

Un menu contextuel affiche les actions pour l'élément sur lequel tu cliques ou appuies. Une liste déroulante s'ouvre depuis un bouton visible avec un but précis.

Utilisez un menu contextuel comme raccourci supplémentaire, et non comme seul chemin. Utilisez un menu déroulant lorsque les gens ont besoin de voir où le menu s'ouvre.

01

Voir ce que fait chaque modèle

Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.

macOS Context Menu

macOS Context Menu

↗

Un macOS Context Menu est une courte liste d'actions pour l'élément sous le curseur. Il s'ouvre avec un clic secondaire, comme un clic droit.

Exemple travaillé originalmacOS Context Menu
Cliquer droit sur un fichier sélectionné affiche Renommer, Dupliquer, Partager et Déplacer à la corbeille sans quitter la liste.
Utilisez-le lorsque
Utilisez-le pour un petit ensemble d'actions moins courantes qui dépendent de l'élément ou de la sélection sous le curseur.
Ne l'utilisez pas lorsque
Ne faites jamais d'un menu contextuel le seul chemin vers une commande importante. Éloignez les commandes de l'application des actions pour un seul élément.
Nom utilisé dans le code
AppKit NSMenu / SwiftUI contextMenu
Ouvrir le guide complet
Dropdown & Context Menu — Learning Bundle

Menu déroulant & Menu contextuel — Pack d'apprentissage

↗

Ce module d'apprentissage compare les menus selon la façon dont ils s'ouvrent. Un menu déroulant s'ouvre depuis un contrôle. Un menu contextuel appartient à un objet et s'ouvre souvent à l'emplacement du pointeur. Le module n'est pas un terme unique de menu.

Menu déroulant & Menu contextuel — Pack d'apprentissageDropdownMenu / ContextMenu
Le bouton Plus ouvre des actions générales. Un clic droit sur un fichier ouvre des actions uniquement pour ce fichier.
Utilisez-le lorsque
Choisissez un menu dont le déclencheur et l'objet correspondent à la tâche. Ensuite, construisez le comportement de son clavier.
Ne l'utilisez pas lorsque
Ne mettez jamais de champs de formulaire ou la navigation principale du site dans un menu de commandes.
Nom utilisé dans le code
DropdownMenu / ContextMenu
Ouvrir le guide complet
02

Comparaison rapide

Modèle UIMeilleur pourPas pourNom utilisé dans le code
macOS Context MenumacOS Context Menu Utilisez-le pour un petit ensemble d'actions moins courantes qui dépendent de l'élément ou de la sélection sous le curseur. Ne faites jamais d'un menu contextuel le seul chemin vers une commande importante. Éloignez les commandes de l'application des actions pour un seul élément. AppKit NSMenu / SwiftUI contextMenu
Menu déroulant & Menu contextuel — Pack d'apprentissageDropdown & Context Menu — Learning Bundle Choisissez un menu dont le déclencheur et l'objet correspondent à la tâche. Ensuite, construisez le comportement de son clavier. Ne mettez jamais de champs de formulaire ou la navigation principale du site dans un menu de commandes. DropdownMenu / ContextMenu
03

Avant d'expédier

  1. 01

    Écrivez ce que la personne doit faire.

  2. 02

    Tester le clavier, la mise au point, le toucher, le zoom, le chargement, les états vides et d'erreur.

  3. 03

    Assurez-vous que les gens peuvent obtenir les mêmes informations sans survol ni mouvement.

  4. 04

    Tester avec du contenu réel sur les petits et grands écrans.

04

Demande de comparaison que vous pouvez copier

Copiez ceci lorsque votre équipe a besoin d'aide pour choisir entre les modèles.

Choisissez le meilleur modèle parmi macOS Context Menu (macOS Context Menu), Menu déroulant & Menu contextuel — Pack d'apprentissage (Dropdown & Context Menu — Learning Bundle) pour notre flux utilisateur réel. Utilisez cette règle : Un menu contextuel affiche les actions pour l'élément sur lequel tu cliques ou appuies. Une liste déroulante s'ouvre depuis un bouton visible avec un but précis. Notez la tâche, la quantité de contenu et le coût d'arrêt du flux. Vérifiez le clavier, le toucher, le chargement, l'erreur et le comportement à mouvement réduit. Expliquez votre choix, puis construisez la plus petite version accessible avec le système de conception du projet.

Copiez-le vous-même

Le navigateur n'a pas pu copier ceci. Sélectionnez la requête ci-dessous et copiez-la vous-même.