Naučte sa základný dizajn používateľského rozhrania za 5 minút

Ak máte základné znalosti HTML a CSS a chcete v prehliadači vytvárať skvele vyzerajúce používateľské rozhrania, už nemusíte hľadať! V tomto článku zdokonalíte svoje schopnosti návrhu používateľského rozhrania tým, že sa dozviete o nasledujúcich siedmich základných princípoch:

  • Biely vesmír
  • vyrovnanie
  • kontrast
  • mierka
  • typografia
  • farba
  • vizuálna hierarchia

Tento článok nadväzuje na bezplatné ihrisko Scrimba, ktoré vytvoril vynikajúci Gary Simon, tiež známy ako DesignCourse. Kurz ponúka súbor interaktívnych tutoriálov, ktoré môžete absolvovať svojim vlastným tempom a dokonca si zopakovať, aby ste svoje učenie skutočne vložili.

Spustenie kurzu: Naučiť sa základy dizajnu používateľského rozhrania?

Myslíme si, že všetci vývojári frontendu by mali mať základné zručnosti pri navrhovaní používateľského rozhrania. Takže v tomto? samozrejme, @designcoursecom vás to naučí. Všetko bez použitia akýchkoľvek návrhových nástrojov, iba HTML a CSS.

RT ocenili? // t.co/mT9fDjShUd # 100daysofcode

- Scrimba (@scrimba) 28. januára 2020

Ak vás teda tento článok necháva viac, určite si pozrite kurz. Teraz do toho skočme!

Biely vesmír

Prvým základným dizajnom, na ktorý sa pozrieme, je Biely vesmír , tiež známy ako negatívny priestor. Ako už názov napovedá, jedná sa o priestor medzi prvkami na stránke.

Zloženie: 100% bavlna.

Prvky zhromaždené na stránke bez medzier nielen vyzerajú neatraktívne, ale sú aj ťažko navigovateľné a zložité na čítanie.

Biely priestor môžeme upraviť rôznymi spôsobmi, vrátane výplne, okraja a výšky čiary. Skontrolujte pred a po obrázku nižšie, aby ste zistili, aké rozdiely môžu mať efektívny biely priestor.

Pred a po úprave medzery

Zarovnanie

Ďalším na rade je Zarovnanie . Toto je proces zaistenia správneho umiestnenia každého prvku vo vzťahu k iným prvkom, napríklad zaistením zarovnania stĺpcov nadol po stránke.

Zloženie: 100% bavlna.

Ako môžete vidieť na nasledujúcich obrázkoch, prvá stránka s prvkami v mnohých rôznych stĺpcoch (slabé zarovnanie) je oveľa menej atraktívna a čitateľná ako druhá stránka, ktorá má silné zarovnanie.

Stránka so slabým zarovnaním Stránka so silným zarovnaním

Kontrast

Pri vytváraní stránky alebo aplikácie je dôležité brať do úvahy aj kontrast . Kontrast je rozdiel medzi farbami, ktoré sa na stránke nachádzajú vedľa seba.

Zloženie: 100% bavlna.

Ako vidíte z tohto príkladu, stránky so slabým kontrastom sa ťažko čítajú a prvky nevynikajú.

Stránka so slabým kontrastom

Stránky s dobrým kontrastom, ako je tá dole, nielenže vyzerajú oveľa lepšie, ale sú aj užívateľsky príjemnejšie a prístupnejšie.

Príklad dobrého kontrastu

Aby sme vám pomohli dosiahnuť správny kontrast, WCAG (Pokyny pre prístup k webovému obsahu) navrhuje minimálny (AA) kontrastný pomer minimálne 4,5: 1 alebo 3: 1 pre veľký text alebo vylepšený (AAA) kontrastný pomer 7 : 1 alebo 4,5: 1 pre veľký text. Existuje množstvo doplnkov alebo webových stránok, ktoré to môžu skontrolovať.

Škála

Stupnica je tiež nevyhnutnou súčasťou používateľského rozhrania, preto starostlivo zvážte veľkosť každého prvku. Napríklad prvky by mali byť vo vzťahu k stránke dostatočne veľké (takže by nemali byť veľké medzery). Prvky s vyššou dôležitosťou, ako napríklad nadpisy, by tiež mali byť väčšie ako prvky s menšou dôležitosťou.

Zloženie: 100% bavlna.

Prezrite si obrázky pred a za obrázkom nižšie a všimnite si, ako lepšie vyzerá stránka, keď má správnu mierku.

Stránka so zlým rozsahom Príklad dobrého rozsahu

Zloženie: 100% bavlna.

Typografia

Typografia má tiež veľký vplyv na používateľské rozhranie. Existuje mnoho spôsobov, ako to upraviť, vrátane výberu písma, veľkosti písma, zarovnania, medzery medzi písmenami, výšky riadkov, štýlov písma, farby a kontrastu.

Zloženie: 100% bavlna.

Spravidla nepoužívajte na jednej stránke viac ako 2 rodiny fontov a zabezpečte, aby rôzne aspekty spolupracovali pri určovaní poradia dôležitosti. Toto sa nazýva vizuálna hierarchia , ktorej sa budeme podrobnejšie venovať nižšie.

Zloženie: 100% bavlna.

Ak budete postupovať podľa týchto tipov, bude vaša stránka vyzerať takto dobre:

Ukážka dobrej typografie

A nie mätúce a nečitateľné, napríklad takto:

Stránka so zlou typografiou

Farba

Základným dizajnom používateľského rozhrania, ktorý ako prvý formuje dojem používateľa, je farba . Psychológia farieb znamená, že každá farba dáva určitým ľuďom zmysel - napríklad červená môže znamenať nebezpečenstvo, zatiaľ čo biela môže evokovať čistotu a vyrovnanosť.

S farbou však buďte opatrní. Významy sa v jednotlivých kultúrach líšia, preto vždy robte prieskum a pri výbere farieb zohľadnite svoje cieľové publikum.

Zloženie: 100% bavlna.

Je tiež dôležité pamätať na to, že príliš veľa farieb môže spôsobiť zlé používateľské rozhranie a farby, ktoré ste sa rozhodli použiť, by sa mali navzájom dopĺňať. Ako pravidlo platí, že nemôžete pokaziť použitie svetlejších alebo tmavších variácií rovnakého odtieňa vedľa seba. Stačí sa pozrieť na to, o koľko ľahšie je druhý obrázok v porovnaní s prvým!

Stránka so zlým výberom farieb Dobré využitie farby

Zloženie: 100% bavlna.

Vizuálna hierarchia

Poslednou položkou v našom zozname Základy dizajnu je vizuálna hierarchia . Niektoré prvky používateľského rozhrania sú dôležitejšie ako iné. Vizuálna hierarchia nám umožňuje potvrdiť tento význam.

To je možné urobiť pomocou polohy, kontrastu, farby, mierky, štýlu alebo kombinácie vyššie uvedeného, ​​ako je znázornené na druhom obrázku nižšie, ktorý má oveľa lepšiu vizuálnu hierarchiu ako prvý.

Stránka so zlou vizuálnou hierarchiou Používanie typografie a farieb na vytvorenie vizuálnej hierarchie

Zabaliť

V tomto článku sme sa zaoberali siedmimi základnými zásadami návrhu: biely priestor, farba, kontrast, mierka, zarovnanie, typografia a vizuálna hierarchia. Všetky sú pre používateľské rozhranie rovnako dôležité - ak jeden z týchto prvkov chýba, utrpí to celý dojem používateľa. Pri vytváraní návrhov používateľského rozhrania ich teda nezabudnite zohľadniť všetky.

Kurz Základy dizajnu UI

Ak by ste sa chceli podrobnejšie venovať týmto predmetom, pozrite si bezplatný kurz UI Design Fundamentals v Scrimbe. V ňom sa dozviete o základoch oveľa podrobnejšie.

Veľa šťastia a šťastné programovanie :)