Recommandations relatives aux icônes de style frais pour les compléments Office
Perpétuel Office 2016 et versions ultérieures utilisent l’iconographie de style Fresh de Microsoft. Si vous préférez que vos icônes correspondent au style monoligne de Microsoft 365, consultez instructions relatives aux icônes de style monoligne pour les compléments Office.
Style visuel Office Fresh
Les icônes Fresh incluent uniquement les éléments de communication essentiels. Les éléments non essentiels, tels que la source de lumière, les dégradés et les perspectives, sont supprimés. Les icônes simplifiées prennent en charge l’analyse rapide des commandes et des contrôles. Suivez ce style pour s’adapter au mieux aux clients perpétuels Office.
Meilleures pratiques
Suivez ces instructions lorsque vous créez vos icônes.
| À faire | À ne pas faire |
|---|---|
| Gardez les visuels simples et clairs, en se concentrant sur les éléments clés de la communication. | N’utilisez pas d’artefacts qui rendent votre icône désordonnée. |
| Utilisez le langage d’icône Office pour représenter des comportements ou des concepts. | Ne réaffectez pas les glyphes Fabric Core pour les commandes de complément dans le ruban de l’application Office ou les menus contextuels. Les icônes Fabric Core sont stylistiquement différentes et ne correspondent pas. |
| Réutilisez les métaphores visuelles d’Office courantes telles que le pinceau pour mettre en forme ou la loupe pour rechercher. | Ne réutilisez pas les métaphores visuelles pour différentes commandes. L’utilisation de la même icône pour différents comportements et concepts peut semer la confusion. |
| Redessinez vos icônes pour les réduire ou les agrandir. Prenez le temps de redessiner les découpages, les coins et des bords arrondis pour optimiser la netteté de ligne. | Ne redimensionnez pas vos icônes en réduisant ou en agrandissant leurs tailles. Cela peut entraîner une mauvaise qualité visuelle et des actions peu claires. Les icônes complexes créées dans une plus grande taille risquent de perdre en clarté si elles sont redimensionnées pour être réduites sans être redessinées. |
| Utilisez un remplissage blanc pour améliorer l’accessibilité. La plupart des objets dans les icônes nécessitent un arrière-plan blanc pour être lisibles sur les thèmes de l’interface utilisateur d’Office et en mode contraste élevé. | Évitez de vous fier à votre logo ou marque pour communiquer ce que fait une commande de complément. Les repères de marque ne sont pas toujours reconnaissables sur des icônes de petites tailles et lorsque des modificateurs sont appliqués. Les marques de marque sont souvent en conflit avec les styles d’icônes de ruban de l’application Office et peuvent attirer l’attention des utilisateurs dans un environnement saturé. |
| Utilisez le format PNG avec un arrière-plan transparent. | Aucune |
| Évitez le contenu localisable dans les icônes, y compris les caractères typographiques, les paragraphes en drapeau et les points d’interrogation. | Aucune |
Configuration requise et recommandations sur la taille des icônes
Les icônes du bureau Office sont des images bitmap. Différentes tailles apparaissent en fonction du paramètre PPP de l’utilisateur et du mode tactile. Incluez les huit tailles prises en charge pour créer la meilleure expérience possible dans tous les contextes et résolutions pris en charge. Voici les tailles prises en charge : trois sont requises.
- 16 px (obligatoire)
- 20 px
- 24 px
- 32 px (obligatoire)
- 40 px
- 48 px
- 64 px (recommandé, meilleur choix pour Mac)
- 80 px (obligatoire)
Importante
Pour obtenir une image représentant l’icône représentant votre complément, consultez Créer des listes effectives dans AppSource et dans Office pour connaître la taille et d’autres exigences.
Veillez à renouveler les icônes pour chaque taille au lieu de les réduire pour les ajuster.
Mise en page et structure de l’icône
Les icônes Office sont généralement composées d’un élément de base avec des modificateurs d’action et conceptuels superposés. Les modificateurs d’action représentent des concepts tels qu’ajouter, ouvrir, nouveau ou fermer. Les modificateurs conceptuels représentent l’état, l’altération ou une description de l’icône.
Pour créer des commandes qui s’alignent sur l’interface utilisateur d’Office, suivez les instructions de mise en forme pour les éléments de base et les modificateurs. Cela garantit que vos commandes auront un aspect professionnel et que vos clients auront confiance en votre complément. Si vous apportez des exceptions à ces instructions, faites-le intentionnellement.
L’image suivante montre la disposition des éléments de base et modificateurs dans une icône Office.
- Éléments de base centraux dans le cadre de pixel avec remplissage vide tout autour.
- Placez les modificateurs d’action dans le coin supérieur gauche.
- Placez les modificateurs conceptuels dans la partie inférieure droite.
- Limitez le nombre d’éléments dans les icônes. À 32 px, limitez le nombre de modificateurs à un maximum de deux. À 16 px, limitez le nombre de modificateurs à un.
Remplissage d’un élément de base
Placez les éléments de base de façon cohérente en fonction des tailles. Si les éléments de base ne peuvent pas être centrés dans le cadre, alignez-les en haut à gauche, en laissant les pixels supplémentaires dans la partie inférieure droite. Pour de meilleurs résultats, appliquez les instructions de remplissage répertoriées dans le tableau de la section suivante.
Modificateurs
Tous les modificateurs doivent avoir un découpage transparent de 1 px entre chaque élément, y compris l’arrière-plan. Les éléments ne doivent pas se chevaucher directement. Créez des espaces entre les règles et les bords. Les modificateurs peuvent varier légèrement en taille, mais utilisez ces dimensions comme point de départ.
| Taille de l’icône | Remplissage autour de l’élément de base | Taille du modificateur |
|---|---|---|
| 16 px | 0 | 9 px |
| 20 px | 1px | 10 px |
| 24 px | 1px | 12 px |
| 32 px | 2px | 14 px |
| 40 px | 2px | 20 px |
| 48 px | 3px | 22 px |
| 64 px | 5px | 29 px |
| 80 px | 5px | 38 px |
Couleurs de l’icône
Remarque
Les couleurs recommandées concernent les icônes du ruban utilisées dans les Commandes de complément. Ces icônes ne sont pas rendues avec l’interface utilisateur Fluent et la palette de couleurs est différente de celle décrite dans Microsoft UI Fabric | Couleurs | Partagé.
Les icônes Office ont une palette de couleurs limitée. Utilisez les couleurs répertoriées dans le tableau suivant pour garantir une intégration parfaite avec l’interface utilisateur d’Office. Appliquez les instructions suivantes à l’utilisation de la couleur.
- Utilisez la couleur pour véhiculer une signification plutôt que pour embellir. Elle doit mettre en surbrillance ou mettre en évidence une action, un état ou un élément qui différencie explicitement le repère.
- Si possible, n’utilisez qu’une seule couleur supplémentaire au-delà du gris. Limitez les couleurs supplémentaires à deux au maximum.
- Les couleurs ont une apparence cohérente dans toutes les tailles d’icône. Les icônes Office ont des palettes de couleurs légèrement différentes pour des tailles d’icônes différentes. Les icônes de 16 px et plus petites sont légèrement plus sombres et plus vibrantes que les icônes 32 px et plus grandes. Sans ces ajustements discrets, les couleurs semblent varier en taille.
| Nom de la couleur | RVB | Hex | Couleur | Catégorie |
|---|---|---|---|---|
| Texte gris (80) | 80, 80, 80 | #505050 |
|
Texte |
| Texte gris (95) | 95, 95, 95 | #5F5F5F |
|
Texte |
| Texte gris (105) | 105, 105, 105 | #696969 |
|
Texte |
| Gris foncé 32 | 128, 128, 128 | #808080 |
|
32 px et plus |
| Gris moyen 32 | 158, 158, 158 | #9E9E9E |
|
32 px et plus |
| TOUT gris clair | 179, 179, 179 | #B3B3B3 |
|
Toutes les tailles |
| Gris foncé 16 | 114, 114, 114 | #727272 |
|
16 px et moins |
| Gris moyen 16 | 144, 144, 144 | #909090 |
|
16 et moins |
| Bleu 32 | 77, 130, 184 | #4d82B8 |
|
32 px et plus |
| Bleu 16 | 74, 125, 177 | #4A7DB1 |
|
16 px et moins |
| TOUT jaune | 234, 194, 130 | #EAC282 |
|
Toutes les tailles |
| Orange 32 | 231, 142, 70 | #E78E46 |
|
32 px et plus |
| Orange 16 | 227, 142, 70 | #E3751C |
|
16 px et moins |
| TOUT rose | 230, 132, 151 | #E68497 |
|
Toutes les tailles |
| Vert 32 | 118, 167, 151 | #76A797 |
|
32 px et plus |
| Vert 16 | 104, 164, 144 | #68A490 |
|
16 px et moins |
| Rouge 32 | 216, 99, 68 | #D86344 |
|
32 px et plus |
| Rouge 16 | 214, 85, 50 | #D65532 |
|
16 px et moins |
| Violet 32 | 152, 104, 185 | #9868B9 |
|
32 px et plus |
| Violet 16 | 137, 89, 171 | #8959AB |
|
16 px et moins |
Icônes en modes de contraste élevé
Les icônes Office sont conçues pour un rendu correct en mode de contraste élevé. Les éléments de premier plan sont bien différenciés des arrière-plans pour optimiser la lisibilité et permettre le recoloriage. En modes de contraste élevé, Office recolorie tous les pixels de votre icône avec une valeur rouge, verte ou bleue inférieure à 190 en noir plein. Tous les autres pixels sont blancs. Autrement dit, chaque canal RVB est évalué lorsque les valeurs 0-189 sont noires et les valeurs 190-255 sont blanches. D’autres thèmes à contraste élevé recolorient à l’aide du même seuil de valeur 190 mais avec des règles différentes. Par exemple, le thème blanc à contraste élevé recolorie tous les pixels supérieurs à 190 en opaque, mais tous les autres pixels en transparent. Appliquez les instructions suivantes pour optimiser la lisibilité dans les paramètres à contraste élevé.
- Essayez de différencier les éléments de premier plan et d’arrière-plan par rapport au seuil de valeur 190.
- Suivez les styles visuels des icônes Office.
- Utilisez des couleurs de notre palette d’icônes.
- Évitez d’utiliser des dégradés.
- Évitez les grands blocs de couleur avec des valeurs similaires.