Amanoba Logo
Back to Course

Mozgás és visszajelzés nyelve

Day 9 of 30 · The Playbook 2026 – Mesterkurzus Designereknek

Időzítésekkel, görbékkel, állapotokkal szabályozod a mozgást: támogasson, ne zavarjon.

Tanulási cél

  • Definiálsz alap időzítéseket (150–300ms) és easing görbéket.
  • Állapotokra szabályt írsz (hover, focus, active, success, error).
  • Hanghoz igazítod (pl. visszafogott vs játékos).
  • Elkerülöd a mozgás-zajt, preferálod a jelentést.

Miért fontos

  • Visszajelzés nélkül bizonytalan a felhasználó.
  • Túl sok mozgás fárasztó, akadálymentességi kockázat.
  • Következetes mozgás → gyorsabb értés.

Magyarázat

Időzítések

  • Mikrointerakció: 150–200 ms, ease-out.
  • Modal/overlay: 200–250 ms, ease-in-out.
  • Oldal/útvonal: 250–300 ms, ease-in-out.

Állapotok

  • Hover: finom fény vagy max 1.02-es skála.
  • Fókusz: látható, kontrasztos kontúr.
  • Aktív: enyhe süllyesztés.
  • Siker/Hiba: szín + ikon + rövid mozgás (pl. halványítás/csúsztatás).

Példák

Rossz: 600ms bounce animáció minden gombon.

Jó: CTA hover 150ms ease-out, focus kontúr 3px, active -2px translateY.

Gyakorlat (vezetett, 10-15 perc)

  1. Írj mozgás-tokeneket: duration.xs/sm/md, easing.standard, easing.entrance, easing.exit.
  2. Definiáld állapot-szabályokat CTA-ra (hover/focus/active) és kártyára.
  3. Adj példát success/error visszajelzésre (ikon + szín + mozgás).

Gyakorlat (önálló, 5-10 perc)

Implementálj egy komponenst (pl. CTA) a szabályokkal, rögzítsd videón vagy gifben.

Önellenőrzés

  • Időzítés- és easing-táblázat megvan.
  • Állapot-szabályok dokumentálva.
  • Jó/rossz példa létezik.
  • Akadálymentességi szempont (prefers-reduced-motion) figyelembe véve.

Opcionális mélyítés