Recenze

Komponenty | Návrh digitálních služeb GSOM SPbU

Přestože konstrukce umožňuje neaktivní stav tlačítka, doporučujeme, aby byla rozhraní navržena tak, aby se tlačítka neblokovala.

Ve většině případů by text na tlačítku měl být dokonavý infinitiv (odpovídající na otázku „Co mám dělat?“) a měl by jasně uvádět, co se stane, když na tlačítko klepnete. Například: napište na podporu. Povolena jsou také podstatná jména: podpora.

Tlačítko by mělo reagovat na stav kurzoru a zaostření – ztmavit nebo zesvětlit v závislosti na stylu.

Velikosti knoflíků

Používají se tři velikosti tlačítek: small,, střední и velké.

Velké tlačítko velké používá se pro hlavní výzvu k akci (CTA) na stránce nebo bloku a také tam, kde chcete upoutat pozornost uživatele.

Střední tlačítko střední používá ve většině případů. Tlačítko této velikosti lze použít v uživatelských rozhraních, formulářích, dialozích a modálních oknech.

Malé tlačítko small, vhodné pro použití v rámci textových bloků nebo v jejich blízkosti, zejména když je uživatel požádán, aby provedl akci v těsné blízkosti předmětu interakce nebo v omezeném prostoru.

Šířka tlačítka je určena šířkou textu na tlačítku a pevným odsazením. Nedoporučuje se snižovat okraje, ale lze je v případě potřeby zvýšit. Pokud například zvětšení šířky tlačítka způsobí, že bude tlačítko více proporcionální ke zbytku prvků rozhraní.

Typy tlačítek

Existují čtyři typy tlačítek: primární černá и základní barva (hlavní), obrys и sekundární šedá (menší).

Primární tlačítka primární černá / primární barva

Toto jsou nejviditelnější tlačítka, používají se pro klíčovou akci na stránce nebo uvnitř sémantického bloku. Primární tlačítka pomáhají upozornit na hlavní akci na obrazovce a zvýrazňují nejsilnější výzvu k akci. Ve většině případů se vyplatí použít hlavní tlačítko primární černá s pozadím ( –base-grays-800 ). Hlavní tlačítko základní barva Vyplatí se použít, když je vyžadován ještě větší důraz na prováděnou akci: například při provádění destruktivní akce, jako je „Smazat dokument“. V tomto případě se vyplatí upravit barvu v souladu s významem akce: v tomto případě by bylo vhodné udělat pozadí červené ( –base-accent-red ).

Na jedné stránce se doporučuje používat pouze jedno hlavní tlačítko (nepočítaje možná dialogová okna a tlačítka menu).

Obrys sekundárních tlačítek / sekundární šedá

Tato tlačítka přitahují méně pozornosti než tlačítka hlavní a používají se pro menší akce na stránce. Vedle akcí lze sekundární tlačítka použít pro navigaci, přesměrování uživatele na jinou stránku nebo jiný blok.

Tlačítka obrys и sekundární šedá se od sebe liší stupněm viditelnosti. Doporučujeme používat obrys mimo skupinu tlačítek, když chcete upozornit uživatele na akci prováděnou tlačítkem, ale ne tolik jako na hlavní akci na stránce. Sekundární šedá Nejvhodnější pro navigaci a v rámci skupiny tlačítek jako pár k hlavnímu tlačítku. Například hlavní tlačítko základní barva „Uložit“ a vedle něj sekundární tlačítko sekundární šedá „Zrušení“.

Přečtěte si více

Jak rychle vypěstovat sazenice měsíčku bez rizika opásání kořenů — AgroXXI

Název tlačítka lze doplnit ikonou. Pomůže vám rychle najít požadované tlačítko mezi ostatními a rychle pochopit, co tlačítko dělá:

Zaškrtávací políčko a rádio / Zaškrtávací políčko a přepínač

Zaškrtávací políčko – ovládací prvek, který umožňuje uživateli vybrat jednu nebo více možností ze sady možností.

Přepínač — ovládací prvek, který umožňuje vybrat pouze jednu možnost ze sady. Přepínače se obvykle objevují ve skupině.

Zaškrtávací políčka a přepínače mají standardní chování a anatomii. Je však nutné je přizpůsobit vizuálnímu stylu pomocí akcentní barvy červené.

Vstup / Vstupní pole

Vstupní pole umožňuje pomocí klávesnice zadat krátký text nebo číselnou hodnotu.

Ve většině případů doporučujeme použít ve vstupním poli zástupný symbol. Uživatel tak snáze pochopí, jak pole správně vyplnit. Je důležité, aby zástupný symbol nevyzval k zadání konkrétní hodnoty do pole.

Název vstupního pole musí být podstatné jméno označující, co je třeba zadat (například „Heslo“). Vyhněte se slovům „zadejte“, „specifikujte“, „vaše“ v názvu – nedávají smysl. Použití nápovědy je volitelné.

Pole s chybou je zvýrazněno červeně. Text chyby v tomto případě nahrazuje text nápovědy.

Tag / Tag

Tag je typ tlačítka a jeho speciální pouzdro pro zvýraznění malých titulků a nadpisů.

Značka zcela opakuje logiku hierarchie a interaktivity tlačítka.

Prohlédněte si všechny dostupné typy a stavy tagů v knihovně Figma.

Ikony / Ikony

Pomocí ikon urychlíte rozpoznávání objektů a upozorníte na akci, příkaz nebo sekci. Podobné jako firemní písmo Euclid Používáme také měkké zaoblení ve formě ikon. Ikony by měly být vizuálně vyvážené, pokud je vedle sebe použito více ikon nebo je ikona umístěna vedle textu.

Ikony jsou nakresleny ve dvou verzích: vyplněné (solidní) a lineární (linka). Zaplavená verze je hlavní a preferovaná.

Doporučujeme používat již hotové velikosti ikon (16 px), v případě potřeby je však možné ikonu zmenšit na 12 px, 20 px, 24 px.

Změnit zobrazení: