Bewegung

Bewegungserkennung ist ein wirkungsvolles Instrument, das im Straßenverkehr sparsam eingesetzt werden sollte. Sie ist nur dann angebracht, wenn sie den Fahrer informiert, ohne ihn vom Straßenverkehr abzulenken.

Kurzfassung (TL;DR):

  • Vermeiden Sie es, Benutzer durch unnötige Bewegungen abzulenken.
  • Nutzen Sie Bewegung, um das Verständnis der Nutzer zu verbessern und ihre Kompetenz auszubauen.
  • Gestalten Sie Ihre Bewegungssprache flexibel genug für alle relevanten Hardwarekomponenten.
  • Verwenden Sie das für Ihre Situation empfohlene Bewegungsmuster.

Bewegungsprinzipien

Bei der Gestaltung von Bewegungsabläufen für Android for Cars-Benutzeroberflächen sollten Sie drei Grundprinzipien beachten: Sicherheit, Information und Flexibilität.

Sicher

Das Fahren hat für den Nutzer oberste Priorität – alles andere ist zweitrangig. Behandeln Sie die Aufmerksamkeit des Nutzers als begrenzte Ressource und vermeiden Sie es, durch Bewegung unnötige Ablenkungen zu erzeugen.

Augen-GIF

Informativ

Setzen Sie Bewegung ein, um Nutzern hilfreiche Informationen zu vermitteln. Beispielsweise kann Bewegung das Produktverständnis verbessern, indem sie hierarchische und räumliche Beziehungen zwischen Elementen verdeutlicht. Zudem kann sie die Vertrautheit der Nutzer mit der Benutzeroberfläche fördern, indem sie verfügbare Interaktionsmöglichkeiten aufzeigt.

Informatives GIF

Flexibel

Definieren Sie eine Bewegungssprache, die skalierbar und flexibel genug ist, um sich an Bildschirme aller Größen und Formen sowie an alle Arten von Benutzereingaben anzupassen.

Flex-Bildschirm-GIF

Bewegungsmuster

Um eine einheitliche Benutzererfahrung über alle Apps hinweg zu gewährleisten, bietet Android Automotive Empfehlungen für spezifische Bewegungsmuster, die in den folgenden Situationen zu verwenden sind:

  • Wechseln zwischen Ansichten auf derselben Ebene
  • Wechseln zur Detailansicht
  • Eine bestehende Aktion erweitern
  • Minimierung und Erweiterung einer Aktion
  • Störung einer Handlung

Alle Bewegungsmuster in diesem Abschnitt basieren auf dem Standard-Easing, wie in den Material Design Easing -Richtlinien beschrieben. Das heißt, die Bewegungen beschleunigen sich schnell und verlangsamen sich dann allmählich, um den Fokus auf das Ende des Übergangs zu lenken.


Wechseln zwischen Ansichten auf derselben Ebene

Beim Wechseln zwischen Ansichten auf derselben Hierarchieebene in einer App, beispielsweise zwischen Tabs in der App-Leiste oder Songs in einer Playlist, empfiehlt sich eine seitliche Bewegung. Diese horizontale Bewegung verstärkt das Gefühl, innerhalb der App auf derselben Ebene zu bleiben.

Beispiel für einen Peer-Übergang
In Android Automotive ermöglicht ein schneller Überblendeffekt dem Nutzer, von einer Navigations-App zu einer Medien-App und wieder zurück zu wechseln.

Beispiel

In Android Automotive OS unterstreicht die seitliche Bewegung beim Wechsel vom Startbildschirm zum Wiedergabelisten-Tab in einer Medien-App, dass beide Tabs Ansichten der obersten Ebene von Inhalten darstellen.

Wechseln zur Detailansicht

Beim Wechsel von einer Gesamtansicht zu einer Detailansicht sollte eine Z-Tiefenbewegung verwendet werden, die die untere Ebene vergrößert und einblendet, während die obere Ebene ausgeblendet wird. Diese Bewegung verstärkt die Eltern-Kind-Beziehung zwischen Gesamtansicht und Detailansicht und lenkt den Fokus auf Letztere.

Übergang von der Eltern- zur Kinderrolle
Vom übergeordneten Bildschirm aus hebt sich das untergeordnete Element an und breitet sich an Ort und Stelle aus.

Beispiel

Wechsel zur Detailansicht
Im Medien-Template von Android Automotive OS wird beim Anklicken eines bestimmten Albums in einer Albumübersicht die Titelliste des entsprechenden Albums vergrößert und erweitert, um die Details besser sichtbar zu machen.

Eine bestehende Aktion erweitern

Wenn ein Nutzer eine Aktion ausführt und eine damit verbundene Aktion aktiviert, wird diese sekundäre Aktion mithilfe einer vertikalen Bewegung (nach oben oder unten) in einem Vollbild-Overlay mit transparentem Hintergrund über der primären Aktion eingeblendet. Die Sichtbarkeit der primären Aktion durch den transparenten Hintergrund verstärkt das Gefühl des Nutzers, sich noch in dieser Aktion zu befinden.

Zum Schließen der Sekundäraktion führen Sie die umgekehrte Bewegung aus. Die umgekehrte Bewegung sollte weniger Zeit in Anspruch nehmen als die ursprüngliche Bewegung, da der Benutzer die Sekundäraktion abgeschlossen hat und zum Beenden bereit ist.

Hinweissymbol
Dauer
Material-Design-Richtlinien zur Dauer von Übergängen
Sekundäraktionsüberlagerung
Hier entsteht die sekundäre Handlung aus der primären Handlung auf einer Überlagerung, während die primäre Handlung teilweise hinter dem Gazevorhang sichtbar bleibt.

Beispiel

Android Auto OS-Aktionsüberlagerungsbeispiel
Im Medien-Template von Android Automotive OS werden beim Tippen des Überlaufsymbols zum Erweitern der Steuerleiste zusätzliche Steuerelemente eingeblendet und auf einem Overlay angezeigt.

Minimierung und Erweiterung einer Aktion

Wenn Sie eine laufende Aktion, die zur Ermöglichung von Multitasking minimiert wurde, auf ein kleineres Bildschirmformat erweitern möchten, verwenden Sie eine sich erweiternde Fenstermaske mit einem Vollbild-Einblendeffekt.

Um eine laufende Aktion zu minimieren, verwenden Sie die umgekehrte Bewegung. Die Minimierungsbewegung sollte weniger Zeit in Anspruch nehmen als die Erweiterungsbewegung, da der Benutzer die Aktion im Wesentlichen beendet und sie abschließen möchte.

Hinweissymbol
Dauer
Material-Design-Richtlinien zur Dauer von Übergängen
Vergrößern eines minimierten Bildschirms
Die minimierte Aktion wird auf Vollbild erweitert, indem sie über die aktuelle Aktion eingeblendet wird.

Beispiel

Beispiel für die Bedienleiste von Android Automotive OS
In der Medienvorlage von Android Automotive OS wird die minimierte Steuerleiste zur vollständigen Wiedergabeansicht erweitert und anschließend wieder minimiert, wenn der Benutzer auf den Abwärtspfeil tippt.

Störung einer Handlung

Soll eine kurze, nicht blockierende Aktion plötzlich über einer laufenden Aktion erscheinen, schieben Sie sie vom Bildschirmrand nach unten oder oben (mit teilweiser Abdeckung) oder blenden Sie sie in die Mitte ein (mit vollständiger Abdeckung). Starten Sie die Bewegung an der Stelle, die dem gewünschten Erscheinungsort der neuen Aktion am nächsten liegt.

Kurzes Aktionsbeispiel
Wenn die störende Aktion im oberen Bereich des Bildschirms erscheinen soll, schieben Sie sie mit einem teilweisen Sichtschutz von oben hinein.

Beispiel

Dialogbeispiel
Wenn inmitten der Medienvorlage von Android Automotive OS eine störende Aktion auftritt, wird diese mit einem vollständigen Hintergrund eingeblendet, um die Aufmerksamkeit des Nutzers kurzzeitig auf die neue Aktion zu lenken – in diesem Fall auf eine Anfrage zur Berechtigung zur Verwendung von Standortdaten.