Konečný sprievodca návrhom používateľského rozhrania

Obsah

• 01. Vyberte si typografiu
• 02. Vyberte správnu paletu
• 03. Štýlové odkazy a tlačidlá
• 04. Vytvorte svoje komponenty
• 05. Dokumentujte a spolupracujte

Čo je dizajn používateľského rozhrania? Lepšia otázka by bola, čo sa vlastne týka návrhu používateľského rozhrania? Estetika? Použiteľnosť? Prístupnosť? Všetky? Ako sa všetky tieto faktory spájajú, aby umožnili optimálnu používateľskú skúsenosť, a ktoré by mali byť na prvom mieste?

Prístupnosť by mala byť vždy na prvom mieste a položenie základov pre optimálnu použiteľnosť (tu pomôže použitie špičkového nástroja na tvorbu webových stránok). A potom, keď je používateľské rozhranie prístupné a použiteľné, malo by už z estetického hľadiska vyzerať celkom slušne (tu pomôžu nástroje na návrh používateľského rozhrania). Potom, aby ste sa ubezpečili, že váš návrh funguje na všetkých úrovniach, musíte ho poriadne otestovať, čo môžete urobiť pomocou nášho výberu najlepších nástrojov na testovanie používateľov. Pozrime sa podrobnejšie na základné prvky väčšiny dizajnov a na to, čo je možné urobiť, aby sme zaistili vizuálnu konzistenciu.

01. Vyberte si typografiu

Skvelá typografia (ako mnoho aspektov dizajnu) sa obmedzuje na dostupnosť. Vizuálny dizajn určite prispieva k celkovému zážitku používateľa, ale na konci dňa používatelia interagujú s používateľským rozhraním, nie ho považujú za umenie. Vďaka čitateľným písmenám sú prehľadné a čitateľné slová pomáhajú používateľom efektívne tráviť obsah. Oba sú dôležitejšie ako akákoľvek vizuálna estetika.

Kvalitne spracovaná typografia však môže byť stále esteticky uspokojivá. Čiernobiela helvetica (alebo podobné písmo) môže byť krásou už po niekoľkých jednoduchých typografických vylepšeniach. Vylepšeniami máme na mysli doladenie veľkosti písma, výšky riadku, medzery medzi písmenami a podobne - nie písmo alebo farba textu.

„Krásna“ typografia je v skutočnosti škaredá, keď je nečitateľná, pretože frustrácia vždy zvíťazí nad estetikou. Skvelý dizajn je vyvážený a harmonický.

Rovnako ako mnoho aspektov dizajnu používateľského rozhrania, ani vyladenie vizuálov na vyváženie prístupnosti a estetiky nie je výzvou. Výzvou je udržanie konzistencie v celom dizajne. Konzistencia ustanovuje jasnú hierarchiu medzi prvkami rôznej dôležitosti, čo zase pomáha používateľom rýchlejšie pochopiť používateľské rozhranie a dokonca efektívnejšie stráviť obsah.

Pokiaľ ide o čitateľnosť a čitateľnosť, minimálna prijateľná veľkosť písma, ako je definované v pokynoch na uľahčenie prístupu k webovému obsahu WCAG 2.0, je 18pt (alebo 14pt tučne). Najlepšia veľkosť písma, ktorá sa má najlepšie použiť, závisí vo veľkej miere od samotného písma, je však potrebné pamätať na vizuálnu hierarchiu a na to, ako sa táto základná veľkosť odlišuje od súhrnov a nadpisov (tj. h1>, h2>, h3>).

Pomocou svojho nástroja na návrh používateľského rozhrania, ktorý si vyberiete (budeme používať InVision Studio), vytvorte sériu textových vrstiev (T) a potom upravte všetky veľkosti tak, aby korelovali s nasledujúcou šablónou:

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

Pomocou InVision Studio (a všetkých ostatných nástrojov na návrh používateľského rozhrania) sa to deje úpravou štýlov pomocou panela inšpektora na pravej strane.

Ďalej si vyberte svoje písmo, ale dajte si pozor, pretože u niektorých typov písma si môžete všimnúť, že je to 18 pixelov p> a 22 pixelov h3> nevyzerá úplne inak. Máme dve možnosti: upraviť veľkosť písma alebo zvážiť iné písmo pre nadpisy. Ak plánujete, že váš dizajn bude ťažký, choďte s ním.

Majte na pamäti, že:

• Vizuálny dizajn používateľského rozhrania je často čulým prístupom
• O ničom nie je rozhodnuté; všetko sa môže meniť

Výška čiary

Optimálna výška riadku zaručuje, že riadky textu majú medzi sebou dostatočné medzery, aby sa dosiahla slušná úroveň čitateľnosti. Toto sa stáva čoraz viac uznávaným „štandardom“; Nástroj Google Lighthouse Audit to dokonca navrhuje ako manuálnu kontrolu (alebo dokonca ako príznak, ak text obsahuje odkazy, ktoré môžu byť príliš blízko seba v dôsledku neoptimálnej výšky riadku).

Znova nám s tým pomáha WCAG a vyhlasuje, že výšky riadkov by mali byť 1,5-násobkom veľkosti písma. Takže vo svojom nástroji na návrh používateľského rozhrania v časti Riadok (alebo podobne) jednoducho vynásobte veľkosť písma najmenej - 1,5. Napríklad, ak je základný text 18px, potom výška riadku bude 27px (18 * 1,5 - matematickú operáciu môžete vykonať aj priamo v inšpektore). Znova však majte na pamäti - ak sa 1,6x cíti lepšie, použite 1,6x. Pamätajte, že rôzne písma budú mať rôzne výsledky.

Je príliš skoro uvažovať o použití skutočných údajov v našom dizajne, ale prinajmenšom by sme mali stále používať trochu realistické údaje (dokonca aj lorem ipsum). InVision Studio má natívnu aplikáciu pre skutočné dáta, ktorá nám pomáha zistiť, ako by naša typografia mohla skutočne vyzerať.

Medzery medzi odsekmi

Medzery medzi odsekmi nie sú štýlom, ktorý môžeme deklarovať pomocou nástroja InVision Studio's Inspector. Namiesto toho budeme musieť vrstvy ručne zarovnať pomocou inteligentných sprievodcov (⌥). Podobne ako výška riadku, aj magický multiplikátor je dvojnásobný (dvojnásobná veľkosť písma). Napríklad, ak je veľkosť písma 18px, pred vstupom do nasledujúceho textového bloku by malo byť miesto aspoň 36px. Medzery medzi písmenami by mali byť minimálne 0,12.

Nemusíme si s tým robiť starosti, kým nezačneme vytvárať komponenty.

Zdieľané štýly

Ak to váš návrhový nástroj používateľského rozhrania podporuje (InVision Studio zatiaľ nie), zvážte premenu týchto typografických štýlov na „Zdieľané štýly“, aby boli rýchlo znovu použiteľné a zároveň zabezpečili vizuálnu konzistenciu. To sa zvyčajne vykonáva prostredníctvom inšpektora.

02. Vyberte správnu paletu

Výber dokonalých farieb pre váš návrh ide omnoho ďalej než len po estetickej stránke: môže informovať celú hierarchiu vášho webu.

Pokiaľ ide o dizajn používateľského rozhrania, farba je zvyčajne jednou z prvých vecí, s ktorými sa bavíme, ale učili sme sa, že ponoriť sa priamo do vizuálneho dizajnu je zlá vec. To je určite pravda, ale pokiaľ ide o vizuálnu konzistenciu, farba by mala byť hlavným záujmom, pretože hrá iné úlohy.

Farba v dizajne používateľského rozhrania môže byť skutočne efektívna, ale keďže niektorí používatelia (v skutočnosti mnohí) trpia rôznymi typmi vizuálnych postihnutí, nie je to vždy spoľahlivé. To znamená, že nejde nevyhnutne o konkrétnu použitú farbu, ale skôr o typ farby. To nemusí byť pravda, pokiaľ ide o branding, pretože farba sa v tomto ohľade používa na emocionálny dopad, ale v dizajne používateľského rozhrania sa farba používa aj na komunikáciu zámeru, zmyslu a samozrejme vizuálnej hierarchie.

01. Stark
Doplnok Stark je kompatibilný s programami Sketch a Adobe XD a pomáha vám kontrolovať farebný kontrast a simulovať farebnú slepotu priamo z plátna. Podpora pre Figma a InVision Studio už čoskoro.
02.Farby
Farby je sada 90 farebných kombinácií, ktoré majú zodpovedajúce množstvo farebného kontrastu, aby vyhovovali pokynom WCAG 2.0 - niektorým dokonca vyhovuje štandard AAA.
03. Projekt A11y
Projekt A11y je obrovským centrom pre všetky veci súvisiace s dostupnosťou. Zahŕňa zdroje, nástroje, tipy, návody a je vytváraný tvorcom doplnku Stark a získava finančné prostriedky z InVision.

Tieto tri typy farieb

Farby majú význam, takže je dôležité, aby ich nebolo príliš veľa. Príliš veľa významov vedie k ďalším veciam, ktorým musí používateľ rozumieť a pamätať si - nehovoriac o ďalších farebných kombináciách, z ktorých si musíme robiť starosti. Všeobecne by to bol odporúčaný formát:

• Farba výzvy na akciu (tiež farba hlavnej značky)
• Neutrálna tmavá farba (lepšia pre prvky používateľského rozhrania alebo tmavý režim)
• Pre všetky uvedené vyššie je to mierne svetlejšia a tmavšia variácia

Toto umožňuje:

• Tmavý režim bude ľahko dosiahnuteľný
• Naša farba CTA nikdy nebude v rozpore s inými farbami
• V každom scenári budeme schopní zdôrazniť a zrušiť zdôraznenie

Nastavte svoju paletu

Pomocou svojho výberu návrhového nástroja používateľského rozhrania vytvorte pre každú farbu (pomenovanú ako „Značka“, „Neutrálny / Svetlý“ a „Neutrálny / Tmavý“) jeden pomerne veľký umelecký plát (klepnite na A). Potom v každej kresliacej ploche vytvorte ďalšie menšie obdĺžniky so tmavšími a svetlejšími variáciami farby a tiež s ostatnými samotnými farbami.

Mierne svetlejšie a tmavšie považujeme za 10% extra bielej a 10% čiernej navyše. Po dokončení zobrazte na každom kresliacom plátne kópiu typografických štýlov. Farba týchto vrstiev textu by mala byť neutrálna svetlá, s výnimkou neutrálneho svetelného kresliaceho plátna, kde by mali byť neutrálna tmavá.

Kontrast

Ďalej budeme musieť skontrolovať naše farby, aby sme dosiahli optimálny farebný kontrast. Existuje množstvo nástrojov, ktoré to dokážu, napríklad doplnok Stark pre Sketch a Adobe XD alebo Contrast pre macOS - online riešenie ako Contrast Checker alebo Color Contrast Checker však bude v pohode.

Skontrolujte farebný kontrast pre každú kombináciu a podľa toho dolaďte farby. Ak si nie ste istí, aké farby máte použiť, skúste použiť odporúčania Color Safe.

03. Štýlové odkazy a tlačidlá

Veľkosť

Tlačidlá a odkazy, podobne ako typografia, by mali mať niekoľko variácií. Nie všetky akcie majú koniec koncov rovnakú úroveň dôležitosti a ako sme už diskutovali, farba je nespoľahlivá metóda komunikácie, takže nemôže byť hlavnou metódou ovplyvňovania vizuálnej hierarchie. Musíme sa tiež pohrať s veľkosťou.

Test vizuálnej dostupnosti je test použiteľnosti, ktorý sa používa na zistenie, či je možné na cieľové body klepnutia kliknúť. Synchronizujte dizajn zo štúdia do ruky (⌘⇧F), odošlite výslednú adresu URL testerom a nechajte ich zakrúžkovať medzi prvkami, ktoré sú podľa nich klikateľné.

Používatelia programu Non-InVision Studio môžu tiež používať program Freehand, ale používatelia programu InVision Studio môžu svoje návrhy spúšťať do programu Freehand bez problémov z aplikácie InVision Studio, čo je najrýchlejší a najefektívnejší spôsob získavania vizuálnej spätnej väzby od používateľov.

Všeobecne by sme odporúčali, aby bol text tlačidla deklarovaný ako 18px (rovnaký ako hlavný text), ale aby samotné tlačidlá mali tri variácie veľkosti:

• Normálne: 44 pixelov na výšku (zaoblené rohy: 5 pixelov)
• Veľký: 54 pixelov na výšku (zaoblené rohy: 10 pixelov)
• Extra veľké: 64 pixelov na výšku (zaoblené rohy: 15 pixelov)

To nám umožňuje, aby sa niektoré tlačidlá javili ako dôležitejšie bez toho, aby sme sa spoliehali na farbu, a tiež aby sme tlačidlá vnorili (napríklad použite tlačidlo vo vnútri minimalne vyzerajúceho poľa formulára).

Hĺbka

Bez ohľadu na to, či je klepnutím na cieľ tlačidlo alebo pole formulára, na zväčšenie hĺbky by sa mali použiť tiene, ktoré naznačujú interaktivitu. Jeden štýl tieňov pre všetky varianty tlačidiel a polí formulárov je v poriadku.

Interaktivita

Každý typ tlačidla vyžaduje variáciu, ktorá označuje jeho stav umiestnenia kurzora myši. Toto používateľovi objasní, že to, čo sa pokúsili urobiť, je úplne v poriadku a zabezpečí ich bezodkladné pokračovanie.

Toto je v skutočnosti jeden z komplexnejších aspektov zachovania vizuálnej konzistencie, pretože farba je často uprednostňovaným štýlom, ktorý sa má zmeniť, pokiaľ ide o vytvorenie stavu. Našťastie môžu byť tieto zmeny stavu pomerne jemné, takže je v poriadku zmeniť farbu na mierne svetlejšiu alebo tmavšiu variáciu - na to slúžia. To platí aj pre odkazy.

Rozhodnutie proti tomu spôsobí, že použijeme farbu, ktorá už má významný význam, čo bude mať za následok zmätok používateľov alebo sa rozhodneme prísť s inou farbou. Rozhodnutie o použití sekundárnej farby je úplne v poriadku, malo by sa však uložiť skôr pre marketingové vizuály, ako pre prvky používateľského rozhrania. Menej je viac (a jednoduchšie).

Nezabudnite tento krok opakovať pre každú artboard. Na artboard značky nepoužívajte značkové tlačidlá CTA - neskôr sa dozvieme, čo sa stane, keď určité kombinácie nebudú fungovať.

04. Vytvorte svoje komponenty

Komponenty šetria obrovský čas a všetky nástroje na návrh používateľského rozhrania túto funkciu ponúkajú (napr. V aplikácii Skica sa im hovorí Symboly). V Štúdiu môžeme vytvárať komponenty výberom všetkých vrstiev, ktoré by mali zložku tvoriť, a použitím ⌘K skratka.

Používanie komponentov

Drôtové modely sú veľmi užitočné nielen na navrhovanie vysoko použiteľných používateľských rozhraní, ale aj na zistenie toho, čo bude naše používateľské rozhranie z dlhodobého hľadiska vyžadovať. Je to niečo ako kontrola budúcnosti.

To neznamená, že musíme navrhnúť množstvo komponentov alebo byť pripravení na akýkoľvek možný scenár, ale znamená to, že musíme zaujať prístup „Čo ak?“.

Napríklad, ak náš drôtový model vyžaduje komponent 3x1, ale vieme, že obsah nie je vytesaný do kameňa, mohlo by nás trochu zamyslieť nad tým, aby sme si položili otázku: „Čo ak tieto komponenty budú nakoniec 4x1?“. Pravidlo je: dizajn iba pre potreby používateľov, ktoré už existujú, ale snaží sa robiť riešenia relatívne flexibilnými. V opačnom prípade nakoniec skončíme s veľmi chaotickým „dizajnovým dlhom“.

Teraz môžeme tento komponent znova použiť tak, že ho pretiahneme na plátno z ponuky Knižnice> Dokument na ľavej strane, aj keď je potrebné mať na pamäti, že tento pracovný postup sa môže líšiť v závislosti od vášho nástroja používateľského rozhrania.

Táto metóda vytvárania sprievodcov štýlmi (a nakoniec vytváranie samotného dizajnu) funguje zvlášť dobre s modulárnymi rozloženiami alebo rozloženiami založenými na kartách, hoci „spoločné oblasti“, ako sú hlavičky, päty a navigácie, sú tiež vynikajúcimi kandidátmi na komponent.

Rovnako ako sme to urobili s našimi typografickými štýlmi, farbami a tlačidlami, musíme si uvedomiť, že je potrebné starostlivo usporiadať všetky komponenty.

Využívanie našich pravidiel

Predtým sme si povedali poznámku o nepoužívaní značkových tlačidiel CTA na vrchole farby značky, pretože značkové tlačidlá CTA zjavne musia vyniknúť medzi všetkým ostatným. Ako teda postupovať pri vytváraní značkového komponentu, zatiaľ čo stále môžeme používať značkové tlačidlo CTA? Nakoniec, ak používame neutrálne tmavé tlačidlá napríklad pre navigačné tlačidlá, alebo jednoducho menej dôležité tlačidlá, jednoducho by to nebola možnosť, že?

Správny. Bola by to teda ideálna príležitosť na vytvorenie komponentu - konkrétne kombinácie nadpis + text + tlačidlo. Všimnite si, ako som vytvoril pozadie neutrálnej karty, aby som umožnil použitie značkového tlačidla. Podobne pole neutrálneho svetla (polia formulárov sú zvyčajne biele kvôli mentálnemu modelu, ktorý je historicky synonymom papierových foriem) nevyzerá úžasne na neutrálnom svetlom pozadí, takže ich možno použiť iba na neutrálnom tmavom pozadí - buď priamo, alebo v rámci neutrálna tmavá zložka. Takto robíme náš dizajn flexibilným, pričom dodržiavame naše pravidlá a zachovávame konzistentnosť.

Stresové testovanie

V ideálnom prípade je najrýchlejším a najefektívnejším spôsobom zabezpečenia robustnosti nášho dizajnu záťažové testovanie. Dať návrh na skúšku znamená byť krutý. Povedzme, že máme navigáciu s X počtom položiek nav, pretože to bola požiadavka; aby ste skutočne zaistili flexibilitu, pokúste sa zmeniť tieto požiadavky pridaním ďalších položiek navigácie, alebo ak chcete do diel skutočne vrhať kľúč, skúste tiež pridať položku navigácie s vyššou vizuálnou hierarchiou ako ostatné. Umožňuje naša veľkosť, typografia a pravidlá farieb niečo také? Alebo aby sme ponúkli optimálnu použiteľnosť, potrebujeme ďalšie pravidlo?

Nezabudnite, že je rozdiel medzi pridávaním pravidiel a ich ohýbaním. Viac okrajových prípadov znamená menšiu konzistenciu, takže kvôli lepšej použiteľnosti je väčšinou lepšie komponent jednoducho premyslieť.

05. Dokumentujte a spolupracujte

Ako zabezpečíme, aby sa naše návrhové súbory ľahšie používali pre nás aj ostatných návrhárov, ktorí by mohli používať náš návrhový súbor? Ich uskladnenie v spoľahlivom zdieľanom cloudovom úložisku je dôležité, ako zistíte.

Farby

Prvým krokom je uloženie všetkých farieb do políčka „Farby dokumentu“, ak sme tak ešte neurobili - uľahčíte im prístup, keď ich budeme musieť použiť v našom dizajne.Ak to chcete urobiť, otvorte v inšpektore widget pre výber farieb, v rozbaľovacej ponuke zvoľte možnosť „Farby dokumentu“ a potom kliknutím na ikonu + pridajte farbu do vzorníka. Vo väčšine nástrojov používateľského rozhrania to funguje rovnako.

Zdieľané knižnice

Ďalej musíme náš dokument - spolu s typografickými štýlmi, farbami, tlačidlami, spoločnými oblasťami a základnými komponentmi - previesť do zdieľanej knižnice.

V podstate to znamená, že každý prvok musí byť komponentom, aj keď pozostáva iba z jednej vrstvy. Kliknite na tlačidlo + ‌ na ľavom bočnom paneli Knižnice a potom importujte tento dokument do nového dokumentu. Máte pravdu: náš dokument je teraz knižnicou a je pripravený na použitie pri navrhovaní používateľských rozhraní so zaručenou konzistenciou.

InVision Studio je trochu obmedzený v tom zmysle, že sa ešte nesynchronizuje s oficiálnym nástrojom InVision Design System Manager, ale je ľahké umiestniť knižnicu do Dropboxu, aby ju mohli ďalší dizajnéri používať a aktualizovať v priebehu času. Po vykonaní zmeny (lokálne alebo vzdialene) sa každý súbor Studio, ktorý používa knižnicu (opäť lokálne alebo vzdialene), spýta, či chcete aktualizovať farby a komponenty. Takto sa udržujú dizajnérske knižnice naprieč tímami.

Pokiaľ ide o návrh používateľských rozhraní, ktoré sú vizuálne konzistentné, všetko znova použite. Navrhnite tlačidlá, potom pomocou tlačidiel vytvorte komponenty tlačidiel a potom použite
komponenty tlačidiel na vytvorenie ďalších komponentov, ako sú výstrahy a dialógové okná.

Len nevytvárajte komponenty, ktoré nie sú potrebné. Pamätajte, že budovanie knižnice je neustále úsilie zamerané na spoluprácu. Nemusí to byť dokončené naraz, dokončené iba vami alebo dokončené vôbec. Musí iba sprostredkovať jazyk.

Dizajn v mierke

S rozširovaním dizajnu sa jeho správa stáva ťažšou. Existujú rôzne úpravy, ktoré by sme mohli chcieť urobiť, aby bola efektívna a udržiavateľná, najmä preto, že systém InVision DSM so štúdiom zatiaľ nefunguje.

Napríklad by sme mohli chcieť použiť textové vrstvy na anotáciu našej knižnice ako prostriedok na vysvetlenie prípadov použitia rôznych prvkov. Pre typografické štýly môžeme dokonca upraviť text tak, aby bol popisnejší (napr. „H1> / 1,3 / 44px“). Toto hovorí h1>s by malo byť 44 pixelov a výška riadku 1,3.

Dizajnové odovzdanie

Nástroje odovzdania návrhu zobrazujú rôzne štýly používané každým prvkom v dizajne, aby vývojári mohli zostaviť aplikáciu alebo web. Tieto nástroje zahŕňajú prehľad štýlov a tiež kópiu vzorky farieb dokumentu. Vývojári môžu tieto štýly dokonca skopírovať ako kód, čo je vynikajúce, ak ste sa rozhodli vytvoriť ľubovoľnú písomnú dokumentáciu o dizajne a chcete zahrnúť reprezentácie úryvkov kódu z komponentov.

Ak sa obávate riešenia problémov a správy webových stránok, pomôže vám zabezpečenie správnej webhostingovej služby, ale pre váš systém návrhu je vhodný nástroj InVision Design Handoff, Inspect. Ak ho chcete použiť, klikneme na tlačidlo / ikonu „Zverejniť vo formáte InVision“ v aplikácii InVision Studio, otvoríme výslednú adresu URL a klepnutím prepneme do režimu Kontrola. Je to naozaj pohodlné.

Tento obsah sa pôvodne objavil v časopise net.