Končni vodič za oblikovanje uporabniškega vmesnika

Vsebina

• 01. Izberite svojo tipografijo
• 02. Izberite pravo paleto
• 03. Stilske povezave in gumbi
• 04. Ustvari svoje komponente
• 05. Dokumentirajte in sodelujte

Kaj je oblikovanje uporabniškega vmesnika? Boljše vprašanje bi bilo, kaj dejansko gre za oblikovanje uporabniškega vmesnika? Estetika? Uporabnost? Dostopnost? Vse? Kako se vsi ti dejavniki združijo, da omogočijo optimalno uporabniško izkušnjo in kateri bi morali biti na prvem mestu?

Dostopnost mora biti vedno na prvem mestu in postaviti temelje za optimalno uporabnost (pri tem vam bo v pomoč vrhunski graditelj spletnih strani). In potem, ko je uporabniški vmesnik hkrati dostopen in uporaben, bi moral biti že estetsko videti precej spodobno (tu bodo pomagala orodja za oblikovanje uporabniškega vmesnika). Nato ga boste morali temeljito preizkusiti, da bo vaš dizajn deloval na vseh ravneh, kar lahko storite z našo izbiro najboljših orodij za testiranje uporabnikov. Oglejmo si podrobneje temeljne elemente večine modelov in kaj lahko naredimo, da zagotovimo vizualno skladnost.

01. Izberite svojo tipografijo

Odlična tipografija (tako kot mnogi vidiki oblikovanja) se skriva v dostopnosti. Vizualno oblikovanje zagotovo prispeva k splošni uporabnikovi izkušnji, toda na koncu uporabniki interakcijo z uporabniškim vmesnikom ne vidijo kot umetnost. Čitljive črke povzročajo jasnost, berljive besede pa pomagajo uporabnikom učinkovito prebaviti vsebino. Oboje je pomembnejše od katere koli vizualne estetike.

Dobro oblikovana tipografija pa je še vedno lahko estetsko zadovoljiva. Črno-bela Helvetica (ali podobna pisava) je lahko lepota že po nekaj preprostih tipografskih izboljšavah. Pod izboljšavami mislimo na prilagajanje velikosti pisave, višine vrstic, razmika med črkami in tako naprej - ne pisave ali barve besedila.

Tipografija 'Beautiful' je pravzaprav grda, ko je neberljiva, ker frustracija vedno prevlada nad estetiko. Odličen dizajn je uravnotežen in harmoničen.

Tako kot mnogi vidiki oblikovanja uporabniškega vmesnika tudi fino uglaševanje vizualnih elementov za uravnoteženje dostopnosti in estetike ni izziv. Izziv je ohranjanje doslednosti skozi celotno zasnovo. Usklajenost vzpostavlja jasno hierarhijo med različno pomembnimi elementi, kar uporabnikom pomaga hitreje razumeti uporabniški vmesnik in celo učinkoviteje prebaviti vsebino.

Ko gre za čitljivost in berljivost, je najmanjša sprejemljiva velikost pisave, kot je opredeljena v smernicah za dostopnost do spletnih vsebin WCAG 2.0, 18pt (ali 14pt krepko). Najboljša velikost pisave, ki jo je treba uporabiti, je v veliki meri odvisna od same pisave, vendar je pomembno, da ste pozorni na vizualno hierarhijo in kako se ta osnovna velikost razlikuje od povzetkov in naslovov (tj. h1>, h2>, h3>).

Z izbranim orodjem za oblikovanje uporabniškega vmesnika (uporabili bomo InVision Studio) ustvarite vrsto besedilnih slojev (T) in nato prilagodite vse velikosti, da se ujemajo z naslednjo predlogo:

• h1>: 44 slikovnih pik
• h2>: 33 slikovnih pik
• h3>: 22 slikovnih pik
• p>: 18 slikovnih pik

Z InVision Studio (in vsemi ostalimi orodji za oblikovanje uporabniškega vmesnika) to storimo tako, da prilagodimo sloge s pomočjo plošče Inspector na desni strani.

Nato izberite pisavo, vendar pazite, kajti pri nekaterih pisavah boste morda opazili 18px p> in 22 slikovnih pik h3> ni videti tako drugače. Na voljo imamo dve možnosti: prilagodite velikost pisave ali razmislite o drugačni pisavi za naslove. Pojdite s slednjim, če predvidevate, da bo vaš dizajn težaven z besedilom.

Upoštevajte, da:

• Vizualno oblikovanje uporabniškega vmesnika je pogosto pristop, ki občuti črevesje
• Nič ni odločeno; vse se lahko spremeni

Višina vrstice

Optimalna višina vrstic zagotavlja, da imajo vrstice besedila dovolj razmika, da dosežejo dostojno raven berljivosti. To postaja vse bolj priznano kot „standard“; Googlovo orodje Lighthouse Audit predlaga celo ročno preverjanje (ali celo zastavico, če besedilo vsebuje povezave, ki so morda preblizu skupaj zaradi neoptimalne višine vrstice).

Še enkrat nam pri tem pomaga WCAG, ki pravi, da morajo biti višine vrstic 1,5-krat večje od velikosti pisave. Torej v orodju za oblikovanje uporabniškega vmesnika v razdelku »Črta« (ali podobno) preprosto pomnožite velikost pisave z - vsaj - 1,5. Na primer, če je osnovno besedilo 18 px, potem bi bila višina vrstice 27 px (18 * 1,5 - operacijo matematike lahko izvedete tudi neposredno v pregledovalniku). Še enkrat pa bodite pozorni - če se 1.6x počuti bolje, uporabite 1.6x. Ne pozabite, da bodo različne pisave povzročile različne rezultate.

Prezgodaj je razmišljati o uporabi resničnih podatkov v našem oblikovanju, vendar bi morali vsaj še vedno uporabiti nekoliko realne podatke (celo lorem ipsum). InVision Studio ima izvorno aplikacijo za resnične podatke, ki nam pomaga videti, kako bi lahko dejansko izgledala naša tipografija.

Razmik med odstavki

Razmik med odstavki ni slog, ki bi ga lahko razglasili s pomočjo InVision Studio's Inspector. Namesto tega bomo morali ročno poravnati sloje s pametnimi vodiči (⌥). Podobno kot višina črte je tudi magični množitelj 2x (dvojna velikost pisave). Na primer, če je velikost pisave 18 slikovnih pik, mora biti prostor vsaj 36 slikovnih pik, preden se premaknete v naslednji besedilni blok. Razmik med črkami mora biti najmanj 0,12.

Vendar nas glede tega ni treba skrbeti, dokler ne začnemo ustvarjati komponent.

Skupni slogi

Če vaše orodje za oblikovanje uporabniškega vmesnika to podpira (InVision Studio še ne), razmislite o spreminjanju teh tipografskih stilov v »Skupne sloge«, da jih boste lahko hitro ponovno uporabili, hkrati pa zagotovite vizualno skladnost. Običajno to doseže inšpektor.

02. Izberite pravo paleto

Izbira popolnih barv za vaš dizajn presega estetiko: lahko informira celotno hierarhijo vašega spletnega mesta.

Ko gre za oblikovanje uporabniškega vmesnika, je barva običajno ena prvih stvari, s katerimi se radi zabavamo, vendar nas učijo, da je potapljanje naravnost v vizualno oblikovanje slabo. To zagotovo drži, toda pri vizualni doslednosti bi morala biti barva glavna skrb, ker igra druge vloge.

Barva pri oblikovanju uporabniškega vmesnika je lahko zelo učinkovita, a ker nekateri uporabniki (mnogi dejansko) trpijo zaradi različnih vrst vidnih okvar, ni vedno zanesljiva. Kot rečeno, ne gre nujno za določeno barvo, ki se uporablja, temveč za vrsto barve. To morda ne drži, ko gre za blagovno znamko, saj se barva v zvezi s tem uporablja za čustveni vpliv, toda pri oblikovanju uporabniškega vmesnika se barva uporablja tudi za sporočanje namere, pomena in seveda vizualne hierarhije.

01. Stark
Vtičnik Stark je združljiv s Sketch in Adobe XD in vam pomaga pri preverjanju barvnega kontrasta in simulaciji barvne slepote neposredno s platna. Podpora za Figma in InVision Studio prihaja zelo kmalu.
02.Barve
Barve je nabor 90 barvnih kombinacij, ki imajo ustrezno mero barvnega kontrasta, da izpolnjujejo smernice WCAG 2.0 - nekaterim uspe celo izpolniti standard AAA.
03. Projekt A11y
Projekt A11y je veliko središče za vse stvari, povezane z dostopnostjo. Vključuje vire, orodja, nasvete, vadnice, ustvaril pa ga je izdelovalec vtičnika Stark in ga financira InVision.

Tri vrste barv

Barve imajo pomen, zato je pomembno, da jih ni preveč. Preveč pomenov povzroči več stvari, ki jih mora uporabnik razumeti in si jih zapomniti - da ne omenjamo več barvnih kombinacij, zaradi katerih bi nas morali skrbeti. Na splošno bi bila to priporočena oblika:

• Barva poziva k dejanju (tudi glavna barva blagovne znamke)
• Nevtralna temna barva (boljša za elemente uporabniškega vmesnika ali temni način)
• Za vse našteto nekoliko svetlejša in temnejša različica

To omogoča naslednje:

• Temni način bo enostavno dosegljiv
• Naša barva CTA ne bo nikoli v nasprotju z drugimi barvami
• V katerem koli scenariju bomo lahko poudarili in de-poudarili

Nastavite svojo paleto

Z izbranim orodjem za oblikovanje uporabniškega vmesnika ustvarite po eno veliko umetniško ploščo (tapnite A) za vsako barvo (imenovano »Znamka«, »Nevtralna / Svetla« in »Nevtralna / Temna«). Nato v vsaki umetniški plošči ustvarite dodatne manjše pravokotnike, ki prikazujejo temnejše in svetlejše različice barve ter tudi druge barve same.

Nekoliko svetlejše in temnejše bi šteli za 10 odstotkov ekstra bele in 10 odstotkov ekstra črne. Ko končate, na vsaki plošči prikažite kopijo tipografskih slogov. Barva teh besedilnih slojev mora biti nevtralna, razen na plošči nevtralne svetlobe, kjer morajo biti nevtralno temni.

Kontrast

Nato bomo morali preveriti barve za optimalni barvni kontrast. Obstajajo različna orodja, na primer vtičnik Stark za Sketch in Adobe XD ali Contrast za macOS - vendar pa se spletna rešitev, kot je Contrast Checker ali Color Contrast Checker, dobro znajde.

Preverite barvni kontrast za vsako kombinacijo in ustrezno prilagodite barve. Če niste prepričani, katere barve uporabiti, poskusite uporabiti priporočila Color Safe.

03. Stilske povezave in gumbi

Velikost

Gumbi in povezave, podobno kot tipografija, bi morali imeti nekaj različic. Konec koncev niso vsa dejanja enako pomembna in, kot smo že omenili, je barva nezanesljiva metoda komunikacije, zato ne more biti glavna metoda vplivanja na vizualno hierarhijo. Igrati se moramo tudi z velikostjo.

Vizualni preizkus cenovne dostopnosti je preizkus uporabnosti, s katerim se ugotovi, ali se zdi, da so ciljne točke možne klikanja. Sinhronizirajte zasnovo iz studia v prostoročno (⌘⇧F), pošljite nastali URL preskuševalcem in naj obkrožijo elemente, za katere menijo, da jih je mogoče klikniti.

Uporabniki, ki niso InVision Studio, lahko uporabljajo tudi Freehand, toda uporabniki InVision Studio lahko svoje načrte v Freehand brez težav predstavijo iz InVision Studio, kar je najhitrejši in najučinkovitejši način pridobivanja vizualnih povratnih informacij od uporabnikov.

Na splošno priporočamo, da je besedilo gumba razglašeno za 18 slikovnih pik (enako kot besedilo telesa), vendar naj imajo sami gumbi tri različice velikosti:

• Običajno: Višina 44 slikovnih pik (zaobljeni vogali: 5 slikovnih pik)
• Velika: Višina 54 slikovnih pik (zaobljeni vogali: 10 slikovnih pik)
• Zelo velik: 64px v višino (zaobljeni vogali: 15px)

To nam omogoča, da se nekateri gumbi zdijo pomembnejši, ne da bi se zanašali na barvo, in tudi, da se gumbi ugnezdijo (na primer uporabite gumb znotraj polja z minimalnim videzom).

Globina

Ne glede na to, ali je tarča gumba gumb ali polje obrazca, je treba za povečanje globine uporabiti sence in tako predlagati interaktivnost. En slog senc za vse različice gumbov in polj obrazcev je v redu.

Interaktivnost

Vsak tip gumba potrebuje različico, ki označuje stanje lebdenja. To uporabniku pojasnjuje, da je to, kar je poskušal storiti, popolnoma v redu in zagotavlja njegovo nemoteno nadaljevanje.

To je pravzaprav eden bolj zapletenih vidikov ohranjanja vizualne skladnosti, ker je barva pogosto priljubljeni slog, ki ga je treba spremeniti, ko gre za ustvarjanje stanja. Na srečo so te spremembe stanja lahko razmeroma nežne, zato je fino spremeniti barvo v nekoliko svetlejšo ali temnejšo različico - temu so namenjene. To velja tudi za povezave.

Če se odločimo proti temu, bomo uporabili barvo, ki ima že pomemben pomen, kar povzroči zmedo uporabnikov ali pa se odločimo, da bomo prišli do druge barve. Odločitev za uporabo sekundarne barve je povsem v redu, vendar jo je treba shraniti za tržne vizualne elemente in ne za elemente uporabniškega vmesnika. Manj je več (in lažje).

Ne pozabite ponoviti tega koraka za vsako ploščo. Ne vključite gumbov CTA z blagovno znamko na ploščo blagovne znamke - kasneje bomo obravnavali, kaj se zgodi, če določene kombinacije ne delujejo.

04. Ustvari svoje komponente

Komponente prihranijo veliko časa in vsa orodja za oblikovanje uporabniškega vmesnika ponujajo to funkcijo (npr. V programu Skica se imenujejo simboli). V Studiu lahko ustvarimo komponente tako, da izberemo vse sloje, ki naj bi sestavljali komponento, in uporabimo ⌘K bližnjica.

Uporaba komponent

Žični okviri so zelo koristni, ne samo za načrtovanje uporabniških uporabniških vmesnikov, temveč tudi za ugotavljanje, kaj bo naš uporabniški vmesnik dolgoročno potreboval. To je nekako kot zaščita prihodnosti.

To ne pomeni, da moramo načrtovati veliko komponent ali biti pripravljeni na kakršen koli možen scenarij, vendar pomeni, da moramo uporabiti odnos "Kaj če?".

Če na primer naš žični okvir zahteva komponento 3x1, vendar vemo, da vsebina ni postavljena v kamen, nas lahko malo premisleka privede do vprašanja: 'Kaj pa, če bodo te komponente na koncu 4x1?'. Pravilo je: oblikovati samo za potrebe uporabnika, ki že obstajajo, vendar poskušati rešitve narediti razmeroma prilagodljive. V nasprotnem primeru bomo pozneje prišli do nekega zelo neurejenega 'dolga za oblikovanje'.

Zdaj lahko to komponento ponovno uporabimo tako, da jo povlečemo na platno iz Knjižnice> Dokument na levi strani, čeprav ne pozabite, da se lahko ta potek dela razlikuje glede na vaše orodje uporabniškega vmesnika.

Ta način ustvarjanja vodnikov po slogu (in sčasoma tudi samega oblikovanja) deluje še posebej dobro z modularnimi postavitvami / karticami, čeprav so "skupni prostori", kot so glave, noge in navigacija, tudi odlični kandidati za komponento.

Tako kot smo zaključili s svojimi tipografskimi slogi, barvami in gumbi, ne pozabimo skrbno razporediti svojih komponent.

Uporaba naših pravil

Prej smo pripomnili, da ne uporabljamo blagovnih znamk gumbov CTA poleg barve znamke, saj morajo blagovni znamki gumbi CTA med vsem drugim očitno izstopati. Torej, kako naj začnemo ustvarjati komponento z blagovno znamko, hkrati pa še vedno lahko uporabljamo gumb z znamko CTA? Konec koncev, če uporabljamo nevtralne temne gumbe za, recimo, navigacijske gumbe ali preprosto manj pomembne gumbe, to preprosto ne bi bilo mogoče, kajne?

Prav. To bi bila torej idealna priložnost za ustvarjanje komponente - natančneje kombinacija naslov + besedilo + gumb. Upoštevajte, kako sem ustvaril kuliso z nevtralno svetlobo, da omogočim uporabo gumba z blagovno znamko. Podobno polje nevtralne svetlobe (polja obrazca so običajno bela zaradi mentalnega modela, ki je v preteklosti sinonim za papirnate obrazce) na nevtralnem svetlobnem ozadju ni videti neverjetno, zato jih je mogoče uporabiti samo na nevtralnem temnem ozadju - bodisi neposredno bodisi znotraj nevtralna temna komponenta. Tako naredimo naš dizajn prilagodljiv, hkrati pa upoštevamo naša pravila in ohranjamo doslednost.

Testiranje izjemnih situacij

V idealnem primeru je najhitrejši in najučinkovitejši način, da zagotovimo robustnost naše zasnove, testiranje na stres. Preizkusiti dizajn pomeni biti krut. Recimo, da imamo navigacijo s količino nav navtičnih elementov X, ker je bila to zahteva; če želite resnično zagotoviti prilagodljivost, poskusite spremeniti te zahteve z dodajanjem več nav elementov ali, če želite resnično vključiti ključ, poskusite dodati tudi element navigacije z višjo vizualno hierarhijo kot drugi. Ali naša pravila glede velikosti, tipografije in barv dopuščajo kaj takega? Ali pa za optimalno uporabnost rabimo še eno pravilo?

Upoštevajte, da obstaja razlika med dodajanjem pravil in upogibanjem pravil. Več robnih primerov pomeni manj doslednosti, zato je večino časa zaradi uporabnosti bolje premisliti komponento.

05. Dokumentirajte in sodelujte

Kako poenostaviti uporabo svojih oblikovalskih datotek tako zase kot za vse druge oblikovalce, ki bi lahko uporabili našo oblikovalsko datoteko? No, varno shranjevanje v zanesljivem skupnem oblaku v oblaku je pomembno, kot boste ugotovili.

Barve

Prvi korak je shraniti vse barve v vzorcu »Barve dokumentov«, če tega še nismo storili - to bo olajšalo dostop do njih, ko jih bomo morali uporabiti pri svojem oblikovanju.Če želite to narediti, v pregledniku odprite pripomoček za izbiro barv, v spustnem meniju izberite »Barve dokumentov« in nato kliknite ikono +, da dodate barvo v vzorček. To deluje na enak način v večini orodij uporabniškega vmesnika.

Skupne knjižnice

Nato moramo dokument - skupaj s tipografskimi slogi, barvami, gumbi, skupnimi prostori in osnovnimi komponentami - pretvoriti v skupno knjižnico.

To v bistvu pomeni, da mora biti vsak element komponenta, tudi če je sestavljen iz samo ene plasti. Kliknite gumb + ‌ v levi stranski vrstici Knjižnice in nato uvozite ta dokument v nov dokument. Tako je: naš dokument je zdaj knjižnica in je pripravljen za uporabo za načrtovanje uporabniških vmesnikov z zagotovljeno doslednostjo.

InVision Studio je nekoliko omejen v smislu, da se še ne sinhronizira z uradnim orodjem Design System Manager orodja InVision, vendar je knjižnico v Dropboxu dovolj enostavno, da jo lahko drugi oblikovalci sčasoma uporabljajo in posodabljajo. Ko pride do spremembe (lokalno ali na daljavo), bo vsaka datoteka Studio, ki uporablja knjižnico (znova lokalno ali oddaljeno), vprašala, ali želite posodobiti barve in komponente. Tako se vodijo knjižnice oblikovanja med skupinami.

Ko gre za oblikovanje uporabniških vmesnikov, ki so vizualno skladni, znova uporabite vse. Gumbe oblikujte, nato z gumbi ustvarite komponente gumbov, nato uporabite
komponente gumba za ustvarjanje drugih komponent, kot so opozorila in pogovorna okna.

Samo ne ustvarjajte komponent, ki niso potrebne. Ne pozabite, da je gradnja knjižnice nenehen skupen napor. Ni treba, da ga izpolnite naenkrat, dokončate sami ali dokončate kdajkoli. Le jezik mora sporočiti.

Oblikujte v obsegu

Ko se dizajn širi, je upravljanje z njim težje. Obstajajo različne prilagoditve, ki bi jih morda želeli narediti, da bi bil učinkovit in vzdržen, še posebej, ker DSM InVision še ne deluje s Studiom.

Na primer, morda želimo uporabiti besedilne sloje za označevanje naše knjižnice kot sredstvo za razlago primerov uporabe različnih elementov. Za tipografske sloge bi lahko celo besedilo uredili bolj opisno (npr. "H1> / 1.3 / 44px"). To pove to h1>s naj bo 44 slikovnih pik in višina črte 1,3.

Predavanje oblikovanja

Orodja za predajo oblikovanja prikazujejo različne sloge, ki jih uporabljajo vsi elementi v oblikovanju, tako da lahko razvijalci izdelajo aplikacijo ali spletno mesto. Ta orodja vključujejo pregled slogov in tudi kopijo vzorca „barve dokumenta“. Razvijalci lahko te sloge celo kopirajo kot kodo, kar je odlično, če ste se odločili za izdelavo kakršne koli pisne projektne dokumentacije in želite vključiti predstavitve delčkov kode komponent.

Če vas skrbi odpravljanje težav in upravljanje spletnega mesta, vam bo pomagalo, če imate pravilno storitev spletnega gostovanja, toda za vaš sistem načrtovanja je treba uporabiti orodje za predajo InVision, Inspect. Če ga želite uporabiti, v programu InVision Studio kliknemo gumb / ikono »Objavi v InVision«, odpremo nastali URL in nato tapnemo za preklop v način pregleda. Res je priročno.

Ta vsebina je bila prvotno objavljena v reviji net.