Richtlinien für Verschiebung

Artikel
10/03/2013

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

In unserer Serie App-Features von A bis Z können Sie dieses Feature in Aktion sehen.: Benutzerinteraktion: Toucheingabe... und mehr

Das Verschieben per Toucheingabe mittels Streif- oder Ziehbewegung mit einem oder mehreren Fingern funktioniert wie der Bildlauf mit der Maus. Die Verschiebungsinteraktion gleicht eher dem Drehen des Mausrads oder Verschieben des Bildlauffelds als dem Klicken auf die Bildlaufleiste. Sofern keine Unterscheidung in einer API gemacht oder für eine gerätespezifische Windows-UI erforderlich ist, bezeichnen wir beide Interaktionen einfach als Verschiebung.

Je nach Eingabegerät verwendet der Benutzer eine der folgenden Methoden, um die Anzeige in einem verschiebbaren Bereich zu verschieben:

Eine Maus, ein Touchpad oder ein aktiver Zeichen-/Eingabestift zum Klicken auf die Bildlaufpfeile, zum Ziehen des Bildlauffelds oder zum Klicken in die Bildlaufleiste
Die Radtaste der Maus, um das Ziehen des Bildlauffelds zu emulieren
Die erweiterten Schaltflächen (XBUTTON1 und XBUTTON2) bei Unterstützung durch die Maus
Die Pfeiltasten auf der Tastatur, um das Ziehen des Bildlauffelds zu emulieren, oder die BILD-AB- oder BILD-AUF-TASTE, um das Klicken in die Bildlaufleiste zu emulieren
Fingereingabe, Touchpad oder ein passiver Zeichen-/Eingabestift zum Ziehen oder Streifen der Finger in die gewünschte Richtung.

Beim Ziehen werden die Finger nur in der Verschiebungsrichtung bewegt. Diese Bewegung führt zu einem 1:1-Verhältnis, d. h. der Inhalt wird genauso schnell und weit verschoben wie die Finger bewegt werden. Beim Streifen, dem schnellen Ziehen und Anheben der Finger, werden die folgenden physischen Aspekte auf die Verschiebungsanimation angewendet:

Verlangsamung (Trägheit): Wenn die Finger angehoben werden, wird die Verschiebung langsamer. Dies ist mit allmählichem Anhalten auf glattem Untergrund vergleichbar.
Absorption: Die Dynamik der Verschiebung bewirkt bei der Verlangsamung ein leichtes Zurückspringen, wenn entweder ein Andockpunkt oder eine Grenze des Inhaltsbereichs erreicht wird.

Arten der Verschiebung

Windows 8 unterstützt drei Arten der Verschiebung:

Eine Achse – die Verschiebung wird nur in eine Richtung unterstützt (horizontal oder vertikal).
Führungsschienen – die Verschiebung wird in alle Richtungen unterstützt. Sobald jedoch der Benutzer in einer bestimmten Richtung eine Distanzschwelle überschreitet, wird die Verschiebung auf die betreffende Achse beschränkt.
Formfrei – die Verschiebung wird in alle Richtungen unterstützt.

Verschiebe-UI

Die Handhabung beim Verschieben ist je nach Eingabegerät unterschiedlich, die Funktion ist jedoch immer ähnlich.

Verschiebbare Bereiche

Das Verhalten verschiebbarer Regionen wird in der Windows Store-App von C++, C# oder Visual Basic-Entwicklern mithilfe von ScrollViewer-, ScrollViewerView-, ScrollViewerViewChangedEventArgs- und ScrollViewerViewChangingEventArgs-Objekten verfügbar gemacht.

Es gibt zwei Anzeigemodi für das Verschieben, je nach ermitteltem Eingabegerät:

Verschiebungsanzeigen für Fingereingabe.
Bildlaufleisten für andere Eingabegeräte wie Maus, Touchpad, Tastatur und Eingabestift.

Hinweis Verschiebungsanzeigen sind nur sichtbar, wenn die Berührung innerhalb der verschiebbaren Region stattfindet. Ebenso ist die Bildlaufleiste nur sichtbar, wenn sich der Mauszeiger, der Zeiger des Zeichen-/Eingabestifts oder der Tastaturfokus im Bereich mit verschiebbarem Fensterinhalt befindet.

Verschiebungsindikatoren

Verschiebungsindikatoren sind mit dem Bildlauffeld auf einer Bildlaufleiste vergleichbar. Sie zeigen das Verhältnis zwischen dem angezeigten Inhalt und dem gesamten verschiebbaren Bereich und die relative Position des angezeigten Inhalts im verschiebbaren Bereich an.

Das folgende Diagramm zeigt zwei verschiebbare Bereiche unterschiedlicher Länge und die zugehörigen Verschiebungsindikatoren.

Abbildung, die zwei verschiebbare Bereiche unterschiedlicher Länge und die zugehörigen Verschiebungsindikatoren zeigt

Verschiebungsverhalten

Andockpunkte

Das Verschieben mit der Streifbewegung löst ein Trägheitsverhalten bei der Interaktion aus, wenn der Kontakt aufgehoben wird. Mit dieser Trägheit wird der Inhalt verschoben, bis eine bestimmte Distanzschwelle erreicht ist, wenn keine direkte Eingabe des Benutzers erfolgt. Verwenden Sie Andockpunkte, um dieses Trägheitsverhalten zu modifizieren.

Andockpunkte geben logische Haltepunkte im Inhalt Ihrer App an. Von Benutzern werden Andockpunkte als Paginierungsmechanismus wahrgenommen. Sie minimieren die Ermüdung durch ständiges Ziehen oder Streifen in großen verschiebbaren Bereichen. Mit ihnen können Sie unpräzisen Benutzereingaben begegnen und sicherstellen, dass eine bestimmte Teilmenge des Inhalts oder Schlüsselinformationen im Viewport angezeigt werden.

Es gibt zwei Arten von Andockpunkten:

Näherung – Nachdem der Kontakt aufhoben wurde, wird ein Andockpunkt ausgewählt, wenn die Trägheitsbewegung innerhalb einer Distanzschwelle zum Andockpunkt anhält. Das Verschieben kann dennoch zwischen den Näherungsandockpunkten angehalten werden.
Erforderlich – Der ausgewählte Andockpunkt ist der Punkt direkt vor oder nach dem Andockpunkt, der vor dem Aufheben des Kontakts zuletzt überschritten wurde (abhängig von der Richtung und Geschwindigkeit der Geste). Eine Verschiebung muss an einem erforderlichen Andockpunkt anhalten.

Andockpunkte für die Verschiebung sind nützlich für Anwendungen wie Webbrowser und Fotoalben, die in Seiten aufgeteilten Inhalt emulieren oder logische Gruppen von Elementen aufweisen, die dynamisch neu gruppiert werden können, damit sie in einen Viewport oder eine Anzeige passen.

Die folgenden Diagramme zeigen, wie der Inhalt automatisch zu einem logischen Ort verschoben wird, wenn der Benutzer die Verschiebung bis zu einem bestimmten Punkt ausführt und dann loslässt.


Führen Sie eine Streifbewegung aus, um etwas zu verschieben.	Heben Sie den Berührungskontakt auf.	Die verschiebbare Region bleibt am Andockpunkt stehen, nicht dort, wo der Kontakt aufgehoben wurde.

Führungsschienen

Die Inhalte können breiter und höher sein als die Abmessungen und die Auflösung eines Anzeigegeräts. Aus diesem Grund ist oft eine zweidimensionale Verschiebung (horizontal und vertikal) erforderlich. Führungsschienen verbessern in diesen Fällen die Benutzerfreundlichkeit, da sie die Verschiebung entlang der Bewegungsachse (horizontal oder vertikal) hervorheben.

Das folgende Diagramm verdeutlicht das Konzept der Führungsschienen.

Diagramm eines Bildschirms mit Führungsschienen, die die Verschiebung einschränken

Richtlinien für die Benutzeroberfläche

Beachten Sie die folgenden Richtlinien für Anwendungen, die die Verschiebung unterstützen:

Verschiebungsindikatoren und Bildlaufleisten

Vergewissern Sie sich, dass die Verschiebung/der Bildlauf möglich sind, bevor Sie Inhalte in Ihre App laden.

Zeigen Sie Verschiebungsindikatoren und Bildlaufleisten als Hinweise auf die Position und die Größe an. Blenden Sie sie aus, wenn Sie ein benutzerdefiniertes Navigationsfeature anbieten.

Hinweis Anders als standardmäßige Bildlaufleisten haben Verschiebungsindikatoren rein informativen Charakter. Sie werden nicht für Eingabegeräte verfügbar gemacht und können in keiner Weise geändert werden.

Verschiebung entlang einer Achse (eindimensionaler Überlauf)

Verwenden Sie das Verschieben an einer Achse für inhaltliche Regionen, die (vertikal oder horizontal) die Grenze des Viewport überschreiten.

Vertikale Verschiebung für eine eindimensionale Liste von Elementen.
Horizontale Verschiebung für ein Raster von Elementen.

Verwenden Sie bei der Verschiebung entlang einer Achse keine erforderlichen Andockpunkte, wenn Benutzer in der Lage sein müssen, den Inhalt zu verschieben und zwischen Andockpunkten anzuhalten. Erforderliche Andockpunkte gewährleisten, dass der Benutzer an einem Andockpunkt anhält. Verwenden Sie stattdessen Näherungsandockpunkte.

Formfreie Verschiebung (zweidimensionaler Überlauf)

Verwenden Sie das Verschieben an zwei Achsen für inhaltliche Regionen, die (vertikal und horizontal) die Grenze des Viewport überschreiten.

Setzen Sie das Standardverhalten der Führungsschienen außer Kraft, und verwenden Sie die formfreie Verschiebung für unstrukturierten Inhalt, den der Benutzer wahrscheinlich in mehrere Richtungen verschieben möchte.

Die formfreie Verschiebung eignet sich in der Regel für die Navigation innerhalb von Bildern oder Karten.

Verketten von eingebettetem oder geschachteltem Inhalt

Wenn ein Benutzer in einem Element, das in ein anderes zoomfähiges oder bildlauffähiges Element geschachtelt ist, ein Zoom- oder Bildlauflimit erreicht, können Sie angeben, ob das übergeordnete Element den im untergeordneten Element begonnenen Zoom- oder Bildlaufvorgang fortsetzen soll. Dies bezeichnet man als Verketten von Zoom- oder Bildlaufvorgängen.

Die Verkettung wird für die Verschiebung in einem Inhaltsbereich mit einer Achse, der mindestens einen Bereich für die Verschiebung entlang einer Achse oder die formfreie Verschiebung enthält (sofern die Berührung in einem dieser untergeordneten Bereiche erfolgt). Wenn die Grenze des untergeordneten Bereichs für die Verschiebung in einer bestimmten Richtung erreicht wird, wird die Verschiebung in derselben Richtung für den übergeordneten Bereich aktiviert.

Wenn ein verschiebbarer Bereich in einem anderen verschiebbaren Bereich geschachtelt ist, ist es wichtig, ausreichend Platz zwischen dem Container und dem eingebetteten Inhalt zu lassen. In den folgenden Diagrammen befindet sich ein verschiebbarer Bereich in einem anderen verschiebbaren Bereich. Diese können jeweils im rechten Winkel zueinander verschoben werden. In jedem Bereich ist ausreichend Platz für die Verschiebung vorhanden.

Abbildung eines eingebetteten verschiebbaren Bereichs

Wenn nicht genügend Platz vorhanden ist, wie im folgenden Diagramm der Fall, kann der eingebettete verschiebbare Bereich die Verschiebung im Container stören, was dazu führen kann, dass in einem oder mehreren der verschiebbaren Bereiche eine unbeabsichtigte Verschiebung erfolgt.

Abbildung eines eingebetteten verschiebbaren Bereichs mit unzureichendem Abstand

Dieser Hinweis ist bei Apps wie Fotoalben oder Karten-Apps hilfreich, die ungehinderte Verschiebung in jedem einzelnen Bild oder jeder einzelnen Karte und gleichzeitig die Verschiebung entlang einer Achse zum vorherigen oder nächsten Bild im Album oder zum nächsten Detailbereich unterstützen. In Apps, die über einen Detail- oder Optionsbereich für das formfreie Verschieben eines Bilds oder einer Karte verfügen, empfehlen wir, das Seitenlayout mit den Detail- und Optionsbereichen zu beginnen, da der Bereich zum ungehinderten Verschieben eines Bilds oder einer Karte das Verschieben in den Detailbereich stören kann.

Verwenden Sie die Verschiebung entlang einer Achse (normalerweise 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 Store-Apps konsistent und erkennbar bleibt.

Verwenden Sie keine eingebetteten verschiebbaren Bereiche zum Anzeigen von Text oder Elementlisten. Da die Verschiebungsanzeigen und Bildlaufleisten nur angezeigt werden, wenn der Eingabekontakt im Bereich erkannt wird, wäre die Benutzeroberfläche andernfalls weder intuitiv noch erkennbar.

Verketten Sie keine verschiebbaren Bereiche miteinander bzw. platzieren Sie nicht einen verschiebbaren Bereich in einem anderen, wenn beide in derselben Richtung verschoben werden, wie im folgenden Diagramm gezeigt. Dies kann zu einer unbeabsichtigten Verschiebung im übergeordneten Bereich führen, wenn eine Grenze des untergeordneten Bereichs erreicht wird. Es ist sinnvoll, die Achsen für die Verschiebung im rechten Winkel zueinander anzuordnen.

Abbildung eines eingebetteten verschiebbaren Bereichs, in dem der Bildlauf in derselben Richtung erfolgt wie im Container.

Seitenansicht

Verwenden Sie erforderliche Andockpunkte, wenn sich der Inhalt aus separaten Elementen zusammensetzt oder Sie ein Element vollständig anzeigen möchten. Dies können z. B. Seiten eines Buchs oder einer Zeitschrift, eine Spalte mit Elementen oder einzelne Bilder sein.

An jeder logischen Grenze sollte ein Andockpunkt platziert werden.
Jedes Element sollte in seiner Größe an die Ansicht angepasst oder skaliert werden.

Logische und Schlüsselpunkte

Verwenden Sie Näherungsandockpunkte, wenn der Inhalt Schlüsselpunkte oder logische Orte aufweist, an denen Benutzer wahrscheinlich anhalten. Beispiel: eine Abschnittsüberschrift.

Wenn Beschränkungen oder Grenzen der maximalen und minimalen Größe definiert sind, sollte ein visuelles Feedback erfolgen, wenn der Benutzer die Grenzen erreicht oder überschreitet.

Share via