Sdílet prostřednictvím

Posuvníky (základy návrhu)

  • Článek

Poznámka

Tento průvodce návrhem byl vytvořen pro Windows 7 a nebyl aktualizován pro novější verze Windows. Většina pokynů se stále používá v zásadě, ale prezentace a příklady neodráží naše aktuální pokyny k návrhu.

Pomocí posuvníku si uživatelé můžou vybrat z souvislého rozsahu hodnot. Posuvník má pruh, který zobrazuje oblast a indikátor, který zobrazuje aktuální hodnotu. Volitelné značky značek zobrazují hodnoty.

obrázek znázorňující pruh, posuvník a značky značek

Typický posuvník.

Poznámka

Pokyny týkající se rozložení jsou uvedeny v samostatném článku.

 

Je to správná kontrola?

Posuvník použijte, pokud chcete, aby uživatelé mohli nastavit definované, souvislé hodnoty (například hlasitost nebo jas) nebo rozsah diskrétních hodnot (například nastavení rozlišení obrazovky).

Posuvník je dobrou volbou, když víte, že uživatelé považují hodnotu za relativní množství, nikoli číselnou hodnotu. Uživatelé se například zamyslete nad nastavením zvukového hlasitosti na nízkou nebo střední, ne o nastavení hodnoty na 2 nebo 5.

Při rozhodování zvažte tyto otázky:

  • Vypadá toto nastavení jako relativní množství? Pokud ne, použijte přepínačůnebo rozevírací nebo seznamu s jedním výběrem .
  • Je nastavení přesné, známé číselné hodnoty? Pokud ano, použijte číselná textová pole.
  • Využil by uživatel okamžitou zpětnou vazbu k účinku změn nastavení? Pokud ano, použijte posuvník. Uživatelé si například můžou vybrat barvu snadněji tím, že okamžitě uvidí vliv změn na hodnoty odstínu, sytosti nebo světelnosti.
  • Má nastavení rozsah čtyř nebo více hodnot? Pokud ne, použijte přepínače.
  • Může uživatel změnit hodnotu? Posuvníky jsou určené pro interakci uživatele. Pokud uživatel nikdy nemůže hodnotu změnit, použijte textové pole jen pro čtení .

Pokud je možné posuvník nebo číselné textové pole, použijte číselné textové pole, pokud:

  • Prostor na obrazovce je těsný.
  • Uživatel bude pravděpodobně preferovat používání klávesnice.

Použijte posuvník, pokud:

  • Uživatelé budou mít prospěch z okamžité zpětné vazby.

Pokyny

  • Použijte přirozenou orientaci. Pokud například posuvník představuje skutečnou hodnotu, která se obvykle zobrazuje svisle (například teplota), použijte svislou orientaci.

  • Nastavte posuvník tak, aby odrážel jazykovou verzi uživatelů. Například západní jazykové verze se čtou zleva doprava, takže pro vodorovné posuvníky umístěte dolní konec oblasti vlevo a horní konec vpravo. Pro jazykové verze, které čtou zprava doleva, udělejte opak.

  • Nastavte velikost ovládacího prvku tak, aby uživatel mohl snadno nastavit požadovanou hodnotu. V případě nastavení s diskrétními hodnotami se ujistěte, že uživatel může snadno vybrat libovolnou hodnotu pomocí myši.

  • Zvažte použití nelineárního měřítka, pokud je rozsah hodnot velký a uživatelé budou pravděpodobně vybírat hodnoty na jednom konci rozsahu. Například hodnota času může být 1 minuta, 1 hodina, 1 den nebo 1 měsíc.

  • Kdykoli je to praktické, poskytněte okamžitou zpětnou vazbu, když uživatel provede výběr. Například ovládací prvek hlasitosti systému Microsoft Windows indikuje výsledný zvukový svazek.

  • Pomocí popisků můžete zobrazit rozsah hodnot.

    Výjimka: Pokud je posuvník svisle orientovaný a horní popisek je Maximum, Vysoká, Více nebo ekvivalentní, můžete ostatní popisky vynechat, protože význam je jasný.

    obrázek svislého posuvníku

    V tomto příkladu svislá orientace posuvníku znemožní popisky rozsahu.

  • Použít značky zaškrtnutí, když uživatelé potřebují znát přibližnou hodnotu nastavení.

  • Značky značek a popisek hodnot použijte, když uživatelé potřebují znát přesnou hodnotu nastavení, které zvolí. Popisek hodnoty vždy používejte, pokud uživatel potřebuje znát jednotky, aby nastavení dávalo smysl.

    obrázek posuvníku zobrazující počet vybraných pixelů

    V tomto příkladu se popisek používá k jasnému označení vybrané hodnoty.

  • U vodorovně orientovaných posuvníků umístěte značky značek pod posuvník. Pro svisle orientované posuvníky umístěte značky značek vpravo pro západní kultury; pro jazykové verze, které čtou zprava doleva, udělejte opak.

  • Vložte popisek hodnoty zcela pod ovládací prvek posuvníku, aby byl vztah jasný.

    nesprávná odpověď:

    obrázek popisku, který je delší než jeho posuvník

    V tomto příkladu není popisek hodnoty zarovnaný pod posuvníkem.

  • Při zakázání posuvníku také zakažte všechny přidružené popisky.

  • Nepoužívejte posuvník ani číselné textové pole pro stejné nastavení. Použijte pouze vhodnější ovládací prvek.

    Výjimka: Použít oba ovládací prvky, když uživatel potřebuje okamžitou zpětnou vazbu a možnost nastavit přesnou číselnou hodnotu.

  • Nepoužívejte posuvník jako indikátor průběhu.

  • Neměňte velikost indikátoru posuvníku z výchozí velikosti.

    nesprávná odpověď:

    obrázek posuvníku, který je menší než výchozí

    V tomto příkladu se použije menší velikost než výchozí hodnota.

    správně:

    obrázek znázorňující výchozí posuvník

    V tomto příkladu se použije výchozí velikost.

  • Neoznačit každou značku zaškrtnutí.

obrázek doporučené velikosti posuvníku a mezery

Doporučená velikost a mezery pro posuvníky

Popisky

Popisky posuvníku

  • Použijte popisek statického textu, který končí dvojtečkou, nebo popisek pole skupiny bez koncové interpunkce.
  • Každému popisku přiřaďte jedinečný přístupový klíč. Pokyny k zadání najdete v tématu klávesnice.
  • Použijte velká písmena ve stylu věty.
  • Umístěte popisek posuvníku doleva od posuvníku nebo nad a zarovnejte ho s levým okrajem posuvníku (nebo jeho identifikátor levého rozsahu( pokud je k dispozici).

Popisky rozsahu

  • Označte dva konce rozsahu posuvníků, pokud to svislá orientace nepotřebuje.
  • Pro každý popisek používejte pouze slovo, pokud je to možné.
  • Nepoužívejte koncovou interpunkci.
  • Ujistěte se, že tyto popisky jsou popisné a paralelní. Příklady: Maximum/Minimum, Více/Méně, Nízká/Vysoká, Měkké/Hlasité.
  • Použijte velká písmena ve stylu věty.
  • Nepřiřazujte přístupové klíče.

Popisky hodnot

  • Pokud potřebujete popisek hodnoty, zobrazte ho pod posuvníkem.

  • Zacentrujte text vzhledem k ovládacímu prvku a zahrňte jednotky (například pixely).

    obrázek popisku na střed pod posuvníkem

    V tomto příkladu je popisek hodnoty na střed pod posuvníkem a obsahuje jednotky.

Dokumentace

Při odkazech na posuvníky:

  • Použijte přesný text popisku, včetně jeho velká písmena, a zadejte posuvník slova. Nezahrnujte podtržítko nebo dvojtečku přístupového klíče.
  • Chcete-li popsat interakci uživatele, použijte move.
  • Pokud je to možné, naformátujte popisek tučným písmem. V opačném případě vložte popisek do uvozovek, pouze pokud je to nutné, aby se zabránilo nejasnostem.

Příklad: Pokud chcete zvětšit rozlišení obrazovky, přesuňte posuvník Rozlišení obrazovky doprava.

glosář