Système de conception de cartes
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Comprendre les éléments fondamentaux des cartes Utilisez des modèles, des mises en page et des composants de cartes pour concevoir et créer des cartes uniques pour vos applications.
Éléments fondamentaux
Marge intérieure en pourcentage
Les marges supérieure, inférieure et latérale utilisent toutes des pourcentages plutôt que des marges fixes pour obtenir une mise à l'échelle proportionnelle.
Zones de conception
Chaque type de modèle de bloc a ses propres règles dans la zone de contenu principal. Pour en savoir plus, consultez les conseils de mise en page.
Chip compact en bas de l'écran
Important pour l'activation des actions secondaires sur la carte. Toujours placé 6,3% au-dessus de la bordure inférieure
Chip compact inférieur
Dans le bouton, utilisez un mot court, mais spécifique à une action ou à une destination spécifique. La traduction de ce texte d'incitation à l'action doit respecter le nombre maximal de caractères. Par défaut ou de remplacement, vous pouvez utiliser "Plus" comme texte d'incitation à l'action.
Emplacement
- Marge: 2,1% à partir du bas
- Marge intérieure interne: 8 dp au-dessus et en dessous
Spécifications du bouton
- Marge intérieure interne: 12 dp des deux côtés
Marges/Marges internes latérales
Nombre maximal de caractères recommandé < 225 dp
- Nombre maximal de lignes: 1
- Nombre maximal de caractères: 8
- Nombre maximal de caractères recommandé: 6
- Troncation: non
Limites de caractères recommandées > 225 dp
- Nombre maximal de lignes: 1
- Nombre maximal de caractères: 9
- Nombre maximal de caractères recommandé: 7
- Troncation: non
Couleur
Appliquer le thème de votre marque
Il existe plusieurs coloris de marque. Vous pouvez également les personnaliser et les modifier pour les adapter à l'apparence de votre application.
Utilisez les outils et conseils pour le thème Material pour générer des couleurs avec des niveaux de contraste appropriés, en utilisant votre couleur principale comme couleur source. Utilisez la palette générée pour remplacer les couleurs principale, principale, "sur primaire, de surface et de surface" de votre palette dans Figma pour thématiser votre tuile correctement. Toutes les autres couleurs ne sont pas personnalisables afin de créer une cohérence entre les tuiles.
Autres outils de création de thèmes Material:
Application de couleurs
Définissez toujours la couleur d'arrière-plan sur noir.
Ne définissez pas l'arrière-plan comme une image à fond perdu ou une couleur de bloc.
Typographie
Roboto est la police principale utilisée sur Wear OS. Nous recommandons d'utiliser le corps 2 par défaut avec la plus petite taille de police, tandis que l'affichage 2 est le style de type le plus grand disponible pour les tuiles.
Libellé principal
Le texte du libellé principal se trouve toujours à 16,64% du bord supérieur et a une marge intérieure de 6,3%. La couleur et la police d’écriture restent
également cohérentes tout au long du processus.
Marge intérieure interne
Marges supérieures: 16,64%
Marge latérale: 6,3%
Couleur
Variante d'arrière-plan (gris 300)
Type
Tiles3P (Roboto) / Bouton – 15S Bold
Pour en savoir plus sur la police, l'épaisseur et le dimensionnement, consultez la section Typographie.
Composants
Plusieurs composants sont disponibles pour créer les cartes de votre application. Ces composants sont alignés avec Material Design.
Options: bouton ou bouton d'activation
Tailles: Standard, XS, S, L
Types: Plein, Tonal et Image
Indiquez jusqu'à sept options.
Bouton "Texte"
Options: bouton ou bouton d'activation/de désactivation
Tailles: Standard, XS, S, L
Types: Plein et Tonal
Indiquez jusqu'à sept options.
Chip standard
Options: icône, libellé secondaire et alignement du texte
Indiquez jusqu'à deux options.
Chip de titre (saisie principale uniquement)
Texte centré
Créez une incitation à l'action unique et bien visible.
Puce compacte
Types: plein et tonal
Options: icône ou pas d'icône
À utiliser dans l'emplacement du bouton inférieur.
Indicateur de progression
Types: largeur du trait personnalisable
(tailles par défaut: 8 dp et 5 dp)
Options: écart au bas ou complet
indiquer la progression et l'achèvement de la tâche.
Kit de conception Figma
Téléchargez le kit de conception de cartes sur Wear OS pour commencer à utiliser les mises en page de cartes avec des composants, des options et des recommandations intégrés. Vous pourrez ainsi créer différentes mises en page adaptées à vos besoins, tout en suivant les consignes des modèles ProtoLayout.
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,["# Tiles design system\n\nUnderstand tile fundamental elements. Use tile templates, layouts, and components to design and build unique tiles for your apps.\n\n**Fundamental elements**\n------------------------\n\n**Percentage padding**\n\nTop, bottom, and side margins all use percentages, rather than fixed margin amounts, to achieve proportional scaling. \n\n**Design areas**\n\nEach type of tile template has its own rules within the primary content area. Refer to the [layout guidance](/design/ui/wear/guides/surfaces/tiles-layouts) for more information. \n\n**Bottom compact chip**\n\nImportant for enabling secondary actions on the tile. Consistently placed 6.3% above the bottom.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nBottom compact chip\n-------------------\n\nWithin the button, use a word that's short but specific to a particular action or destination. The translation of this call-to-action text must accommodate the character count limits. As a default or fallback value, you can use \"More\" as the call-to-action text. \n\n**Placement**\n\n- Margin: 2.1% from the bottom\n- Internal padding: 8 dp above and below \n\n**Button spec**\n\n- Internal padding: 12 dp on both sides \n\n**Side internal padding/margins**\n\n- 16.64%\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Recommended character limit \\\u003c 225 dp**\n\n- Max lines: 1\n- Max character limit: 8\n- Recommended character limit: 6\n- Truncation: No \n**Recommended c** **haracter limits \\\u003e 225 dp**\n\n- Max lines: 1\n- Max character limit: 9\n- Recommended character limit: 7\n- Truncation: No\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nColor\n-----\n\n### **Apply your brand's theme**\n\nThere are several brand colors to choose from. They can also be customized and changed to fit your app's look and feel. \n\nUse the [Material theme tools and guidance](https://m3.material.io/styles/color/system/overview) to generate colors that have adequate color contrast levels, using your primary color as a source color Use the generated palette to replace the primary, primary-variant, on-primary, surface, and on-surface colors in your palette in Figma to theme your tile correctly. All other colors are not customizable to create consistency across tiles.\n\n**Other Material theme building tools:**\n\n- [Material Theme Builder Web](https://material-foundation.github.io/material-theme-builder/)\n- [Material Theme Builder Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder)\n\n### **Color application**\n\nAlways set the background color to black. \ncheck_circle\n\n### Do\n\nDon't set the background as a full bleed image or block color. \ncancel\n\n### Don't\n\nTypography\n----------\n\nRoboto is the primary font used in Wear OS. Body 2 is recommended as the default and the smallest font size, while Display 2 is the largest type style that's available for tiles.\n\n### **Primary label**\n\nPrimary label text is always 16.64% from the top edge and have an internal padding of 6.3%. Color and font also remain consistent throughout. \n\n**Internal padding**\n\nTop margins: 16.64% \nSide margin: 6.3% \n\n**Color**\n\nOn-Background-Variant (Gray 300) \n\n**Type**\n\nTiles3P (Roboto) / Button - 15S Bold\n\nFor more information about font, weight, and sizing, see [Typography](/design/ui/wear/guides/styles/typography).\n\n**Components**\n--------------\n\nThere are several components available to build your app's tiles. These components are aligned with Material Design.\n\n### Icon button\n\nOptions: Button or Toggle Button \nSizes: Standard, XS, S, L \nTypes: Filled, tonal-filled, and image\n\nList up to 7 options.\n\n### Text button\n\nOptions: Button or Toggle Button \nSizes: Standard, XS, S, L \nTypes: Filled and tonal-filled\n\nList up to 7 options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Standard chip\n\nOptions: Icon, secondary label, and text alignment\n\nList up to 2 options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Title chip (primary-fill only)\n\nCenter-aligned text \n\n\nCreate a single, prominent CTA.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Compact chip\n\nTypes: Filled and tonal-filled \nOptions: Icon or no icon \n\nUse in the bottom button slot.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Progress indicator\n\nTypes: Customizable stroke width \n(Default sizes: 8 dp and 5 dp) \nOptions: Gap at the bottom or full\n\nIndicate progress and task completion.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nFigma design kit\n----------------\n\n[Download the Tiles on Wear OS design kit](/design/ui/wear/guides/foundations/download#tiles-design-kit) to start using the tile design layouts with built-in components, options, and recommendations to create different layouts that suit your needs, while following the guidelines in the ProtoLayout templates."]]
