Richtlinien für das Schwenken

Mit dem Verschieben oder Scrollen können Benutzer innerhalb einer einzelnen Ansicht navigieren, um den Inhalt der Ansicht anzuzeigen, die nicht in den Viewport passt. Beispiele für Ansichten sind die Ordnerstruktur eines Computers, eine Dokumentbibliothek oder ein Fotoalbum.

Wichtige APIs: Windows.UI.Input, Windows.UI.Xaml.Input

Dos und Don’ts

Schwenkindikatoren und Rollbalken

  • Stellen Sie sicher, dass das Verschieben/Scrollen möglich ist, bevor Sie Inhalte in Ihre App laden.

  • Zeigen Sie Schwenkindikatoren und Bildlaufleisten an, um Positions- und Größenhinweise bereitzustellen. Blenden Sie sie aus, wenn Sie eine benutzerdefinierte Navigationsfunktion anbieten.

    Anmerkung Im Gegensatz zu Standard-Bildlaufleisten sind Schwenkhinweise rein informativ. Sie sind nicht für Eingabegeräte zugänglich und können in keiner Weise manipuliert werden.

     

Einachsiges Schwenken (eindimensionaler Überlauf)

  • Verwenden Sie die Verschiebung entlang einer Achse für Inhaltsbereiche, die über eine Viewportgrenze (vertikal oder horizontal) hinausgehen.

    • Vertikales Schwenken für eine eindimensionale Liste von Elementen.
    • Horizontales Schwenken für ein Raster von Elementen.

  • Verwenden Sie keine obligatorischen Andockpunkte mit Verschiebung entlang einer Achse, wenn ein Benutzer in der Lage sein muss, eine Verschiebung zwischen Andockpunkten auszuführen und zu stoppen. Obligatorische Andockpunkte garantieren, dass der Benutzer an einem Andockpunkt angehalten wird. Verwenden Sie stattdessen Näherungs-Andockpunkte.

Schwenken mit Freihandformen (zweidimensionaler Überlauf)

  • Verwenden Sie die Verschiebung entlang zweier Achsen für Inhaltsbereiche, die über beide Viewportgrenzen (vertikal und horizontal) hinausgehen.

    • Überschreiben Sie das Standardverhalten von Rails und verwenden Sie die freie Verschiebung für unstrukturierte Inhalte, bei denen der Benutzer sich wahrscheinlich in mehrere Richtungen bewegen kann.

  • Das Freiformschwenken eignet sich in der Regel für die Navigation innerhalb von Bildern oder Karten.

Seitenansicht

  • Verwenden Sie obligatorische Andockpunkte, wenn der Inhalt aus einzelnen Elementen besteht oder Sie ein gesamtes Element anzeigen möchten. Dazu können Seiten eines Buchs oder Magazins, eine Spalte mit Elementen oder einzelne Bilder gehören.

    • Ein Andockpunkt sollte an jeder logischen Grenze platziert werden.
    • Jedes Element sollte an die Ansicht angepasst oder skaliert werden.

Logische und wichtige Punkte

  • Verwenden Sie Näherungsschnapp-Punkte, wenn es im Inhalt wichtige Punkte oder logische Stellen gibt, an denen ein Benutzer wahrscheinlich anhält. Beispielsweise eine Abschnittsüberschrift.

  • Wenn Einschränkungen oder Grenzen für die maximale und minimale Größe definiert sind, verwenden Sie visuelles Feedback, um zu veranschaulichen, wann der Benutzer diese Grenzen erreicht oder überschreitet.

Verketten eingebetteter oder geschachtelter Inhalte

  • Verwenden Sie einachsige Verschiebung (in der Regel horizontal) und Spaltenlayouts für Text- und rasterbasierte Inhalte. In diesen Fällen wird der Inhalt meist umgebrochen und fließt natürlich von Spalte zu Spalte, sodass die Benutzeroberfläche bei allen Windows-Apps konsistent und erkennbar bleibt.

  • Verwenden Sie eingebettete verschiebbare Bereiche nicht zum Anzeigen von Text- oder Elementlisten. Da die Verschiebungsindikatoren und Bildlaufleisten nur angezeigt werden, wenn der Eingabekontakt innerhalb des Bereichs erkannt wird, handelt es sich nicht um eine intuitive oder auffindbare Benutzeroberfläche.

  • Verketten oder platzieren Sie einen verschiebbaren Bereich nicht innerhalb eines anderen verschiebbaren Bereichs, wenn beide in die gleiche Richtung verschoben werden, wie hier gezeigt. Dies kann dazu führen, dass der übergeordnete Bereich unbeabsichtigt verschoben wird, wenn eine Grenze für den untergeordneten Bereich erreicht wird. Erwägen Sie, die Schwenkachse senkrecht auszurichten.

    Abbildung eines eingebetteten schwenkbaren Bereichs, der in dieselbe Richtung wie der Container scrollt.

Weitere Hinweise zur Verwendung

Die Verschiebung mit Toucheingaben mithilfe einer Wisch- oder Ziehbewegung mit einem oder mehreren Fingern ähnelt dem Scrollen mit der Maus. Die Verschiebungsinteraktion ähnelt am ehesten dem Drehen des Mausrads oder dem Ziehen des Scrollfelds als dem Klicken auf die Scrollleiste. Sofern keine Unterscheidung in einer API erfolgt oder von einer gerätespezifischen Windows-Benutzeroberfläche verlangt wird, betrachten wir einfach beide Interaktionen als Verschiebung.

Windows 10 Fall Creators Update – Verhaltensänderung Standardmäßig scrollt/verschiebt ein aktiver Stift jetzt anstatt der Textauswahl in Windows-Apps (z. B. Toucheingabe, Touchpad und passiver Stift). Wenn Ihre App vom vorherigen Verhalten abhängig ist, können Sie die Stift-Bildlaufaktionen außer Kraft setzen und auf das vorherige Verhalten zurückzusetzen. Ausführliche Informationen finden Sie im API-Referenzthema für die ScrollViewer-Klasse.

Je nach Eingabegerät führt der Benutzer in einem verschiebbaren Bereich eine Verschiebung aus und verwendet dabei:

  • eine Maus, ein Touchpad oder einen aktive Stift/Tablettstift, um auf die Scrollpfeile zu klicken, das Scrollfeld zu ziehen oder auf die Scrollleiste zu klicken.
  • die Radtaste der Maus, um das Ziehen des Scrollfelds zu emulieren.
  • Die erweiterten Schaltflächen (XBUTTON1 und XBUTTON2), sofern sie von der Maus unterstützt werden.
  • die Tastaturpfeiltasten, um das Ziehen des Scrollfelds zu emulieren, oder die Seitentasten, um das Klicken in der Scrollleiste zu emulieren.
  • Toucheingabe, Touchpad oder passiver Stift/Tablettstift, um mit den Fingern in die gewünschte Richtung zu ziehen oder zu wischen.

Das Gleiten umfasst das langsame Bewegen der Finger in der Schwenkrichtung. Dies führt zu einer 1:1-Beziehung, bei der der Inhalt mit der gleichen Geschwindigkeit und im gleichen Abstand wie die Finger verschoben wird. Beim Wischen, bei dem die Finger schnell gleiten und angehoben werden, wird die folgende Physik auf die Schwenkanimation angewendet.

  • Verlangsamung (Trägheit): Das Anheben der Finger bewirkt, dass das Schwenken langsam langsamer wird. Dies ähnelt dem Gleiten bis zum Stillstand auf einer rutschigen Oberfläche.
  • Absorption: Die Verschiebungsdynamik während der Verlangsamung bewirkt einen leichten Rücksprungeffekt, wenn entweder ein Andockpunkt oder eine Inhaltsbereichsgrenze erreicht wird.

Arten von Schwenken

Windows unterstützt drei Arten von Schwenken:

  • Einzelachse – Das Schwenken wird nur in eine Richtung (horizontal oder vertikal) unterstützt.
  • Schienen – Die Verschiebung wird in alle Richtungen unterstützt. Sobald der Benutzer jedoch einen Abstandsschwellenwert in einer bestimmten Richtung überschreitet, ist die Verschiebung auf diese Achse beschränkt.
  • Freiform – Die Verschiebung wird in alle Richtungen unterstützt.

Benutzeroberfläche zum Schwenken

Die Interaktionserfahrung beim Schwenken ist für das Eingabegerät einzigartig und bietet dennoch ähnliche Funktionalitäten.

Es gibt zwei Anzeigemodi für das Schwenken, die auf dem erkannten Eingabegerät basieren.

  • Verschiebungsanzeigen für Toucheingabe.
  • Scrollleisten für andere Eingabegeräte, einschließlich Maus, Touchpad, Tastatur und Tablettstift.

Anmerkung Schwenkanzeigen sind nur sichtbar, wenn sich der Touchkontakt innerhalb des verschiebbaren Bereichs befindet. Entsprechend ist die Scrollleiste nur sichtbar, wenn sich der Mauscursor, der Stift-/Tablettstiftcursor oder der Tastaturfokus innerhalb des scrollfähigen Bereichs befindet.

 

Anzeigen beim Schwenken Anzeigen beim Schwenken ähneln dem Scrollfeld in einer Scrollleiste. Sie geben den Anteil des angezeigten Inhalts am gesamten verschiebbaren Bereich und die relative Position des angezeigten Inhalts im verschiebbaren Bereich an.

Das folgende Diagramm zeigt zwei verschiebbare Bereiche unterschiedlicher Längen und deren Verschiebungsanzeigen.

Abbildung mit zwei schwenkbaren Flächen unterschiedlicher Länge und ihren Schwenkanzeigen.

Verhalten beim SchwenkenAndockpunkte Das Schwenken mit der Wischbewegung führt zu Trägheitsverhalten in die Interaktion, wenn der Berührungskontakt aufgehoben wird. Mit der Trägheit wird der Inhalt weiter verschoben, bis ein gewisser Abstandsschwellenwert erreicht wird, ohne dass der Benutzer direkt etwas eingeben muss. Verwenden Sie Andockpunkte, um dieses Trägheitsverhalten zu ändern.

Andockpunkte geben logische Stopps in Ihrem App-Inhalt an. In kognitiver Hinsicht dienen Andockpunkte dem Benutzer als Auslagerungsmechanismus und minimieren Ermüdungserscheinungen durch übermäßiges Ziehen und Wischen in großen verschiebbaren Bereichen. Mit ihnen können Sie ungenaue Benutzereingaben verarbeiten und sicherstellen, dass eine bestimmte Teilmenge von Inhalten oder wichtigen Informationen im Viewport angezeigt wird.

Es gibt zwei Arten von Andockpunkten:

  • Näherung: Nachdem der Kontakt aufgehoben wurde, wird ein Andockpunkt ausgewählt, wenn die Trägheit innerhalb eines Abstandsschwellenwerts des Andockpunkts anhält. Die Verschiebung kann trotzdem zwischen Näherungsandockpunkten anhalten.
  • Verpflichtend: Der ausgewählte Andockpunkt ist der Punkt, der dem letzten Andockpunkt unmittelbar vorausgeht oder dem letzten überquerten Andockpunkt folgt, bevor der Kontakt aufgehoben wurde (je nach Richtung und Geschwindigkeit der Geste). Die Verschiebung muss an einem obligatorischen Andockpunkt anhalten.

Die Verschiebung von Andockpunkten ist nützlich für Anwendungen wie Webbrowser und Fotoalben, die paginierte Inhalte emulieren oder logische Gruppierungen von Elementen aufweisen, die dynamisch neu gruppiert werden können, damit sie in einen Viewport oder eine Anzeige passen.

Die folgenden Diagramme zeigen, wie das Verschieben auf einen bestimmten Punkt und die Freigabe bewirkt, dass der Inhalt automatisch an eine logische Position verschoben wird.

Abbildung eines verschwenkbaren Bereichs.

Wischen Sie, um zu schwenken.

Abbildung eines verschiebbaren Bereichs, der nach links verschoben wird.

Berührungskontakt aufheben.

Abbildung eines schwenkbaren Bereichs, der an einem logischen Andockpunkt gestoppt hat.

Verschiebbarer Bereich hält am Andockpunkt an, nicht an der Stelle, an der der Berührungskontakt aufgehoben wurde.

Gleis Der Inhalt kann breiter und höher sein als die Abmessungen und Auflösung eines Anzeigegeräts. Aus diesem Grund ist häufig eine zweidimensionale Verschiebung (horizontal und vertikal) erforderlich. Schienen verbessern die Benutzerfreundlichkeit in diesen Fällen, indem die Verschiebung entlang der Bewegungsachse (vertikal oder horizontal) hervorgehoben wird.

Das folgende Diagramm veranschaulicht das Konzept der Schienen.

Diagramm eines Bildschirms mit Schienen, die die Verschiebung einschränken

Verketten eingebetteter oder geschachtelter Inhalte

Nachdem ein Benutzer einen Zoom- oder Bildlaufgrenzwert für ein Element erreicht hat, das in einem anderen zoombaren oder bildlauffähigen Element geschachtelt wurde, können Sie angeben, ob das übergeordnete Element den Zoom- oder Bildlaufvorgang fortsetzen soll, der im untergeordneten Element begonnen wurde. Dies wird als Zoom- oder Scrollverkettung bezeichnet.

Die Verkettung wird für die Verschiebung innerhalb eines Inhaltsbereichs mit einer Achse verwendet, der einen oder mehrere Einzelachsen- oder Freihandform-Verschiebungsbereiche enthält (wenn sich der Berührungskontakt in einem dieser untergeordneten Bereiche befindet). Wenn die Verschiebungsgrenze des untergeordneten Bereichs in einer bestimmten Richtung erreicht wird, wird die Verschiebung dann für den übergeordneten Bereich in derselben Richtung aktiviert.

Wenn ein verschiebbarer Bereich in einem anderen verschiebbaren Bereich geschachtelt ist, ist es wichtig, genügend Platz zwischen dem Container und dem eingebetteten Inhalt anzugeben. In den folgenden Diagrammen wird ein verschiebbarer Bereich in einem anderen verschiebbaren Bereich platziert, wobei jeder in senkrechte Richtungen verläuft. Es gibt viel Platz, damit Benutzer in jeder Region schwenken können.

Abbildung eines eingebetteten verschiebbaren Bereichs.

Ohne genügend Platz, wie im folgenden Diagramm dargestellt, kann der eingebettete scrollbare Bereich das Scrollen im Behälter beeinträchtigen und zu unbeabsichtigtem Scrollen in einem oder mehreren der scrollbaren Bereiche führen.

Abbildung eines unzureichenden Abstands für einen eingebetteten schwenkbaren Bereich.

Diese Anleitung eignet sich auch für Apps wie Fotoalben oder Karten-Apps, die unbegrenztes Verschieben innerhalb eines einzelnen Bilds oder einer Karte unterstützen, während sie gleichzeitig das Verschieben auf einer Achse innerhalb des Albums (zum vorherigen oder nächsten Bild) oder des Detailbereichs unterstützen. In Apps, die einen Detail- oder Optionsbereich bereitstellen, der einem Freihandform-Verschiebungsbild oder einer Karte entspricht, empfehlen wir, dass das Seitenlayout mit den Details und Optionen beginnt, da der nicht eingeschränkte Verschiebungsbereich des Bilds oder der Karte das Verschieben in den Detailbereich beeinträchtigen kann.

Beispiele

Archivbeispiele

  • Last updated on