Průvodce Designem

Styling Stavů — Aktivní, Dokončený, Nadcházející

Průvodce barvou a CSS stylováním pro jasné rozlišení mezi jednotlivými stavy průběhu.

Barevný systém pro stavy: modrá pro aktivní, zelená pro dokončené, šedá pro nadcházející kroky

9 min čtení Začátečník Březen 2026

Autor článku

Tomáš Kučera

Vedoucí oddělení UX/UI designu

UX/UI designer s 12 lety zkušeností v designu progress indikátorů a step trackerů pro komplexní webové aplikace.

Proč je styling stavů tak důležitý?

Když navrhujete progress indikátor, nejde jen o to, aby vypadal hezky. Jde o to, aby uživatel pochopil, kde se v procesu nachází. Správné barvy a CSS stylování jsou klíčové — usnadňují orientaci a snižují zmatek.

Každý stav (aktivní, dokončený, nadcházející) musí být vizuálně odlišný. Není to jen o estetice. Je to o tom, aby uživatel instinktivně věděl, co se děje. Když vidí zelenou, ví, že je hotovo. Modrá znamená, že to právě dělá. A šedá? To je něco, co teprve přijde.

Progresivní indikátor s třemi stavy zobrazující vizuální rozdíl pomocí barev a efektů

Tři základní stavy

Progress indikátor se skládá ze tří stavů, každý má svou úlohu. Pojďme si je projít jednotlivě. Není to složité, ale musíte to udělat správně, aby to fungovalo.

Aktivní stav

To je krok, který uživatel právě vyplňuje. Musí být nejviditelnější. Obvykle se používá kontrastní barva — modrá, zelená nebo oranžová. Barva by měla být dostatečně jasná, aby vynikla. A přidejte subtle shadow nebo border, aby bylo jasné, že to je aktivní prvek.

Dokončený stav

Když je krok hotov, měl by vypadat uspokojivě. Zelená je klasika, ale můžete použít i stříbrnou nebo jinou “ukončenou” barvu. Často se přidává ikona — zaškrtnutí, hvězdička, nebo něco podobného. Barva by měla být méně kontrastní než aktivní stav, ale stále viditelná.

Nadcházející stav

Kroky, které ještě nejsou aktivní, by měly být tlumené. Šedá je standardní volba. Často se používá nižší opacity nebo blednější barva. Cíl? Aby byly viditelné, ale jasně se od ostatních lišily. Nechcete, aby je uživatel spletl s aktivními kroky.

Detailní srovnání tří stavů progress indikátoru s barevnými kódy a CSS vlastnostmi

Barevná paleta doporučených barev pro jednotlivé stavy s kontrastními poměry

Volba správných barev

Barva není jen o vzhledu. Musí splňovat standardy přístupnosti. Kontrast mezi textem a pozadím by měl být alespoň 4,5:1. To znamená, že když je pozadí tmavé, text musí být jasný. A naopak.

Modrá pro aktivní

Doporučujeme #2563eb nebo podobný odstín. Je to dostatečně jasné a intuitivní. Uživatelé vědí, že modrá znamená “aktuálně to dělám”.

Zelená pro hotovo

#10b981 funguje skvěle. Zelená má univerzální význam — všechno je v pořádku. Přidejte zaškrtnutí a je to dokonalé.

Šedá pro nadcházející

#d1d5db je ideální volba. Není příliš jasná, není příliš tmavá. Jasně se odlišuje od ostatních stavů bez toho, aby byla rušivá.

CSS implementace

Teď se dostáváme k samotnému kódování. Není to těžké, ale musíte být důslední. Každý stav potřebuje svou třídu a svůj styling. Nepokoušejte se to řešit jedním stylem — to se vám vrátí jako problém.

Příklad CSS tříd:

.progress-step {
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.progress-step.active {
    background-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.progress-step.completed {
    background-color: #10b981;
    color: #ffffff;
}

.progress-step.upcoming {
    background-color: #d1d5db;
    color: #6b7280;
}

Vidíte tu transition? To je důležité. Když se stav změní, změna by měla být plynulá. Uživatelé to vidí a cítí se to lépe. Nepoužívejte příliš dlouhou dobu — 0,3 sekundy je ideální.

Animovaný diagram ukazující CSS přechod mezi jednotlivými stavy progress kroků

Důležitá poznámka

Tento článek poskytuje vzdělávací informace o designu a stylování progress indikátorů. Konkrétní implementace se může lišit v závislosti na vašich technologiích, cílové skupině a dostupnosti. Vždy testujte barvy a kontrast s reálnými uživateli, včetně těch s barvoslepostí nebo sníženým viděním. Nejsou zde žádné garantované výsledky — vše závisí na kontextu vaší aplikace a potřebách vašich uživatelů.

Shrnutí

Styling stavů v progress indikátoru není složitý, ale vyžaduje pozornost. Tři základní barvy — modrá pro aktivní, zelená pro dokončený, šedá pro nadcházející — jsou dobrý výchozí bod. Pamatujte na kontrast, pamatujte na přechody a pamatujte, že vizuální jasnost je důležitější než kreativita.

Když si vezměte čas na správné stylování, uživatelé vám za to poděkují. Budou vědět, kde jsou v procesu. Budou cítit, že je vše pod kontrolou. A to je to, o co jde.

Chcete se dozvědět více o designu progress indikátorů?

Prozkoumejte všechny články