Ha alaposan ismeri a HTML-t és a CSS-t, és remek megjelenésű felhasználói felületeket szeretne létrehozni a böngészőben, ne keressen tovább! Ebben a cikkben a következő hét alapismeret megismerésével növelheti felhasználói felületének tervezési készségeit:
- fehér űr
- igazítás
- kontraszt
- skála
- tipográfia
- szín
- vizuális hierarchia
Ez a cikk egy ingyenes Scrimba tanfolyamra épül, amelyet a zseniális Gary Simon hozott létre, más néven DesignCourse. A tanfolyam interaktív oktatóanyagok sorát kínálja, amelyeket a saját tempójában vehet igénybe, és újra elvégezheti, hogy valóban beágyazhassa a tanulást.
Tanfolyam indítása: Ismerje meg a felhasználói felület tervezésének alapjait?
Úgy gondoljuk, hogy minden front-end fejlesztőnek rendelkeznie kell alapvető felhasználói felület-készítési ismeretekkel. Tehát ebben? természetesen a @designcoursecom erre tanít. Mindezt semmilyen tervező eszköz, csak HTML és CSS nélkül.
Az RT-k értékelik? // t.co/mT9fDjShUd # 100daysofcode
- Scrimba (@scrimba) 2020. január 28Tehát, ha ez a cikk még többet akar, feltétlenül nézze meg a tanfolyamot. Most ugorjunk bele!
Fehér űr
Az első tervezési alap, amelyet megnézünk, a Fehér tér , más néven negatív tér. Ahogy a neve is sugallja, ez az oldal elemei közötti tér.
A
Azok az elemek, amelyek egy szóköz nélküli oldalon vannak összegyűjtve, nemcsak vonzónak tűnnek, de nehezen kezelhetők és bonyolultan olvashatók is.
Különböző módon állíthatjuk be a fehér teret, beleértve a párnázást, a margót és a vonal magasságát. Nézze meg az alábbi előtti és utáni képet, hogy megtudja, milyen különbség lehet a hatékony térközben.
Igazítás
A következő az Igazítás . Ez annak a folyamatnak a biztosítása, hogy minden elem helyesen legyen elhelyezve a többi elemhez képest, például az oszlopok az oldalon lefelé történő igazításával.
A
Amint az a következő képeken látható, az első oldal, amelynek elemei sok különböző oszlopban vannak (gyenge igazítás), sokkal kevésbé vonzó és olvasható, mint a második, amely erősen igazodik
Kontraszt
Fontos, hogy egy oldal vagy alkalmazás készítésekor vegye figyelembe a Kontraszt elemet is . A kontraszt a különbség az oldalon egymás mellett megjelenő színek között.
A
Amint ebből a példából látható, a rossz kontrasztú oldalakat nehéz elolvasni, és az elemek nem tűnnek ki.
A jó kontrasztú oldalak az alábbihoz hasonlóan nemcsak sokkal jobban néznek ki, hanem felhasználóbarátabbak és hozzáférhetőbbek.
Annak érdekében, hogy a kontrasztja megfelelő legyen, a WCAG (Web Content Accessibility Guidelines) a minimális (AA) kontrasztarányt javasolja, legalább 4,5: 1, vagy 3: 1 nagy szöveg esetén, vagy fokozott (AAA) kontrasztarányt 7 : 1 vagy 4,5: 1 nagy szöveg esetén. Ennek ellenőrzéséhez számos beépülő modul vagy webhely található.
Skála
A méretarány szintén elengedhetetlen része a kezelőfelületnek, ezért gondosan vegye figyelembe az egyes elemek méretét. Például az elemeknek elég nagynak kell lenniük az oldalhoz képest (tehát nincsenek nagy hézagok). Ezenkívül a nagyobb jelentőségű elemeknek, például a címsoroknak nagyobbaknak kell lenniük, mint a kevésbé jelentősek.
A
Vessen egy pillantást az alábbi előtti és utáni képekre, és vegye észre, mennyivel jobban néz ki az oldal, ha helyesen méretezik.
A
Tipográfia
A tipográfia szintén nagy hatással van a felhasználói felületre. Ennek sokféle módja van, beleértve a betűtípus-választást, a betűméretet, az igazítást, a betűket, a vonal magasságát, a betűtípusokat, a színt és a kontrasztot.
A
Általános szabály, hogy egyetlen oldalon legfeljebb 2 betűtípuscsaládot használjon, és gondoskodjon arról, hogy a különböző szempontok együtt működjenek a fontossági sorrend megállapítása érdekében. Ez az úgynevezett vizuális hierarchia , amelyet az alábbiakban részletesen ismertetünk.
A
Ha betartja ezeket a tippeket, az oldala ugyanolyan jól fog kinézni:
És nem zavaró és olvashatatlan, mint ez:
Szín
A felhasználói felület alapja, amely először alakítja ki a felhasználói élményt, a szín . A színpszichológia azt jelenti, hogy az egyes színek jelentést váltanak ki bizonyos emberek számára - például a piros veszélyt jelenthet, míg a fehér tisztaságot és derűt idézhet elő.
Legyen óvatos a színnel. A jelentések kultúránként eltérőek, ezért mindig végezzen kutatásokat, és a színek kiválasztásakor vegye figyelembe a célközönséget.
A
Fontos megjegyezni azt is, hogy a túl sok szín rossz felhasználói felületet hozhat létre, és a használni kívánt színeknek ki kell egészíteniük egymást. Alapszabályként nem tévedhet el azzal, ha ugyanazon színárnyalat világosabb vagy sötétebb változatait használja egymás mellett. Csak nézze meg, hogy az alábbi második kép mennyivel könnyebb a szemén, mint az első!
A
Vizuális hierarchia
A Design Fundamentals listánk utolsó eleme a Visual Hierarchy . A felhasználói felület egyes elemei fontosabbak, mint mások. A vizuális hierarchia lehetővé teszi számunkra, hogy megállapítsuk ezt a fontosságot.
Ezt meg lehet tenni helyzet, kontraszt, szín, méret, stílus vagy a fentiek kombinációjával, amint azt az alábbi második kép mutatja, amelynek vizuális hierarchiája sokkal jobb, mint az elsőnek.
Tekerje be
Ebben a cikkben a hét fő tervezési alapelvet ismertettük: fehér tér, szín, kontraszt, méretarány, igazítás, tipográfia és vizuális hierarchia. Mindannyian egyformán fontosak a felhasználói felület számára - ha ezen elemek egyike hiányzik, akkor a teljes felhasználói élmény károsodni fog. Ezért feltétlenül vegye figyelembe mindet, amikor létrehozza felhasználói felületét.
A felhasználói felület tervezésének alapjai
Ha többet szeretne elmélyülni ezekben a tantárgyakban, kérjük, nézze meg az ingyenes felhasználói felület-tervezés alapjait a Scrimbában. Ebben sokkal részletesebben megismerheti az alapokat.
Sok szerencsét és boldog kódolást :)