Designsystem für Fliesen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Grundlegende Elemente von Kacheln verstehen Entwerfen und erstellen Sie mithilfe von Kachelvorlagen, Layouts und Komponenten einzigartige Kacheln für Ihre Apps.
Grundlegende Elemente
Abstand in Prozent
Für den oberen, unteren und seitlichen Rand werden Prozentsätze anstelle von festen Randbeträgen verwendet, um eine proportionale Skalierung zu erreichen.
Designbereiche
Jede Art von Kachelvorlage hat ihre eigenen Regeln im primären Inhaltsbereich. Weitere Informationen finden Sie in der Anleitung zum Layout.
Kompakter Chip unten
Wichtig zum Aktivieren von sekundären Aktionen für die Kachel. Gleichbleibend 6,3% über dem unteren Rand platziert
Kompakter Chip unten
Verwenden Sie innerhalb der Schaltfläche ein Wort, das kurz ist, aber sich konkret auf eine bestimmte Aktion oder ein bestimmtes Ziel bezieht. Bei der Übersetzung dieses Call-to-Action-Textes muss die maximale Zeichenanzahl berücksichtigt werden. Als Standard- oder Fallback-Wert können Sie „Mehr“ verwenden als Call-to-Action-Text ein.
Platzierung
- Rand: 2,1% vom unteren Rand
- Innenabstand: 8 dp über und unter
Schaltflächenspezifikation
- Innenabstand: auf beiden Seiten 12 dp
Interner Innenrand/Ränder
Empfohlene Zeichenbeschränkung < 225 dp
- Max. Zeilen: 1
- Max. Zeichen: 8
- Empfohlene Zeichenbeschränkung: 6
- Abgeschnittener Text: Nein
Empfohlene Limits für Kampagnen > 225 dp
- Max. Zeilen: 1
- Max. Zeichen: 9
- Empfohlene Zeichenbeschränkung: 7
- Abgeschnittener Text: Nein
Farbe
Design Ihrer Marke anwenden
Es stehen mehrere Markenfarben zur Auswahl. Sie können außerdem angepasst und an das Design Ihrer App angepasst werden.
Verwenden Sie die Tools und Anleitungen für das Materialdesign, um Farben mit angemessenen Farbkontraststufen zu generieren, indem Sie Ihre Primärfarbe als Quellfarbe verwenden. Verwenden Sie die generierte Palette, um die Primär-, Primärvariante-, Primär-, Oberflächen- und Oberflächenfarben in Ihrer Palette in Figma zu ersetzen, um Ihre Kachel richtig zu gestalten. Alle anderen Farben können nicht angepasst werden, um für Konsistenz in den Kacheln zu sorgen.
Weitere Tools zum Erstellen von Material Themes:
Farbanwendung
Legen Sie als Hintergrundfarbe immer Schwarz fest.
Verwenden Sie für den Hintergrund kein randloses Bild oder eine Blockfarbe.
Typografie
Roboto ist die primär unter Wear OS verwendete Schriftart. Textkörper 2 wird als Standardeinstellung und die kleinste Schriftgröße empfohlen, während Anzeige 2 der größte Schriftstil ist, der für Kacheln verfügbar ist.
Primäres Label
Der Text des primären Labels ist immer 16,64% vom oberen Rand entfernt und hat einen Innenabstand von 6,3%. Auch Farbe und Schriftart bleiben einheitlich.
Abstand (intern)
Oberer Rand: 16,64%
Seitenränder: 6,3%
Farbe
Variante im Hintergrund (Grau 300)
Typ
Tiles3P (Roboto) / Button – 15S Bold
Weitere Informationen zu Schriftart, -stärke und -größe finden Sie unter Typografie.
Komponenten
Für die Erstellung der Kacheln deiner App sind mehrere Komponenten verfügbar. Diese Komponenten sind auf Material Design ausgerichtet.
Optionen: Taste oder Ein/Aus-Schaltfläche
Größen: Standard, XS, S, L
Typen: „Füllung“, „Farbtongefüllt“ und „Bild“
Listen Sie bis zu sieben Optionen auf.
Schaltfläche „Text“
Optionen: Taste oder Ein/Aus-Schaltfläche
Größen: Standard, XS, S, L
Typen: Füllungen und Füllungen
Listen Sie bis zu sieben Optionen auf.
Standard chip
Optionen: Symbol, sekundäres Label und Textausrichtung
Nennen Sie bis zu 2 Optionen.
Titel-Chip (nur primäres Ausfüllen)
Zentriert ausgerichteter Text
Erstellen Sie einen einzelnen, auffälligen CTA.
Kompakter Chip
Typen: Ausgefüllt und mit Tonwert gefüllt
Optionen: Symbol oder kein Symbol
Für die untere Schaltflächenfläche verwenden.
Fortschrittsanzeige
Typen: Anpassbare Strichbreite
(Standardgrößen: 8 dp und 5 dp)
Optionen: Lücke unten oder voll
Zeigen Sie den Fortschritt und die Erledigung der Aufgaben an.
Figma-Designkit
Laden Sie das Designkit für Kacheln auf Wear OS herunter, um mit der Verwendung der Kachel-Design-Layouts mit integrierten Komponenten, Optionen und Empfehlungen zu beginnen, um verschiedene Layouts zu erstellen, die Ihren Anforderungen entsprechen. Beachten Sie dabei die Richtlinien in den ProtoLayout-Vorlagen.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 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."]]
