Wskazówki dotyczące informacji zwrotnej wizualnej

Użyj opinii wizualnych, aby pokazać użytkownikom, kiedy ich interakcje są wykrywane, interpretowane i obsługiwane. Opinie wizualne mogą pomóc użytkownikom poprzez zachęcanie do interakcji. Wskazuje to powodzenie interakcji, co poprawia poczucie kontroli użytkownika. Przekazuje również stan systemu i zmniejsza błędy.

Ważne interfejsy API: Windows.Devices.Input, Windows.UI.Input, Windows.UI.Core

Rekomendacje

• Spróbuj ograniczyć modyfikacje szablonu kontrolki do tych bezpośrednio związanych z intencją projektu, ponieważ obszerne zmiany mogą mieć wpływ na wydajność i dostępność zarówno kontrolki, jak i aplikacji.
  • Zobacz Style języka XAML , aby uzyskać więcej informacji na temat dostosowywania właściwości kontrolki, w tym właściwości stanu wizualizacji.
  • Zobacz klasę UserControl , aby uzyskać szczegółowe informacje na temat wprowadzania zmian w szablonie kontrolki
  • Rozważ utworzenie własnej niestandardowej kontrolki szablonowej, jeśli musisz wprowadzić istotne zmiany w szablonie kontrolki. Przykład niestandardowego kontrolera szablonu można znaleźć w przykładzie niestandardowej kontrolki edycji.
• Nie używaj wizualizacji dotykowych w sytuacjach, w których mogą zakłócać korzystanie z aplikacji. Aby uzyskać więcej informacji, zobacz ShowGestureFeedback.
• Nie wyświetlaj opinii, chyba że jest to absolutnie konieczne. Utrzymuj interfejs użytkownika w porządku i bez bałaganu, nie wyświetlając informacji zwrotnych wizualnych, o ile nie dodajesz wartości, której nie można uzyskać w innym miejscu.
• Staraj się nie dostosowywać drastycznie wizualnych zachowań wbudowanych gestów systemu Windows, ponieważ może to prowadzić do niespójnego i mylącego doświadczenia użytkownika.

Dodatkowe wskazówki dotyczące użycia

Wizualizacje kontaktów mają szczególnie krytyczne znaczenie dla interakcji dotykowych, które wymagają dokładności i precyzji. Na przykład aplikacja powinna wyraźnie wskazać lokalizację naciśnięcia, aby poinformować użytkownika, czy przegapili swój cel, ile przegapili, oraz jakie zmiany muszą wprowadzić.

Użycie domyślnych kontrolek platformy XAML zapewnia, że aplikacja działa prawidłowo na wszystkich urządzeniach i we wszystkich sytuacjach wejściowych. Jeśli aplikacja zawiera niestandardowe interakcje, które wymagają dostosowanej opinii, należy upewnić się, że opinia jest odpowiednia, obejmuje urządzenia wejściowe i nie rozprasza użytkownika od ich zadania. To może być szczególny problem w aplikacjach do gry lub rysowania, w których informacje zwrotne wizualne mogą powodować konflikt lub ukrywać krytyczny interfejs użytkownika.

Informacje zwrotne z różnych urządzeń

Informacja zwrotna wizualna jest zwykle zależna od urządzenia wejściowego (dotyk, mysz, touchpad, klawiatura, pióro/rysik itp.). Na przykład wbudowana informacja zwrotna dla myszy zwykle obejmuje przesuwanie i zmianę kursora, podczas gdy dotyk i pióro wymagają wizualizacji dotyku, a wprowadzanie z klawiatury i nawigacja używają prostokątów zaznaczenia i wyróżniania.

Użyj funkcji ShowGestureFeedback, aby ustawić sposób reakcji dla systemowych gestów.

W przypadku dostosowywania interfejsu użytkownika opinii upewnij się, że udostępniasz opinie, które obsługują i są odpowiednie dla wszystkich trybów wprowadzania.

Oto kilka przykładów wbudowanych wizualizacji kontaktów w systemie Windows.

Wizualizacja dotykowa	Wizualizacja myszy/touchpadu	Wizualizacja pióra	Wizualizacja klawiatury

Wizualizacje fokusu o wysokiej widoczności

Wszystkie aplikacje systemu Windows mają bardziej zdefiniowaną wizualizację fokusu wokół kontrolek z możliwością interakcji w aplikacji. Te nowe wizualizacje fokusu można w pełni dostosowywać, a także wyłączać w razie potrzeby.

W przypadku 10-stopowego doświadczenia typowego użycia konsoli Xbox i telewizora system Windows obsługuje Reveal focus, efekt oświetlenia, który animuje obramowanie elementów, takich jak przycisk, gdy otrzymują fokus przez gamepad lub wejście klawiatury.

Znakowanie kolorów i dostosowywanie

Właściwości obramowania

Są dwie części wizualizacji fokusu o dużej widoczności: obramowanie podstawowe i obramowanie pomocnicze. Podstawowe obramowanie ma 2px grubości i otacza zewnętrzną stronę obramowania pomocniczego. Obramowanie pomocnicze ma grubość 1 pikseli i biegnie wokół wewnątrz obramowania podstawowego.

Aby zmienić grubość dowolnego typu obramowania (podstawowego lub pomocniczego), użyj FocusVisualPrimaryThickness lub FocusVisualSecondaryThickness, odpowiednio:

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

Margines jest właściwością typu Grubość, dlatego margines można dostosować tak, aby był wyświetlany tylko po niektórych stronach kontrolki. Zobacz poniżej:

Margines to przestrzeń pomiędzy graficznymi ramami kontrolki a początkiem dodatkowej ramki wizualizacji fokusu. Domyślny margines to 1px od granic elementu sterującego. Ten margines można edytować dla poszczególnych kontrolek, zmieniając właściwość FocusVisualMargin :

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

Ujemny margines odepchnie obramowanie od środka kontrolki, a margines dodatni przeniesie obramowanie bliżej środka kontrolki.

Aby całkowicie wyłączyć wizualizacje fokusu w kontrolce, wystarczy wyłączyć funkcję UseSystemFocusVisuals:

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

Grubość, margines lub czy deweloper aplikacji chce mieć w ogóle wizualizacje fokusu, jest określana na podstawie kontroli.

Właściwości koloru

Wizualizacje fokusu mają tylko dwie właściwości koloru: podstawowy kolor obramowania i pomocniczy kolor obramowania. Te kolory obramowania wizualnego fokusu można zmienić dla każdego kontrolera na poziomie strony, a także globalnie w całej aplikacji.

Aby oznaczyć wizualizacje fokusu dla całej aplikacji, przesłoń pędzle systemowe:

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

Aby zmienić kolory dla każdej kontrolki, wystarczy edytować właściwości wizualne fokusu na żądanej kontrolce.

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

Powiązane artykuły

Dla projektantów

• Wskazówki dotyczące przesuwania

Dla deweloperów

• Niestandardowe interakcje użytkowników

Samples

• Podstawowy przykład danych wejściowych
• Przykład danych wejściowych o małym opóźnieniu
• Przykład trybu interakcji użytkownika
• Przykładowe wizualizacje stanu fokusu

Próbki archiwalne

• Dane wejściowe: przykładowe zdarzenia wejściowe użytkownika XAML
• Dane wejściowe: przykład możliwości urządzenia
• Dane wejściowe: przykład testu trafień dotykowych
• Przykład XAML na przewijanie, przesuwanie i powiększanie
• Dane wejściowe: uproszczona próbka tuszu
• Dane wejściowe: przykładowe gesty systemu Windows 8
• Dane wejściowe: próbka manipulacji i gestów
• Przykład obsługi dotyku DirectX