Langage de conception expressif Material 3
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Material 3 Expressive (M3) a été conçu pour répondre à la demande des utilisateurs qui souhaitent des expériences modernes, pertinentes et distinctes. Expressive permet également aux concepteurs de refléter des émotions et des sentiments spécifiques dans la mise en page et la présentation de l'interface.
Couleur et typographie
Le système de couleurs s'étend pour adopter les palettes tonales plus profondes de M3 et un ensemble de jetons plus large. L'échelle typographique plus simple utilise des axes de police variables pour plus d'expressivité, ce qui rend les interactions plus expressives et agréables.
Thématisation des couleurs
Les nouveaux jetons permettent d'appliquer plus de couleurs à différents thèmes et dans le contexte du système de conception dans son ensemble.
Polices variables
Les considérations mises à jour pour les polices variables et leurs axes personnalisables s'étendent au-delà de la 1P pour servir également les cas d'utilisation 3P tels que Roboto Flex, qui possède un ensemble d'axes variables similaires.
Axe de police variable en mouvement
Utilisation de l'axe de police variable pour signaler un retour de mouvement expressif et rendre les interactions plus expressives et agréables à utiliser.
Exemples de cas d'utilisation :
- Épaisseur de police dynamique
- Largeur de police dynamique
- Épaisseur et largeur de police dynamiques
Saisir des rôles
En plus d'une échelle typographique mise à jour et optimisée, nous introduisons également de nouveaux rôles typographiques qui servent spécifiquement des motifs notables sur Wear.
Ces nouveaux rôles de type prennent en charge plusieurs cas d'utilisation, y compris le texte d'arc pour les titres de surface, le contenu proactif avec l'espace en direct et un rôle de type spécifiquement pour les chiffres, qui permettent des tailles de texte plus grandes et plus stylisées pour les chaînes qui n'ont pas besoin d'être localisées.
Forme et mouvement
Nous nous appuyons également sur le langage des formes de manière beaucoup plus vaste et significative en utilisant des formes de conteneur flexibles pour appliquer l'arrondi et l'affûtage du rayon d'angle afin de prendre en charge les listes de morphing de forme et les états des boutons. Nous introduisons les boutons bord à bord comme nouveau modèle de conception emblématique et propriétaire pour les appareils ronds sur Wear.
Conteneurs bord à bord
Découvrez les conteneurs de forme qui s'adaptent aux formes arrondies et maximisent l'espace dans le facteur de forme circulaire.
Forme appliquée
Utilisation de rayons d'angle et de formes uniques comme conteneurs pour adopter une conception expressive, qui s'étend aux animations de chargement agréables, aux mises en page intéressantes, aux boutons de morphing de forme et aux groupes de boutons adaptatifs.
Arrondi d'angle
Utilisation des formes d'angle Material 3 pour permettre la variété, la distinction et la relation entre les formes de conteneur.
Conteneurs groupés
Les conteneurs de composants utilisent des techniques de mise en page flexibles pour s'adapter dynamiquement à l'espace disponible. Ils peuvent répartir cet espace de manière uniforme pour créer une symétrie ou organiser stratégiquement les éléments pour établir une hiérarchie visuelle, mettre en avant les contenus importants et guider l'interaction utilisateur à l'aide d'indices visuels expressifs et dynamiques.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/27 (UTC)."],[],[],null,["# Material 3 Expressive design language\n\nMaterial 3 Expressive (M3) was built to meet user demand for experiences that\nare modern, relevant, and distinct. Expressive also allows designers to mirror\nspecific emotions and feelings in the layout and presentation of the interface.\n\nColor and typography\n--------------------\n\nThe [color system](/design/ui/wear/guides/styles/color/system) is expanding to adopt M3's deeper tonal palettes and a\nwider token set and the simpler typography scale is utilizing variable font axes\nfor more expression, making interactions more expressive and delightful.\n\n### Color theming\n\n\nThe [new tokens](/design/ui/wear/guides/styles/color/roles-tokens) allow for more color to be applied across different themes\nand in context of the design system as a whole. \n\n\u003cbr /\u003e\n\n### Variable fonts\n\n\nThe updated considerations for variable fonts and their customizable axis,\nextend beyond 1P to also serve 3P use cases such as Roboto Flex, which has a\nsimilar set of variable axis. \n\n\u003cbr /\u003e\n\n### Variable font axis in motion\n\n\nUtilizing variable font axis to signal expressive motion feedback and making\ninteractions more expressive and delightful to use.\n\nExample use-cases:\n\n- Dynamic font weight\n- Dynamic font width\n- Dynamic font weight and width \n\n\u003cbr /\u003e\n\n### Type roles\n\n\nAlong with an updated and optimized type scale, we are also introducing new type\nroles that specifically serve notable patterns on Wear.\n\nThese new type roles support several use cases---including Arc Text for surface\ntitles, proactive content with live space, and a type role specifically for\nNumerals---that allow for bigger and more styled text sizes for strings that don't\nneed to be localized. \n\n\u003cbr /\u003e\n\nShape and motion\n----------------\n\nWe are also leaning into shape language in a much more expansive and meaningful\nway by utilizing flexible container shapes to apply rounding and sharpening of\ncorner radius to support shape morphing lists and button states. We're\nintroducing edge-hugging buttons as a new ownable and iconic design pattern for\nround devices on Wear.\n\n### Edge-hugging containers\n\n\nIntroducing shape containers that embrace round and maximize the space within\nthe circular form factor. \n\n\u003cbr /\u003e\n\n### Shape applied\n\n\nUsing corner radius and unique shapes as containers to embrace expressive design\n---extending to delightful loading animations, interesting layouts, shape-morphing\nbuttons and adaptive button groups. \n\n\u003cbr /\u003e\n\n### Corner radius\n\n\nUtilizing Material 3 corner shapes to enable variety, distinction, and\nrelationship between container shapes. \n\n\u003cbr /\u003e\n\n### Grouped containers\n\n\nComponent containers use flexible layout techniques to dynamically adapt to\navailable space. They can distribute this space evenly for symmetry, or\nstrategically arrange elements to establish visual hierarchy, emphasize\nimportant content, and guide user interaction through expressive and motion-lead\nvisual cues. \n\n\u003cbr /\u003e"]]
