Velg kategorifarger som er lette å skille fra hverandre.
LAYOUT & FLATER
Tag er en merkelapp som kan brukes til å kategorisere elementer eller kommunisere fremdrift, status eller prosess. Tags kan gi brukeren et raskere overblikk over innholdet.
Tag er en merkelapp som beskriver en egenskap ved innholdet, slik at det blir raskere å skanne og gjenkjenne. Komponenten har to fargefamilier: ti kategorifarger uten fast betydning, og fire statusvarianter med fast betydning.
Tag-props
neutral
medium
Bruk Tag når
Bruk Tag til å merke innhold slik at det er raskt å kjenne igjen:
- Kategori eller type– «Voksen», «Honnør», «Sone 2», «Avtale», «Faktura», «Abonnement»
- Status – «Betalt», «Forsinket», «Utkast», «Publisert», «Til godkjenning», «Utløpt»
Ikke bruk Tag når:
- Tag-en skal vise et tall, for eksempel antall nye varsler eller oppgaver – bruk Badge
- brukeren skal kunne fjerne Tag-en – bruk TagChip
- brukeren skal kunne klikke eller filtrere – bruk ActionChip eller FilterChip
Anatomi
Tag består av fire deler: bakgrunn, ramme, valgfritt ikon og etikett.
Varianter og størrelser
Tag har to fargefamilier med ulike formål. Varianter med semantisk navn, som success og negative, brukes til å beskrive en tilstand i systemet, mens varianter med fargenavn er nøytrale etiketter uten ekstra betydning. Statusfargene mister signalverdi hvis de også brukes som vanlige kategorifarger.
Statusvarianter
De fire statusvariantene har fast betydning. Bruk dem bare når innholdet faktisk er i den tilstanden:
success– fullført, gyldig eller i rute. «Betalt», «I rute», «Aktiv».warning– krever oppmerksomhet, men er ikke en feil. «Forsinket», «Utløper snart».negative– feil, avvik eller stoppet. «Kansellert», «Avvist», «Avvik».information– nøytral opplysning uten alarm. «Ny», «Endret».
De fire statusvariantene.
Statusvariantene beskriver en tilstand som følger innholdet og blir stående til den endrer seg, som «Betalt» eller «Kansellert». Skal du varsle om noe som nettopp har skjedd, bruk Badge.
Kategorifarger
Spring, Jungle, Blue, Lilac, Lavender, Neutral, Coral, Peach, Lime og Mystic.
Kategorifargene har ingen semantisk betydning. Velg farge ut fra hva som skiller kategoriene best fra hverandre, ikke ut fra hva fargen signaliserer. Samme kategori bør ha samme farge i hele flaten, slik at brukeren kjenner den igjen.
En etikett som står permanent, som «Beta», bør ha en kategorifarge og ikke en statusfarge. Den beskriver ingen tilstand innholdet er i, og en statusfarge som alltid er synlig mister signalverdien sin.
De ti kategorifargene.
Størrelser
Small (1 rem / 16 px), Medium (1.25 rem / 20 px) og Large (1.75 rem / 28 px med 1 rem / 16 px tekst). Medium er standardstørrelsen. Small passer der Tag-en står tett på annet innhold, for eksempel i en tabellrad eller en liste. Large passer der Tag-en står alene som et framtredende merke.
De tre størrelsene ved siden av hverandre.
Retningslinjer
Kategorifarger velges for å skille, ikke for å bety
Ikke gi en kategorifarge en betydning den ikke har. Skal Tag-en ha en fast betydning, bruk en statusvariant.
Hold etiketten kort
Bruk ett til to ord. Tag-en skal kunne leses raskt.
Unngå hele setninger. Lange etiketter bryter layouten og blir vanskelige å lese raskt.
Bruk statusfarger sparsomt
Bruk success, warning, negative og information bare når innholdet faktisk er i en tilstand.
Ikke bruk statusfargene til kategorier. Da mister de signalverdi der de faktisk betyr noe.
Tag er ikke en knapp
Tag er statisk merking uten interaksjon.
Ikke gjør en Tag klikkbar eller lukkbar. Skal brukeren kunne fjerne den, bruk TagChip. Skal den utløse en handling, bruk ActionChip. Skal den filtrere et innhold, bruk FilterChip.
Tag eller Badge
Bruk Tag når merkelappen beskriver hva innholdet er: kategori, type eller tilstand.
Ikke bruk Tag som varsel. Skal den vise et antall eller si at noe er nytt, bruk Badge.
Farge er aldri eneste signal
Skriv betydningen i etiketten. Fargen forsterker bare det teksten allerede sier.
Ikke la fargen bære betydningen alene. Brukere som ikke skiller farger, mister da informasjonen.
Eksempler
Tag i en tabell
Small passer i tabellrader, der Tag-en skal leses raskt uten å dominere raden.
Tag i et kort
Medium er standardstørrelsen og passer der Tag-en står for seg selv. Flere Tag-er på rad legges i en beholder med gap, ikke med margin på hver enkelt.