Vertikální Sledovače — Řešení pro Mobilní Zařízení
Jak navrhovat vertikální indikátory, které fungují skvěle na malých obrazovkách a poskytují jasnou navigaci.
Proč jsou vertikální indikátory pro mobilní zařízení důležité?
Mobilní uživatelé procházejí webem a aplikacemi jinak než na desktopu. Mají menší obrazovky, horší připojení a horší trpělivost. Když navrhujete step tracker nebo progress bar pro mobil, nemůžete prostě zmenšit desktop verzi. Vertikální indikátory se na telefonu chovají přirozeně — jedou dolů stejně jako obsah. Uživatel scrolluje a vidí, kde je v procesu. To je elegantní a intuitivní řešení.
V tomto průvodci se podíváme, jak správně navrhnout vertikální sledovače. Zahrneme specifické rozměry, barvy, typografii a jak se chovat v různých stavech. Všechno to spolu vytváří jasný a přívětivý průvodce uživatelem.
Anatomie vertikálního sledovače
Vertikální indikátor se skládá z několika částí. Každá má svou funkci a všechny spolu musí fungovat harmonicky.
Konektor
Čára nebo stopa, která spojuje jednotlivé kroky. Na mobilech se osvědčuje tloušťka 2–3px. Měla by být patrná, ale ne dominantní.
Ikona kroku
Kruh nebo čtverec obsahující číslo, ikonu nebo háček. Ideální velikost je 40–56px. Na mobilech používáme spíš menší stranu tohoto rozsahu — 40–48px.
Popis fáze
Text vedle ikony. Měl by být stručný — max 2–3 slova. Na mobilech se text často umísťuje pod ikonu, aby se neztratil na malé šířce.
Rozteč mezi kroky
Vertikální vzdálenost mezi jednotlivými kroky. 24–32px je obvyklá. Příliš málo a kroky se zdají stísnuté. Příliš mnoho a tracker vypadá rozprostřený.
Stylování stavů — Jak odlišit každou fázi
Každý krok má tři stavy. Musíte je jasně rozlišit, aby uživatel pochopil, kde je a co dělat dál.
Nadcházející krok
Stav, který ještě uživatel nedosáhl. Ikona je obvykle šedá nebo světlá. Text je také zeslabený. Konektor mezi kroky je neaktivní. Používejte nižší kontrast — například #e0e0e0 pro ikonu a #999999 pro text na světlém pozadí.
Aktivní krok
Krok, na kterém uživatel právě je. Ikona má silnou barvu — obvykle primární barvu aplikace. Text je také zvýrazněn. Konektor nad ním je aktivní (plný). Můžete přidat mírný stín nebo zvětšit ikonu o pár pixelů.
Dokončený krok
Krok, který uživatel absolvoval. Ikona má obvykle zelenou barvu nebo háček. Konektor pod ním je také aktivní. Text může být normální nebo mírně zeslabený. Zelenou barvou signalizujete úspěch a pokrok.
Související články
Poznámka k návrhům
Hodnoty a doporučení v tomto článku jsou návrhované postupy založené na zkušenostech z reálných projektů. Konkrétní rozměry, barvy a rozteče byste měli přizpůsobit vašemu design systému a cílům vaší aplikace. Každý projekt má své specifické požadavky. Testujte s reálnými uživateli a iterujte na základě jejich zpětné vazby.
Praktické tipy pro implementaci
Když budete kódovat vertikální indikátor, pamatujte na pár věcí. Nejdůležitější je dostupnost — ujistěte se, že screen readery mohou přečíst všechny informace. Použijte sémantické HTML a ARIA atributy tam, kde je to potřeba.
Flexbox je váš kamarád
Vertikální trackers se skvěle hodí pro flexbox. Nastavte `flex-direction: column` a pusťte se do toho. Použijte `gap` na mezery mezi kroky — je to čistší než margin.
SVG pro konektory
Pokud chcete animované přechody mezi stavy, SVG je ideální volba. Můžete snadno měnit barvy a animovat délku čar s CSS nebo JavaScriptem.
Shrnutí
Vertikální indikátory jsou pro mobilní zařízení přirozené řešení. Přizpůsobují se malým obrazovkám a uživatelé je snadno porozumí. Klíč je v jednoduchosti — jasné rozlišení stavů, čitelná typografie a správné rozměry. Když to všechno vložíte dohromady, dostanete sledovač, který vede uživatele procesem bez zbytečné zmatku. Zkuste si to v příštím projektu a uvidíte, jak moc to zlepší uživatelský zážitek.