-
Découvrez le nouveau système de conception
Explorez plus en détail le nouveau design pour découvrir les principaux changements apportés à la conception visuelle, à l'architecture de l'information et aux composants système essentiels. Découvrez comment le système redéfinit la relation entre l'interface et le contenu, ce qui vous permet de créer des designs dynamiques, harmonieux et cohérents sur l'ensemble des appareils, formats d'écran et types d'interaction.
Chapitres
- 0:00 - Intro
- 2:06 - Langage de conception
- 6:16 - Structure
- 13:34 - Continuité
Ressources
- Human Interface Guidelines: Toolbars
- Adopting Liquid Glass
- Human Interface Guidelines: Icons
- Human Interface Guidelines
- Human Interface Guidelines: Materials
Vidéos connexes
WWDC25
-
Rechercher dans cette vidéo…
-
-
- 0:00 - Intro
Le nouveau langage de design d'Apple redéfinit fondamentalement la relation entre interface et contenu, offrant une expérience harmonisée, cohérente et adaptative sur tous les appareils et tailles d'écran Apple.
- 2:06 - Langage de conception
Le système utilise une palette de couleurs raffinée, une typographie en gras alignée à gauche, et la concentricité pour créer un rythme unifié entre matériel et logiciel.
- 6:16 - Structure
Comprendre comment structurer efficacement une app est essentiel lorsqu'on utilise Liquid Glass. Liquid Glass introduit une nouvelle couche fonctionnelle dans l'interface, flottant au-dessus du contenu sans détourner l'attention. Elle y parvient en créant des relations spatiales entre les surfaces, rendant les interactions plus intuitives et ancrées. Les Action Sheets émergent désormais de l'action spécifique à laquelle elles sont liées, plutôt que d'apparaître en bas de l'écran. Cette approche, également appliquée aux contrôles personnalisés, aide le système à comprendre et ancrer les interactions. Supprimez les couleurs de fond des barres d'outils et barres d'onglets personnalisées. Appuyez-vous sur la disposition et le regroupement pour exprimer la hiérarchie plutôt que sur des décorations inutiles. Organisez les éléments de barre de manière logique selon leur fonction et leur fréquence d'utilisation. Utilisez la teinte pour faire ressortir clairement les actions principales. Les barres d'onglets doivent être bien structurées, avec un onglet Recherche dédié désormais inclus dans iOS pour un accès rapide. Liquid Glass fonctionne en tandem avec les effets de bord de défilement, qui remplacent les séparateurs rigides par un flou subtil pour réduire l'encombrement. Les vues de défilement s'étendent désormais sous les barres latérales par défaut, permettant aux carrousels et autres contenus de défiler naturellement. Les effets d'extension d'arrière-plan permettent au contenu de s'étendre derrière les barres latérales, occupant toute la largeur tout en gardant les visuels centrés dans la mise en page. Les effets d'extension d'arrière-plan permettent au contenu de s'étendre derrière la barre latérale, remplissant toute la largeur, tout en gardant les visuels au centre de la disposition. Il est essentiel de s'assurer que le texte et les contrôles sont superposés au-dessus pour éviter toute distorsion.
- 13:34 - Continuité
La continuité est primordiale dans le nouveau système de design, garantissant une expérience fluide sur tous les appareils. Le processus de design est simplifié en créant une seule anatomie d'app, qui s'adapte ensuite à chaque plateforme : La disposition verticale étroite de l'iPhone, l'espace adaptable de l'iPad, et la large surface du Mac. Le contenu partagé et les symboles et libellés textuels cohérents renforcent la familiarité et évitent la confusion. Structurez les composants pour qu'ils s'adaptent, avec une anatomie partagée et des interactions de base constantes, quel que soit le facteur de forme. Cette approche permet non seulement de relier les plateformes, mais aussi de renforcer la cohésion au sein de chacune d'elles, ce qui rend l'app intuitive et connectée.