Richtlinien für Querziehen

  • Artikel

Wichtige APIs

Verwenden Sie Querziehen, um die Auswahl mit der Streifbewegung und den Ziehen (Verschieben) mit der Ziehbewegung zu unterstützen.

Dos and don'ts

  • Verwenden Sie querziehend für Listen oder Sammlungen, die in einer einzelnen Richtung scrollen.
  • Verwenden Sie querziehend für die Elementauswahl, wenn die Tippinteraktion für einen anderen Zweck verwendet wird.
  • Verwenden Sie keine querziehende Folie zum Hinzufügen von Elementen zu einer Warteschlange.

Zusätzliche Verwendungsanleitungen

Auswahl und Ziehen sind nur innerhalb eines Inhaltsbereichs möglich, der in eine Richtung verschoben werden kann (vertikal oder horizontal). Damit eine Interaktion funktioniert, muss eine Verschiebungsrichtung gesperrt sein, und die Geste muss senkrecht zur Verschiebungsrichtung ausgeführt werden.

Hier veranschaulichen wir das Auswählen und Ziehen eines Objekts mithilfe einer Querfolie. Das Bild auf der linken Seite zeigt, wie ein Element ausgewählt wird, wenn eine Streifbewegung keinen Abstandsschwellenwert überschreitet, bevor der Kontakt angehoben und das Objekt losgelassen wird. Das Bild auf der rechten Seite zeigt eine Ziehbewegung, die einen Abstandsschwellenwert überschreitet und dazu führt, dass das Objekt gezogen wird.

Diagramm, das die Auswahl- und Ablegensprozesse zeigt.

Die Schwellenwerte, die von der Querziehinteraktion verwendet werden, werden im folgenden Diagramm dargestellt.

Screenshot mit den Auswahl- und Ablegensprozessen.

Um die Verschiebungsfunktionalität beizubehalten, muss ein kleiner Schwellenwert von 2,7mm (ca. 10 Pixel bei Zielauflösung) überschritten werden, bevor eine Auswahl- oder Ziehinteraktion aktiviert wird. Dieser kleine Schwellenwert hilft dem System, das Querziehen vom Schwenken zu unterscheiden, und stellt außerdem sicher, dass eine Tippbewegung sowohl vom Quer- als auch vom Schwenken unterschieden wird.

In dieser Abbildung wird gezeigt, wie ein Benutzer ein Element auf der Benutzeroberfläche berührt, aber seinen Finger leicht nach unten bewegt. Ohne Schwellenwert würde die Interaktion aufgrund der anfänglichen vertikalen Bewegung als Querziehbewegung interpretiert. Bei der Schwelle wird die Bewegung richtig als horizontales Schwenken interpretiert.

Screenshot mit dem Schwellenwert für das Auswählen oder Ziehen und Ablegen von Mehrdeutigkeiten.

Im Folgenden sind einige Richtlinien aufgeführt, die Sie berücksichtigen sollten, wenn Sie die Folienübergreifende Funktionalität in Ihre App einschließen.

Verwenden Sie querziehend für Listen oder Sammlungen, die in einer einzelnen Richtung scrollen. Weitere Informationen finden Sie unter Hinzufügen von ListView-Steuerelementen.

Hinweis : In Fällen, in denen der Inhaltsbereich in zwei Richtungen verschoben werden kann, z. B. Webbrowser oder E-Reader, sollte die Zeitliche Interaktion mit Gedrückthalten verwendet werden, um das Kontextmenü für Objekte wie Bilder und Links aufzurufen.

horizontale Verschiebung, zweidimensionale Liste

Eine horizontal verschiebende zweidimensionale Liste. Ziehen Sie vertikal, um ein Element auszuwählen oder zu verschieben.

Vertikale Verschiebung, eindimensionale Liste

Eine vertikal verschiebende eindimensionale Liste. Ziehen Sie horizontal, um ein Element auszuwählen oder zu verschieben.

Auswahl

Die Auswahl ist die Markierung, ohne ein oder mehrere Objekte zu starten oder zu aktivieren. Diese Aktion entspricht einem einzelnen Mausklick oder einer Umschalttaste und einem Mausklick auf ein oder mehrere Objekte.

Die Auswahl durch Querziehen wird erreicht, indem ein Element berührt und nach einer kurzen Ziehinteraktion losgelassen wird. Diese Methode der Auswahl verzichtet sowohl auf den dedizierten Auswahlmodus als auch auf die zeitgesteuerte Interaktion, die von anderen Touchschnittstellen benötigt wird, und steht nicht im Konflikt mit der Tippinteraktion für die Aktivierung.

Neben dem Abstandsschwellenwert wird die Querziehenauswahl auf einen Schwellenwert von 90 ° beschränkt, wie im folgenden Diagramm dargestellt. Wenn das Objekt außerhalb dieses Bereichs gezogen wird, wird es nicht ausgewählt.

Diagramm mit dem Auswahlschwellenbereich.

Die Querziehinteraktion wird durch eine Zeitliche Interaktion mit Gedrückthalten ergänzt, die auch als "Self-Revealing"-Interaktion bezeichnet wird. Diese ergänzende Interaktion aktiviert eine Animation, die angibt, welche Aktion für das Objekt ausgeführt werden kann. Weitere Informationen zur Mehrdeutigkeitsbenutzeroberfläche finden Sie unter Richtlinien für visuelles Feedback.

Die folgenden Screenshots veranschaulichen, wie die Selbstanzeigeanimation funktioniert.

  1. Halten Sie die Animation gedrückt, um die Animation für die Interaktion mit sich selbst einzublenden. Der ausgewählte Status des Elements wirkt sich auf das Angezeigte durch die Animation aus: ein Häkchen, wenn nicht ausgewählt und kein Häkchen aktiviert ist.

    Screenshot eines nicht ausgewählten Zustands.

  2. Wählen Sie das Element mithilfe der Streifbewegung (nach oben oder unten) aus.

    Screenshot mit der Animation für die Auswahl.

  3. Das Element ist jetzt ausgewählt. Überschreiben Sie das Auswahlverhalten mithilfe der Ziehbewegung, um das Element zu verschieben.

    Screenshot mit der Animation zum Ziehen und Ablegen.

Verwenden Sie einen einzelnen Tipp für die Auswahl in Anwendungen, in denen es sich um die einzige primäre Aktion handelt. Die querziehende Selbstanzeigeanimation wird angezeigt, um diese Funktionalität von der standardmäßigen Tippinteraktion für aktivierung und Navigation zu unterscheiden.

Auswahlkorb

Der Auswahlkorb ist eine visuell unterschiedliche und dynamische Darstellung von Elementen, die aus der primären Liste oder Sammlung in der Anwendung ausgewählt wurden. Dieses Feature ist nützlich zum Nachverfolgen ausgewählter Elemente und sollte von Anwendungen verwendet werden, in denen:

  • Elemente können an mehreren Speicherorten ausgewählt werden.
  • Viele Elemente können ausgewählt werden.
  • Eine Aktion oder ein Befehl basiert auf der Auswahlliste.

Der Inhalt des Auswahlkorbs wird über Aktionen und Befehle hinweg beibehalten. Wenn Sie beispielsweise eine Reihe von Fotos aus einer Galerie auswählen, eine Farbkorrektur auf jedes Foto anwenden und die Fotos auf irgendeine Weise freigeben, bleiben die Elemente ausgewählt.

Wenn in einer Anwendung kein Auswahlkorb verwendet wird, sollte die aktuelle Auswahl nach einer Aktion oder einem Befehl gelöscht werden. Wenn Sie beispielsweise einen Song aus einer Wiedergabeliste auswählen und bewerten, sollte die Auswahl gelöscht werden.

Die aktuelle Auswahl sollte auch gelöscht werden, wenn kein Auswahlkorb verwendet wird und ein anderes Element in der Liste oder Sammlung aktiviert wird. Wenn Sie beispielsweise eine Posteingangsnachricht auswählen, wird der Vorschaubereich aktualisiert. Wenn Sie dann eine zweite Posteingangsnachricht auswählen, wird die Auswahl der vorherigen Nachricht abgebrochen, und der Vorschaubereich wird aktualisiert.

Warteschlangen

Eine Warteschlange entspricht nicht der Auswahlkorbliste und sollte nicht als solche behandelt werden. Die wichtigsten Unterscheidungen umfassen:

  • Die Liste der Elemente im Auswahlkorb ist nur eine visuelle Darstellung; die Elemente in einer Warteschlange werden mit einer bestimmten Aktion zusammengestellt.
  • Elemente können nur einmal im Auswahlkorb dargestellt werden, aber mehrmals in einer Warteschlange.
  • Die Reihenfolge der Elemente im Auswahlkorb stellt die Reihenfolge der Auswahl dar. Die Reihenfolge der Elemente in einer Warteschlange bezieht sich direkt auf die Funktionalität.

Aus diesen Gründen sollte die Interaktion zwischen folienübergreifender Auswahl nicht zum Hinzufügen von Elementen zu einer Warteschlange verwendet werden. Stattdessen sollten Elemente einer Warteschlange durch eine Ziehaktion hinzugefügt werden.

Ziehen

Verwenden Sie ziehen, um ein oder mehrere Objekte von einer Position an eine andere zu verschieben.

Wenn mehrere Objekte verschoben werden müssen, können Benutzer mehrere Elemente auswählen und dann alle gleichzeitig ziehen.

Beispiele

Archivbeispiele