Amanoba Logo
Back to Course

Vizuális hierarchia nyomás alatt

Day 14 of 30 · The Playbook 2026 – Mesterkurzus Designereknek

Megtanulod, hogyan tartsd meg a hierarchiát sok információnál (dashboard, lista, kártya).

Tanulási cél

  • Hierarchia eszközei: méret, súly, kontraszt, spacing, szín, ikon.
  • Lista és kártya hierarchia sablon.
  • Overload esetén redukciós szabályok (truncate, progressive disclosure).
  • Dokumentált jó/rossz példák.

Miért fontos

  • Sok adat → könnyen szétesik a figyelem.
  • Hierarchia segít gyorsan találni a lényeget.
  • Rosszul kezelt lista/kártya bizalomvesztést okoz.

Magyarázat

  • Eszközök: tipó (súly/méret), szín (csak kiemelésre), spacing, ikon, background.
  • Progressive disclosure: mutass kevesebbet, a részleteket kattintásra.
  • Truncate + tooltip: hosszú tartalom rövidítése magyarázattal.

Példák

Rossz: Minden szöveg azonos súly/méret, össze-vissza színek.

Jó: Cím 16/20 bold, meta 12/16 muted, spacing tokenek, ikon csak statusra.

Gyakorlat (vezetett, 10-15 perc)

  1. Készíts lista/kártya hierarchia sablont (title, meta, badge, action).
  2. Írj szabályt: mikor truncates, mikor multi-line.
  3. Dokumentálj jó/rossz példát.

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

Alkalmazd egy dashboard widgetre, screenshotold a before/after állapotot.

Önellenőrzés

  • Hierarchia sablon kész.
  • Truncate/progressive disclosure szabály megvan.
  • Jó/rossz példák dokumentálva.

Opcionális mélyítés