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 přizpůsobují se různým velikostem zařízení.
Čtěte článekHorizontální Indikátory Průběhu — Nejlepší Postupy
Podrobný průvodce návrhem vodorovných progress barů s aktivními, dokončenými a nadcházejícími stavy.
Proč jsou indikátory průběhu důležité
Vodorovné indikátory průběhu jsou jedním z nejdůležitějších prvků uživatelského rozhraní. Nejsou to jen dekorativní prvky — jsou to komunikační nástroje, které uživatelům říkají, kde se v procesu nacházejí. Když někdo vyplňuje formulář, absolvuje tutoriál nebo procházejí vícekrokovým checkoutem, potřebuje vědět, jak dlouho mu zbývá. To je to, co dělá dobrý indikátor průběhu.
Máme tendenci myslet si, že design progress baru je jednoduchý. Ale není. Musíte zvážit barvy, animace, stavy, popisky, velikosti a chování na mobilních zařízeních. Všechny tyto detaily mají vliv na to, jak uživatelé vnímají proces a jestli ho skutečně dokončí.
Struktura vodorovného indikátoru
Vodorovný progress bar se skládá z pěti hlavních částí. Zaprvé máte kontejner — to je celková šířka, do které se veškerý obsah vejde. Pak máte jednotlivé kroky, které se obvykle zobrazují jako kroužky nebo čtverce. Každý krok má svůj vlastní stav — buď je aktivní, dokončený, nebo nadcházející.
Spojnice mezi kroky jsou stejně důležité jako samotné kroky. Ty vizuálně ukazují vztah mezi jednotlivými fázemi. Když uživatel dokončí krok, spojnice se změní na barvu, která indikuje hotovo. To dává skvělý vizuální feedback.
Popisky jsou poslední součástí. Každý krok by měl mít jasný, stručný popis toho, co se v té fázi dělá. Popisky nejsou volitelné — jsou nezbytné pro pochopení.
Stavy a jejich styling
Existují tři primární stavy, se kterými musíte pracovat. Aktivní krok je ten, kde se uživatel právě nachází. Měl by být jasně viditelný — obvykle s jasnější barvou a větší velikostí. Dokončené kroky jsou ty, které uživatel už prošel. Ty se zobrazují s druhou barvou, která signalizuje, že jsou hotovy.
Nadcházející kroky jsou ty, které ještě přijdou. Ty by měly být podtlumené — méně viditelné, aby nekomplikovaly design. Mnohé týmy používají šedou nebo velmi světlou verzi primární barvy. To funguje dobře, protože si zachovává konzistenci s designem, ale jasně odděluje stavy.
Barvy nejsou jen estetické — jsou funkční. Uživatelé se naučí, co která barva znamená. Zůstaňte konzistentní v celé aplikaci. Když je aktivní krok oranžový v jedné části aplikace, nechte ho oranžový všude.
Nejlepší postupy pro design
1
Udržujte jednoduchost
Nepřidávejte zbytečné detaily. Jednoduchý design je čitelnější. Když máte pět kroků, nemusíte je zdobit ikonami, efekty nebo složitými animacemi. Prostý kruh, čára a text fungují nejlépe.
2
Jasné rozlišení stavů
Zajistěte, aby bylo jasné, který krok je aktivní. Nejednoho uživatele zmátl progress bar, kde nemohl vidět, kde se nachází. Použijte barvu, velikost nebo jiné vizuální odlišení.
3
Responzivní design
Na mobilech se progress bar chová jinak. Popisky se mohou skrýt, kroky se mohou zmenšit. Testujte design na malých obrazovkách. Někdy se všechny popisky nevejdou — v tom případě je skryj pod ikonami.
4
Animace s cílem
Když se krok změní ze stavu na stav, může být krátká animace užitečná. Ale ne všechny animace jsou potřebné. Používejte je strategicky — když se progress bar aktualizuje nebo když uživatel pokročí dál.
5
Přístupnost
Nespokejte se jen s barvou. Lidé s barevnou slepotou nemusí vidět rozdíl mezi aktivním a dokončeným krokem. Přidejte také vizuální markery — háčky pro dokončené kroky, tečky pro aktivní.
6
Procento versus kroky
Někdy je lepší zobrazit procento místo jednotlivých kroků. Používá se to při dlouhých procesech, kde by bylo moc kroků na seznam. Procento dává jasnější obraz o zbývajícím čase.
Související články
Důležité upozornění
Informace v tomto článku slouží pouze pro vzdělávací a informativní účely. Návrhové principy se mohou lišit v závislosti na vašem konkrétním projektu, cílové skupině a technických omezeních. Vždy testujte své design řešení s reálnými uživateli, abyste zajistili, že fungují tak, jak máte zamýšleno. Každý projekt je jedinečný a to, co funguje v jednom případě, nemusí fungovat v jiném.
Shrnutí
Vodorovné indikátory průběhu jsou mocný nástroj pro vedení uživatelů skrze víceúrovňové procesy. Když je navrhujete správně, zlepšují uživatelský zážitek a zvyšují procento uživatelů, kteří procesy dokončí. Pamatujte na to, že jde o komunikaci — progress bar vám umožňuje mluvit s uživatelem bez slov. Udržujte design čistý, stavy jasné a vždy myslete na přístupnost.
Nejlepší postupy, které jsme si prošli — jednoduchost, jasné rozlišení stavů, responzivní design, animace s cílem a přístupnost — to všechno se vzájemně podporuje. Když je kombinujete, vytváříte progress bary, které jsou nejen hezké, ale také funkční a uživatelsky přívětivé.
Chcete se naučit více o design systémech a komponentách?
Napište nám