10 snyderekoder til design af brugergrænseflader

Jeg antager sandsynligvis, at de fleste af os startede i UI-design med den mindste viden eller slet intet. Men selvom oddsene var imod os i starten, lykkedes det os gennem adskillige designbøger og artikler for at forstå, hvordan farver, typografi, layout osv. Fungerer. Jeg kan huske, hvordan det er etableret i os hos Make Technology, et UX-drevet firma, at design ikke blot kan forklares med farver, figurer og tekst. Det er en proces, der har et ”Hvorfor” bag sig, at når vi opretter en større tekst, tilføjer en skygge eller ændrer farve, skal der være en grund til, hvorfor ting skal være.

I denne artikel deler jeg således en liste over ting, jeg har lært fra forskellige virksomheder, designere, ting, jeg har lært ved design af brugergrænseflader, og nye opdagelser, jeg fandt undervejs:

* Ansvarsfraskrivelse: Følgende “Don” -prøver, der leveres, betyder ikke nødvendigvis, at de er forkerte. Det er vores grundlag for, hvordan vi kan forbedre os fra en god designløsning til en meget bedre løsning

1. Denne tekst er vigtig, gør den større!

Når man står overfor indhold, der har brug for skrifthierarki, løser teksten større for at give vægt og betydning normalt ikke problemet, ligesom det nedenfor:

Fonthierarki handler bare ikke om små til store skrifttypestørrelser. Det handler om den rigtige blanding af størrelse, vægt og farver, der skaber kontrast. Større kontrast, jo bedre.

Undskyld, hvis fotoet kommer i lav opløsningsformat ️

Så hvordan skaber jeg bedre kontrast?

  • Brug ikke en slags vægt med forskellige skriftstørrelser til at skabe kontrast og hierarki.
  • Brug i stedet dristigere og mørkere stil til primært indhold, eller mindre og lettere til sekundært indhold (mindre vigtigt).
  • Opret tre slags tekstfarver, der varierer fra mørk til lys (se eksempel nedenfor). Normalt bruger jeg min grundfarve som kropstekstfarve.
  • Vær ikke bange for at anvende store fonthuller på dine varer (dvs. 24px header, 16px brødtekst, 10px meta osv.). Større kløft = bedre kontrast.
  • Tjek Modularscale en online regnemaskine, du kan bruge til at skabe bedre skrifthierarki.
  • Husk, kontrast er = størrelse + vægt + farve.
  • Til sidst skal du sørge for at kontrollere kontrastforholdet. Du kan bruge denne lommeregner til at kontrollere dens tilgængelighed.
fra min basefarve bevæger jeg mig fra mørkere efter overskrifter til lysere for tilknyttet indhold.

2. Opret ikke flere nuancer af sort

Må ikke gøre dit liv vanskeligt ved at flytte din farvevælger op og ned for at producere forskellige nuancer af sort tekst over hvid baggrund.

Vi ved alle, at brug af sort tekstfarve (# 000) forårsager øjestammer for læserne, og derfor er vores løsning at skabe mørkere varianter som et alternativ. Men i stedet for at vælge 3 eller flere hex-farveværdier for hex-farve, kan vi bruge sort med anden opacitet som en løsning:

I mit eksempel ovenfor brugte jeg sort som min primære farve (# 000) og formindskede dens opacitet afhængigt af hvor det vil blive anvendt (dvs. primært indhold, sekundært indhold osv.)

3. Lav matematik for at forstå farver

De fleste af os sutter ved at vælge de rigtige farvekombinationer, og når vi ser et design med en godt orkestreret farvepalet, spørger vi os selv ”Hvordan F de gjorde det?” (Ligesom den nedenfor):

hentet fra momoandspirits

Indtil jeg lærte, at forståelse af farver ikke kun er for dem, der har designgaven siden begyndelsen af ​​tiden, at en enkel tilføjelse og subtraktion på Hue, Saturation, Brightness (HSB) vil gøre magien (vi bruger HSB til dette formel i stedet for RGB). Du kan let slippe af med det kedelige hvide over farvede baggrunde og omdanne det til et Picasso-værk som det nedenfor:

Så hvor kommer tilføjelse og subtraktion i HSB ind?

To tilgange til forståelse af farver

Der er faktisk to tilgange, vi kan gøre, og som vi kan se, har begge indstillinger den samme basefarve # B9F4BC (cirkelbaggrund), men afviger når det kommer til mappe- og stripfarve. Når vi starter, skal du altid huske, at det første tal svarer til nuance, efterfulgt af mætning og til sidst lysstyrke.

Mulighed A

Mulighed A

I valgmulighed A kan vi se, at vi holdt nuanceværdien 123 gennem figurerne (cirkel, mappe, strimmel), mens Mætning og lysstyrke er, hvor ændringen sker.

Når vi nu fokuserer på mætning af basen, der er 24 og dens lysstyrke, 96, ændrede begge værdier sig, da vi oprettede mørkere grøn til mappen. Fra mætning af 24 blev det 40 (stigning på +16) og fra lysstyrke 96 blev det 82 (reduktion af -14), hvilket viser os, at en ændring i mætning, uanset om stigning eller dekrement, har brug for en omvendt proportional tilpasning til lysstyrke, i orden for at skabe en god kontrast (vice versa). Og det samme skete i Strip, hvor vi brugte mappens mætning og lysstyrke som basisværdi, vi flyttede fra 40 til 44 (stigning på +04) og faldt fra 82 til 75 (reduktion af -07) for lysstyrke. Derfor fører vi os til formlen:

Mørkere værdi = Forøgelse i mætning er en reduktion i lysstyrke
Lettere værdi = reduktion i mætning er et forøgelse i lysstyrke

Denne formel hjalp mig hver gang jeg undrer mig over, hvilke rigtige farver jeg skal bruge på mine designs. Jeg lærte, at det bedste udgangspunkt er at have en basisfarve, og derfra skal du starte justeringerne i Mætning og lysstyrke, mens du holder nuanceværdien den samme.

Valgmulighed B

Valgmulighed B

I mulighed B anvendes det samme princip stadig (formlen vi havde ovenfor), men nuanceværdierne ændres. Og terminologierne RGB og CMY, som vi plejede at gå forbi i forskellige designmaterialer, vil nu give mening for os.

RGB står for rød, grøn og blå, mens CMY er cyan, magenta og gul. Disse terminologier havde ikke nogen betydning for mig, da jeg først startede, indtil jeg stødte på denne opdagelse af at bruge RGB og CMY til farvekombinationer.

Nu i valgmulighed B, hvis vi vil have en mørkere variation af basisfarven, er alt hvad vi skal gøre, at flytte vores farvevælger til den retning, hvor den nærmeste RGB er placeret i vores farvepalet, eller flytte den i retning af CMY for lettere variation. For eksempel:

Farvevælger

Da vi ønsker at oprette en mørkere variation af vores basefarve # B9F4BC (cirkelbaggrund), som skal anvendes i vores mappeikon, er vi nødt til at flytte vores farvevælger i den retning, hvor den nærmeste RGB er placeret (som er blå i dette sag). Men hvis vi vil have en lettere version af vores mappe, flytter vi vores vælger til venstre i nærheden af ​​CMY (i dette tilfælde gul).

* Oftere fører RGB til mørkere variation og CMY for lettere

Efter at have flyttet farvevælgeren til vores ønskede variation anvender vi nu formlen i mulighed A, hvilket resulterer i, at vi har denne farvekombination:

Rød, grøn, blå (RGB) + Valg En formel = Mørkere variation
Cyan, Magenta, Gul (CMY) + Valg A formel = Lysere variation

4. Brug afstand til at adskille grupper

Vær en generøs rum giver

Bortset fra at tilføje en linje mellem to grupper for at vise adskillelse, er det at bruge et generøst mellemrum en bedre og lettere løsning.

Som hvad nærhedsloven siger:

Objekter, der er tæt på eller tæt på hinanden, har en tendens til at blive samlet.

Fra mit eksempel ovenfor er mit mål at skabe en adskillelse mellem min titel og dens forfatter ved at bruge et stort mellemrum mellem dem, der er 24px.

5. Brug farver til at adskille rækker

Farver som separatorer

At gøre rækkegrænseflader kan til tider være kedeligt at designe, da det kun kræver duplikering af komponenten i n gange. Men på brugersiden kan det være vanskeligt at læse dem specielt, hvis der ikke er nogen stor sondring mellem den ene række til den anden. Bortset fra at bruge linjer, kan tilføjelse af farvebaggrund i rækker være meget nyttigt for brugerne i læsning, og det vil også være mere fornøjeligt at gøre for os designere

6. Multiplicer i stedet for tekst på skygge

Header design

Det er ganske udfordrende at designe overskriftskomponenter eller tilføje tekst over et billede, specielt hvis billedbaggrunden vil være dynamisk (eller kan ændres fra tid til anden).

Normalt er den almindelige løsning for tekst med dynamisk billedbaggrund tilføjelse af drop skygge, men det hjælper ikke brugerens læsbarhed. Det tilføjer mere visuelt rod omkring bogstaver og ord, fordi de udfylder mellemrummene imellem dem.

For nogle er sort / hvid farveoverlejring løsningen, som er et nyttigt hack til denne slags design. Men for nylig har jeg opdaget, hvordan jeg bruger Multiply som blandingsværktøj til en gradientfyldning.

Specifikationer for Multiplikere blandingsindstillinger

At gøre det er meget lettere end at skabe en sort baggrund over billedet og mindske dets opacitet. Når den har en grå skala, får den anden del af billedet også sin naturlige farve og gør den del, hvor teksten er placeret lidt mørkere for tekstlæsbarhed.

7. Linjelængde

Den mest almindelige ting, de fleste designere gør, er at gøre linjelængden længere, så den kan passe til dens beholder. Men det skaber øjenbelastning for vores brugere i modsætning til at have 45-65 tegn pr. Linje, hvilket er det ideelle.

Hvis du nogensinde har fundet dilemmaet med at gøre længden kortere for at gøre den ideel, men vil resultere i et stort hvidt rum i højre side som det nedenfor:

med stort hvidt rum til højre

Tøv ikke med at gøre det, og gør hele tekstkolonne centreret på linje med dets beholder, så du kan fjerne det hvide rum.

centreret indhold

8. Find ikke hjulet igen

Hvad der gør et design inkonsekvent er når det ikke er komponentbaseret. Det var, da du opdagede, at du har lavet 5 slags kortinterface, 10 knapper, 5 overskriftstitler osv.

Inden du begynder at oprette en grænseflade til et specifikt indhold, skal du prøve at kigge rundt på dine tidligere oprettede designs, for du kan se et mønster, som du kan genbruge og bruge.

I stedet for at opfinde hjulet igen og oprette et andet kort til en kunstgruppe (eksempel ovenfor), kan vi bruge artikelkortet og erstatte det med kunstgruppens indhold. Dette sparer tid for designere og gør interface også ensartet.

9. Brug mærkefarver som accenter

Vi mener normalt, at brandingfarver skal besætte en stor del af vores interfacefarver. Vi har svært ved, hvor vi kan vise vores klients chokerende neon gule, orange og lyserøde mærkefarver i vores rene og minimalistiske layout. Svaret? Brug dem som accentfarver.

10. Hæng kuglerne

Og til sidst, hvis du opretter et listedesign som det ovenfor, skal du få kugler, glyfer eller nummer til at sidde i margen for at fremhæve listen. Dette vil gøre brugerlæsbarheden flow uafbrudt og mere læselig.

Der er stadig en lang liste med design-cheatsheets, som jeg gerne vil tilføje, men i øjeblikket håber jeg, at disse 10 designtips vil hjælpe dig med at skabe designgrænseflader. Du er også velkommen til at tilføje dine snydekoder i svarene

Denne artikel er inspireret af 7 praktiske tip til snyd ved design og af tonsvis af designartikler, jeg har læst :)

Andre historier af mig

For spørgsmål, så ring mig på mhariellmosqueriola@gmail.com

giphy