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

Les icônes (3) : Icônes des barres d'outils




Ce que dit Apple :

Le but essentiel d'un ensemble d'icônes dans la barre d'outils est de fournir aux utilisateurs un accès facile aux commandes utilisées fréquemment. Pour représenter ces commandes dans une barre d'outils, vous avez besoin d'icônes ou d'images petites, claires, que les utilisateurs puissent facilement reconnaître et mémoriser. Pour s'adapter à des styles d'applications et à des présentations différentes, Mac OS X présente quelques styles différenciés d'items. Selon l'aspect général de votre application, vous pouvez :

• Concevoir des icônes qui se comportent comme des boutons.

titre

Fig. 1 : Icônes personnalisées et standard dans la barre d'outils.

• Créer des icônes simplifiées pour les mettre dans des contrôles en forme de capsule.

titre

Fig. 2 : Icônes personnalisées dans des capsules.

• Définir des icônes alignés pour les grouper dans des contrôles rectangulaires.

titre

Fig. 3 : Images standard dans des contrôles rectangulaires, et icônes standards de boîte d'outils.

• Utiliser les images fournies par le système dans des contrôles rectangulaires ou en capsule. Comme vous n'avez pas besoin de créer ces images, cette section ne les aborde pas.

Une barre d'outils peut aussi comprendre des icônes qui représentent des éléments reconnaissables de l'interface, situés ailleurs dans le système (comme l'icône du panneau des couleurs, ou celle de iDisk). Si vous choisissez d'inclure une icône comme celle du panneau de couleurs, conservez sa signification : les utilisateurs connaissent ces icônes dans chaque contexte, et vous ne devez pas les détourner de leur signification. Par exemple, la barre d'outils de Numbers (figure 1) contient (à droite) les icônes du panneau de couleurs et de la fenêtre des polices auxquelles les utilisateurs peuvent s'attendre.

Important : N'utilisez pas d'icônes du système, comme l'icône d'attention en jaune, dans votre barre d'outils. Une icône système fournit une information importante dans un contexte particulier, comme une fenêtre d'alerte ; l'utiliser dans une barre d'outils la rendrait moins claire et en atténuerait l'efficacité dans le système.

Quelque soit le style d'icône de la barre d'outils que vous décidez d'adopter, assurez-vous que chaque item représente un objet unique, ou une action qui est directement associée à la commande représentée. Les meilleures icônes utilisent des métaphores visuelles familières facilement reconnaissables par les utilisateurs.

En règle générale, une icône de barre d'outils qui décrit un objet identifiable du monde réel, ou un élément reconnaissable de l'interface utilisateur, fournit aux utilisateurs débutants une information sur sa fonction, et aide les utilisateurs expérimentés à s'en souvenir. Autant que possible, il faut donc identifier les éléments du modèle mental de l'utilisateur qui se prêtent facilement à une représentation visuelle. Par exemple, la barre d'outils de iTunes (figure 4) affiche les contrôles de rebobinage (avant et arrière) et de lecture, qui ressemblent à ceux qu'on utilise dans des appareils physiques, comme l'iPod.

figure

Fig. 4 : Quand c'est possible, utilisez des symboles familiers pour les items de la barre d'outils.

Bien différencier les icônes de la barre d'outils aide l'utilisateur à les associer à leur fonction, et à les retrouver rapidement. Des variations de forme, e couleur, d'images, facilitent la différenciation. En même temps, les icônes doivent s'harmoniser entre elles autant que possible par la taille, la couleur, le poids visuel et leur présentation. Cela demeure vrai, que l'icône soit isolée ou regroupée au sein d'un contrôle en capsule. Dans la figure 5, des icônes intégrées à des contrôles en capsule dans l'application Mail sont facilement reconnaissables, bien que cohérentes en taille, par l'usage de la couleur ou par leur poids visuel.

titre

Fig. 5 : les images dans des contrôles en capsule doivent être équilibrées et coordonnées.

La façon dont vous concevez les icônes pour représenter des actions et des objets dépend de votre choix pour des icônes isolées ou pour des icônes regroupées en capsules ou en zones rectangulaires. Voici quelques règles à suivre dans chaque situation :


1- Conception d'icônes pour boutons en icônes.

Bien que les icônes des barres d'outils conservent l'état réel de l'écran (une taille de 32 x 32 pixels est recommandée), elles doivent être attrayantes et facile à identifier. La perspective de la barre d'outils est directe, comme si les icônes reposaient sur une étagère en face de vous.

Bien que cette perspective soit directe, si vous utilisez une icône venant d'ailleurs dans l'interface (comme l'icône iDisk), celle-ci doit conserver son aspect et sa perspective. Ne re-dessinez pas pour la barre d'outils une icône qui est un élément bien connu de l'interface. Vous pouvez utiliser une image fournie par la système pour représenter un élément de l'interface standard.

titre

Fig. 6 : les icônes encerclées apparaissent ailleurs dans l'interface, et elles retiennent leur perspective quand elles sont intégrées à une barre d'outils.




2- Icônes pour les contrôles en capsule.

Les icônes qui s'intègrent bien dans des contrôles en capsule sont des images simples, colorées, avec peu de détails. En les dessinant, conservez les points suivants à l'esprit :
• N'incluez que les détails nécessaires pour représenter l'objet sans ambiguité.
• Utilisez une perspective directe et un ombrage minimal.
• Fournissez assez de contraste pour que l'image se distingue du fond du contrôle.
• Utilisez des couleurs brillantes et claires.
• Assurez-vous que l'image est bien centrée dans le contrôle (notez qu'un centrage visuel peut être différent d'un centrage mathématique).


3- Icônes pour les contrôles rectangulaires.

Les icônes qui s'harmonisent avec des contrôles rectangulaires sont des images régulière et noires dont la signification vient de la bordure et du contour, pas des détails internes. Comme vos icônes doivent respecter l'aspect des images existantes de Mac OS X, dans des contrôles rectangulaires, utilisez les modèles fournis par le système pour vous guider. En concevant une icône pour un contrôle rectangulaire, pensez à ceci :
• Dessinez un contour clair et net.
• Utilisez une perspective directe.
• Utilisez du noir, et quelques nuances de gris pour suggérer le relief.
• Appliquez l'anticrénelage.
• Assurez-vous que l'image est bien centrée dans le contrôle (notez qu'un centrage visuel peut être différent d'un centrage mathématique).

Les icônes pour les contrôles rectangulaires ne doivent pas mesurer plus de 19 x 19 pixels.


Mes commentaires :

Il me faut encore protester contre ces icônes en capsule qui prennent une place idiote et disproportionnée. Certes, le développeur peut les éviter, mais dans des applications essentielles (Mail, Aperçu), Apple nous en a affligés sans nous demander notre avis, et c'est tout à fait désolant !