Dokonalý průvodce designem uživatelského rozhraní

Obsah

• 01. Vyberte si typografii
• 02. Vyberte správnou paletu
• 03. Stylové odkazy a tlačítka
• 04. Vytvořte své komponenty
• 05. Dokumentujte a spolupracujte

Co je design uživatelského rozhraní? Lepší otázkou by bylo, co se vlastně týká designu uživatelského rozhraní? Estetika? Použitelnost? Přístupnost? Všichni? Jak se všechny tyto faktory spojují, aby umožnily optimální uživatelský zážitek a které by měly být na prvním místě?

Přístup by měl být vždy na prvním místě, položení základů pro optimální použitelnost (zde vám pomůže použití špičkového nástroje pro tvorbu webových stránek). A pak, když je uživatelské rozhraní přístupné a použitelné, mělo by už z estetického hlediska vypadat celkem slušně (zde vám pomohou návrhové nástroje uživatelského rozhraní). Poté, abyste se ujistili, že váš návrh funguje na všech úrovních, musíte jej důkladně otestovat, což můžete udělat s naším výběrem nejlepších nástrojů pro testování uživatelů. Podívejme se blíže na základní prvky většiny návrhů a na to, co lze udělat pro zajištění vizuální konzistence.

01. Vyberte si typografii

Skvělá typografie (stejně jako mnoho aspektů designu) se omezuje na přístupnost. Vizuální design rozhodně přispívá k celkovému zážitku uživatele, ale na konci dne uživatelé interagují s uživatelským rozhraním, ne jako umění. Výsledkem čitelných písmen je srozumitelnost a čitelná slova pomáhají uživatelům efektivně trávit obsah. Oba jsou důležitější než jakákoli vizuální estetika.

Dobře navržená typografie však může být stále esteticky uspokojivá. Černobílá Helvetica (nebo podobné písmo) může být věcí krásy už po několika jednoduchých typografických vylepšeních. Vylepšeními máme na mysli vyladění velikosti písma, výšky řádků, mezery mezi písmeny atd. - ne písmo nebo barvu textu.

„Krásná“ typografie je ve skutečnosti ošklivá, když je nečitelná, protože frustrace vždy zvítězí nad estetikou. Skvělý design je vyvážený a harmonický.

Stejně jako mnoho jiných aspektů designu uživatelského rozhraní není výzvou vyladění vizuálních prvků, které vyvažují přístupnost a estetiku. Úkolem je udržení konzistence v celém designu. Konzistence zavádí jasnou hierarchii mezi prvky různé důležitosti, což zase pomáhá uživatelům rychleji pochopit uživatelské rozhraní a dokonce efektivněji trávit obsah.

Pokud jde o čitelnost a čitelnost, minimální přijatelná velikost písma definovaná v pokynech k usnadnění přístupu k webovému obsahu WCAG 2.0 je 18 bodů (nebo 14 bodů tučně). Nejlepší velikost písma, která se má použít, do značné míry závisí na samotném písmu, ale je třeba dbát na vizuální hierarchii a na to, jak se tato základní velikost odlišuje od souhrnů a nadpisů (tj. h1>, h2>, h3>).

Pomocí svého návrhového nástroje uživatelského rozhraní (použijeme InVision Studio) vytvořte řadu textových vrstev (T) a poté upravte všechny velikosti tak, aby korelovaly s následující šablonou:

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

U InVision Studio (a všech ostatních nástrojů pro návrh uživatelského rozhraní) se to provádí úpravou stylů pomocí panelu Inspektor na pravé straně.

Dále vyberte své písmo, ale pozor, protože u některých typů písma si můžete všimnout, že je to 18px p> a 22 pixelů h3> nevypadá úplně jinak. Máme dvě možnosti: vyladit velikosti písma nebo zvážit jiné písmo pro nadpisy. Pokud očekáváte, že váš návrh bude textově náročný, použijte druhou možnost.

Pamatujte, že:

• Vizuální design uživatelského rozhraní je často intuitivní
• Nic není rozhodnuto; všechno se může změnit

Výška čáry

Optimální výška řádku zajišťuje, že řádky textu mají mezi sebou dostatečné mezery, aby bylo dosaženo slušné úrovně čitelnosti. To se stále více uznává jako „standard“; Nástroj Google Lighthouse Audit to dokonce navrhuje jako manuální kontrolu (nebo dokonce jako příznak, pokud text obsahuje odkazy, které mohou být příliš blízko sebe v důsledku neoptimální výšky řádku).

Znovu nám WCAG pomáhá s tímto a deklaruje, že výšky řádků by měly být 1,5násobkem velikosti písma. Ve svém nástroji pro návrh uživatelského rozhraní v části „Řádek“ (nebo podobném) jednoduše vynásobte velikost písma - alespoň - 1,5. Například pokud je hlavní text 18px, pak by výška řádku byla 27px (18 * 1,5 - matematickou operaci můžete provést také přímo v Inspektoru). Opět však pamatujte - pokud se 1,6x cítí lépe, použijte 1,6x. Nezapomeňte, že různá písma budou mít různé výsledky.

Je příliš brzy přemýšlet o použití skutečných dat v našem designu, ale přinejmenším bychom měli stále používat poněkud realistická data (dokonce i lorem ipsum). InVision Studio má nativní aplikaci pro reálná data, která nám pomáhá zjistit, jak by naše typografie mohla ve skutečnosti vypadat.

Mezery mezi odstavci

Mezery mezi odstavci nejsou styl, který můžeme deklarovat pomocí nástroje InVision Studio's Inspector. Místo toho budeme muset vrstvy ručně zarovnat pomocí inteligentních vodítek (⌥). Podobně jako u výšky řádku je magický multiplikátor 2x (dvojnásobná velikost písma). Jako příklad, pokud je velikost písma 18px, pak by mělo být alespoň 36px místo před vstupem do dalšího textového bloku. Rozteč písmen by měla být alespoň 0,12.

S tím si však nemusíme dělat starosti, dokud nezačneme vytvářet komponenty.

Sdílené styly

Pokud to váš návrhový nástroj uživatelského rozhraní podporuje (InVision Studio zatím ne), zvažte přeměnu těchto typografických stylů na „Sdílené styly“, aby byly rychle znovu použitelné a přitom byla zajištěna vizuální konzistence. Toho se obvykle dosahuje prostřednictvím inspektora.

02. Vyberte správnou paletu

Výběr dokonalých barev pro váš návrh jde daleko za hranice estetiky: může informovat celou hierarchii vašeho webu.

Pokud jde o design uživatelského rozhraní, barva je obvykle jednou z prvních věcí, s nimiž se bavíme, ale učili jsme se, že ponořit se přímo do vizuálního designu je špatná věc. To je jistě pravda, ale pokud jde o vizuální konzistenci, barva by měla být hlavním problémem, protože hraje jiné role.

Barva v designu uživatelského rozhraní může být velmi efektivní, ale protože někteří uživatelé (mnozí ve skutečnosti) trpí různými typy zrakových postižení, není to vždy spolehlivé. To znamená, že nejde nutně o konkrétní barvu, která se používá, ale spíše o typ barvy. To nemusí být pravda, pokud jde o branding, protože barva se v tomto ohledu používá pro emocionální dopad, ale v designu uživatelského rozhraní se barva také používá pro komunikaci záměru, smyslu a samozřejmě vizuální hierarchie.

01. Stark
Plugin Stark je kompatibilní s Sketch a Adobe XD a pomáhá vám kontrolovat barevný kontrast a simulovat barevnou slepotu přímo z plátna. Podpora pro Figma a InVision Studio již brzy.
02.Barvy
Colors je sada 90 barevných kombinací, které mají odpovídající množství barevného kontrastu, aby splňovaly pokyny WCAG 2.0 - některým dokonce vyhovuje standard AAA.
03. Projekt A11y
Projekt A11y je obrovským centrem pro všechny věci související s přístupností. Zahrnuje zdroje, nástroje, tipy, výukové programy a je vytvářen výrobcem pluginu Stark a získává finanční prostředky z InVision.

Tři typy barev

Barvy mají význam, takže je důležité, abyste jich neměli příliš mnoho. Příliš mnoho významů má za následek více věcí, kterým musí uživatel rozumět a pamatovat si - nemluvě o dalších barevných kombinacích, které si musíme dělat starosti. Obecně řečeno by se jednalo o doporučený formát:

• Barva výzvy k akci (také barva hlavní značky)
• Neutrální tmavá barva (lepší pro prvky uživatelského rozhraní nebo tmavý režim)
• Pro všechny výše uvedené je mírně světlejší a tmavší variace

To umožňuje následující:

• Tmavý režim bude snadno dosažitelný
• Naše barva CTA nikdy nebude v konfliktu s jinými barvami
• V každém scénáři budeme schopni zdůraznit a de-zdůraznit

Připravte si paletu

Pomocí svého nástroje pro návrh uživatelského rozhraní vytvořte pro každou barvu (pojmenovanou „Značka“, „Neutrální / Světlá“ a „Neutrální / Tmavá“) jednu poměrně velkou kreslicí plochu (klepnutím na A). Poté v každé kreslicí ploše vytvořte další menší obdélníky zobrazující tmavší a světlejší variace barvy a také ostatní barvy samotné.

Mírně světlejší a tmavší bychom považovali za 10% extra bílé, respektive 10% černé navíc. Až budete hotovi, zobrazte kopii typografických stylů na každé kreslicí ploše. Barva těchto textových vrstev by měla být neutrální světlá, s výjimkou neutrální světlé kreslicí plochy, kde by měla být neutrální tmavá.

Kontrast

Dále budeme muset zkontrolovat optimální barevný kontrast našich barev. Existuje celá řada nástrojů, které to dokážou, například plugin Stark pro Sketch a Adobe XD nebo Contrast pro macOS - online řešení, jako je Kontrola kontrastu nebo Kontrola barevného kontrastu, však bude v pořádku.

Zkontrolujte barevný kontrast pro každou kombinaci a podle toho upravte barvy. Pokud si nejste jisti, jaké barvy použít, zkuste použít doporučení Color Safe.

03. Stylové odkazy a tlačítka

Velikost

Tlačítka a odkazy, podobně jako typografie, by měly mít několik variant. Koneckonců, ne všechny akce mají stejnou úroveň důležitosti a jak jsme již zmínili dříve, barva je nespolehlivá metoda komunikace, takže nemůže být hlavní metodou ovlivňování vizuální hierarchie. Musíme také hrát s velikostí.

Zkouška vizuální dostupnosti je test použitelnosti, který se používá k určení, zda je možné klepnout na klepnutí na cíle klepnutí. Synchronizujte design ze Studio do Freehand (⌘⇧F), pošlete výslednou adresu URL testerům a nechte je zakroužkovat mezi prvky, o kterých se domnívá, že na ně lze kliknout.

Uživatelé Non-InVision Studio mohou také používat Freehand, ale uživatelé InVision Studio mohou bez problémů spouštět své návrhy do Freehandu z InVision Studio, což je nejrychlejší a nejúčinnější způsob získávání vizuální zpětné vazby od uživatelů.

Obecně doporučujeme, aby text tlačítka byl deklarován jako 18px (stejný jako základní text), ale aby samotná tlačítka měla tři varianty velikosti:

• Normální: 44 pixelů na výšku (zaoblené rohy: 5 pixelů)
• Velký: 54 pixelů na výšku (zaoblené rohy: 10 pixelů)
• Extra velké: 64 pixelů na výšku (zaoblené rohy: 15 pixelů)

To nám umožňuje, aby některá tlačítka vypadala jako důležitější bez závislosti na barvě a také jako vnořená tlačítka (například použijte tlačítko uvnitř minimálně vypadajícího pole formuláře).

Hloubka

Bez ohledu na to, zda je terčem klepnutí tlačítko nebo pole formuláře, by se stíny měly používat ke zvýšení hloubky, a proto naznačují interaktivitu. Jeden styl stínu pro všechny varianty tlačítek a polí formulářů je v pořádku.

Interaktivita

Každý typ tlačítka potřebuje variaci k označení jeho stavu přechodu. To uživateli vysvětluje, že to, co se pokusili udělat, je naprosto v pořádku a zajišťuje, že bude moci pokračovat bez prodlení.

Toto je ve skutečnosti jeden ze složitějších aspektů zachování vizuální konzistence, protože barva je často oblíbeným stylem, který je třeba změnit při vytváření stavu. Naštěstí mohou být tyto změny stavu relativně jemné, takže je v pořádku změnit barvu na její mírně světlou nebo tmavší variantu - k tomu slouží. To platí i pro odkazy.

Rozhodnutí proti tomu způsobí, že použijeme barvu, která již má významný význam, což má za následek zmatení uživatelů nebo jiné rozhodnutí přijít s jinou barvou. Rozhodování o použití sekundární barvy je naprosto v pořádku, ale mělo by se uložit spíše pro marketingové vizuály než pro prvky uživatelského rozhraní. Méně je více (a jednodušší).

Nezapomeňte tento krok opakovat pro každou kreslicí plochu. Nezahrnujte značková tlačítka CTA na značkovou kreslicí plochu - později se budeme zabývat tím, co se stane, když určité kombinace nebudou fungovat.

04. Vytvořte své komponenty

Komponenty výrazně šetří čas a všechny nástroje pro návrh uživatelského rozhraní tuto funkci nabízejí (např. V aplikaci Sketch se jim říká Symboly). Ve Studiu můžeme vytvářet komponenty výběrem všech vrstev, které by měly komponentu tvořit, a pomocí ⌘K. zkratka.

Používání komponent

Drátové modely jsou velmi užitečné, a to nejen pro návrh uživatelských rozhraní s vysokou použitelností, ale také pro zjištění, co bude naše uživatelské rozhraní z dlouhodobého hlediska vyžadovat. Je to něco jako kontrola budoucnosti.

To neznamená, že musíme navrhnout spoustu komponent nebo být připraveni na jakýkoli možný scénář, ale znamená to, že musíme zaujmout přístup „Co kdyby?“.

Pokud například náš drátový model vyžaduje komponentu 3x1, ale víme, že obsah není vytesán do kamene, trochu rozjímání by nás mohlo vést k zamyšlení: „Co když tato komponenta skončí jako 4x1?“. Pravidlo je: design pouze pro potřeby uživatelů, které již existují, ale pokuste se učinit řešení relativně flexibilní. V opačném případě nakonec skončíme s velmi chaotickým „návrhovým dluhem“.

Nyní můžeme tuto komponentu znovu použít přetažením na plátno z Knihovny> Dokument na levé straně, i když mějte na paměti, že tento pracovní postup se může lišit v závislosti na vašem nástroji uživatelského rozhraní.

Tato metoda vytváření průvodců stylem (a případně vytvoření samotného návrhu) funguje obzvláště dobře u modulárních / kartových rozvržení, ačkoli „společné oblasti“, jako jsou záhlaví, zápatí a navigace, jsou také vynikajícími kandidáty na komponentu.

Stejně jako u našich typografických stylů, barev a tlačítek musíme pamatovat na pečlivé uspořádání našich komponent.

Využití našich pravidel

Dříve jsme si poznamenali, že nepoužíváme značková tlačítka CTA nad barvu značky, protože značková tlačítka CTA evidentně musí mezi všemi ostatními vyniknout. Jak tedy postupovat při vytváření značkové komponenty, zatímco stále můžeme používat značkové tlačítko CTA? Koneckonců, pokud používáme neutrální tmavá tlačítka pro, řekněme, navigační tlačítka nebo jednoduše méně důležitá tlačítka, to by prostě nebylo možné, že?

Že jo. Byla by to tedy ideální příležitost k vytvoření komponenty - konkrétně kombinace nadpis + text + tlačítko. Všimněte si, jak jsem vytvořil pozadí karty „neutrálního světla“, abych umožnil použití značkového tlačítka. Podobně pole neutrálního světla (pole formuláře jsou obvykle bílá kvůli mentálnímu modelu, který je historicky synonymem papírových forem) nevypadá úžasně na neutrálním světlém pozadí, takže je lze použít pouze na neutrálním tmavém pozadí - buď přímo, nebo uvnitř neutrální tmavá složka. Takto děláme náš design pružným a přitom dodržujeme naše pravidla a zachováváme konzistenci.

Stresové testování

V ideálním případě je nejrychlejší a nejúčinnější způsob, jak zajistit robustnost v našem designu, zátěžovým testem. Zkoušet design znamená být krutý. Řekněme, že máme navigaci s X množstvím položek nav, protože to byl požadavek; Chcete-li skutečně zajistit flexibilitu, zkuste změnit tyto požadavky přidáním dalších položek navigace, nebo chcete-li skutečně hodit klíč do děl, zkuste také přidat položku navigace s vyšší vizuální hierarchií než ostatní. Umožňují naše pravidla velikosti, typografie a barev něco takového? Nebo abychom nabídli optimální použitelnost, potřebujeme další pravidlo?

Pamatujte, že je rozdíl mezi přidáváním pravidel a jejich ohýbáním. Více okrajových případů znamená méně konzistence, takže je většinou kvůli použitelnosti lepší komponentu jednoduše přehodnotit.

05. Dokumentujte a spolupracujte

Jak zajistíme, aby se naše návrhové soubory snáze používaly jak pro nás, tak pro všechny další návrháře, kteří by náš návrhový soubor mohli používat? Udržování bezpečného uložení ve spolehlivém sdíleném cloudovém úložišti je důležité, jak zjistíte.

Barvy

Prvním krokem je uložit všechny barvy do vzorníku „Barvy dokumentu“, pokud jsme tak ještě neučinili - to jim usnadní přístup, když je potřebujeme použít v našem designu.Chcete-li to provést, otevřete v nástroji Inspector widget pro výběr barev, v rozbalovací nabídce vyberte možnost „Barvy dokumentu“ a poté kliknutím na ikonu + přidejte barvu do políčka. Ve většině nástrojů uživatelského rozhraní to funguje stejně.

Sdílené knihovny

Dále musíme převést náš dokument - včetně typografických stylů, barev, tlačítek, společných oblastí a základních komponent - do sdílené knihovny.

V podstatě to znamená, že každý prvek musí být součástí, i když se skládá pouze z jedné vrstvy. Klikněte na tlačítko + ‌ v postranním panelu Knihovny na levé straně a poté importujte tento dokument do nového dokumentu. To je pravda: náš dokument je nyní knihovna a je připraven k použití k navrhování uživatelských rozhraní se zaručenou konzistencí.

InVision Studio je poněkud omezené v tom smyslu, že se ještě nesynchronizuje s oficiálním nástrojem Design System Manager InVision, ale je snadné umístit knihovnu do Dropboxu, aby ji mohli ostatní designéři používat a aktualizovat v průběhu času. Když dojde ke změně (lokálně nebo vzdáleně), každý soubor Studio, který používá knihovnu (opět lokálně nebo vzdáleně), se zeptá, zda chcete aktualizovat barvy a komponenty. Takto se udržují designové knihovny napříč týmy.

Pokud jde o návrh uživatelských rozhraní, která jsou vizuálně konzistentní, vše znovu použijte. Navrhněte tlačítka, pomocí tlačítek vytvořte komponenty tlačítek a poté použijte
komponenty tlačítek k vytvoření dalších komponent, jako jsou výstrahy a dialogy.

Prostě nevytvářejte komponenty, které nejsou potřeba. Pamatujte, že budování knihovny je neustálé společné úsilí. Nemusí to být dokončeno najednou, dokončeno samotnými nebo dokončeno vůbec. Musí pouze sdělit jazyk.

Design v měřítku

Jak se design rozšiřuje, jeho správa se stává těžší. Možná bychom chtěli provést různé úpravy, aby to bylo efektivní a udržovatelné, zejména proto, že DSM InVision zatím se Studiom nepracuje.

Například bychom mohli chtít použít textové vrstvy k anotaci naší knihovny jako prostředek k vysvětlení případů použití různých prvků. U typografických stylů můžeme dokonce upravit text tak, aby byl popisnější (např. „H1> / 1,3 / 44px“). To říká, že h1>s by mělo být 44 pixelů a mít výšku řádku 1,3.

Předání designu

Nástroje předání návrhů zobrazují různé styly používané každým prvkem v návrhu, aby vývojáři mohli vytvořit aplikaci nebo web. Mezi tyto nástroje patří přehled stylů a také kopie vzorníku barev dokumentu. Vývojáři mohou tyto styly dokonce kopírovat jako kód, což je vynikající, pokud jste se rozhodli vytvořit jakoukoli písemnou dokumentaci návrhu a chcete zahrnout reprezentace fragmentů kódu komponent.

Pokud se obáváte řešení problémů a správy webových stránek, pomůže vám zajistit správnou webhostingovou službu, ale pro váš návrhový systém je vhodný nástroj InVision Design Handoff, Inspect. Chcete-li jej použít, klikneme na tlačítko / ikonu „Publikovat ve formátu InVision“ v aplikaci InVision Studio, otevřete výslednou adresu URL a poté klepnutím přepnete do režimu Prohlídka. Je to opravdu pohodlné.

Tento obsah se původně objevil v internetovém časopise.