Õppige kasutajaliidese põhiprogrammi 5 minutiga

Kui teil on HTML-ist ja CSS-ist põhiteadmised ning soovite brauserisse luua suurepärase välimusega kasutajaliidesed, siis ärge otsige enam! Selles artiklis suurendate oma kasutajaliidese kujundamise oskusi, õppides tundma järgmist seitset põhialust:

  • tühik
  • joondamine
  • kontrast
  • kaal
  • tüpograafia
  • värv
  • visuaalne hierarhia

See artikkel põhineb tasuta Scrimba kursusel, mille on loonud särav Gary Simon, tuntud ka kui DesignCourse. Kursus pakub interaktiivsete õpetuste komplekti, mida saate võtta omas tempos ja isegi uuesti teha, et oma õppimist tõeliselt kinnistada.

Kursuse käivitamine: õppige kasutajaliidese disaini põhialuseid?

Me arvame, et kõigil esiotsa arendajatel peaksid olema põhilised kasutajaliidese kujundamise oskused. Nii et selles? muidugi õpetab seda @designcoursecom. Seda kõike ilma tööriistadeta, lihtsalt HTML-i ja CSS-ina.

RT-d hinnatud? // t.co/mT9fDjShUd # 100daysofcode

- Scrimba (@scrimba) 28. jaanuar 2020

Nii et kui see artikkel jätab teile soovi rohkem, vaadake kindlasti kursust. Hüppame nüüd sellesse!

Valge ruum

Esimene põhimõtteline disain, mida me vaatame, on valge ruum , mida nimetatakse ka negatiivseks ruumiks. Nagu nimigi ütleb, on see lehe elementide vaheline ruum.

A

Elemendid, mis on tühjalt lehelt kokku surutud, näivad mitte ainult atraktiivsed, vaid on ka raskesti navigeeritavad ja neid on keeruline lugeda.

Valget ruumi saame reguleerida mitmel viisil, sealhulgas polsterdus, veeris ja joone kõrgus. Vaadake allpool olevat pilti enne ja pärast, et näha, mida saab efektiivne tühimik muuta.

Enne ja pärast tühikukorrigeerimist

Joondamine

Järgmine on joondamine . See on protsess, mille abil tagatakse, et iga element on teiste elementide suhtes õigesti paigutatud, näiteks veergude joondamine lehe all.

A

Nagu näete järgmistelt piltidelt, on esimene leht koos arvukate veergude elementidega (nõrk joondus) palju vähem atraktiivne ja loetavam kui teine, millel on tugev joondus

Nõrga joondusega leht Tugeva joondusega leht

Kontrast

Lehe või rakenduse koostamisel on oluline arvestada ka Kontrastiga . Kontrastsus on lehel üksteise kõrval kuvatavate värvide erinevus.

A

Nagu näite põhjal näha, on halva kontrastsusega lehti raske lugeda ja elemendid ei paista silma.

Kehva kontrastiga leht

Hea kontrastsusega lehed, nagu allpool, näevad välja mitte ainult palju paremad, vaid on ka kasutajasõbralikumad ja kättesaadavamad.

Hea kontrastsuse näide

Kontrastsuse õigeks saamiseks soovitab WCAG (veebisisu juurdepääsetavuse juhised) minimaalse (AA) kontrastsuse suhe vähemalt 4,5: 1 või 3: 1 suure teksti puhul või täiustatud (AAA) kontrastsuse suhe 7 : 1 või 4,5: 1 suure teksti jaoks. Selle kontrollimiseks on mitmeid pistikprogramme või veebisaite.

Kaal

Skaala on ka kasutajaliidese oluline osa, seega kaaluge hoolikalt iga elemendi suurust. Näiteks peaksid elemendid olema lehe suhtes piisavalt suured (nii et puuduvad suured lüngad). Samuti peaksid suurema tähtsusega elemendid, näiteks pealkirjad, olema suuremad kui vähem olulised.

A

Heitke pilk allpool olevatele piltidele enne ja pärast ning märkage, kui palju leht parem välja näeb, kui see on õigesti skaleeritud.

Kehva skaalaga leht Hea skaala näide

A

Tüpograafia

Tüpograafial on suur mõju ka kasutajaliidesele. Selle reguleerimiseks on palju võimalusi, sealhulgas fondivalikud, fondi suurus, joondus, tähevahe, rea kõrgus, fondistiilid, värv ja kontrastsus.

A

Üldjuhul ei tohi ühel lehel kasutada rohkem kui kahte fondiperekonda ja tagada, et erinevad aspektid toimiksid tähtsuse järjekorra määramiseks. Seda nimetatakse visuaalseks hierarhiaks , mida käsitleme üksikasjalikumalt allpool.

A

Kui järgite neid näpunäiteid, näeb teie leht välja nii hea kui see:

Hea tüpograafia näide

Ja mitte segane ja loetamatu, nagu see:

Viletsa tüpograafiaga leht

Värv

Kasutajaliidese disain, mis kõigepealt kujundab kasutaja kogemuse, on värv . Värvipsühholoogia tähendab, et iga värv tekitab teatud inimestele tähenduse - näiteks punane võib tähendada ohtu, valge aga puhtust ja rahulikkust.

Värvidega olge siiski ettevaatlik. Tähendused on kultuuriti erinevad, nii et tehke alati uurimistööd ja värvide valimisel arvestage oma sihtrühmaga.

A

Samuti on oluline meeles pidada, et liiga palju värve võib luua halva kasutajaliidese ja teie valitud värvid peaksid üksteist täiendama. Rusikareeglina ei saa te valesti minna, kasutades sama tooni heledamaid või tumedamaid variatsioone üksteise kõrval. Vaadake lihtsalt, kui palju silma peal on teist allolevat pilti võrreldes esimesega!

Halva värvivalikuga leht Hea värvikasutus

A

Visuaalne hierarhia

Meie disaini põhialuste loendi viimane punkt on visuaalne hierarhia . Mõned kasutajaliidese elemendid on olulisemad kui teised. Visuaalne hierarhia võimaldab meil selle tähtsuse kindlaks teha.

Seda saab teha asukoha, kontrasti, värvi, skaala, stiili või ülaltoodud kombinatsioonidega, nagu on näidatud allpool oleval teisel pildil, millel on palju parem visuaalne hierarhia kui esimesel.

Kehva visuaalse hierarhiaga leht Visuaalse hierarhia kehtestamiseks tüpograafia ja värvide kasutamine

Tõmba otsad kokku

Selles artiklis oleme käsitlenud seitset peamist kujunduse põhialust: valge ruum, värv, kontrastsus, skaala, joondus, tüpograafia ja visuaalne hierarhia. Need kõik on kasutajaliidese jaoks võrdselt olulised - kui üks neist elementidest puudub, kannatab kogu kasutajakogemus. Nii et veenduge, et arvestaksite neid kõiki oma kasutajaliidese kujunduse loomisel.

Kasutajaliidese disaini põhialuste kursus

Kui soovite neid aineid rohkem uurida, vaadake palun tasuta kasutajaliidese disaini põhialuste kursust Scrimbas. Selles saate tunduvalt põhjalikumalt teada põhialustest.

Õnne ja rõõmsat kodeerimist :)