Sistema di progettazione di piastrelle
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Comprendere gli elementi fondamentali dei riquadri. Utilizza modelli di riquadri, layout e componenti per progettare e creare riquadri unici per le tue app.
Elementi di base
Spaziatura interna percentuale
Per ottenere una scalabilità proporzionale, i margini superiore, inferiore e laterale utilizzano tutti valori percentuali, anziché importi di margine fissi.
Aree di design
Ogni tipo di modello di riquadro ha le proprie regole all'interno dell'area dei contenuti principali. Per saperne di più, consulta le indicazioni per il layout.
Chip compatto in basso
È importante per attivare le azioni secondarie sul riquadro. Posizionato in modo coerente: 6,3% sopra il fondo.
Chip compatto in basso
All'interno del pulsante, utilizza una parola breve ma specifica per una determinata azione o destinazione. La traduzione di questo testo dell'invito all'azione deve rispettare i limiti di caratteri. Come valore predefinito o di riserva, puoi utilizzare "Altro" come testo dell'invito all'azione.
Posizionamento
- Margine: 2,1% dal basso
- Spaziatura interna interna: 8 dp sopra e sotto
Specifiche dei pulsanti
- Spaziatura interna interna: 12 dp su entrambi i lati
Spaziatura interna/margine interna laterale
Limite di caratteri consigliato < 225 dp
- Righe max: 1
- Limite massimo di caratteri: 8
- Limite di caratteri consigliato: 6
- Troncamento: No
Limiti dei caratteri consigliati > 225 dp
- Righe max: 1
- Limite massimo di caratteri: 9
- Limite di caratteri consigliato: 7
- Troncamento: No
Colore
Applicare il tema del brand
Puoi scegliere tra diversi colori di brand. Inoltre, possono essere personalizzati e modificati per adattarsi all'aspetto e al design della tua app.
Utilizza gli strumenti e le linee guida per il tema Materiale per generare colori con livelli di contrasto di colore adeguati, utilizzando il tuo colore principale come colore di origine. Utilizza la tavolozza generata per sostituire i colori primari, della variante primaria, primari, di superficie e in superficie nella tua tavolozza in Figma per creare un tema corretto per il tuo riquadro. Tutti gli altri colori non sono personalizzabili per garantire la coerenza tra i riquadri.
Altri strumenti di creazione a tema Material:
Applicazione del colore
Imposta sempre il colore di sfondo su nero.
Non impostare lo sfondo come un'immagine al vivo o come colore a blocchi.
Tipografia
Roboto è il carattere principale utilizzato in Wear OS. Come valore predefinito è consigliato il corpo 2 e la dimensione minima dei caratteri, mentre Display 2 è lo stile di tipo più grande disponibile per i riquadri.
Etichetta principale
Il testo dell'etichetta principale è sempre 16,64% dal bordo superiore e ha una spaziatura interna del 6,3%. Anche il colore e il carattere rimangono coerenti.
Spaziatura interna interna
Margini superiori: 16,64%
Margine laterale: 6,3%
Colore
Variante su sfondo (grigio 300)
Digitare
Tiles3P (Roboto) / Pulsante - 15S Bold
Per ulteriori informazioni su carattere, spessore e dimensioni, visita la pagina relativa alla tipografia.
Componenti
Sono disponibili diversi componenti per creare i riquadri dell'app. Questi componenti sono allineati con Material Design.
Opzioni: pulsante o pulsante di attivazione/disattivazione
Dimensioni: Standard, XS, S, L
Tipi: riempiti, con valori tonali e immagine
Elenca fino a 7 opzioni.
Pulsante Testo
Opzioni: pulsante o pulsante di attivazione/disattivazione
Dimensioni: Standard, XS, S, L
Tipi: riempiti e con riempimento tonale
Elenca fino a 7 opzioni.
Chip standard
Opzioni: icona, etichetta secondaria e allineamento testo
Elenca fino a 2 opzioni.
Chip del titolo (solo compilazione principale)
Testo allineato al centro
Crea un singolo invito all'azione in evidenza.
Chip compatto
Tipi: pieni e pieni di tonalità
Opzioni: icona o nessuna icona
Utilizzabile nell'area dei pulsanti in basso.
Indicatore avanzamento
Tipi: larghezza del tratto personalizzabile
(Dimensioni predefinite: 8 dp e 5 dp)
Opzioni: spazio nella parte inferiore o completo
Indica i progressi e il completamento dell'attività.
Kit di design Figma
Scarica il kit di design Tiles on Wear OS per iniziare a usare i layout di progettazione dei riquadri con componenti, opzioni e consigli integrati per creare layout diversi in base alle tue esigenze, rispettando al contempo le linee guida nei modelli ProtoLayout.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 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."]]
