10 varalica za dizajniranje korisničkih sučelja

Vjerojatno bih pretpostavio da je većina nas započela s dizajnom sučelja s najmanje znanja ili uopće ništa. No, iako su izgledi bili protiv nas u startu, uspjeli smo kroz brojne dizajnerske knjige i članke shvatiti kako funkcioniraju boje, tipografija, izgled itd. Sjećam se kako je to utvrđeno u nama kod Make Technology, UX-ove tvrtke, da se dizajn ne može jednostavno objasniti bojama, oblicima i tekstom. To je proces koji iza sebe ima „Zašto“ da svaki put kada stvorimo veći tekst, dodamo sjenu ili promijenimo boju, mora postojati razlog zašto stvari moraju biti.

Stoga ću u ovom članku podijeliti popis stvari koje sam naučio od različitih tvrtki, dizajnera, stvari koje sam naučio u dizajniranju korisničkih sučelja i nova otkrića koja sam pronašla usput:

* Izjava o odricanju odgovornosti: Sljedeći uzorci "nemojte" ne moraju nužno značiti da nisu u pravu. To je naša osnova kako se možemo poboljšati od dobrog dizajnerskog rješenja do mnogo boljeg

1. Ovaj je tekst važan, učinite ga većim!

Kada se suočite sa sadržajem za koji je potrebna hijerarhija fonta, povećavanje teksta i isticanja teksta obično ne rješava problem, baš kao ni u nastavku:

Hijerarhija fonta ne odnosi se na male i velike veličine fonta. Riječ je o pravoj mješavini veličine, težine i boja koji stvara kontrast. Što je veći kontrast, to bolje.

Izvinjava se ako fotografija dolazi u obliku niske rezolucije ️

Pa kako stvoriti bolji kontrast?

  • Ne koristite jednu vrstu utega različitih veličina fonta da biste stvorili kontrast i hijerarhiju.
  • Umjesto toga, upotrijebite hrabriji i tamniji stil za primarni sadržaj ili manji i lakši za sekundarni sadržaj (manje važan).
  • Napravite tri vrste teksta u boji koja varira od tamne do svijetle (pogledajte primjer u nastavku). Obično koristim svoju osnovnu boju kao boju teksta.
  • Ne bojte se primijeniti velike praznine u fontima na vaše predmete (tj. Zaglavlje 24px, tekst tijela 16px, meta 10px itd.). Veći jaz = bolji kontrast.
  • Pogledajte Modularscale internetski kalkulator koji možete koristiti za stvaranje bolje hijerarhije fonta.
  • Zapamtite, kontrast je = veličina + težina + boja.
  • I na kraju, provjerite njegov omjer kontrasta. Pomoću ovog kalkulatora možete provjeriti njegovu dostupnost.
iz svoje osnovne boje prelazim s tamnijeg za naslove na svjetlijeg za pomoćni sadržaj.

2. Ne stvarajte više nijansi crne

Ne otežavajte život pomicanjem odabirača boja gore-dolje kako biste stvorili različite nijanse crnog teksta preko bijele pozadine.

Svi znamo da upotreba crne boje teksta (# 000) uzrokuje naprezanje očiju kod čitatelja, pa je naše rješenje stvoriti tamnije varijante kao alternativu. Ali umjesto odabira boje s tri ili više šesterokutnih vrijednosti boje, kao rješenje možemo koristiti crnu boju s različitom neprozirnošću:

U gornjem primjeru koristio sam crnu boju kao svoju osnovnu boju (# 000) i smanjio neprozirnost ovisno o mjestu na kojem će se primijeniti (tj. Primarni sadržaj, sekundarni sadržaj itd.)

3. Učini matematiku za razumijevanje boja

Većina nas usisava u odabiru pravih kombinacija boja, a kad god vidimo dizajn s dobro orkestriranom paletom boja, postavljamo si pitanje „Kako su oni to učinili?“ (Baš poput ove u nastavku):

preuzeto iz momoandspirita

Dok nisam naučio da razumijevanje boja nije samo za one koji imaju dar dizajna od početka vremena, jednostavno dodavanje i oduzimanje kod Hue, Saturation, Svjetline (HSB) učinit će magiju (za to ćemo koristiti HSB formula umjesto RGB). Lako se možete riješiti dosadne bijele boje u obojenoj pozadini i pretvoriti je u Picassovo djelo poput onoga dolje:

Pa gdje dolazi zbrajanje i oduzimanje u HSB-u?

Dva pristupa za razumijevanje boja

Zapravo postoje dva pristupa, a kao što vidimo, obje mogućnosti imaju istu osnovnu boju # B9F4BC (pozadina kruga), ali se razlikuju kada je riječ o boji mape i trake. U početku se uvijek sjetimo da prvi broj odgovara Hue, nakon čega slijedi Zasićenost i na kraju Svjetlina.

Opcija A

Opcija A

U opciji A, možemo vidjeti da smo zadržali vrijednost Hue 123 kroz oblike (krug, mapu, traku), dok se promjena i zasićenost događaju.

Sada, dok se fokusiramo na zasićenost baze koja iznosi 24 i njezinu svjetlinu, 96, obje su se vrijednosti promijenile kada smo stvorili tamnije zelenu za mapu. Iz saturacije 24 postalo je 40 (prirast od +16), a iz svjetline 96 postala je 82 (smanjenje od -14), što nam pokazuje da je za promjenu zasićenja bilo da je potrebno inkrementalno ili deklartalno obrnuto proporcionalno podešavanje svjetline, kako bi se stvoriti dobar kontrast (obrnuto). Ista stvar se dogodila u Strip-u, koristeći baznu zasićenost i svjetlinu mape, pomaknuli smo se sa 40 na 44 (prirasta od +04) i smanjili sa 82 na 75 (manjak od -07) za svjetlinu. Zbog toga nas vodi do formule:

Tamnija vrijednost = Povećanje zasićenja je smanjenje u Svjetlini
Vrijednost svjetlije = Smanjenje zasićenosti je povećanje svjetline

Ova mi je formula pomogla da se svaki put pitam koje ispravne boje trebam koristiti u dizajnu. Naučio sam da je najbolje polazište imati osnovnu boju, a odatle započnite prilagodbe u zasićenosti i svjetlini, istovremeno zadržavajući vrijednost Hue.

Opcija B

Opcija B

U opciji B i dalje se primjenjuje isti princip (formula koju smo imali gore), ali vrijednosti Hue se mijenjaju. A terminologije RGB i CMY kroz koje smo prošli u različitim dizajnerskim materijalima sada će nam imati smisla.

RGB označava crvenu, zelenu i plavu, a CMY plavu, magenta i žutu. Te terminologije nisu imale nikakvu važnost za mene kad sam prvi put započeo, dok nisam naišao na ovo otkriće upotrebe RGB i CMY za kombinacije boja.

U opciji B, ako želimo imati tamniju varijantu osnovne boje, sve što trebamo učiniti je pomaknuti biranje boja u smjeru u kojem se nalazi najbliži RGB u našoj boji, ili premjestiti u smjeru CMY za lakša varijacija. Na primjer:

Birač boja

Budući da želimo stvoriti tamniju varijantu naše osnovne boje # B9F4BC (pozadina kruga) koja će se primijeniti u našoj ikoni Mape, potrebno je da odaberemo boju u smjeru u kojem se nalazi najbliži RGB (koji je plav u ovom slučaj). Ali ako želimo imati svjetliju verziju naše mape, pomaknut ćemo svoj birač ulijevo, u blizini CMY-a (u ovom slučaju Yellow).

* Češće RGB dovodi do tamnije varijacije, a CMY za svjetlije

Nakon što smo odabrali boju na željenu varijaciju, sada primjenjujemo formulu u Opciji A, što nas rezultira ovom kombinacijom boja:

Crvena, zelena, plava (RGB) + Opcija A formula = Tamnija varijacija
Cijan, magenta, žuta (CMY) + Opcija A formula = Svjetlije varijacije

4. Upotrijebite razmak za odvajanje grupa

Budite velikodušni davatelj prostora

Osim dodavanja crte između dvije skupine za prikaz razdvajanja, korištenje velikodušnog razmaka je bolje i lakše rješenje.

Kao što kaže Zakon blizine:

Predmeti koji se nalaze u blizini ili su međusobno blizu, imaju tendenciju grupiranja.

Iz mog gornjeg primjera, moj cilj je stvoriti razdvajanje između mog naslova i njegovog pisca pomoću velikog razmaka između njih, koji je 24 px.

5. Koristite boje za odvajanje redaka

Boje kao separatori

Izrada sučelja redova ponekad bi mogla biti dosadna dizajniranju, jer zahtijeva samo dupliranje komponente n puta. Ali s korisničke strane čitanje istih može biti teško posebno ako nema velike razlike između redaka u redu. Prema tome, osim korištenja linija, dodavanje boje pozadine u redovima može biti od velike koristi za čitanje, a također će više uživati ​​za nas dizajnere

6. Pomnožite umjesto Ispusti sjeni tekst

Dizajn zaglavlja

Dizajniranje komponenti zaglavlja ili dodavanje teksta preko slike poprilično je izazovno posebno ako će pozadina slike biti dinamična (ili se s vremena na vrijeme može mijenjati).

Obično je rješenje za tekst s pozadinom dinamičke slike dodavanje sjene, ali to ne pomaže korisniku u čitanju. To dodaje više vizualne nereda oko slova i riječi jer oni popunjavaju razmake između njih.

Za neke je sloj crno / bijele boje rješenje koje je koristan hack za takve vrste dizajna. Ali nedavno sam otkrio kako upotrijebiti alat Multiply kao mješavinu za gradijentno punjenje.

Specifikacije za mogućnosti višestrukog miješanja

To je mnogo lakše nego stvoriti crnu pozadinu preko slike i smanjiti njenu neprozirnost. Također, dobivanje sive razmjere čini da drugi dio slike zadržava svoju prirodnu boju i čini onaj dio na kojem je tekst malo tamniji, radi čitljivosti teksta.

7. Duljina linije

Zajedničko je što većina dizajnera čini dulju liniju kako bi mogla stati u njezin spremnik. No, to stvara napetost za oči našim korisnicima za razliku od 45-65 znakova po liniji što je idealno.

Ako ste se ikada susreli s dilemom da skratite duljinu kako biste je učinili idealnom, ali rezultirat će velikim bijelim prostorom s desne strane poput onoga dolje:

s velikim bijelim prostorom s desne strane

Nemojte se ustručavati to i usmjerite cijeli centar stupca teksta u njegov spremnik kako biste uklonili bijeli prostor.

sadržajem centriran

8. Ne izumite kotač

Ono što dizajn čini nedosljednim jest kada se ne temelji na komponentama. Tada ste shvatili da ste napravili 5 vrsta sučelja za kartice, 10 gumba, 5 stilova naslova naslova itd.

Prije nego što započnete s izradom sučelja za određeni sadržaj, pokušajte razgledati prethodno stvorene dizajne jer ćete vidjeti obrazac koji možete reciklirati i koristiti.

Umjesto da izmislimo kotač i napravimo drugu karticu za Art Group (gore navedeni primjer), možemo koristiti karticu Article i zamijeniti je sadržajem Art Group. To će uštedjeti vrijeme dizajnerima i također učiniti sučelje dosljednim.

9. Koristite robne marke kao naglaske

Obično mislimo da branding boje moraju zauzimati veliki komad naših boja sučelja. Teško imamo gdje prikazati šokantne neonske žute, narančaste i ružičaste boje branda u našem čistom i minimalističkom izgledu. Odgovor? koristite ih kao naglasne boje.

10. Objesite metke

I na kraju, ako kreirate dizajn popisa poput onog gore, napravite da meci, glifi ili broj sjede na margini da biste istaknuli popis. Na taj će način tok čitljivosti korisnika biti neprekidan i čitljiviji.

Želim dodati još dugi popis obrazaca za dizajn, ali za sada se nadam da će vam ovih 10 savjeta za dizajn pomoći u kreiranju dizajnerskih sučelja. Također, slobodno dodajte svoje varalice u odgovore

Ovaj je članak inspiriran 7 praktičnih savjeta za varanje dizajna i mnoštvom dizajnerskih članaka koje sam pročitao :)

Ostale priče od mene

Za bilo kakva pitanja pišite mi na mhariellmosqueriola@gmail.com

giphy