Farver i UI Design - Teori, psykologi og praksis

Foto af George Becker fra iconcout

Vi er alle omgivet af farver 24/7. Vi ser ting, og med hver farve, vi ser, får vi forskellige følelser. Farver påvirker os mentalt og fysisk på mange måder. For at hæve blodtrykket er der vist en stærk rød farve, mens en blå farve har en beroligende virkning.

Farve er det nemmeste og vigtigste aspekt af at engagere brugeren med produktet i Design. Mange mennesker tror, ​​at valg af farver til UI hovedsagelig afhænger af designerens smag og sans for skønhed. Farveudvælgelsesprocessen er imidlertid mere kompliceret end den ser ud og spiller en vigtig rolle i designet.

Du kan indstille en stemning med farver, henlede opmærksomheden eller afgive en erklæring. For at give energi eller køle ned, kan du bruge farve. Du kan skabe en atmosfære af elegance, varme eller ro ved at vælge det rigtige farveskema, eller du kan formidle et billede af legende ungdommethed.

Valget af farve er baseret på noget farvepsykologi og teori. Så lad os begynde med farvepsykologien.

Farvepsykologi

Farvepræference mellem mænd og kvinder er forskellige. Det varierer også med aldersgrupper.

Ifølge Joe Hallocks undersøgelse er der en betydelig forskel i valg af farve mellem køn. Undersøgelsen blev udført for de farver, der var mest gunstige og mindre gunstige.

Farvepræference for mænd og kvinder

Som vi kan se, foretrækkes den blå farve markant af både mænd og kvinder, og Brown er den mindst ønsket farve.

Lad os forstå det med en demo-app

Derfor er målet at designe en app til at styre udgifterne, og målgruppen er mand og kvinde. Lad os antage, at en designer, der er en begynder og ikke ved mere om farver, vælger Brown som den primære farve til appen, fordi brun er hans yndlingsfarve. Resultatet ville være som følger:

Expense Manager-demo-app

Vi kan tydeligt se, at designet er godt nok, men på grund af valg af farve fungerer appen muligvis ikke. Så hvad kan vi gøre for at forbedre det? Senere i denne artikel ser vi hvad vi kan gøre med bare en farveændring.

Betydningen af ​​farver kommer ind. Designere er nødt til at forstå, hvad farver betyder, og hvilken reaktion de fremkalder for at formidle den rigtige tone, besked og opfordre brugere til at udføre den forventede handling. Hver farve har sin egen indflydelse på vores sind, og viden om mulige reaktioner kan hjælpe designere med at overføre den rigtige besked og opfordre brugere til at gribe ind.

Du er nødt til at kende betydningen af ​​farver, hvis du er en designer, der læser dette. Så lad os forkorte det. (Betydningen af ​​farve kan læses detaljeret her: http://www.color-wheel-pro.com/color-meaning.html)

Farveteori

I interface-design er der en masse farver at bruge. Den første ting, der kommer i tankerne, når vi taler om farver, er Color Wheel.

Berømte farvehjul

Nu er et andet vigtigt emne, hvordan farver kan kombineres. Der er flere måder at kombinere farver på, men varme og seje farver skal være afbalancerede. Her er forskellige måder at kombinere farve på:

Der er 3 vigtige farve ting, som enhver designer skal vide, når man taler om farver: Nuance, Value & Saturation. Dette blev beskrevet så godt af Christian Vizcarra, så jeg prøvede at implementere det på egen hånd.

Hue

Nuance er farven i naturlig tilstand. Blå, gul, grøn, rød osv. Uden nogen lys og mørk variation. Grundlæggende er farver, der vises i farvehjulet uden andre lys- og skyggeændringer. Se billede:

Værdi

Værdi i farve er mængden af ​​lys og mørke farve har. Natur, for eksempel. Vi ser i hverdagen, at morgenen og natten nogle elementer har en anden farve. Træ og bjerge har for eksempel lysere morgentone og mørkere toner, når dagen går på grund af mindre lys.

Foto af Nextvoyage fra iconcout

Vi ser ting tættere på lys med hvide toner og andre ting, der er i baggrunden med mere mørke.

Værdien spiller en betydelig rolle i UI Design. Vi kan få en god kontrast, hvis vi bruger det godt.

Hvis nogen farve har 100% -værdien, resulterer det i hvid farve. Når en farve har 0% -værdien, resulterer den i sort farve. Se billede:

Farve med værdi

Mætning

Mætning er farvenes intensitet. når vi mætter en farve, har vi en mere intens og levende farve. Når vi desaturerer farve, har vi en kedelig farve.

Farvemætning

Inden vi bruger mætning i design, skal vi vide, hvad vi designer til udskrivning eller digitale formål. I udskrivningsmateriale kan vi ikke bruge mere mætning, fordi CMYK bruges, og der er begrænsninger.

Farve i brugergrænsefladesign

Golden Ratio - 6: 3: 1 regel

Princippet om 60 procent + 30 procent + 10 procent er den bedste andel for at opnå farvebalance. Vi er nødt til at vælge en dominerende farve og bruge den i 60% af pladsen, en sekundær farve i 30% og en endelig farve i de resterende 10%. Det kan lette brugerens øje med at bevæge sig fra det ene punkt til det andet komfortabelt.

Farvepalet ved hjælp af 6: 3: 1-regel

Skygger i brugergrænsefladen

Skygger er aldrig sorte. Skygge er objektets farvetone skygge af værdien toner. Se billedet til reference nedenfor.

Foto af Brigitte Tohm fra iconcout

Cherrys skygge er mørkerød, den ser næsten sort ud, men den er ikke sort. Se på blomsterskyggen, pladen, vaflen. Afhængigt af lys og mørke kan du se mængden af ​​skygge.

Den almindelige fejl, vi alle begår i UI-design, er, at vi har brug for en sort farve med opacitet for at skygge.

Skygge i UI-element

Farve i typografi

Det meste af UI'en er hvid i dag, alt fokuserer på at gøre grænsefladen så minimal som muligt. Så typografi er et andet vigtigt element.

Tekstfarven på venstre side er sort (# 000000), og den på højre side ser også sort ud, men den er mørkeblå (# 181441). Dette spiller en vigtig rolle, når grænsefladen for det meste er hvid. Hvordan gør du det? Se nedenstående billede.

Begge farver med samme opacitet

Når vi har anvendt den samme opacitet på begge tekster, kan vi se forskellen. Resultatet er helt klart anderledes. En af dem er grå, den anden blågrå. Brug af tekst med en bestemt farvetone vil have en mærkbar indflydelse på brugergrænsefladen. Se billedet herunder.

Så det er dårligt at bruge sort og gråt? Nix. Folk bruger ofte ordet "Med sort er alt cool" Så det er op til den enkelte. Men farvetonen kommer, når vi bruger den. Bedre kontrast og harmoni kan opnås.

Lad os vende tilbage til vores Expense Manager-app

Hvis vi går med grøn farve, skal appen se bedre efter disse ting. Fordi vi er nødt til at udvise stærk følelse for penge og vækst i denne app, og den grønne farve beskriver penge og den økonomiske verden, kan både mænd og kvinder godt lide grønt.

Resultatet efter at alle disse ting er blevet taget sig af:

Ser bedre ud end før? Ingen? Forhåbentlig ja. Som vi kan se, kan vi designe en effektiv brugergrænseflade, hvis vi fokuserer på nogle små ting omkring farver.

Tak, fordi du tog dig tid til at læse. Giv klapp, hvis du kunne lide det. Jeg ville meget gerne høre din feedback og forslag.

Kontakt mig på Instagram, Twitter, Dribbble