1. Mode Graphique
    1. 1- Principes fondamentaux
      1. Processus de conception
      2. Caractéristiques d'un grand logiciel
        1. Haute performance
        2. Facilité d'utilisation
        3. Aspect attractif
        4. Fiabilité
        5. Adaptabilité
        6. Interoperabilité
        7. Mobilité
      3. Principes de conception
        1. Principes (1)
        2. Principes (2)
        3. Principes (3)
      4. Pensez aux utilisateurs
        1. Compatibilité internationale
        2. Accessibilité aux handicapés
        3. Etendre l'interface
      5. Priorités
    2. 2- L'expérience du Mac
      1. L'environnement
        1. L'environnement (1)
        2. L'environnement (2)
      2. Les technologies
        1. Les technologies (1)
        2. Les technologies (2)
        3. Les technologies (3)
        4. Les technologies (4)
      3. Installation et mises à jour
        1. Packaging, installation
        2. Les assistants
    3. 3- L'interface Aqua
      1. Entrées utilisateur
        1. La souris
        2. le clavier
          1. Fonction des touches
          2. Raccourcis-clavier
          3. Navigation au clavier
        3. Sélection
        4. Edition de texte
      2. Glisser-déposer
        1. Glisser-Déposer (1)
        2. Glisser-Déposer (2)
      3. Le texte
        1. Les fontes
        2. Le style
      4. Les icônes
        1. Genres et familles d'icônes
        2. Création des icônes
        3. Icônes des barres d'outils
        4. Images propres au système
      5. Les pointeurs
      6. Les menus
        1. Comportement des menus
        2. Conception des menus
        3. La barre de menus
          1. Les menus (1)
          2. Les menus (2)
          3. Les menus (3)
        4. Menus contextuels et du Dock
      7. Les fenêtres
        1. Type et apparence
        2. Eléments
          1. Barre de titre
          2. Barre d'outils
          3. Barre de recherche
          4. Barre latérale
          5. Barre inférieure
          6. Les Tiroirs
        3. Comportement des fenêtres
          1. Comportement (1)
          2. Comportement (2)
          3. Superposition
          4. Défilement
        4. Les panneaux
          1. Les panneaux
          2. Panneaux transparents
          3. Autres panneaux
      8. Les dialogues
        1. Types de dialogues
        2. Aspect et comportement
      9. Fenêtres de dialogues
        1. Recherche, Préférences, Ouverture
        2. Enregistrement
        3. Choix, Impression
      10. Les contrôles
        1. Contrôles du cadre
          1. Contrôles en capsule
          2. Contrôles hérités
        2. Les boutons
          1. Boutons poussoirs
          2. Boutons en icônes
          3. Boutons de recherche
          4. Boutons de gradient, et d'aide
          5. Boutons à champfrein
          6. Boutons ronds
        3. Contrôles de sélection
          1. Boutons radio
          2. Cases à cocher
          3. Contrôles segmentés
          4. Boutons et menus pop-Up
          5. Menus Action
          6. Boîtes de combinaison
          7. Contrôles de chemin
          8. Puits, sélection de date
          9. Menus pop-down
          10. Glissières
          11. Contrôles pas-à-pas et placards
        4. Indicateurs
          1. Indicateurs de progression
          2. De niveau, de capacité
          3. D'estimation, de pertinence
        5. Contrôles de texte
          1. Champs d'entrée
          2. Champs à jeton
          3. Champs de recherche
          4. Listes de défilement
        6. Contrôles de visualisation
          1. Triangles d'affichage
          2. Boutons d'affichage
          3. Vues en liste
          4. Vues en colonnes
          5. Vues éclatées
          6. Vues à onglets
        7. Contrôles de groupage
          1. Séparateurs
          2. Boîtes de groupage
        8. Règles de disposition
          1. Dans le corps de la fenêtre
            1. Fenêtre de préférences
            2. Fenêtre à onglets
            3. Alerte, Dialogue
          2. Contrôles réduits et mini
            1. Contrôles réduits
            2. Mini contrôles
          3. Groupement des contrôles
          4. Positionnement dans la barre inférieure
      11. Glossaire
        1. Entrées en anglais
          1. 1- A à C
          2. 2- D à H
          3. 3- I à R
          4. 4- S à Z
        2. Entrées en français
          1. 1- A à C
          2. 2- C à G
          3. 3- I à P
          4. 4- P à Z
        3. `
    4. 4- Les leçons de Lion
      1. L'environnement de Mac OS X
      2. Principes fondamentaux
      3. L'expérience utilisateur
        1. Règles de conduite (1)
        2. Règles de conduite (2)
        3. Règles de conduite (3)
        4. Règles de conduite (4)
        5. Règles de conduite (5)
        6. Règles de conduite (6)
      4. Les technologies d'Apple
        1. Les technologies (1)
      5. -->
  2. Mode Commande

Boutons et menus pop-up.




Ce que dit Apple :

Boutons avec menus pop-up.

Un bouton à chanfrein ou un bouton en icône qui contiennent un menu pop-up ont un triangle avec la pointe en bas. Le bouton peut se comporter comme un menu pop-up standard, dans lequel l'image sur le bouton est la sélection courante, ou il peut représenter le titre du menu, et affiche alors toujours la même image.

Important : un bouton en icône avec un menu pop-up est l'un des trois contrôles du corps de la fenêtre qui peut aussi être utilisé dans le cadre de celle-ci.

Un bouton en icône ou à chanfrein avec un menu pop-up est facile à créer sous Interface Builder. D'abord, glissez un bouton pop-up (un objet NSPopUpButton object) dans votre fenêtre; Sélectionnez le bouton, et dans la vitre Attributs de l'Inspecteur, changez son type en Pull Down. Finalement, pour un bouton à cons arrondis ou un bouton carré à chanfrein, changez le style respectivement en Square ou Shadowless Square. Pour un bouton à icône, peu importe le style que vous choisissez, mais vous devez décocher la case à cocher Bordered. Re-dimensionnez le bouton selon vos besoins.

Voyez les boutons à chanfrein et les boutons en icônes pour les spécifications des boutons, et la figure 1 pour des exemples de ces types de boutons avec des menus pop-up.

figure

Fig. 1 : boutons à chanfrein et boutons en icônes avec menus pop-up

Les menus pop-up.

Un menu pop-up présente une liste de choix mutuellement exclusifs dans un dialogue ou une fenêtre. Le menu pop-up décrit ici peut être utilisé dans le corps de la fenêtre. Si vous avez besoin de fournir une fonctionnalité de menu pop-up dans le cadre de la fenêtre, (barre d'outils ou barre inférieure), voyez les contrôles du cadre pour ceux que vous pouvez utiliser. Si vous voulez rajouter une fonctionnalité de menu pop-up à un bouton à chanfrein ou en icône, voyez le début de cette page.

figure

Fig. 2 : les menus pop-up (encadrés en rouge) fournissent une fonctionnalité de menu (voir à gauche) dans un contrôle.

Un menu pop-up se comporte comme les autres menus : les utilisateurs appuient dessus pour ouvrir le menu, puis se déplacent pour choisir un item. L'item choisi s'éclaire et est affiché dans le menu. Si l'utilisateur déplace le pointeur en dehors du menu pop-up sans relâcher le bouton de la souris, la valeur courante reste active. Une pression exploratoire dans le menu pour voir ce qui est disponible ne sélectionne pas de valeur nouvelle.

Utilisation du menu pop-up.

Vous pouvez utiliser un menu pop-up pour proposer jusqu'à douze choix à l'utilisateur, quand il n'est pas nécessaire qu'ils les voie en permanence. Parfois, un menu pop-up peut être une bonne alternative à d'autres types de contrôles de sélection. Par exemple, si vous avez un dialogue, qui contient un ensemble de six boutons radio ou plus, vous pouvez envisager de les remplacer par un menu pop-up pour gagner de la place.

Evitez de rajouter des sous-menus à un item de menu pop-up car cela cache les choix possibles et rend leur accès plus difficile.

Evitez aussi d'utiliser les menus pop-up :
• pour plus de 12 items ; utilisez alors une liste défilante, à moins que l'espace ne soit restreint.
• quand le nombre d'items dans la liste peut changer.
• quand plus d'une sélection est possible, comme dans une liste de styles de texte (on peut choisir à la fois gras et italique). Dans ces cas là, utilisez des cases à cocher ou des menus défilants (pull down menus) dans laquelle apparaît une case à cocher.

Contenu et étiquetage du menu pop-up.

Un menu pop-up :
• a normalement une étiquette à gauche (dans les systèmes d'écriture de gauche à droite). L'étiquette doit être une phrase capitalisée. La seule exception est quand le contrôle est utilisé comme titre pour une boîte de groupage, ce qui n'est pas fréquent.
• a un double triangle.
• contient des noms (des choses) et des adjectifs (états ou attributs), mais pas de verbes (commandes). Si vous devez afficher des commandes utilisez un menu défilant. Capitalisez les étiquettes des items.
• affiche une coche à gauche de la valeur actuellement sélectionnée quand il est ouvert (figure 3).

figure

Fig. 3 : Un menu pop-op ouvert

Dans des cas particuliers, vous pouvez inclure une commande qui affecte le contenu du menu pop-up. Par exemple, dans le dialogue d'impression, le menu pop-up Imprimante contient un item "Ajouter une imprimante...". La nouvelle imprimante devient la sélection par défaut du menu. Mettez des commandes de ce genre en bas du menu pop-up, sous un séparateur.

Spécifications du menu pop-up.

Taille du contrôle : La hauteur du menu pop-up est fixée pour chaque taille. La largeur doit être suffisante pour recevoir l'item le plus long. Si vous affichez de multiples menus pop-up dans une pile, la largeur de chaque contrôle doit être la même.

Police et espacement des étiquettes : le texte d'un item de menu dans un menu pop-up doit être dans une fonte proportionnelle à la taille du contrôle. Le texte de l'étiquette d'introduction doit être une version mise en valeur de la même fonte. Utilisez les règles suivantes :

figure

Fig. 4 : menu pop-up avec étiquette introductive et item de menu sous forme de texte.

Taille normale :
- texte d'un item de menu : fonte système ; laissez 9 pixels depuis la marge gauche du contrôle, et au moins 9 pixels jusqu'au double triangle.
- texte d'introduction : fonte système mise en valeur (en gras). Laissez 8 pixels entre la fin du texte (les deux points), et la bordure gauche du contrôle.

Taille réduite :
- texte d'un item de menu : fonte système réduite ; laissez 7 pixels depuis la marge gauche du contrôle, et au moins 7 pixels jusqu'au double triangle.
- texte d'introduction : fonte système réduite mise en valeur (en gras). Laissez 6 pixels entre la fin du texte (les deux points), et la bordure gauche du contrôle.

Taille mini :
- texte d'un item de menu : fonte système mini ; laissez 5 pixels depuis la marge gauche du contrôle, et au moins 5 pixels jusqu'au double triangle.
- texte d'introduction : fonte système réduite mise en valeur (en gras). Laissez 5 pixels entre la fin du texte (les deux points), et la bordure gauche du contrôle.

Espacement des contrôles.

figure

Fig. 5 : Menus pop-up empilés verticalement

Si vous affichez de multiples menus pop-up empilés verticalement, laissez entre eux les espaces suivants :
• taille normale : au moins 10 pixels entre les contrôles
• taille réduite : au moins 8 pixels
• taille mini : au moins 6 pixels.

Implémentation des menus pop-up.

Les menus pop-up sont disponibles sous Interface Builder. Pour utiliser les interfaces de programmation de l'Application Kit, utilisez la classe NSPopUpButton.


Mes commentaires :

Distinguer les menus pop-up (deux triangles tête bèche), et les boutons avec menu pop-down (un seul triangle tête en bas).

Les boutons avec menu pop-up sont largement utilisés dans les applications d'iWork, comme le montre la figure 6. Les menus pop-up eux-mêmes peuvent être très variés.

figure

Fig. Exemples de boutons avec menu pop Up dans Page.