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

Positionnement des contrôles dans le corps d'une fenêtre.




Ce que dit Apple :

Bien qu'il y ait de multiples façons d'organiser des contrôles dans une fenêtre, il y a des règles que vous devez suivre pour que votre application ait une aspect Aqua propre et équilibré. Cette section propose des exemples de fenêtres et d'alertes correctement conçues qui utilisent des contrôles de taille normale. Voyez plus loin pour des contrôles réduits ou mini. Bien que certaines règles présentées ici soient propres aux exemples fournis, la plupart sont applicables à toutes les fenêtres.

Une fenêtre de Préférences

figure

Fig. 1 : L'exemple d'une fenêtre de préférences

La figure 1 vous montre une fenêtre de préférences simple. Notez qu'une application avec des préférences plus étendues devrait plutôt utiliser une barre d'outils dans la fenêtre des préférences pour fournir un accès à des catégories différentes de préférences, comme sur la figure 2

figure

Fig. 2 : Fenêtre de préférences avec une barre d'outils.

La fenêtre de la figure 1 donne un bon exemple d'une disposition centrée. Une disposition centrée représente un équilibre visuel entre les bords gauche et droit de la fenêtre. Cela ne veut pas dire justification centrée, dans laquelle les lignes seraient disposées également de part et d'autre d'une verticale imaginaire au centre, avec le même nombre de caractères de part et d'autre.

Sous Mac OS X, le contenu doit toujours avoir une disposition centrée dans les fenêtres et les alertes. La ligne verticale de la figure 3 met ce centrage en évidence. Notez que la partie droite a plus de caractères, mais que c'est équilibré par les étiquettes des catégories à gauche. Le résultat d'ensemble est une fenêtre visuellement équilibrée.

figure

Fig. 3 : Exemple d'une fenêtre de préférences centrée

Quand des étiquettes et des contrôles sont regroupés, ils doivent s'aligner verticalement les uns les autres. Quand les contrôles sont alignés verticalement, il est plus facile aux utilisateurs d'en prendre une vue d'ensemble, et de voir qu'un contrôle ne dépend pas d'un autre. Bien sûr, s'il y a une hiérarchie de contrôles et qu'un contrôle dépend d'un autre, vous pouvez indenter les contrôles dépendants comme sur la figure 4.

figure

Fig. 4 : Indentation possible des contrôles

La figure 5 montre un alignement vertical des contrôles et des étiquettes dans la fenêtre. Notez que les deux points des étiquettes des catégories sont alignés verticalement et justifiés à droite, et que les cases à cocher et les boutons radio sont justifiés à gauche. La justification à droite des étiquettes rend plus facile la compréhension des relations entre chaque étiquette et les contrôles qu'elle décrit.

figure

Fig. 5 : Justification à droite des étiquettes, à gauche des contrôles.

En plus du centrage, et d'un alignement approprié, il faut aussi assurer un espacement convenable dans votre fenêtre. Un espacement convenable rend une fenêtre attractive et bien conçue, mais permet aussi aux utilisateur de mieux la comprendre et de mieux l'utiliser. Si les bordures dans la fenêtre et les espaces entre les éléments de l'interface utilisateur sont convenables et cohérents, cela contribue à montrer les relations entre des groupes de contrôle, et l'organisation d'ensemble de la fenêtre. Voyez l'utilisation des espaces pour des exemples.

La fenêtre de préférences utilisée comme exemple utilise des blancs de façon consistante. Par exemple, dans la figure 6, vous pouvez voir :
• le même espace (12 pixels) en dessus et en dessous de chaque séparateur horizontal
• des marges égales (20 pixels) des deux côtés et à la base de la fenêtre
• un espace semblable (8 pixels) entre les différents contrôles de la fenêtre

figure

Fig. 6 : Exemple de disposition des espaces dans une fenêtre de préférences.

Pour l'espacement recommandé entre les différents membres d'un ensemble de contrôles comme entre des boutons radio dans un groupe de boutons radio, voyez la section qui décrit chaque contrôle.

En plus, dans la figure 6, une marge de 14 pixels a été réservée entre le haut des contrôles et la base de la barre de titre (ce serait la même chose s'il y avait une barre d'outils). Et les contrôles en bas de la fenêtre sont séparés du bouton d'aide par un espace de 18 Pixels (au moins 16 pixels recommandés).


Mes commentaires :

Tout est réglé au pixel prêt, bien qu'Apple s'en défende un peu. On ne s'en plaindra pas quand on est confronté avec les approximations et les dérives du dernier QuickTime Player ou de Snow Léopard !