Freigeben über

Richtlinien für Planschlitten

Wichtige APIs

Verwenden Sie die Funktion "Cross-Slide", um die Auswahl mit der Wischgeste und das Ziehen (Verschieben) mit der Schiebegeste zu unterstützen.

Gebote und Verbote

  • Verwenden Sie Cross-Slide für Listen oder Sammlungen, die in nur eine Richtung scrollen.
  • Verwenden Sie die Wischgeste zur Elementauswahl, wenn das Tippen für einen anderen Zweck verwendet wird.
  • Verwenden Sie kein Cross-Slide 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 Auswählen-, Ziehen- und Ablegenprozesse zeigt.

Die Schwellenabstände, die von der Cross-Slide-Interaktion verwendet werden, sind im folgenden Diagramm dargestellt.

Screenshot der Auswahl- und Ziehen-und-Ablegen-Prozesse.

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 die Wischbewegung für Listen oder Sammlungen, die in einer einzelnen Richtung scrollen. Weitere Informationen finden Sie unter Hinzufügen von ListView-Steuerelementen.

Anmerkung In Fällen, in denen der Inhaltsbereich in zwei Richtungen verschoben werden kann, wie etwa bei Webbrowsern oder E-Readern, sollte die zeitliche Interaktion durch Gedrückthalten verwendet werden, um das Kontextmenü für Objekte wie Bilder und Links aufzurufen.

horizontales Schwenken, zweidimensionale Liste

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

Vertikales Schwenken, eindimensionale-Liste

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

Auswählen

Die Auswahl bedeutet das Markieren, ohne dass ein oder mehrere Objekte gestartet oder aktiviert werden. Diese Aktion entspricht einem einzelnen Mausklick oder einem Umschalttaste und 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.

Zusätzlich zum Abstandsschwellenwert ist die Querverschiebungsauswahl auf einen 90°-Schwellenbereich 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 Wisch-Interaktion wird durch eine zeitgesteuerte Interaktion durch Gedrückthalten ergänzt, die auch als "selbstoffenbarende 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 Benutzeroberfläche zur Auflösung von Mehrdeutigkeiten finden Sie unter Richtlinien für visuelles Feedback.

Die folgenden Screenshots veranschaulichen, wie die Selbstanzeigeanimation funktioniert.

  1. Drücken und halten Sie, um die Animation für die Selbstdarstellungsinteraktion zu starten. 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, der die Animation für die Auswahl zeigt.

  3. Das Element ist jetzt ausgewählt. Ändern Sie das Auswahlverhalten durch die Verwendung der Wischbewegung für das Verschieben des Elements.

    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.

Queues

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

  • Die Liste der Artikel im Auswahlkorb ist lediglich eine visuelle Darstellung; die Artikel in einer Warteschlange werden mit einer bestimmten Aktion im Hinterkopf 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 folienübergreifende Auswahl-Interaktion nicht zum Hinzufügen von Elementen zu einer Warteschlange verwendet werden. Stattdessen sollten Elemente einer Warteschlange durch eine Drag-and-Drop-Aktion hinzugefügt werden.

Drag

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

 

  • Last updated on