Freigeben über

Richtlinien für visuelles Feedback

  • Artikel

Verwenden Sie visuelles Feedback, um Benutzern zu zeigen, wann ihre Interaktionen erkannt, interpretiert und behandelt werden. Visuelles Feedback kann Benutzern helfen, indem sie die Interaktion fördern. Sie zeigt den Erfolg einer Interaktion an, was dem Benutzer ein besseres Gefühl der Kontrolle vermittelt. Außerdem leitet es den Systemstatus weiter und reduziert Fehler.

Wichtige APIs: Windows.Devices.Input, Windows.UI.Input, Windows.UI.Core

Empfehlungen

  • Versuchen Sie, Änderungen einer Steuerelementvorlage auf diejenigen zu beschränken, die sich direkt auf Ihre Entwurfsabsicht beziehen, da sich umfangreiche Änderungen auf die Leistung und Barrierefreiheit sowohl des Steuerelements als auch der Anwendung auswirken können.
    • Weitere Informationen zum Anpassen der Eigenschaften eines Steuerelements, einschließlich Eigenschaften des visuellen Status, finden Sie unter XAML-Formatvorlagen.
    • Details zum Vornehmen von Änderungen an einer Steuerelementvorlage finden Sie in der UserControl-Klasse
    • Erwägen Sie das Erstellen eines eigenen benutzerdefinierten Vorlagensteuerelements, wenn Sie erhebliche Änderungen an einer Steuerelementvorlage vornehmen müssen. Ein Beispiel für ein benutzerdefiniertes Steuerelement mit Vorlagen finden Sie im Beispiel für das benutzerdefinierte Bearbeitungssteuerelement.
  • Verwenden Sie keine Touchvisualisierungen in Situationen, in denen sie die Verwendung der App beeinträchtigen könnten. Weitere Informationen finden Sie unter ShowGestureFeedback.
  • Zeigen Sie kein Feedback an, es sei denn, es ist unbedingt erforderlich. Halten Sie die Benutzeroberfläche sauber und übersichtlich, indem Sie kein visuelles Feedback anzeigen, es sei denn, Sie fügen einen Wert hinzu, der an anderer Stelle nicht verfügbar ist.
  • Versuchen Sie nicht, das visuelle Feedbackverhalten der integrierten Windows-Gesten erheblich anzupassen, da dies zu einem inkonsistenten und verwirrenden Benutzererlebnis führen kann.

Weitere Hinweise zur Verwendung

Kontaktvisualisierungen sind besonders wichtig für Touchinteraktionen, die Genauigkeit und Präzision erfordern. Ihre App sollte z. B. eindeutig den Standort eines Tippens angeben, um dem Benutzer mitzuteilen, ob er sein Ziel verfehlt hat, um wie viel er es verfehlt hat und welche Anpassungen er vornehmen muss.

Die Verwendung der verfügbaren Standardsteuerelemente für die XAML-Plattform stellt sicher, dass Ihre App auf allen Geräten und in allen Eingabesituationen ordnungsgemäß funktioniert. Wenn Ihre App benutzerdefinierte Interaktionen enthält, die benutzerdefiniertes Feedback erfordern, sollten Sie sicherstellen, dass das Feedback angemessen ist, Eingabegeräte umfasst und einen Benutzer nicht von seiner Aufgabe ablenkt. Dies kann vor allem bei Spiel- oder Zeichenanwendungen ein Problem sein, wo das visuelle Feedback mit der kritischen Benutzeroberfläche in Konflikt geraten oder diese verdecken kann.

Wichtig

Es wird nicht empfohlen, das Interaktionsverhalten der integrierten Gesten zu ändern.

Feedback auf allen Geräten

Visuelles Feedback ist in der Regel vom Eingabegerät abhängig (Toucheingabe, Touchpad, Maus, Stift/Tablettstift, Tastatur usw.). Beispielsweise umfasst das integrierte Feedback für eine Maus in der Regel das Verschieben und Ändern der Maus, während Touch und Stift Kontaktvisualisierungen erfordern und die Tastatureingabe und -navigation Fokusrechtecke und Hervorhebungen verwendet.

Verwenden Sie ShowGestureFeedback, um das Feedbackverhalten für die Plattformgesten festzulegen.

Wenn Sie die Feedback-Benutzeroberfläche anpassen, stellen Sie sicher, dass Sie ein Feedback bereitstellen, das alle Eingabemodi unterstützt und für diese geeignet ist.

Hier sind einige Beispiele für integrierte Kontaktvisualisierungen in Windows.

Feedback per Toucheingabe Mausfeedback Stiftfeedback Tastaturfeedback
Touchvisualisierung Maus-/Touchpadvisualisierung Stiftvisualisierung Tastaturvisualisierung

Visuelle Fokuselemente mit hoher Sichtbarkeit

Alle Windows-Apps verfügen über ein stärker definiertes visuelles Fokuselement für interaktionsfähige Steuerelemente innerhalb der Anwendung. Diese neuen Visuellen Fokuselemente sind vollständig anpassbar und können bei Bedarf deaktiviert werden.

Für die 3-Meter-Erlebnisqualität, die typisch für die Verwendung von Xbox und TV ist, unterstützt Windows den Reveal-Fokus, einen Lichteffekt, der den Rahmen von fokussierbaren Elementen animiert, z. B. eine Taste, wenn sie den Fokus durch Gamepad- oder Tastatureingaben erhalten.

Farbbranding und Anpassung

Rahmeneigenschaften

Es gibt zwei Teile der visuellen Fokuselemente mit hoher Sichtbarkeit: den primären Rahmen und den sekundären Rahmen. Der primäre Rahmen ist 2 Pixel breit und verläuft an der Außenseite des sekundären Rahmens. Der sekundäre Rahmen ist 1 Pixel breit und verläuft an der Innenseite des primären Rahmens. Visuelle Fokuslinien mit hoher Sichtbarkeit

Um die Stärke eines Rahmentyps (primär oder sekundär) zu ändern, verwenden Sie die FocusVisualPrimaryThickness oder FocusVisualSecondaryThickness:

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

Visuelle Randstärken des visuellen Fokus mit hoher Sichtbarkeit

Der Rand ist eine Eigenschaft vom Typ Dicke und daher kann der Rand so angepasst werden, dass er nur auf bestimmten Seiten des Steuerelements angezeigt wird. Siehe unten: Visuelle Randstärke des visuellen Fokus mit hoher Sichtbarkeit nur unten

Der Rand ist der Abstand zwischen den visuellen Grenzen des Steuerelements und dem Beginn des sekundären Rahmens der visuellen Fokuselemente. Der Standardrand hat eine Breite von 1 Pixel außerhalb der Grenzen des Steuerelements. Sie können diesen Rand individuell pro Steuerelement bearbeiten, indem Sie die Eigenschaft FocusVisualMargin ändern:

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

Unterschiede beim visuellen Fokusrand mit hoher Sichtbarkeit

Ein negativer Rand verschiebt den Rahmen weiter weg von der Mitte des Steuerelements, und ein positiver Rand verschiebt ihn näher zur Mitte des Steuerelements.

Um fokusbezogene visuelle Elemente für das Steuerelement vollständig zu deaktivieren, deaktivieren Sie einfach UseSystemFocusVisuals:

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

Die Dicke, der Rand oder ob der App-Entwickler überhaupt einen visuellen Fokus haben möchte, wird für jedes Steuerelement einzeln festgelegt.

Farbeigenschaften

Es gibt nur zwei Farbeigenschaften für die visuellen Fokuselemente: die primäre Rahmenfarbe und die sekundäre Rahmenfarbe. Diese visuellen Fokusrahmenfarben können pro Steuerelement auf Seitenebene und global auf app-übergreifender Ebene geändert werden:

Um den Fokus visuell app-weit zu markieren, setzen Sie die Systempinsel außer Kraft:

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

Visuelle Farbänderungen für fokussend mit hoher Sichtbarkeit

Um die Farben pro Steuerelement zu ändern, bearbeiten Sie einfach die visuellen Fokuseigenschaften des gewünschten Steuerelements:

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

Für Designer

Für Entwickler

Beispiele

Archivbeispiele