Vizuális visszajelzési irányelvek

Vizuális visszajelzések használatával megjelenítheti a felhasználókat, amikor észlelik, értelmezik és kezelik az interakcióikat. A vizuális visszajelzések segíthetnek a felhasználóknak az interakció ösztönzésével. Ez egy interakció sikerességét jelzi, amely javítja a felhasználó ellenőrzési érzékét. A rendszer állapotát is továbbítja, és csökkenti a hibákat.

Fontos API-k: Windows.Devices.Input, Windows.UI.Input, Windows.UI.Core

Recommendations

• Próbálja meg korlátozni egy vezérlősablon módosítását a tervezési szándékhoz közvetlenül kapcsolódókra, mivel a kiterjedt módosítások hatással lehetnek a vezérlő és az alkalmazás teljesítményének és akadálymentességére.
  • A XAML-stílusok megtekintése további információt nyújt a vezérlőelem tulajdonságainak, beleértve a vizuális állapottulajdonságok, testreszabásáról.
  • A vezérlősablon módosításának részleteiért tekintse meg a UserControl osztályt
  • Ha jelentős módosításokat kell végrehajtania egy vezérlősablonon, érdemes lehet saját egyéni sablonos vezérlőt létrehoznia. Az egyéni sablonos vezérlők példáiért tekintse meg az egyéni szerkesztési vezérlő mintáját.
• Ne használjon érintéses vizualizációkat olyan helyzetekben, amelyek zavarhatják az alkalmazás használatát. További információ: ShowGestureFeedback.
• Csak akkor jelenítsen meg visszajelzést, ha feltétlenül szükséges. A felhasználói felületet tartsa tisztán és rendezetten, ha nem jelenít meg vizuális visszajelzést, kivéve, ha olyan értéket ad hozzá, amely máshol nem érhető el.
• Ne próbálja jelentősen testre szabni a windowsos beépített kézmozdulatok vizuális visszajelzési viselkedését, mivel ez inkonzisztens és zavaró felhasználói élményt okozhat.

További használati útmutató

A kapcsolati vizualizációk különösen kritikus fontosságúak olyan érintő interakciók esetén, amelyek pontosságot és precizitást igényelnek. Az alkalmazásnak például egyértelműen meg kell jelölnie egy koppintás helyét, hogy a felhasználó tudja, hogy nem érte-e el a célhelyét, mennyit hagyott ki, és milyen módosításokat kell végrehajtania.

Az elérhető alapértelmezett XAML-platformvezérlők használatával biztosítható, hogy az alkalmazás megfelelően működjön minden eszközön és minden bemeneti helyzetben. Ha az alkalmazás egyéni interakciókat tartalmaz, amelyek egyéni visszajelzést igényelnek, győződjön meg arról, hogy a visszajelzés megfelelő, kiterjed a bemeneti eszközökre, és nem vonja el a felhasználót a feladatától. Ez egy adott probléma lehet a játék- vagy rajzalkalmazásokban, ahol a vizuális visszajelzések ütközhetnek vagy elhomályosíthatják a kritikus felhasználói felületet.

Fontos

Nem javasoljuk a beépített kézmozdulatok interakciós viselkedésének módosítását.

Visszajelzés az eszközökről

A vizuális visszajelzés általában a bemeneti eszköztől függ (érintés, érintőpárna, egér, toll/toll, billentyűzet stb.). Az egér beépített visszajelzése például általában a kurzor áthelyezésével és módosításával jár, míg az érintéssel és tollal történő kapcsolatfelvételhez kapcsolati vizualizációkra van szükség, a billentyűzetbemenet és a navigáció pedig fókusz téglalapokat és kiemelést használ.

A ShowGestureFeedback használatával visszajelzési viselkedést állíthat be a platform kézmozdulataihoz.

Ha testre szabja a visszajelzés felhasználói felületét, győződjön meg arról, hogy olyan visszajelzést ad, amely támogatja és alkalmas az összes beviteli módra.

Íme néhány példa a Windows beépített kapcsolati vizualizációira.

Érintéses vizualizáció	Egér/érintőpárnás vizualizáció	Tollvizualizáció	Billentyűzetvizualizáció

Nagy láthatóságú fókuszvizualizációk

Minden Windows-alkalmazás egy definiáltabb fókuszvizualizációt használ az alkalmazáson belüli kezelhető vezérlők köré. Ezek az új fókuszvizualizációk teljes mértékben testreszabhatók és szükség esetén letilthatók.

Az Xbox és a TV használatára jellemző 10 lábos élmény érdekében a Windows támogatja a Fókusz felfedése effektust, amely a fókuszba helyezhető elemek( például egy gomb) szegélyét animálja, amikor a játékpadon vagy a billentyűzet bemenetén keresztül kapnak fókuszt.

Színarculat és testreszabás

Szegély beállításai

A láthatósági fókusz vizualizációinak két része van: az elsődleges és a másodlagos szegély. Az elsődleges szegély 2px vastag, és a másodlagos szegély külső részén fut körbe. A másodlagos szegély 1px vastag, és az elsődleges szegély belül fut a körül.

A szegélytípus (elsődleges vagy másodlagos) vastagságának módosításához használja a FocusVisualPrimaryThickness vagy a FocusVisualSecondaryThickness tulajdonságot:

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

A margó egy Vastagság típusú tulajdonság, ezért a margó testre szabható úgy, hogy csak a vezérlő bizonyos oldalain jelenjen meg. Lásd alább:

A margó a vezérlő vizualizációinak határai és a fókuszvizualizációk másodlagos szegélye közötti térköz. Az alapértelmezett margó 1 képpont távolságra van a vezérlőkorlátoktól. Ezt a margót vezérlőnként szerkesztheti a FocusVisualMargin tulajdonság módosításával:

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

A negatív margó eltolja a szegélyt a vezérlő közepétől, a pozitív margó pedig közelebb helyezi a szegélyt a vezérlő közepéhez.

Ha teljesen ki szeretné kapcsolni a fókuszvizualizációkat a vezérlőn, egyszerűen letiltotta a UseSystemFocusVisuals szolgáltatást:

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

A vastagság, a margó vagy az, hogy az alkalmazásfejlesztő egyáltalán szeretné-e a fókusz vizuális elemeket meghatározni, vezérlőnként kerül meghatározásra.

Színtulajdonságok

A fókuszvizualizációknak csak két színtulajdonsága van: az elsődleges szegélyszín és a másodlagos szegélyszín. Ezek a fókusz vizualizációszegélyszínek vezérlőelemenként módosíthatók oldalszinten, és globálisan alkalmazásszintű szinten:

A márkára jellemző vizuális elemek alkalmazásszintű megvalósításához állítsa be a rendszerkeféket.

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

Ha vezérlőnként szeretné módosítani a színeket, csak szerkessze a fókuszvizualizáció tulajdonságait a kívánt vezérlőn:

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

Kapcsolódó cikkek

Tervezőknek

• A pásztázásra vonatkozó irányelvek

Fejlesztőknek

• Egyéni felhasználói interakciók

Samples

• Alapszintű bemeneti minta
• Kis késésű bemeneti minta
• Felhasználói interakciós mód mintája
• Fókuszvizualizációk minta

Archív minták

• Bemenet: XAML felhasználói bemeneti események minta
• Bemenet: Eszköz képességeinek mintája
• Bemenet: Érintéses tesztelési minta
• XAML görgetési, pásztázó és nagyítási minta
• Bemenet: Egyszerűsített tintaminta
• Bemenet: Windows 8 kézmozdulatok mintapéldány
• Bemenet: Manipulációk és kézmozdulatok mintája
• DirectX érintési bemeneti minta