Freigeben über

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

Empfehlungen für die Vorgehensweise

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 einachsigem Verschieben, wenn ein Benutzer in der Lage sein muss, zwischen den Andockpunkten zu scrollen und anzuhalten. Obligatorische Andockpunkte garantieren, dass der Benutzer an einem Andockpunkt angehalten wird. Verwenden Sie stattdessen Näherungs-Andockpunkte.

Freihandformverschiebung (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 in der Regel von Spalte zu Spalte umbrochen und fließt natürlich, sodass die Benutzererfahrung in Windows-Apps konsistent und entdeckbar 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 verschiebbaren Bereichs, der in derselben Richtung wie der Container scrollt.

Weitere Hinweise zur Verwendung

Das Verschieben durch Berührungen mit einer Wisch- oder Ziehbewegung mit einem oder mehreren Fingern ist vergleichbar mit dem Scrollen mit der Maus. Die Verschiebungsinteraktion ähnelt am ehesten dem Drehen des Mausrads oder dem Ziehen des Bildlauffelds, anstatt auf die Bildlaufleiste zu klicken. Sofern keine Unterscheidung in einer API erfolgt oder von einer gerätespezifischen Windows-Benutzeroberfläche verlangt wird, beziehen wir uns einfach auf 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ängt, können Sie den Bildlauf des Stifts außer Kraft setzen und das vorherige Verhalten wiederherstellen. Ausführliche Informationen finden Sie im API-Referenzthema für die ScrollViewer-Klasse.

Je nach Eingabegerät schwenkt der Benutzer in einem verschiebbaren Bereich mit einer der folgenden Aktionen:

  • Eine Maus, ein Touchpad oder ein aktiver Zeichen-/Eingabestift, um auf die Bildlaufpfeile zu klicken, das Bildlauffeld zu ziehen oder auf die Bildlaufleiste zu klicken.
  • Die Radtaste der Maus zum Emulieren des Ziehens des Bildlauffelds.
  • Die erweiterten Schaltflächen (XBUTTON1 und XBUTTON2), sofern sie von der Maus unterstützt werden.
  • Die Tastaturpfeiltasten zum Emulieren des Ziehens des Bildlauffelds oder der Seitentasten zum Emulieren des Klickens in der Bildlaufleiste.
  • Touch, Touchpad oder passiver Stift/Zeichenstift, um die Finger in die gewünschte Richtung zu bewegen oder zu streichen.

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 Entfernung 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: Der Schwenkbewegungsimpuls während der Verlangsamung bewirkt einen leichten Rückpralleffekt, wenn entweder ein Fixpunkt 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 – Schwenken 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.
  • Freihandform – Die Verschiebung wird in allen Richtungen unterstützt.

Schwenken-UI

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.

  • Verschiebungsindikatoren für Toucheingabe.
  • Bildlaufleisten für andere Eingabegeräte, einschließlich Maus, Touchpad, Tastatur und Eingabestift.

Anmerkung Schwenkanzeigen sind nur sichtbar, wenn sich der Touchkontakt innerhalb des verschiebbaren Bereichs befindet. Entsprechend ist die Bildlaufleiste nur sichtbar, wenn sich der Mauszeiger, der Zeichen-/Eingabestiftcursor oder der Tastaturfokus innerhalb des bildlauffähigen Bereichs befindet.

 

Verschiebungsindikatoren Verschiebungsindikatoren ähneln dem Bildlauffeld in einer Bildlaufleiste. 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 Verschiebungsindikatoren.

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

Verhalten beim SchwenkenAndockpunkte Das Schwenken mit der Streifbewegung führt zur Einführung von Trägheitsverhalten in die Interaktion, wenn der Touchkontakt angehoben wird. Mit Trägheit wird der Inhalt weiter bewegt, bis ein Abstandsschwellenwert erreicht wird, ohne dass eine direkte Interaktion des Benutzers erforderlich ist. Verwenden Sie Andockpunkte, um dieses Inertia-Verhalten zu ändern.

Andockpunkte geben logische Stopps in Ihrem App-Inhalt an. Kognitiv wirken Andockpunkte als Auslagerungsmechanismus für den Benutzer und minimieren die Ermüdung von übermäßigem Gleiten oder 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 angehoben wurde, wird ein Andockpunkt ausgewählt, wenn die Unträgheit innerhalb eines Abstandsschwellenwerts des Andockpunkts anhält. Das Schwenken kann trotzdem zwischen Näherungsrastpunkten anhalten.
  • Verpflichtend – Der ausgewählte Fangpunkt ist der Punkt, der unmittelbar dem letzten Fangpunkt vorausgeht oder ihm folgt, bevor der Kontakt beendet wurde (je nach Richtung und Geschwindigkeit der Geste). Das Schwenken muss an einem obligatorischen Andockpunkt beendet werden.

Das Verschieben 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.

Der pannbare Bereich stoppt am Fangpunkt, nicht dort, wo der Berührungskontakt gelöst 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 Scroll-Ketten bezeichnet.

Die Verkettung wird für das Schwenken innerhalb eines Einzelachsen-Inhaltsbereichs verwendet, der einen oder mehrere Einzelachsen- oder Freiform-Schwenkbereiche 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 in derselben Richtung für den übergeordneten Bereich aktiviert.

Wenn ein verschiebbarer Bereich in einem anderen verschiebbaren Bereich eingebettet ist, ist es wichtig, genügend Abstand zwischen dem Container und dem enthaltenen Inhalt sicherzustellen. In den folgenden Diagrammen wird ein verschiebbarer Bereich innerhalb eines anderen verschiebbaren Bereichs platziert, wobei jeder Bereich in orthogonale 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 verschiebbaren 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