Kihagyás

Design filozófia és alapelvek

Ebben a leckében arról fogunk beszélni, hogy mire ügyeljünk mobilos kezelőfelület készítésekor, összehasonlítjuk a robotot az almával, illetve megnézzük, hogyan tudunk profi, skálázható rendszereket és nyomogatható prototípusokat készíteni.

Mekkora a hüvelykujjad?

Telefont általában egy kézzel nyomkodunk, a hüvelykujjunkkal babráljuk a készüléket. Erre világított rá Steven Hoober kutatása is, amely alapján a felhasználók többsége (kb. 75%-a) kizárólag a hüvelykujját használja a telefon kezeléséhez.

A képernyőt a következő zónákra bonthatjuk:

  • Természetes zóna: A kijelző alsó és középső része, amit könnyedén elérünk. Ide kerülnek a legfontosabb interakciós gombok (pl. navigáció, "Kosárba" gomb).
  • Nyújtózó zóna: Itt már erőfeszítésbe telik az elérés.
  • "Ow" (Fájdalmas) zóna: A kijelző legteteje, ahol fogást kell váltani az eléréshez. Ide kerülnek a ritkán használt funkciók (pl. Beállítások, Kilépés).

Thumb zone illusztráció

A hely fontossága (Touch Targets)

A telefonképernyőt kezelhetjük egy céltáblaként: el kell találni ujjal a gombokat. Ha túl kicsik vagy túl közel vannak egymáshoz, a felhasználó frusztrált lesz a félrekattintások miatt.

Platform Minimum érintési felület Ajánlott spacing (távolság)
Android (Material) 48x48 dp min. 8 dp
iOS (HIG) 44x44 pt min. 8 pt

Design Tokenek: A skálázhatóság titka

Ahhoz, hogy a designunk ne essen szét, amikor különböző kijelzőméretekre váltunk vagy sötét módot (Dark Mode) vezetünk be, Design Tokeneket használunk.

Mi az a Design Token? Úgy képzeld el, mint egy konstanst vagy változót a programozásban. Nem fix értékeket írunk be (pl. "legyen ez 16 pixel"), hanem elnevezett stílusokat használunk.

A Mobile-first szemlélet

Ha először a legkisebb képernyőre tervezel (Mobile-first), kénytelen vagy prioritizálni a tartalmat. A tokenek használatával pedig biztosíthatod, hogy ami mobilon jól néz ki, az tableten is arányos maradjon.

A három legfontosabb token típus

  1. Spacing Scale (A 8-as szabály): Ne használjunk véletlenszerű távolságokat! A legtöbb modern kijelző felbontása osztható 8-cal, így ha 8-as szorzókkal dolgozunk (8, 16, 24, 32px), elkerülhetjük az elmosódott pixeleket.

    • Példa: spacing-small = 8px, spacing-medium = 16px.

  2. Typography Scale (Betűrendszer): Ahelyett, hogy mindenhol egyedileg állítanád a méretet, használj fix hierarchiát (pl. Heading-1, Body-Text, Caption).

  3. Color Tokens (Színváltozók): Ne azt mondd, hogy "kék", hanem azt, hogy brand-primary.

    • Miért? Ha a cég színe kékről zöldre változik, csak egyetlen változót kell átírnod a "központban", és az app összes gombja egyszerre frissül. Ugyanígy működik a Dark Mode is: a background-main token világosban fehér, sötét módban pedig fekete értéket kap.

Pro tipp: Aki designtokent használ, annak "nem törik a responsive". A fejlesztő nem fix számokat lát, hanem logikai neveket, amiket sokkal stabilabban lehet kódolni.

Mobil UX: Gesture Vocabulary

A mobilozás nem csak kattintgatásból áll. A gesztusok teszik igazán "élővé" az appot:

  • Tap (Koppintás): Kijelölés, aktiválás.
  • Double-tap (Dupla koppintás): Zoomolás vagy kedvelés (pl. Instagram).
  • Long-press (Hosszú nyomás): Kontextus menük, átrendezés.
  • Swipe (Legyintés): Görgetés, kártyák elhúzása (pl. Tinder), törlés.
  • Pinch/Rotate: Kétujjas nagyítás vagy forgatás (pl. Térkép).

Robotot az almával: Material Design 3 vs. iOS (HIG)

A két nagy rendszer alapjaiban más filozófiát követ, ezek összefoglalva:

Material Design 3 (Android)

  • "Material You":: Erős személyre szabhatóság (színek adaptálása a háttérképhez).
  • Megjelenés: Rétegek, árnyékok, "digitális papír" hatás és játékos animációk.
  • Kulcselem: FAB (Floating Action Button) – a lebegő akciógomb a sarokban.

Human Interface Guidelines (iOS)

  • Filozófia: Tisztaság, minimalizmus és mélység.
  • Megjelenés: Elmosott hátterek (translucency), vékony vonalak, elegancia.
  • Navigáció: Következetesen a képernyő alján (Tab Bar) vagy a bal felső sarokban ("Back" gomb).

Prototípus készítő eszközök

A statikus képernyőket "életre kell kelteni", hogy tesztelhessük a logikát. Ilyen célra nyugodtan használhattok AI-t, hogy készítsen egy prototípus alkalmazást. Ettől függetlenül megemlítenék pár platformot, ahol prototípust lehet gyártani:

  • Figma: Az iparági sztenderd. A "Smart Animate" funkcióval komplex mikrointerakciókat modellezhetünk.
  • Marvel: Nagyon egyszerű. Akár papírra rajzolt vázlatokat is befotózhatunk és összeköthetünk.
  • InVision: Kiváló a visszajelzések kezelésére és a fejlesztői átadásra.

Tesztelési aranyszabály: Mindig nézd meg a tervedet valódi telefonon (pl. Figma Mirror appal)! Monitoron minden gomb nagyobbnak és kényelmesebbnek tűnik, mint a kezedben tartva.

Alkalmazás vibe coding során

Elsőkörben érdemes kérni az AI-t, hogy generáljon nekünk egy Design System-et, illetve kérni az AI-t, hogy a későbbiekben ezzel dolgozzon. Egy példa prompt:

„Generálj egy Design System-et ezzel a color palette-tel és spacing scale-lel, majd készíts belőle 3 breakpointra (mobile/tablet/desktop) egy dashboard kártya komponenst."

A generált tartalomban érdemes ezeket átnézni:

  • Touch target ≥44px?
  • A színek kontrasztja ≥4.5:1?
  • Olvasható-e a szöveg?
  • Breakpoint töréseknél tartalom nem vész el?

Irodalomjegyzék