Vrhunski vodič za dizajn korisničkog sučelja

Sadržaj

• 01. Odaberite svoju tipografiju
• 02. Odaberite pravu paletu
• 03. Poveznice i gumbi stila
• 04. Izradite svoje komponente
• 05. Dokumentirajte i surađujte

Što je dizajn korisničkog sučelja? Bolje bi pitanje bilo, što zapravo ide u dizajn korisničkog sučelja? Estetika? Upotrebljivost? Pristupačnost? Svi oni? Kako se svi ti čimbenici ujedinjuju kako bi se omogućilo optimalno korisničko iskustvo i koji bi trebali biti na prvom mjestu?

Pristupačnost bi uvijek trebala biti na prvom mjestu, postavljajući temelje za optimalnu iskoristivost (ovdje će vam pomoći vrhunski graditelj web stranica). A onda, kada je korisničko sučelje i dostupno i upotrebljivo, već bi trebalo izgledati prilično pristojno u smislu estetike (alati za dizajn korisničkog sučelja ovdje će vam pomoći). Zatim, kako biste bili sigurni da vaš dizajn radi na svim razinama, morat ćete ga temeljito testirati, što možete učiniti s našim odabirom najboljih alata za testiranje korisnika. Pogledajmo bliže temeljne elemente većine dizajna i što se može učiniti kako bi se osigurala vizualna dosljednost.

01. Odaberite svoju tipografiju

Izvrsna tipografija (poput mnogih aspekata dizajna) svodi se na dostupnost. Vizualni dizajn zasigurno dodaje cjelokupno korisničko iskustvo, ali na kraju, korisnici komuniciraju s korisničkim sučeljem, ne gledajući ga kao na umjetnost. Čitljiva slova rezultiraju jasnoćom, a čitljive riječi pomažu korisnicima da učinkovito probave sadržaj. Obje su važnije od bilo koje vizualne estetike.

Međutim, dobro dizajnirana tipografija još uvijek može biti estetski zadovoljavajuća. Crno-bijela Helvetica (ili sličan font) može biti stvar ljepote nakon samo nekoliko jednostavnih tipografskih poboljšanja. Pod poboljšanjima podrazumijevamo dotjerivanje veličine fonta, visine retka, razmaka između slova i tako dalje, a ne fonta ili boje teksta.

Tipografija 'Lijepa' zapravo je ružna kad je nečitka jer frustracija uvijek prevlada estetiku. Izvrsni dizajn je uravnotežen i skladan.

Kao i mnogi aspekti dizajna korisničkog sučelja, fino podešavanje vizuala kako bi se uravnotežila dostupnost i estetika nije izazov. Izazov je održavanje dosljednosti tijekom cijelog dizajna. Dosljednost uspostavlja jasnu hijerarhiju između elemenata različite važnosti, što zauzvrat pomaže korisnicima da brže razumiju korisničko sučelje i čak učinkovitije probavljaju sadržaj.

Kada je riječ o čitljivosti i čitljivosti, minimalna prihvatljiva veličina fonta definirana Smjernicama o dostupnosti web sadržaja WCAG 2.0 iznosi 18pt (ili 14pt podebljano). Najbolja veličina fonta za upotrebu uvelike ovisi o samom fontu, ali važno je voditi računa o vizualnoj hijerarhiji i o tome kako se ova osnovna veličina razlikuje od sažetaka i naslova (tj. h1>, h2>, h3>).

Pomoću odabranog alata za dizajn korisničkog sučelja (koristit ćemo InVision Studio) stvorite niz slojeva teksta (T), a zatim prilagodite sve veličine kako bi se povezali sa sljedećim predloškom:

• h1>: 44 piksela
• h2>: 33 piksela
• h3>: 22 piksela
• p>: 18 piksela

S InVision Studioom (i svim ostalim alatima za dizajn korisničkog sučelja) to se postiže podešavanjem stilova pomoću ploče Inspector s desne strane.

Zatim odaberite font, ali pripazite jer ono što biste mogli primijetiti kod nekih fontova je 18 piksela p> i 22 piksela h3> ne izgleda toliko različito. Imamo dva izbora: prilagoditi veličine fonta ili razmotriti drugi font za naslove. Slijedite ovo drugo ako pretpostavljate da će vaš dizajn biti težak za tekst.

Imajte na umu da:

• Vizualni dizajn korisničkog sučelja često je pristup osjećajima
• Ništa se ne odlučuje; sve je podložno promjenama

Visina crte

Optimalna visina crte osigurava da retci teksta imaju dovoljno razmaka kako bi se postigla pristojna razina čitljivosti. To se sve više prepoznaje kao ‘standard’; Googleov alat za provjeru svjetionika to čak predlaže kao ručnu provjeru (ili čak kao zastavicu ako tekst sadrži veze koje su možda preblizu jedna drugoj kao rezultat neoptimalne visine retka).

Još jednom nam pomaže WCAG, izjavljujući da bi visina crta trebala biti 1,5x veličina fonta. Dakle, u vašem alatu za dizajn korisničkog sučelja u odjeljku „Linija“ (ili slično) jednostavno pomnožite veličinu fonta s - najmanje - 1,5. Na primjer, ako je osnovni tekst 18 piksela, tada bi visina retka bila 27 piksela (18 * 1,5 - operaciju matematike možete izvršiti i izravno u Inspektoru). Ipak, imajte na umu - ako se 1,6x osjeća bolje, upotrijebite 1,6x. Imajte na umu da će različiti fontovi dati različite rezultate.

Prerano je razmišljati o korištenju stvarnih podataka u našem dizajnu, ali, u najmanju ruku, ipak bismo trebali koristiti donekle realne podatke (čak i lorem ipsum). InVision Studio ima izvornu aplikaciju za stvarne podatke koja nam pomaže vidjeti kako bi naša tipografija zapravo mogla izgledati.

Razmak između odlomaka

Razmak između odlomaka nije stil koji možemo izjaviti pomoću Inspektora programa InVision Studio. Umjesto toga, morat ćemo ručno poravnati slojeve pomoću pametnih vodiča (⌥). Slično visini crte, magični množitelj je 2x (dvostruka veličina fonta). Kao primjer, ako je veličina fonta 18 piksela, tada bi trebalo postojati najmanje 36 piksela prije odlaska u sljedeći blok teksta. Razmak između slova trebao bi biti najmanje 0,12.

Međutim, ne trebamo se o tome brinuti dok ne počnemo izrađivati ​​komponente.

Zajednički stilovi

Ako vaš alat za dizajn korisničkog sučelja to podržava (InVision Studio još ne), razmislite o pretvaranju ovih tipografskih stilova u 'Zajedničke stilove' kako biste ih brzo mogli ponovno upotrijebiti uz istovremeno osiguravanje vizualne dosljednosti. To se obično postiže putem inspektora.

02. Odaberite pravu paletu

Odabir savršenih boja za vaš dizajn nadilazi estetiku: može informirati cijelu hijerarhiju vašeg web mjesta.

Što se tiče dizajna korisničkog sučelja, boja je uobičajeno jedna od prvih stvari s kojima se uživamo petljati, ali uče nas da je ronjenje izravno u vizualni dizajn loša stvar. To je svakako točno, no što se tiče vizualne dosljednosti, boja bi trebala biti glavna briga jer igra druge uloge.

Boja u dizajnu korisničkog sučelja može biti vrlo učinkovita, ali budući da neki korisnici (mnogi zapravo) pate od različitih vrsta oštećenja vida, nije uvijek pouzdana. Time se ne govori nužno o određenoj boji koja se koristi, već o vrsti boje. To možda nije točno kada je riječ o brendiranju, jer se boja koristi za emocionalni utjecaj u tom pogledu, ali, u dizajnu korisničkog sučelja, boja se koristi i za priopćavanje namjere, značenja i, naravno, vizualne hijerarhije.

01. Stark
Dodatak Stark kompatibilan je sa Sketch i Adobe XD i pomaže vam provjeriti kontrast boja i simulirati sljepoću u boji izravno s platna. Podrška za Figmu i InVision Studio dolazi vrlo brzo.
02.Boje
Boje je skup od 90 kombinacija boja koje imaju odgovarajuću količinu kontrasta boja kako bi se zadovoljile smjernice WCAG 2.0 - neke od njih čak uspijevaju zadovoljiti AAA standard.
03. Projekt A11y
Projekt A11y veliko je središte za sve dostupne stvari. Sadrži resurse, alate, savjete, vodiče, a kreirao ga je izrađivač dodatka Stark i financira ga od InVisiona.

Tri vrste boja

Boje imaju značenje, pa je važno da ih nema previše. Previše značenja rezultira s više stvari koje korisnik mora razumjeti i upamtiti - a da ne spominjemo više kombinacija boja zbog kojih bismo se trebali brinuti. Općenito govoreći, ovo bi bio preporučeni format:

• Boja poziva na akciju (ujedno i glavna boja robne marke)
• Neutralna tamna boja (bolje za UI elemente ili tamni način)
• Zbog svega navedenog, malo svjetlija i tamnija varijacija

To omogućuje sljedeće:

• Tamni način rada lako će se postići
• Naša CTA boja nikada se neće sukobiti s drugim bojama
• U bilo kojem scenariju moći ćemo naglasiti i de-naglasiti

Postavite svoju paletu

Pomoću odabranog alata za dizajn korisničkog sučelja stvorite po jednu prilično veliku ploču (dodirnite A) za svaku boju (nazvanu „Brand“, „Neutral / Light“ i „Neutral / Dark“). Zatim u svakoj umjetničkoj ploči izradite dodatne manje pravokutnike koji prikazuju tamnije i svjetlije varijacije boje, a također i ostale boje.

Nešto svjetlije i tamnije smatrali bismo 10 posto ekstra bijele, a 10 posto crne. Kad završite, prikažite kopiju tipografskih stilova na svakoj ploči. Boja ovih slojeva teksta trebala bi biti neutralna svjetlost, osim na ploči s neutralnim svjetlom gdje bi trebali biti neutralno tamni.

Kontrast

Dalje ćemo morati provjeriti naše boje radi optimalnog kontrasta boja. Postoje razni alati koji to mogu učiniti, na primjer dodatak Stark za Sketch i Adobe XD ili Contrast za macOS - međutim, internetsko rješenje poput Kontrast kontrasta ili Provjera kontrasta u boji dobro će poslužiti.

Provjerite kontrast boja za svaku kombinaciju i u skladu s tim podesite boje. Ako niste sigurni koje boje koristiti, pokušajte upotrijebiti preporuke Color Safe-a.

03. Poveznice i gumbi stila

Veličina

Gumbi i veze, slično poput tipografije, trebali bi imati nekoliko varijacija. Napokon, nisu sve radnje jednako važne i, kao što smo ranije raspravljali, boja je nepouzdana metoda komunikacije, pa ne može biti glavna metoda utjecaja na vizualnu hijerarhiju. Također se moramo igrati s veličinom.

Vizualni test priuštenosti test je upotrebljivosti koji se koristi da bi se utvrdilo jesu li ciljevi dodira kliknuti. Sinkronizirajte dizajn iz Studija u Freehand (⌘⇧F), pošaljite dobiveni URL testerima i neka zaokruže elemente za koje smatraju da se mogu kliknuti.

Korisnici koji nisu InVision Studio mogu koristiti i Freehand, ali korisnici InVision Studio mogu svoje dizajne u Freehand lagano lansirati iz InVision Studio, što je najbrži i najučinkovitiji način pribavljanja vizualnih povratnih informacija od korisnika.

Općenito bismo preporučili da se tekst gumba deklarira kao 18 piksela (isto kao i tekst tijela), ali da sami gumbi imaju tri varijacije u veličini:

• Normalan: Visine 44 piksela (zaobljeni kutovi: 5 piksela)
• Veliki: Visine 54 piksela (zaobljeni kutovi: 10 piksela)
• Jako veliko: Visine 64 piksela (zaobljeni kutovi: 15 piksela)

To nam omogućuje da određeni gumbi izgledaju važniji bez oslanjanja na boju, a također i da se ugnijezde gumbe (na primjer, upotrijebite gumb unutar polja obrasca minimalnog izgleda).

Dubina

Bez obzira je li cilj dodirom gumb ili polje obrasca, sjene bi se trebale koristiti za povećanje dubine i stoga sugeriraju interaktivnost. Jedan stil sjene za sve varijante gumba i polja obrazaca je u redu.

Interaktivnost

Svaka vrsta gumba treba varijaciju koja označava svoje stanje lebdenja. Ovo korisniku objašnjava da je ono što je pokušao učiniti potpuno u redu i osigurava mu da nastavi bez odgađanja.

Ovo je zapravo jedan od složenijih aspekata održavanja vizualne dosljednosti jer je boja često omiljeni stil koji se mijenja kada je u pitanju stvaranje države. Srećom, ove promjene stanja mogu biti relativno suptilne, pa je u redu promijeniti boju u nešto svjetliju ili tamniju varijaciju - za to su i služile. To se odnosi i na poveznice.

Odlukom protiv toga navest ćemo se da koristimo boju koja ili već ima značajno značenje, što će rezultirati zbunjenjem korisnika ili ćemo odlučiti izaći s drugom bojom. Odluka o upotrebi sekundarne boje potpuno je u redu, ali treba je spremiti za marketinške vizualne elemente, a ne za korisničke sučelja. Manje je više (i lakše).

Ne zaboravite ponoviti ovaj korak za svaku ploču. Nemojte uključivati ​​markirane CTA gumbe na umjetničku ploču marke - kasnije ćemo pokriti što se događa kada određene kombinacije ne uspiju.

04. Izradite svoje komponente

Komponente štede vrijeme i svi alati za dizajn korisničkog sučelja nude ovu značajku (npr. U Sketchu zovu se simboli). U Studiju možemo stvoriti komponente odabirom svih slojeva koji bi trebali činiti komponentu i pomoću theK prečac.

Korištenje komponenata

Žičani okviri vrlo su korisni, ne samo za dizajniranje korisničkih sučelja visoke iskoristivosti, već i za otkrivanje onoga što će naše korisničko sučelje dugoročno zahtijevati. To je nekako kao zaštita budućnosti.

To ne znači da trebamo dizajnirati puno komponenata ili biti spremni za bilo koji mogući scenarij, ali znači da moramo primijeniti stav 'Što ako?'.

Na primjer, ako naš žičani okvir poziva komponentu 3x1, ali znamo da sadržaj nije čvrsto postavljen, malo razmišljanja moglo bi nas dovesti do pitanja: ‘Što ako ove komponente na kraju budu 4x1?’. Pravilo je: dizajnirati samo za potrebe korisnika koji već postoje, ali pokušati učiniti rješenja relativno fleksibilnima. U protivnom ćemo kasnije završiti s vrlo neurednim 'dizajnerskim dugom'.

Sada možemo ponovno upotrijebiti ovu komponentu povlačenjem na platno iz Knjižnice> Dokument s lijeve strane, iako imajte na umu da se taj tijek rada može razlikovati ovisno o vašem alatu korisničkog sučelja.

Ova metoda stvaranja stilskih vodiča (i na kraju stvaranja samog dizajna) posebno dobro funkcionira s modularnim izgledima temeljenim na karticama, iako su 'zajednička područja' poput zaglavlja, podnožja i navigacije također izvrsni kandidati za komponentu.

Baš kao što smo učinili s našim tipografskim stilovima, bojama i gumbima, moramo se sjetiti da pažljivo organiziramo svoje komponente.

Koristeći naša pravila

Ranije smo primijetili kako se ne koriste markirani CTA gumbi na vrhu marke, jer se markirani CTA gumbi očito trebaju isticati među svim ostalim. Pa kako da krenemo u stvaranje markirane komponente, a da i dalje koristimo markirani CTA gumb? Napokon, ako koristimo neutralne tamne gumbe za, recimo, navigacijske tipke ili jednostavno manje važne tipke, to jednostavno ne bi bilo moguće, zar ne?

Pravo. Dakle, ovo bi bila idealna prilika za stvaranje komponente - konkretno, kombinacije naslova + teksta + gumba. Primijetite kako sam stvorio pozadinu „kartice s neutralnim svjetlom“ kako bih omogućio upotrebu markiranog gumba. Slično tome, polje neutralnog svjetlosnog oblika (polja obrasca obično su bijele zbog mentalnog modela koji je povijesno sinonim za papirnate obrasce) ne izgleda nevjerojatno na neutralnoj svijetloj pozadini pa se mogu koristiti samo na neutralnoj tamnoj pozadini - bilo izravno bilo unutar neutralna tamna komponenta. Na ovaj način svoj dizajn činimo fleksibilnim poštujući naša pravila i održavajući dosljednost.

Ispitivanje naprezanja

U idealnom slučaju, najbrži i najučinkovitiji način osiguravanja robusnosti u našem dizajnu je testiranje na stres. Staviti dizajn na test znači biti okrutan. Recimo da imamo navigaciju s X količinom nav stavki jer je to bio uvjet; kako biste stvarno osigurali fleksibilnost, pokušajte promijeniti ove zahtjeve dodavanjem više navigacijskih stavki ili, da biste zaista ubacili ključ, pokušajte dodati i navigacijsku stavku s višom vizualnom hijerarhijom od ostalih. Dopuštaju li naša pravila o veličini, tipografiji i boji takvo nešto? Ili da bismo ponudili optimalnu iskoristivost, trebamo li još jedno pravilo?

Imajte na umu da postoji razlika između dodavanja pravila i savijanja pravila. Više rubnih slučajeva znači manje dosljednosti, pa je većinu vremena zbog korisnosti jednostavno preispitati komponentu.

05. Dokumentirajte i surađujte

Kako olakšati korištenje naših dizajnerskih datoteka i sebi i svim drugim dizajnerima koji bi mogli koristiti našu dizajnersku datoteku? Pa, sigurno je da ćete ih čuvati u pouzdanoj, zajedničkoj pohrani u oblaku, kao što ćete saznati.

Boje

Prvi je korak spremiti sve boje u uzorak „Boje dokumenata“ ako to već nismo učinili - to će im olakšati pristup kada ih trebamo primijeniti u svom dizajnu.Da biste to učinili, otvorite widget za odabir boja s Inspektora, s padajućeg izbornika odaberite 'Boje dokumenta', a zatim kliknite ikonu + da biste dodali boju u uzorak. To funkcionira na isti način u većini alata korisničkog sučelja.

Zajedničke knjižnice

Dalje, moramo pretvoriti naš dokument - zajedno s tipografskim stilovima, bojama, gumbima, zajedničkim prostorima i osnovnim komponentama - u zajedničku knjižnicu.

U osnovi to znači da svaki element mora biti komponenta, čak i ako se sastoji od samo jednog sloja. Kliknite gumb + ‌ na bočnoj traci Knjižnice s lijeve strane, a zatim uvezite upravo ovaj dokument u novi dokument. Točno: naš je dokument sada knjižnica i spreman je za upotrebu za dizajniranje korisničkih sučelja s zajamčenom dosljednošću.

InVision Studio donekle je ograničen u smislu da se još uvijek ne sinkronizira sa službenim alatom Innovation System System Manager, ali dovoljno je jednostavno smjestiti knjižnicu u Dropbox kako bi ga drugi dizajneri mogli koristiti i ažurirati s vremenom. Kada se izvrši promjena (lokalno ili udaljeno), svaka će Studio datoteka koja koristi knjižnicu (opet lokalno ili daljinski) pitati želite li ažurirati boje i komponente. Tako se održavaju knjižnice dizajna u svim timovima.

Što se tiče dizajniranja korisničkih sučelja koja su vizualno dosljedna, ponovno upotrijebite sve. Gumbi za dizajn, zatim pomoću gumba stvorite komponente gumba, a zatim upotrijebite
komponente gumba za stvaranje drugih komponenata, poput upozorenja i dijaloga.

Samo nemojte stvarati komponente koje nisu potrebne. Imajte na umu da je izgradnja knjižnice trajni napor u suradnji. Ne mora biti dovršen odjednom, dovršen od vas samih ili dovršen ikad. Mora samo prenijeti jezik.

Dizajn u mjerilu

Kako se dizajn širi, upravljanje njime postaje sve teže. Postoje razne prilagodbe koje bismo možda željeli napraviti kako bi ostali učinkoviti i održivi, ​​pogotovo jer DSV InVision još ne radi sa Studioom.

Na primjer, možda bismo htjeli koristiti tekstualne slojeve za označavanje naše knjižnice kao sredstvo objašnjavanja slučajeva upotrebe različitih elemenata. Što se tipografskih stilova tiče, mogli bismo čak i tekst urediti kako bi bio opisniji (npr. "H1> / 1.3 / 44px"). Ovo govori to h1>s trebaju biti 44 piksela i imati visinu crte od 1,3.

Predaja dizajna

Alati za primopredaju dizajna prikazuju različite stilove koje koristi svaki element u dizajnu, tako da programeri mogu izraditi aplikaciju ili web mjesto. Ovi alati uključuju pregled stilova i također kopiju uzorka 'boje dokumenta'. Razvojni programeri mogu čak kopirati ove stilove kao kod, što je izvrsno ako ste odlučili izraditi bilo kakvu pisanu dokumentaciju o dizajnu i želite uključiti prikaze isječaka koda komponenata.

Ako ste zabrinuti za rješavanje problema i upravljanje web mjestom, pomoći će vam osigurati da imate ispravnu uslugu web hostinga, ali za vaš sustav dizajna treba upotrijebiti InVisionov alat za primopredaju dizajna, Inspect. Da bismo je iskoristili, u InVision Studiju kliknite gumb / ikonu „Objavi u InVision“, otvorimo rezultirajući URL i zatim dodirnite za prelazak u način pregleda. Stvarno je prikladno.

Ovaj se sadržaj izvorno pojavio u časopisu net.