Pokyny pro vizuální zpětnou vazbu

Pomocí vizuální zpětné vazby můžete uživatelům ukázat, kdy se zjistí, interpretují a zpracovávají jejich interakce. Vizuální zpětná vazba může uživatelům pomoct tím, že podporuje interakci. Označuje úspěch interakce, která zlepšuje smysl uživatele pro kontrolu. Předává také stav systému a snižuje chyby.

Důležitá rozhraní API: Windows.Devices.Input, Windows.UI.Input, Windows.UI.Core

Recommendations

• Pokuste se omezit úpravy šablony ovládacího prvku na ty, které přímo souvisejí s vaším záměrem návrhu, protože rozsáhlé změny můžou ovlivnit výkon a přístupnost ovládacího prvku i vaší aplikace.
  • Další informace o přizpůsobení vlastností ovládacího prvku, včetně vlastností stavu vizuálu, najdete v tématu Styly XAML .
  • Podrobnosti o provádění změn v šabloně ovládacího prvku najdete v třídě UserControl .
  • Pokud potřebujete v šabloně ovládacího prvku provést významné změny, zvažte vytvoření vlastního ovládacího prvku. Příklad vlastního šablonovaného ovládacího prvku najdete v ukázce přizpůsobeného editačního prvku.
• Nepoužívejte dotykové vizualizace v situacích, kdy můžou kolidovat s používáním aplikace. Další informace najdete v tématu ShowGestureFeedback.
• Nezobrazovat zpětnou vazbu, pokud to není nezbytně nutné. Udržujte uživatelské rozhraní čisté a přehledné tím, že nezobrazuje vizuální zpětnou vazbu, pokud nepřidáte hodnotu, která není k dispozici jinde.
• Nesnažte se výrazně přizpůsobovat chování vizuální zpětné vazby předdefinovaných gest Windows, protože to může vytvořit nekonzistentní a matoucí uživatelské prostředí.

Další pokyny k použití

Vizualizace kontaktů jsou zvláště důležité pro dotykové interakce, které vyžadují přesnost a preciznost. Vaše aplikace by například měla jasně označit umístění klepnutí, aby uživatel věděl, jestli zmeškal cíl, o kolik ho zmeškal a jaké úpravy musí udělat.

Použití výchozích ovládacích prvků platformy XAML, které jsou k dispozici, zajišťuje, že vaše aplikace funguje správně na všech zařízeních a ve všech vstupních situacích. Pokud vaše aplikace obsahuje vlastní interakce, které vyžadují přizpůsobenou zpětnou vazbu, měli byste zajistit, aby byla zpětná vazba vhodná, zasahovala do vstupních zařízení a neodrušovala uživatele od úkolu. Může se jednat o konkrétní problém ve hře nebo v aplikacích pro kreslení, kdy může dojít ke konfliktu vizuální zpětné vazby s kritickým uživatelským rozhraním nebo jejich skrytí.

Důležité

Nedoporučujeme měnit chování interakcí integrovaných gestech.

Zpětná vazba mezi zařízeními

Vizuální zpětná vazba je závislá obecně na vstupním zařízení (dotyk, touchpad, myš, pero/stylus, klávesnice atd.). Například integrovaná zpětná vazba myši obvykle zahrnuje přesunutí a změnu kurzoru, zatímco dotykové ovládání a pero vyžadují vizualizace kontaktů a vstup klávesnice a navigace používají obdélníky a zvýraznění fokusu.

Pomocí showGestureFeedback můžete nastavit chování zpětné vazby pro gesta platformy.

Pokud upravujete uživatelské rozhraní zpětné vazby, ujistěte se, že poskytujete zpětnou vazbu, která podporuje a je vhodná pro všechny režimy vstupu.

Tady je několik příkladů předdefinovaných vizualizací kontaktů ve Windows.

Dotyková vizualizace	Vizualizace myši nebo touchpadu	Vizualizace pera	Vizualizace pomocí klávesnice

Vizuály s fokusem s vysokou viditelností

Všechny aplikace pro Windows mají lépe definovaný vizuál zaměřený na interaktivní ovládací prvky v aplikaci. Tyto nové fokusové vizuály jsou plně přizpůsobitelné a v případě potřeby je možné zakázat.

Pro 10stopé prostředí typické pro používání Xboxu a TV podporuje Windows Reveal focus, světelný efekt, který animuje ohraničení zaměřených prvků, jako je tlačítko, když získají fokus přes gamepad nebo vstup klávesnice.

Barevná značka a přizpůsobení

Vlastnosti ohraničení

Vizuály s fokusem s vysokou viditelností mají dvě části: primární ohraničení a sekundární ohraničení. Primární okraj je 2px tlustý a běží kolem mimo sekundárního ohraničení. Sekundární okraj je 1px tlustý a běží kolem uvnitř primárního ohraničení.

Pokud chcete změnit tloušťku buď typu ohraničení (primárního nebo sekundárního), použijte FocusVisualPrimaryThickness nebo FocusVisualSecondaryThickness:

<Slider Width="200" FocusVisualPrimaryThickness="5" FocusVisualSecondaryThickness="2"/>

Okraj je vlastnost typu Tloušťka, a proto lze okraj přizpůsobit tak, aby se zobrazoval pouze na určitých stranách ovládacího prvku. Viz níže:

Okraj je prostor mezi vizuálními mezemi ovládacího prvku a začátkem zaměřovacích sekundárních ohraničení. Výchozí okraj je 1px daleko od hranic ovládacího prvku. Tento okraj můžete upravit podle ovládacího prvku změnou vlastnosti FocusVisualMargin :

<Slider Width="200" FocusVisualMargin="-5"/>

Záporný okraj posune okraj směrem od středu ovládacího prvku a kladný okraj posune okraj blíž ke středu ovládacího prvku.

Pokud chcete vypnout fokus na ovládacím prvku úplně, jednoduše zakázat UseSystemFocusVisuals:

<Slider Width="200" UseSystemFocusVisuals="False"/>

Tloušťka, okraj nebo to, zda si vývojář aplikace přeje mít vůbec zobrazené vizuály fokusu, je určeno pro každý ovládací prvek samostatně.

Vlastnosti barvy

Pro fokusové vizuály existují jenom dvě vlastnosti barev: primární barva ohraničení a sekundární barva ohraničení. Tyto barvy ohraničení při fokusu se dají změnit pro každý ovládací prvek na úrovni stránky a globálně pro celou aplikaci.

Pokud chcete, aby vizuální prvky odpovídaly značce v celé aplikaci, přepište systémové štětce:

<SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="DarkRed"/>
<SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="Pink"/>

Chcete-li změnit barvy jednotlivých ovládacích prvků, upravte vlastnosti vizualizace fokusu na požadovaném ovládacím prvku.

<Slider Width="200" FocusVisualPrimaryBrush="DarkRed" FocusVisualSecondaryBrush="Pink"/>

Související články

Pro návrháře

• Pokyny pro posouvání

Pro vývojáře

• Vlastní interakce uživatelů

Samples

• Základní vstupní vzorek
• Ukázka vstupu s nízkou latencí
• Ukázka režimu interakce uživatele
• Ukázka vizuálů Focus

Archivní ukázky

• Vstup: Ukázka událostí uživatelského vstupu XAML
• Vstup: Ukázka schopností zařízení
• Vstup: Ukázka testování dotykového ovládání
• Ukázkový příklad posouvání, posunu a přiblížení v XAML
• Vstup: Zjednodušená ukázka rukopisu
• Vstup: Ukázka gest Windows 8
• Vstup: Ukázka manipulace a gest
• Ukázka vstupu dotykového ovládání DirectX