Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

A Sikeres Gomb Dizájn Alapjai

by
Length:MediumLanguages:

Hungarian (Magyar) translation by Roland Szabó (you can also view the original English article)

Manapság ezerféle módon készíthetünk gombokat, és alig vesz igénybe időt szétnézni a Dribbble-ön, hogy hogyan is néznek ki. A nagy többségüknél a lényeg ugyanaz, de van egy jópár köztük, amin érződik, hogy több időt és energiát fektettek bele.

Néhány nagyszerű, új CSS3 tulajdonság előnyeit kihasználva hihetetlenül elegáns és stílusos gombokat készíthetünk, anélkül, hogy képekkel kellene vesződnünk - hiszen régebbi böngészőkben is tökéletesen elfogadhatóan fognak megjelenni. Akár egyből CSS-sel készítjük a gombjainkat, akár a kedvenc grafikus programunkhoz fordulunk elsőként, nagyon fontos átgondolni, hogy milyen környezetben fog élni a gombunk.

Egyszerű dolog fogni egy előre elkészített 'UI Elements PSD'-t, amit egy jó lélek ingyenesen osztott meg (és kétségkívül Apple-inspirált gombokat tartalmaz). De miért nem állunk meg egy pillanatra és gondoljuk át, hogy az adott gomb stílus megfelelő-e az adott kontextusba, és hogy van-e lehetőség valami még eredetibbet alkotni?

Újrahasznosítani valaki más gombjait teljesen elfogadható, hiszen időt takaríthatunk meg vele, azonban nem árt időt szakítani arra, hogy egy kicsit jobban megismerjük és megértsük a mások által készített gombokat. Hogy vannak dizájnolva? Beleillenek a felületbe/kontextusba/arculatba? Van lehetőség valami egyedit alkotni? Elég feltűnőek a gombok? Szükségünk van elsődleges/másodlagos/harmadlagos gombokra? Elég nagy mértékben különböznek egymástól? Elég frankón néznek ki? (Ugye, hiszen mindannyian király gombokat akarunk csinálni?!).

Íme tíz gyors és egyszerű dolog, amire mindig odafigyelek gombok tervezésekor. Nem arról fogok írni, hogy hogyan használjuk a réteg effekteket Photoshopban, hanem általános dizájn alapelveket, amik gombok és egyéb UI elemek készítésekor hasznosíthatóak.

1. Egyező Brand

Fontos, hogy a gombjaink stílusa egyezzen a környezetükével. Ez jelentheti azt, hogy összecsengjenek a színek és grafikai stílusok, vagy akár passzoljanak valamilyen brand irányvonalhoz, esetleg a logóhoz. Lehet, hogy vannak kiemelkedő alakzatos, formák, textúrák, vagy dizájn stílusok, amiket felvehetünk és használhatunk. Lehet, hogy a logóban egy visszatérő megjelenésű forma van, amit a gomboknál és egyéb CTA-knál használhatunk.

Ha egy felhasználói felületen a flat színek vannak túlsúlyban, akkor a csilli-villi Apple stílusú gombok nem lesznek a legjobb választás. Ha van rá lehetőség, érdemes megfelelő formák, hatások, színek és egyéb díszítések használatával közölni a brand stílusát a felhasználói felületen.

2. Egyező Környezet Stílus

A fent írtak alapján, álljunk meg egy kicsit mielőtt megnyitjuk a 'UI Elements PSD'-nket. Könnyű összedobni pár átmenetet, árnyékot és lesarkított élt, de gondolkodjunk el azon, hogy megfelelő választás-e. Passzolni fog a brandhez és a környezetéhez ahova elhelyezzük majd? Vagy biztos, hogy gombszerűen kell kinéznie?

A gomboknak mindenképpen gombszerűnek kell tűnniük például egy mobilalkalmazásban, azonban a weben megvan az a szabadságunk, hogy a gombjaink egy kicsit máshogy nézzenek ki.

3. Legyen Megfelelő a Gombjaink Kontrasztja

Mivel rengeteg felhasználói felület dizájnt (főképp a többször említett 'UI Elements PSD'-ket) az Apple OS stílusa inspirált, a gombok esetenként elveszhetnek a többi UI elem között, emiatt megszűnhet a gombok potenciálisan hatalmas ereje.

4. Fontoljuk meg a Lekerekítést

Az előbb leírtak alapján, ha nagyon sok lekerekített sarkú UI elemünk van, használjunk kerek szélű gombokat, vagy eszközöljünk valamilyen formabeli változtatást. Ezzel nyerünk elegendő plusz kontrasztot, amitől a gombjaink megfelelően kiemelkednek.

5. Csökkentsük a Hangsúlyt a Másodlagos UI Elemeken

Ha egy előre elkészített PSD-vel dolgozunk, nagy valószínűséggel az elemek nagy többsége lekerekített sarkú téglalap alakú lesz. Csökkentsük a díszítések mértékét olyan elemeknél, amik nem kell, hogy gombszerűnek nézzenek ki.

Például, egy legördülő menünek vagy egy vízszintes navigációs menünek lehetnek ugyanolyan lekerekített sarkai, de kevesebb árnyékkal és színátmenettel, vagy kisebb körvonallal - mindezzel előnyben részesítve és kiemelve a gombok stílusát.

6. Színben Passzoló Körvonalak

A legtöbb gomb, amivel találkozunk, rendelkezik valamiféle körvonallal. Szabadon szólva, ha a gombunk sötétebb, mint a háttér, ahova elhelyezzük, használjunk a gomb színétől valamivel sötétebb körvonal színt. Ha fordított a helyzet, akkor válassznk egy olyan körvonal színt, amely valamivel sötétebb, mint a háttér színe. Ezzel elérhetjük, hogy a gombjaink igazán kitűnjenek. Ezt a szabályt alapelvként használom, amikor körvonalakkal kell dolgoznom web designban.

7. Óvatosan az Elmosott Árnyékokkal

Az évek alatt mindig esküdtem az 'Árnyék Szabályra'. Az Árnyék Szabály kimondja, hogy a vetett árnyékok akkor működnek a legjobban, ha az adott elem világosabb, mint a háttere. Ha az elem sötétebb, mint a háttere, akkor a vetett árnyékokat nagyon óvatosan kell használni. Hasonlóan a színben passzoló körvonalakhoz, ezt is alapelvként használom mindenféle UI elemnél.

8. Az Ikonok Más-Más Jelentést Adhatnak

Mindamellett, hogy egy aprócska részlet, ami jelentősen megkülönböztetheti a gombjainkat a többi UI elemtől, egyszerű ikonok, például nyilak használata különböző jelentéseket kölcsönözhet a gombjainknak.

Például, egy jobbra mutató nyíl a szöveg után azt sugallja, hogy ha rákattintunk, akkor továbbmegyünk az adott oldalról, vagy épp elhagyjuk az oldalt. Ha egy lefelé mutató nyilat látunk, akkor kattintásra egy előugró menü fog megjelenni

9. Elsődleges, Másodlagos és Harmadlagos Stílusok

Ha olyan felületet tervezünk, ahol folyamatosan rengeteg művelet és funkcionalitás van jelen, akkor fontos lehet kialakítani egy egységes vizuális nyelvezetet, melyet elsődleges, másodlagos, harmadlagos és akár még több szintű gomb stílussal tudunk elérni.

Tartsuk meg a legerősebb, legvastagabb színeket az elsődleges gombjaink számára, és fokozatosan egyre kevesebb erősséget és élénkséget használjunk a fontossági sorrend fenntartásához. Csökkentsük a méretet, az üres területet (whitespace), betűméretet és a díszítések erősségét annak érdekében, hogy lefokozzuk azokat a bomgokat, amelyek nem elsőrangúak.

10. Mindig Készítsünk Visszajelző Állapotokat

Ennek teljesen egyértelműnek kellene lennie, de ez általában mindig csak a dizájn folyamat végén kerül elő. Mindig készítsük el a szükséges visszajelző állapotokat a gombjainkhoz, hogy megfelelő visszajelzést biztosítsanak a felhasználónak. Egyszerű CSS trükkök, mint például árnyékok, körvonalak és színátmenetek segítségével könnyen megalkothatjuk ezeket a visszajelzés állapotokat.

Konklúzió

Nekünk designereknek, mindannyiunknak van egy saját folyamatunk, aminek alapján alkotunk. Fogadjunk, hogy sokunk kicsit hátrahúzza a fejét a képernyőtől, elfordítja kicsit a fejét, és azt mondja: "Igen, ez így jó lesz!". Természetesen ez is része a dizájn folyamatnak, azonban mindig jó egy kicsit magunkban kérdezgetni és okfejteni a döntéseinkről.

Semmi bajunk nem fog származni abból, ha előre elkészített stílusokra és UI elemekre támaszkodunk, hiszen sok időt spórolnak nekünk. Lehet, hogy valaki már pixelpontosan elkészítette azokat, és ráadásul ingyen a rendelkezésünkre is bocsátja. Azonban abból sem lesz bajunk, ha kicsit jobban megértjük a dizájn folyamatot és elgondolkodunk azon, hogy megfelelő döntéseket hozunk-e a folyamatban.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.