Vista prèvia UI de colors
Visualitzeu els colors triats en components UI reals com botons, targetes, formularis i menús i comproveu com funciona i es veu la paleta a la interfície.
Títol de la targeta
Aquest és un contingut d'exemple per previsualitzar els teus colors en un context real.
Benvingut
Notificació d'exemple
Visualitzeu els colors triats en components UI reals com botons, targetes, formularis i menús i comproveu com funciona i es veu la paleta a la interfície.
Vista prèvia UI de colors mostra només els controls i resultats corresponents a la seva funció. Les opcions disponibles depenen de l’eina i de l’entrada.
Formats compatibles
Com funciona
Pas 1
Obriu Vista prèvia UI de colors i prepareu l’entrada que demana la interfície
Pas 2
Ajusteu els controls visibles segons el resultat que necessiteu
Pas 3
Reviseu el resultat abans de copiar-lo, exportar-lo o reutilitzar-lo
Errors comuns a evitar
- No doneu per compatible un format o una opció que no aparegui a la interfície.
- Comproveu els valors abans de reutilitzar-los en una identitat, interfície o fitxer final.
- Si el resultat s’utilitza en text o UI, reviseu també el contrast.
Consells pro
- Conserveu el valor d’origen amb el resultat per comparar variants.
- Feu servir els formats que l’eina mostra realment en lloc d’estimar conversions.
- En mòbil i tauleta, permeteu que textos i controls saltin de línia.
Tractament de dades
El tractament depèn de la funció utilitzada. El consentiment, l’analítica i les funcions de compte del lloc són separats de l’operació de color.
Què fa aquesta eina
Visualitzeu els colors triats en components UI reals com botons, targetes, formularis i menús i comproveu com funciona i es veu la paleta a la interfície. Vista prèvia UI de colors es concentra en aquesta tasca i no pressuposa funcions que no es mostren a la interfície. Utilitzeu els controls disponibles per obtenir el resultat que necessiteu i comproveu els valors mostrats abans de portar-los a una altra eina, full d’estils, fitxer de disseny o document.
Preparar una entrada adequada
Comenceu amb l’entrada que demana Vista prèvia UI de colors: color, valor, imatge o ajust segons la pantalla. Els formats indicats en aquesta pàgina són HEX, RGB, HSL, Composants UI. Si un format o una opció no apareix a la interfície, no el considereu compatible amb aquesta funció concreta.
Llegir i verificar el resultat
Llegiu el resultat dins del context de l’operació realitzada. Compareu-lo amb el valor d’origen i reviseu els controls que han influït en el càlcul. Per a treballs visuals importants, comproveu també el resultat a la interfície real on s’utilitzarà i no només a partir del codi.
Ús en mòbil i tauleta
Vista prèvia UI de colors utilitza el disseny responsive del lloc. Títols, subtítols, breadcrumbs i controls poden saltar de línia en pantalles estretes per evitar tallar traduccions llargues. Tot i així, reviseu el resultat final al dispositiu i al context on el fareu servir.
Reutilitzar el resultat al projecte
Després de verificar el resultat, utilitzeu només les accions que Vista prèvia UI de colors ofereix realment, com copiar o exportar quan estiguin disponibles. Conserveu el valor d’origen si heu de reproduir l’ajust i, en interfícies, documenteu també el paper del color i el contrast necessari.
Eines relacionades
Guies i tutorials
Aprèn a utilitzar les nostres eines amb les nostres guies detallades.
ui-preview: guia pràctica de export
Guia localitzada per utilitzar ui-preview, entendre bones pràctiques de export i evitar errors comuns.
ui-preview: guia pràctica de developer
Guia localitzada per utilitzar ui-preview, entendre bones pràctiques de developer i evitar errors comuns.
ui-preview: guia pràctica de developer
Guia localitzada per utilitzar ui-preview, entendre bones pràctiques de developer i evitar errors comuns.
Preguntes freqüents
Aprèn a utilitzar les nostres eines amb les nostres guies detallades.