Farve i UI-design: En (praktisk) ramme

Når jeg er temmelig selvlært, hvad angår UI-design, har jeg altid spekuleret på, hvorfor så mange artikler og bøger taler om farveteori og paletter. Efter min erfaring er det at bruge en "split komplementær palet" omkring 0% forudsigelig for mig at lave flot design.

Jeg har et andet ord for den slags ting: ubrugelig.

Så hvis farveteori ikke giver et solidt grundlag for farve i UI-design, hvad gør det da?

Lad mig smide en mening om ya ': farveændringer. Det er finjusteringen af ​​farve, der tæller, ikke plukningen af ​​dem fra farveteoriens hat.

Eller sagt en anden måde: Den grundlæggende evne ved farvegrænsefladedesign er at være i stand til at ændre en basisfarve i mange forskellige variationer.

Jeg ved, at dette lyder lidt underligt. Hør på mig. Jeg vil give dig en ramme for justering af farve i dine UI-design.

Denne ramme vil:

  • Tillader dig at ændre en temafarve til dybest set ethvert formål i dit brugergrænseflade (dette er enormt kraftfuldt, og som vi ser, hvilke apps som facebook allerede gør)
  • Hjælp dig med at forudsige, hvilke farveændringer der ser godt ud
  • Få farve til at virke mindre subjektiv ("subjektiv" er ofte et ord for "Jeg har ikke fundet ud af, hvordan det fungerer" - og det er et ord, du hører et ton, når folk taler om farve)

Er vi seje? Vi er seje?

Store.

Mørke og lysere variationer

En ting, jeg har bemærket på tværs af mange flotte interface, er, at de ofte har mørkere og lysere variationer på en bestemt temafarve.

Du troede ikke, at søgefeltet kun var en gennemskinnelig sort overlejring, vel? Spoiler-alarm: det er det ikke. Ingen uklarhed af sort overlagt på det blå giver dig farven på søgefeltet. Det er en variation valgt af anden magi.

Hurtig, se nu på Swell Grid, den smukke surf-prognoseapp.

Sha-BAM. Vi er lige blevet ramt af en bådfylde variationer. Hvor mange er der? Gå til hjemmesiden, og tæl dem selv. Næsten alt på denne side er en variation af det oprindelige blå.

Eller her er et andet simpelt eksempel:

Selv elementtilstande er variationer på en farve. Dette beskrives ikke bedst som ”en palet med 3 blues”. Det er en blå med variationer.

Men dette rejser spørgsmålet: hvordan ændrer du faktisk en farve for at få gode variationer?

Vi kommer dertil, men jeg vil have dig til at forstå disse ting fra grunden af. Så her er vores 2 pålidelige principper for at finde ud af dette:

  1. Vi ser på den virkelige verden for referencetegn. Selvom vores grænseflader er "falske", kopierer vi stadig som gale fra den virkelige verden, fordi vi efter årtier med at se ting i den virkelige verden bare forventer, at lys og farve fungerer på bestemte måder.
  2. Vi bruger HSB-farvesystemet. Det korte af det er: det er det mest intuitive farvesystem med bred anvendelse (til mine formål Sketch og Photoshop). Hvis du ikke ved, hvad farvetone, mætning og lysstyrke er, lad os gå i stykker og mødes tilbage om 10.

Virkelige verdensfarver

Okay, se dig omkring. Hvilken "farvevariation" ser du uden tvivl to dusin tilfælde af hver gang du kigger rundt i dit værelse?

Skygger.

Du kan tænke på en skygge som en mørkere variation på en basisfarve.

Foto af David Blaikie

Med mig?

Lad os hoppe ind i Sketch og få vores farvevalgere og finde ud af nøjagtigt, hvad der sker, når en skygge falder på vores koralvæg.

Som jeg nævnte, skal vi finde ud af dette i HSB.

Bemærk: Monitor / billedfarveprofiler kan muligvis gøre disse nøjagtige målinger forskellige for dig.

Lysstyrken bevæger sig ned - OK, så det var temmelig indlysende. Men hold op - inden vi går i gang med at generalisere for meget, lad os faktisk se på et andet eksempel.

Foto af Matthias Uhlig

Arbejder skygger på samme måde i Cuba? Vi er ved at finde ud af det.

Okay, nu kan vi sammenligne og kontrastere. Bemærk et mønster?

Når der er en skyggefuld variation af en farve, kan du forvente, at lysstyrken går ned og mætning går op. Vi kiggede lige på dette i to tilfælde, men så vidt jeg nogensinde har set, er det en solid regel, du kan gå efter.

Nu farvetone er lidt skørere - det gik ned for korallvægtskyggen og op til flisevægskyggen. Der er en forklaring på det, men det er meget mindre vigtigt og lidt mere esoterisk end mætning / lysstyrke - så vi kommer tilbage til nuance senere.

Reglerne

Lad os pakke ud disse koncepter lidt mere.

Mørkere farvevariation = højere mætning + lavere lysstyrke

Hvis du ser tilbage på vores eksempel på facebook-søgelinjen, kan du se, det er nøjagtigt, hvad der sker.

Nuancen bevæger sig 1 ° ud af 360 °, hvilket praktisk taget er en afrundingsfejl.

Mætningen steg op, når lysstyrken faldt. Årsagen til, at søgefeltet ikke kunne være en opacitet af sort overlagt på baseblå, skyldes, at tilføjelse af sort svarer til at reducere lysstyrken i HSB. I stedet ønsker vi at reducere lysstyrken og samtidig tilføje mætning. Sort tilføjer ingen mætning til vores farve!

Hvorfor i den virkelige verden er mørkere farver korreleret med højere mætning? Jeg har ikke den mindste idé. Men jeg kan altid sammensætte noget: det skyldes, at efterhånden som lysets intensitet (lysstyrke) vælter intensiteten af ​​farve (mætning), bliver farven nødvendigvis mere udvasket - og vice versa.

Det kan være komplet BS, men det er fornuftigt, ikke?

Lysere farvevariation = lavere mætning + højere lysstyrke

Nu, da du er de kræsne og uklare læsere, som du er, gætte du sandsynligvis, at den modsatte transformation, der giver os mørkere variationer, vil give os lettere variationer.

Og du spikede det af Golly.

Selvfølgelig kan vi gå et skridt videre. Hvis vi fortsætter med at sænke mætning og hæve lysstyrken, indtil køerne kommer hjem, hvor ender vi så?

Her:

Vi ender på hvidt.

Du kan tænke på at lave lettere variationer som at tilføje hvidt. Og der er to meget enkle måder at tilføje hvid til en farve i Sketch et al:

  1. Reducer elementets opacitet (hvis det er på en hvid baggrund)
  2. Tilføj et gennemsigtigt lag hvidt på toppen af ​​elementet

Den vigtigste ting

Hvis du kun kan huske en ting fra denne artikel, skal du huske dette:

Mørkere farvevariationer laves ved at sænke lysstyrken og øge mætning. Lysere farvevariationer laves ved at øge lysstyrken og sænke mætning.

Med denne enkle idé vil du være i stand til at gøre fantastiske ting med kun en enkelt farve.

Sandheden er, at så mange variationer i farve mellem elementer - eller endda tilstande med det samme element - er bare enkle farveændringer.

Her er Harvest, den tid-tracking app, jeg bruger og elsker.

Se på overskriften. Hover-tilstanden er lettere. Den valgte tilstand er mørkere.

Eller se på den grønne knap til ny indgang.

Hover-tilstanden er en mørkere variation - højere mætning, lavere lysstyrke.

Du bruger dette igen og igen.

For at være retfærdig følger ikke alle design 100% af tiden denne regel. I Harvest-overskriften ovenfor er den valgte tilstand blot en lavere lysstyrke (mætning uændret), og hover-tilstanden er bare en lavere mætning (lysstyrken uændret). Men vi har set på, hvordan farve fungerer i den virkelige verden, og vi ved, at hvorfor disse design ser godt ud, er fordi de tilnærmer sig de principper, der er beskrevet her.

Hvad med nuance?

Når vi taler om tilnærmelse af de principper, der er beskrevet her, bør vi tale om farvetone. Jeg sagde det også ovenfor, men det bærer gentagelse: farvetone er så sekundær i forhold til hele mætning og lysstyrke-bevægelse-i-modsatte retninger, at du ofte bare kan ignorere det helt, når du foretager farvejusteringer.

Når det er sagt, her er den korteste forklaring.

Først og fremmest har hver farve en slags ”opfattet lysstyrke”. Dette kaldes lysstyrke.

Selvom denne blå og denne gule begge har 100% HSB-lysstyrke, hvilket forekommer lysere?

Jeg mener ligesom at spørge nogen væk fra gaden: hvilket er lysere?

”Um. Gul. Gul?"

Tak, rando. Du opdagede lige lysstyrke.

”Så jeg har ret?”

Ja, det er du. Selv hvis du holder lysstyrke og mætning konstant og bare varierer nuancer, får du en række lysstyrker eller opfattede lysstyrker, som vi måler i værdier mellem 0 og 100.

Disse er vores nuancer i intervaller på 30 °, alle med 100% mætning og 100% lysstyrke.

Og her er vores nuancer duplikeret, sat i lysstyrke blandingstilstand (på en hvid baggrund - det er vigtigt at tilføje, hvis du følger med i Sketch) og overlejres med lysstyrken i det resulterende gråt. Dette giver os et mål på lysstyrken i den originale farve.

I tilstanden Luminosity-blanding betyder en lysegrå høj lysstyrke, og en mørkegrå betyder lav lysstyrke. Hvis du tænker over det et øjeblik, giver dette perfekt mening.

Nu har jeg udskrevet numrene til dig, men kortet er værd tusind numre, ikke?

Se, Sherlock, et mønster.

Og netop dette mønster besvarer vores spørgsmål ovenfra. Kan du huske, hvordan vi så, at farvetone til tider skiftede ned og undertiden skiftede op? Hvorfor gør det det?

Vær først opmærksom på, at denne graf har tre maksimale point og tre mindstepunkter. Lavpunkterne er rød, grøn og blå. Højdepunkterne er cyan, magenta og gul.

Ringer disse særlige farver en klokke? Ja. RGB og CMY er populære farvesystemer, men ignorer det nu, fordi det fører dig på afveje.

Den vigtige bit er dette: hvis du ikke tæller mætning og lysstyrke, vil skiftende farvetone mod rød (0 °), grøn (120 °) eller blå (240 °) reducere lysstyrken eller opfattes lysets farve. Og hvis du flytter farvetone mod gul (60 °), cyan (180 °) eller magenta (300 °), øges farvenes opfattede lyshed.

Kunsten er bare at få bevægelsen af ​​farvetone til at stemme overens med bevægelsen af ​​mætning og lysstyrke. Hvis du vil have en mørkere variation, skal du flytte farvetone mod rød (0 °), grøn (120 °) eller blå (240 °), alt efter hvad der er tættest - og vice versa (med cyan, magenta og gul) for lettere variationer. (Dette antager naturligvis, at du også sænker lysstyrken og øger mætning)

Det er grunden til, at skyggen på koralvæggen skiftede ned i farvetone - den skiftede mod rødt ved 0 °, som er det nærmeste minimumspunkt til 21 °.

Og det var derfor, skyggen på flisevæggen skiftede op i farvetone - den skiftede mod blåt, ved 240 °, som er det nærmeste minimumspunkt til 194 °.

Mind blæst endnu?

Farvevej

Så når det kommer til farvevariationer, så spørg dig selv: har jeg brug for blot en lysere eller mørkere variation på en farve, jeg allerede har?

(Og hvis du går efter noget rent og enkelt, er svaret så, så ofte ja)

Mørkere variationer:

  • Lysstyrken mindskes
  • Mætning øges
  • Nuance (ofte) skifter mod et lysstyrke minimum (rød, grøn eller blå)

Lysere variationer:

  • Lysstyrken øges
  • Mætning falder
  • Nuance (ofte) skifter mod et lysstyrke

Dette giver dig mulighed for at tage en farvetone, men ændre det uendeligt til alle dine brugergrænseflade behov ved hjælp af mørkere og lysere variationer hvor det er relevant.

En grænseflade med en farve og mange ændringer

Jeg piskede lige sammen et hurtigt eksempel her. En hel grænseflade bygges ud af en enkelt farve. Sig ... ser den skygge af flise kendt ud?

Nu har jeg været temmelig kort med alt dette. Der er stadig mange emner at dække:

  • Hvordan er farvetone endnu vigtigere i gradueringer og datavisualisering?
  • Hvilken teknik bruger du for at gøre mørkere variationer, når du er i Sketch (osv.)?
  • Vil du flytte mætning eller lysstyrke mere?
  • Hvordan finder du grå, der matcher dit farveskema?
  • Hvordan vælger du helt uafhængige farver, der ser godt ud sammen?
  • Hvordan løser du det, når farver kolliderer?
  • Og selvfølgelig, hvorfor er RGB og CMY de lave / høje punkter på lysstyrken?

Jeg er glad for at du spurgte.

Vi introducerer ... Lær UI-design

Jeg har arbejdet hårdt de sidste 11 måneder med at skabe det mest omfattende online videokursus til at lære de praktiske færdigheder inden for interface-design.

Vi taler alt her:

  • Farve
  • Typografi
  • Layouts
  • Behandle
  • Responsiv design
  • Og mere…

Kurset er på 16+ timers video i over 30 videolektioner.

I næsten hver video ser du mig design i Sketch. Dette er vigtigt. Jeg underviser ikke i nogle teoretiske rammer her. I stedet er alt, hvad jeg viser dig tip, tricks og rammer, jeg bruger til at designe grænseflader hver dag. Tænk på det som at holde øje med min skulder, mens jeg lærer dig alt hvad jeg ved.

For eksempel i afstandsvideoen (og ja - det er en 50-minutters video helt på hvidafstand) starter jeg med et simpelt tekstbaseret eksempel, hvor jeg taler om, hvordan man nærmer sig bogstavafstand, linjeafstand, afsnitafstand, mellemrum mellem titlen og kroppen, mellemrummet ved siden af ​​teksten osv.

Det kulminerer i mig med at tale om de 3 vigtigste principper for afstand. Derefter, i den anden del af videoen, laver jeg en redesign af 350.org's hjemmeside, hvor jeg specifikt fokuserer på at forbedre deres brug af hvidrum. Det bygger på alle de koncepter, vi netop har introduceret. Endelig diskuterer jeg et par tilfælde, hvor du ser disse regler strakt, som destinationssider eller datatunge tabeller.

Her er hvad folk siger:

”Lær UI-design er som at lære at flyve et fly ved faktisk at sidde i cockpiten med piloten - Erik designer konstant / redesigne eksempler fra den virkelige verden lige foran dig og forklarer, hvorfor X er godt eller dårligt, og hvordan man går om at gøre det endnu bedre. ”
 - Mudassir Ali, Frontend Engineer, Canva
”Lær UI Designs enkle tilgang, illustreret med eksempler og tutorials i det virkelige liv, var yderst hjælpsom og åben. Jeg vil meget anbefale dette kursus til UX-designere, der ønsker at tilføje UI-design til deres værktøjssæt. ”
 - Sarah Kim, UX Design Lead
”Eriks pragmatiske tilgang til design har lært mig uendeligt mere end hvad jeg læste nogen designbøger nogensinde! Væk med bøgerne og endnu en video tak. ”
 - Anders Nysom, freelance-udvikler

Hvis du er en dev, UX-designer eller PM, og vil føje visuelt design til dit skillset, er dette kursus skræddersyet til dig. Hop videre til learnui.design for mere.

Og ja, jeg har det bedste domænenavn nogensinde - tak for at nævne det.

To sidste stik, inden vi siger vores farvel: Jeg har et Design Nyhedsbrev, som jeg med vilje sender meget få, men meget værdifulde designartikler (som den ovenfor). Hvis du vil se ting som dette hver måned (eller 6) i din indbakke (dybest set alt det, der ikke er offentliggjort andre steder), skal du tage et øjeblik og tilmelde dig.

Endelig: brug for en freelance UX / UI designer? Ansæt mig.