Compétence de Conception d'Icônes d'Applis
Déclencheur
À utiliser pour toute nouvelle icône d'appli, refonte d'icône, critique d'icône ou demande d'export d'icône Apple. Consultez la documentation technique et design actuelle d'Apple lorsqu'une spécification de production est importante.
Processus
- Identifiez le cœur de l'application et son langage de marque. Utilisez une identité déjà établie si elle existe, sinon choisissez une métaphore visuelle distinctive.
- Réduisez la métaphore à un symbole central reconnaissable, avec des formes audacieuses, remplies, simples et une silhouette claire. Évitez les détails minuscules, les textures chargées, les traits fins, les captures d'écran, le texte inutile et le brillant excessif.
- Choisissez une palette délibérée et sobre, avec un contraste net entre l'avant-plan et l'arrière-plan. Centrez l'icône principale optiquement et laissez une large zone de sécurité pour les masques système.
- Concevez pour rester identifiable à petite taille. Prévisualisez en taille réelle, 180 px, 60 px et 30 px (tests de conception, pas des exigences de pixels imposées par Apple).
- Tenez compte des modes par défaut, sombre, clair et teinté. Préservez le concept et la reconnaissance à travers les apparences.
- Examinez la checklist QA ; simplifiez tout élément qui devient du bruit à petite échelle.
- Produisez des ressources de la plus haute qualité dans les formats réellement pris en charge par les outils disponibles. Ne prétendez jamais disposer d'une source/sources modifiables vectorielles ou de variantes si elles n'ont pas été créées.
Recommandations d'Interface Humaine Apple
- Privilégiez la simplicité et la reconnaissance immédiate. Les détails fins peuvent devenir bruyants une fois que le système ajoute des reflets et des ombres.
- Préférez les illustrations aux photos et ne reproduisez pas simplement l'interface utilisateur de l'application.
- Évitez les traits extrêmement fins et les angles vifs si leur détail se perd aux petites tailles.
- Évitez les mots non essentiels, les slogans ou les déclarations spécifiques à une plateforme.
- Ne copiez pas le matériel Apple.
- Utilisez des couches carrées non masquées ; le système applique lui-même les coins arrondis ou les masques circulaires. Ne pas intégrer les coins arrondis dans l'œuvre de base.
- Positionnez le contenu important au centre afin que le masquage système ne le tronque pas.
- Les icônes doivent maintenir une cohérence visuelle sur tous les appareils et toutes les apparences.
Tailles Apple et masques système (vérifié le 2026-10-24)
| Cible | Taille de la zone de travail | Masque système |
|---|---|---|
| iOS, iPadOS, macOS | 1024 × 1024 px | rectangle aux coins arrondis |
| watchOS | 1088 × 1088 px | cercle |
| visionOS | 1024 × 1024 px | cercle |
| tvOS | 800 × 480 px | rectangle aux coins arrondis |
- Utilisez sRGB pour les exports portables ; Display P3 est également pris en charge sur les plateformes Apple comme documenté.
- Pour le flux de travail Apple contemporain, privilégiez les œuvres multicouches et Icon Composer pour prévisualiser les plateformes et les variantes d'apparence (défaut, sombre, clair/sombre, teinté clair/sombre).
- Dessinez l'œuvre sous forme de vecteurs et exportez chaque couche ajustable indépendamment en SVG si possible, en convertissant le texte en contours. Les couches PNG conviennent si les fonctionnalités SVG ne sont pas prises en charge.
- Reportez le flou, les ombres, les effets de spécularité, la translucidité, l'opacité, les dégradés et les effets d'arrière-plan à Icon Composer lors de la préparation d'icônes en verre liquide multicouches.
- L'arrière-plan doit couvrir toute la zone de travail. Pour une icône iOS statique, utilisez par défaut un fond opaque pleine page. Un glyphe isolé transparent est un type de ressource différent, pas une icône complète.
- Le système applique les masques ; n'exportez pas la géométrie du masque sur les couches de l'œuvre.
- Un PNG plat de 1024 px peut être fourni pour les flux de travail d'icônes statiques, mais il n'est pas équivalent à un actif
.iconmulticouche d'Icon Composer.
Checklist QA
- Un concept mémorable, silhouette reconnaissable
- Lisible à petite taille et en niveaux de gris
- Couleurs limitées et contraste fort
- Pas de mots inutiles, texture, détails fins ou captures d'écran
- Centrage optique et espacement des bords de sécurité
- Œuvre source carrée et non masquée, arrière-plan pleine page
- Révisée pour les apparences sombre, teintée et claire
- Taille de plateforme cible, espace colorimétrique et format d'export corrects
- Les affirmations concernant l'édition, les couches et les formats correspondent aux fichiers réels
Application actuelle de l'utilisateur (cerveau/maths) : surcouche optionnelle spécifique à la marque
À utiliser UNIQUEMENT pour ce projet spécifique, pas pour toutes les applications :
- Trois couleurs unies maximum ; palette tirée du bleu cobalt/électrique, violet et magenta-rose (ou bleu marine foncé si approprié).
- Pas de dégradés sauf si l'utilisateur les remplace.
- Silhouette de cerveau abstraite et simplifiée avec quelques lobes audacieux ; pas d'illustration anatomique hyperdétaillée.
- Minimal, reconnaissable et attrayant aux petites tailles d'icônes. La profondeur doit être restreinte et ne pas ajouter plus de couleurs.
- L'arrière-plan de l'icône fait partie de la composition, pas transparent (sauf si une couche de symbole séparée est demandée).
Modèle de bref de génération d'image
'Créez une icône d'application carrée pour [APP], avec un symbole central mémorable [SYMBOLE], composé d'un petit nombre de formes unies à contraste élevé dans [PALETTE], sur un fond opaque pleine page [ARRIÈRE-PLAN]. Centrez par poids visuel, laissez un espace généreux autour des bords extérieurs, évitez les dégradés [si demandé], les lettres, les éléments d'interface et les détails mineurs, forte reconnaissance à très petite taille, pas de masque intégré aux coins arrondis.'
Source de vérité
- HIG Apple pour les icônes d'applications : https://developer.apple.com/design/human-interface-guidelines/app-icons
- Flux de travail Icon Composer d'Apple : https://developer.apple.com/documentation/xcode/creating-your-app-icon-using-icon-composer
- Ressources de design Apple : https://developer.apple.com/design/resources/
- Icon Composer d'Apple : https://developer.apple.com/icon-composer/
Les conseils de conception sont une synthèse ; vérifiez les spécifications actuelles d'Apple avant la publication. Ce document est une compétence portable, et non une preuve qu'elle est enregistrée en tant que compétence système/plugin exécutable.