-
Découvrez le nouveau design des icônes d’app
Obtenez un aperçu des nouvelles apparences des icônes d'app pour iOS, iPadOS et macOS, y compris des teintes claires et foncées, ainsi que des options de transparence. Apprenez à utiliser le givre et la translucidité pour rendre l'icône de votre app plus éclatante, dynamique et expressive, et découvrez comment garantir son bon rendu avec des reflets spéculaires.
Chapitres
- 0:00 - Introduction
- 0:53 - Aperçu
- 2:20 - Système de conception
- 5:18 - Icônes de dessin
Ressources
Vidéos connexes
WWDC25
-
Rechercher dans cette vidéo…
-
-
- 0:00 - Introduction
Découvrez le nouveau design des icônes d’apps, avec des détails sur la vision créative, les nouveaux modes d’affichage et le système de conception sous-jacent.
- 0:53 - Aperçu
Cette refonte s’est inspirée des icônes superposées de visionOS et des propriétés du verre. Le matériau superpose des éléments tels que des reflets sur les bords, un aspect givré et une translucidité pour ajouter de la profondeur, donner l’impression que l’écran est éclairé de l’intérieur et refléter les mouvements en fonction des données fournies par le gyroscope. Le nouveau traitement des matériaux est magnifique en mode clair et sombre, et de nouveaux modes d’affichage translucide sont disponibles, notamment le verre monochrome clair et sombre, ainsi que deux modèles teintés (une teinte sombre qui ajoute de la couleur au premier plan et une teinte claire qui infuse de la couleur dans le verre). Tous les modes d’apparence sont disponibles sur iPhone, iPad et Mac. Sur Apple Watch, les icônes des apps en mode clair ont été mises à jour.
- 2:20 - Système de conception
Le nouveau langage iconographique unifié fonctionne sur tous les appareils Apple, avec une grille de conception simplifiée pour les formats rectangulaires arrondis et circulaires. La nouvelle grille d’icônes offre plus d’espace et permet de créer des illustrations visuellement équilibrées pour toutes sortes de proportions. Les icônes macOS sont désormais masquées ou ajustées pour s’adapter au nouveau modèle rectangulaire arrondi, ce qui leur confère un aspect moderne. Les icônes watchOS disposent d’une grille circulaire mise à jour qui s’aligne étroitement à la grille rectangulaire arrondie mise à jour. Des modèles mis à jour sont disponibles pour le nouveau système de conception, pour Figma, Sketch, Photoshop et Illustrator.
- 5:18 - Icônes de dessin
Le nouveau langage visuel des icônes d’apps met l’accent sur l’utilisation efficace des calques, de la translucidité et des flous. La superposition est essentielle pour créer des designs en relief. Même les icônes simples avec un seul calque au premier plan bénéficient d’effets matériels, tels que la translucidité et les ombres, qui leur confèrent profondeur et réalisme. Cependant, vous devez trouver un juste équilibre ; les objets 3D réalistes peuvent entrer en concurrence avec les qualités matérielles, c’est pourquoi une vue plus plate et frontale est souvent préférable. La translucidité et le flou sont désormais plus faciles à utiliser pour ajouter des nuances, de la légèreté et de la profondeur aux designs. Ils s’adaptent parfaitement aux modes clair et sombre, et deviennent élégamment transparents pour laisser entrevoir le fond d’écran. Évitez les angles vifs et les lignes fines, et privilégiez plutôt les coins arrondis et les lignes plus épaisses. Les dégradés clairs à foncés plus doux s’harmonisent mieux avec les nouveaux effets de lumière, et les dégradés pour les modes Clair et Sombre garantissent un contraste optimal. Nous vous recommandons d’utiliser davantage les arrière-plans colorés pour les icônes d’app en mode clair (ou par défaut) afin de mieux distinguer les modes.