Sliders

Posuvník je ovládací prvek, který umožňuje uživateli vybrat z rozsahu hodnot přesunutím ovládacího prvku palce podél stopy.

Je to správná kontrola?

Pomocí posuvníku můžete 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 zamyslí nad nastavením hlasitosti zvuku na nízkou nebo střední, ne na nastavení hodnoty na 2 nebo 5.

Nepoužívejte posuvník pro binární nastavení. Místo toho použijte přepínač .

Tady jsou některé další faktory, které je potřeba vzít v úvahu při rozhodování, jestli použít posuvník:

• Vypadá toto nastavení jako relativní množství? Pokud ne, použijte přepínače nebo seznam .
• Má nastavení přesnou, známou číselnou hodnotu? 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 nemůže nikdy změnit hodnotu, použijte místo toho text jen pro čtení.

Pokud se rozhodujete mezi posuvníkem a číselným textovým polem, 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.

Recommendations

• Nastavení velikosti ovládacího prvku tak, aby uživatelé mohli 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. Zajistěte, aby se koncové body posuvníku vždy vešly do hranic zobrazení.
• Poskytněte okamžitou zpětnou vazbu, když uživatel provede výběr (pokud je praktický). Například ovládání hlasitosti ve Windows pípá, aby označilo vybranou hlasitost.
• 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ý.
• Když posuvník zakážete, zakažte všechny přidružené popisky nebo vizuály zpětné vazby.
• Při nastavování směru toku nebo orientace posuvníku zvažte směr textu. Písmo plyne zleva doprava v některých jazycích a zprava doleva v jiných.
• Jako indikátor průběhu nepoužívejte posuvník.
• Neměňte velikost ukazatele posuvníku z výchozí velikosti.
• Nevytvárejte průběžný posuvník, pokud je rozsah hodnot velký a uživatelé pravděpodobně vyberou jednu z několika reprezentativních hodnot z rozsahu. Místo toho použijte tyto hodnoty jako jediný povolený postup. Pokud může být hodnota času až 1 měsíc, ale uživatelé potřebují vybrat jen 1 minutu, 1 hodinu, 1 den nebo 1 měsíc, potom vytvořte posuvník se čtyřmi postupovými body.

Další pokyny k použití

Výběr správného rozložení: vodorovné nebo svislé

Posuvník můžete orientovat vodorovně nebo svisle. Pomocí těchto pokynů určete, které rozložení se má použít.

• 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.
• Pokud se ovládací prvek používá k hledání v rámci médií, například v aplikaci videa, použijte vodorovnou orientaci.
• Při použití posuvníku na stránce, který lze posunout v jednom směru (vodorovně nebo svisle), použijte pro posuvník jinou orientaci než směr posouvání. V opačném případě můžou uživatelé potáhnout posuvníkem a změnit jeho hodnotu omylem při pokusu o posouvání stránky.
• Pokud si nejste jistí, kterou orientaci použít, použijte ten, který nejlépe vyhovuje vašemu rozložení stránky.

Směr rozsahu

Směr rozsahu je směr, kterým posuvník přesunete, když ho posunete z aktuální hodnoty na maximální hodnotu.

• U svislého posuvníku umístěte nejvyšší hodnotu na začátek posuvníku bez ohledu na směr čtení. Například pro posuvník hlasitosti vždy umístěte nastavení maximálního hlasitosti na začátek posuvníku. U jiných typů hodnot (například dnů v týdnu) postupujte podle směru čtení stránky.
• U vodorovných stylů umístěte dolní hodnotu na levou stranu posuvníku pro rozložení stránky zleva doprava a vpravo pro rozložení stránky zprava doleva.
• Jedinou výjimkou předchozího návodu jsou pruhy hledání médií: vždy umístěte nižší hodnotu na levou stranu posuvníku.

Kroky a značky měření

• Pokud nechcete, aby posuvník povolil libovolné hodnoty mezi minimální a maximální hodnotou, použijte krokové body. Například pokud používáte posuvník k zadání počtu filmových lístků ke koupi, nepovolujte desetinné hodnoty. Dejte jí hodnotu kroku 1.
• Pokud zadáte kroky (označované také jako body přichycení), ujistěte se, že poslední krok odpovídá maximální hodnotě posuvníku.
• K zobrazení umístění hlavních nebo významných hodnot použijte značky. Například posuvník, který řídí přiblížení, může mít značky pro 50%, 100%a 200%.
• Umožňuje zobrazit značky, když uživatelé potřebují znát přibližnou hodnotu nastavení.
• Zobrazit značky a popisek hodnoty, když uživatelé potřebují znát přesnou hodnotu nastavení, které zvolí, bez interakce s ovládacím prvkem. V opačném případě můžou pomocí popisu hodnoty zobrazit přesnou hodnotu.
• Vždy zobrazovat značky, pokud nejsou zřejmé krokové body. Pokud je například posuvník široký 200 pixelů a má 200 bodů přichycení, můžete značky zaškrtnutí skrýt, protože uživatelé si nevšimnou chování přichycení. Pokud existuje pouze 10 bodů přichycení, zobrazte označení.

Štítky

• popisky posuvníku

  Popisek posuvníku označuje, k čemu se posuvník používá.

  • Použijte popisek bez koncové interpunkce (toto je konvence pro všechny popisky ovládacích prvků).
  • Umístěte popisky nad posuvník, pokud je posuvník ve formuláři, který umístí většinu jeho popisků nad ovládací prvky.
  • Umístěte popisky do stran, když je posuvník ve formuláři, který většinu jeho popisků umístí k bočním stranám ovládacích prvků.
  • Neumisťujte popisky pod posuvník, protože prst uživatele může popisek zakroužovat, když se uživatel dotkne posuvníku.

• popisky rozsahu

  Popisky rozsahu nebo výplně uvádějí minimální a maximální hodnoty posuvníku.

  • Označte dva konce rozsahu posuvníků, pokud to svislá orientace nepotřebuje.
  • Pro každý popisek používejte pouze jedno 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é.

• popisky hodnot

  Popisek hodnoty zobrazí aktuální hodnotu posuvníku.

  • 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).
  • Vzhledem k tomu, že se při čištění zakrývá palec posuvníku, zvažte zobrazení aktuální hodnoty jiným způsobem s popiskem nebo jiným vizuálem. Velikost textu nastavení posuvníku by mohla vykreslit nějaký ukázkový text správné velikosti vedle posuvníku.

Vzhled a interakce

Posuvník se skládá ze stopy a palce. Posuvník je lišta (která může volitelně zobrazit různé styly značek) představující rozsah hodnot, které lze zadat. Palec je selektor, který může uživatel umístit buď klepnutím na lištu, nebo přejížděním prstem sem a tam po liště.

Posuvník má velkou dotykovou plochu. Pokud chcete zachovat přístupnost dotykového ovládání, měl by být posuvník umístěn dostatečně daleko od okraje displeje.

Při navrhování vlastního posuvníku zvažte způsoby, jak uživateli poskytnout co nejmenší nepotřebné informace. Popisek hodnoty použijte, pokud uživatel potřebuje znát jednotky, aby porozuměl nastavení; najděte kreativní způsoby, jak tyto hodnoty graficky znázorňovat. Posuvník, který řídí hlasitost, například může zobrazit grafiku reproduktoru bez zvukových vln na minimálním konci posuvníku a grafiku reproduktoru se zvukovými vlnami na maximálním konci.

Examples

Posuvník se značkami v 10 bodových intervalech od 0 do 100.

Vytvoření posuvníku

• důležitá rozhraní API: třída Slider, vlastnost Value, událost ValueChanged

Otevřete aplikaci Galerie WinUI 3 a podívejte se na posuvník v akci.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Tady je postup, jak vytvořit posuvník v XAML.

<Slider x:Name="volumeSlider" Header="Volume" Width="200"
        ValueChanged="Slider_ValueChanged"/>

Tady je postup, jak vytvořit posuvník v kódu.

Slider volumeSlider = new Slider();
volumeSlider.Header = "Volume";
volumeSlider.Width = 200;
volumeSlider.ValueChanged += Slider_ValueChanged;

// Add the slider to a parent container in the visual tree.
stackPanel1.Children.Add(volumeSlider);

Hodnotu posuvníku získáte a nastavíte z vlastnosti Value. Pokud chcete reagovat na změny hodnot, můžete použít datovou vazbu pro vytvoření vazby na vlastnost Value nebo zpracovat událost ValueChanged.

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    Slider slider = sender as Slider;
    if (slider != null)
    {
        media.Volume = slider.Value;
    }
}

Související témata

• Přepínání přepínačů
• Posuvník typu