Sužinokite pagrindinį vartotojo sąsajos dizainą per 5 minutes

Jei gerai suprantate HTML ir CSS ir norite naršyklėje sukurti puikiai atrodančias vartotojo sąsajas, nebežiūrėkite! Šiame straipsnyje sustiprinsite savo vartotojo sąsajos projektavimo įgūdžius, sužinodami apie šiuos septynis pagrindus:

  • balta vieta
  • derinimas
  • kontrastas
  • skalė
  • tipografija
  • spalva
  • vizualinė hierarchija

Šis straipsnis remiasi nemokamu „Scrimba“ kursu, kurį sukūrė puikus Gary Simon, dar žinomas kaip „DesignCourse“. Kursai siūlo interaktyvių pamokų rinkinį, kurį galite atlikti savo ritmu ir netgi perdaryti, kad tikrai įtvirtintumėte savo mokymąsi.

Kurso pradžia: išmokti vartotojo sąsajos dizaino pagrindų?

Mes manome, kad visi „front-end“ kūrėjai turėtų turėti pagrindinius vartotojo sąsajos projektavimo įgūdžius. Taigi šiame? žinoma, @designcoursecom to išmoko. Viskas nenaudojant jokių dizaino įrankių, tiesiog HTML ir CSS.

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

- Scrimba (@ scrimba) 2020 m. Sausio 28 d

Taigi, jei šiame straipsnyje jums norisi daugiau, būtinai patikrinkite kursą. Dabar pereikime prie jo!

Balta vieta

Pirmasis dizaino pagrindas, kurį pažvelgsime, yra Baltoji erdvė , dar vadinama neigiama erdve. Kaip rodo pavadinimas, tai yra tarpas tarp puslapio elementų.

A

Elementai, suspausti puslapyje, kuriame nėra tarpo, ne tik atrodo nepatraukliai, bet ir sunkiai valdomi, juos sunku skaityti.

Baltąją erdvę galime reguliuoti įvairiais būdais, įskaitant užpildymą, paraštę ir linijos aukštį. Peržiūrėkite žemiau esantį paveikslėlį prieš ir po, kad sužinotumėte, kokį skirtumą gali padaryti efektyvus baltas tarpas.

Prieš ir po tarpų koregavimo

Lygiavimas

Kitas yra „ Alignment“ . Tai yra procesas, užtikrinantis, kad kiekvienas elementas būtų teisingai išdėstytas kitų elementų atžvilgiu, pavyzdžiui, užtikrinant, kad stulpeliai būtų sulygiuoti puslapyje.

A

Kaip matote iš šių paveikslėlių, pirmasis puslapis su elementais daugybėje skirtingų stulpelių (silpnas lygiavimas) yra kur kas mažiau patrauklus ir skaitomas nei antrasis, kurio lygiavertis

Puslapis silpnai sulygiuotas Puslapis tvirtai sulygiuotas

Kontrastas

Kuriant puslapį ar programą taip pat svarbu atsižvelgti į kontrastą . Kontrastas yra skirtumas tarp spalvų, kurios puslapyje rodomos viena šalia kitos.

A

Kaip matote iš šio pavyzdžio, blogo kontrasto puslapius sunku skaityti, o elementai neišsiskiria.

Puslapis su prastu kontrastu

Puslapiai, turintys gerą kontrastą, kaip ir toliau pateiktas, ne tik atrodo daug geriau, bet yra patogesni vartotojams ir prieinami.

Gero kontrasto pavyzdys

Kad jūsų kontrastas būtų tinkamas, WCAG (žiniatinklio turinio pritaikymo neįgaliesiems gairės) siūlo minimalų (AA) kontrasto santykį, kuris yra bent 4,5: 1, arba 3: 1, jei naudojamas didelis tekstas, arba patobulintą (AAA) kontrasto santykį - 7 : 1 arba 4,5: 1 - dideliam tekstui. Norėdami tai patikrinti, yra daugybė papildinių ar svetainių.

Skalė

Skalė taip pat yra būtina vartotojo sąsajos dalis, todėl atidžiai apsvarstykite kiekvieno elemento dydį. Pvz., Elementai turėtų būti pakankamai dideli, palyginti su puslapiu (todėl neturi būti didelių spragų). Be to, didesnės svarbos elementai, pvz., Antraštės, turėtų būti didesni nei mažiau reikšmingi.

A

Pažvelkite į žemiau esančius prieš ir po paveikslėlius ir pastebėkite, kiek geriau atrodo puslapis, kai jis teisingai keičiamas.

Puslapis prasto mastelio Geros skalės pavyzdys

A

Tipografija

Didelę įtaką vartotojo sąsajai turi ir tipografija . Yra daugybė būdų tai koreguoti, įskaitant šrifto pasirinkimą, šrifto dydį, lygiavimą, raidžių tarpus, eilučių aukštį, šriftų stilius, spalvas ir kontrastą.

A

Paprastai viename puslapyje naudokite ne daugiau kaip 2 šriftų šeimas ir įsitikinkite, kad skirtingi aspektai veikia kartu, kad būtų nustatyta svarbos tvarka. Tai vadinama vaizdine hierarchija , kurią išsamiau aptarsime toliau.

A

Jei vadovausitės šiais patarimais, jūsų puslapis atrodys taip gerai, kaip šis:

Geros tipografijos pavyzdys

Ir nėra painus ir neskaitomas, kaip šis:

Puslapis su prasta tipografija

Spalva

Vartotojo sąsajos dizainas, kuris pirmiausia suformuoja vartotojo patirtį, yra spalva . Spalvų psichologija reiškia, kad kiekviena spalva tam tikriems žmonėms sukelia prasmę - pavyzdžiui, raudona spalva gali reikšti pavojų, o balta - švarą ir ramybę.

Vis dėlto būkite atsargūs su spalva. Prasmės įvairiose kultūrose skiriasi, todėl visada atlikite tyrimus ir rinkdamiesi spalvas atsižvelkite į tikslinę auditoriją.

A

Taip pat svarbu nepamiršti, kad per daug spalvų gali sukurti blogą vartotojo sąsają, o pasirinktos spalvos turėtų papildyti viena kitą. Pagal nykščio taisyklę, jūs negalite suklysti, jei šalia vienas kito naudojate šviesesnius ar tamsesnius to paties atspalvio variantus. Tiesiog pažiūrėkite, kiek daug lengviau akimis palyginamas antrasis žemiau pateiktas vaizdas su pirmuoju!

Puslapis, kurio spalvų pasirinkimas prastas Geras spalvų naudojimas

A

Vaizdinė hierarchija

Paskutinis „Design Fundamentals“ sąrašo punktas yra „ Visual Hierarchy“ . Kai kurie vartotojo sąsajos elementai yra svarbesni už kitus. Vizualinė hierarchija leidžia mums nustatyti šią svarbą.

Tai galima padaryti su padėtimi, kontrastu, spalva, masteliu, stiliumi arba aukščiau paminėtų elementų deriniu, kaip parodyta žemiau esančiame antrame paveikslėlyje, kurio vizualinė hierarchija yra daug geresnė nei pirmojo.

Puslapis su prasta vizualine hierarchija Tipografijos ir spalvų naudojimas vizualinei hierarchijai nustatyti

Apvyniokite

Šiame straipsnyje aptarėme septynis pagrindinius dizaino pagrindus: baltą erdvę, spalvas, kontrastą, mastelį, derinimą, tipografiją ir vaizdinę hierarchiją. Visi jie yra vienodai svarbūs vartotojo sąsajai - jei trūksta vieno iš šių elementų, nukentės visa vartotojo patirtis. Taigi, kurdami savo vartotojo sąsajos dizainą, būtinai atsižvelkite į juos visus.

Vartotojo sąsajos dizaino pagrindų kursas

Jei norite išsamiau susipažinti su šiais dalykais, patikrinkite nemokamą „UI Design Fundamentals“ kursą „Scrimba“. Jame sužinosite apie pagrindus daug išsamiau.

Sėkmės ir laimingo kodavimo :)