Schaltflächen

Eine Schaltfläche kommuniziert eine Aktion, die ausgeführt wird, wenn Nutzende sie berühren.

Schaltflächen sind Standardkomponenten des Open-Source-Projekts von Android (AOSP). Sie können entweder mit einer einfarbigen Hintergrundfarbe gefüllt oder mit einem transparenten Hintergrund ohne Füllung ausgefüllt werden. Die ausgefüllten Schaltflächen kennzeichnen eine primäre oder bevorzugte Aktion. Im Gegensatz zu Tabs können Schaltflächen einzeln oder in Gruppen angezeigt werden.

Anatomie

Anatomie der Tasten
1. Nicht gefüllter Schaltflächenbehälter
2. Ausgefüllter Schaltflächencontainer, der die primäre oder bevorzugte Aktion angibt
3. Beschriftung der Schaltfläche

Technische Daten

Mindest- und Höchstlänge der Schaltfläche

Das Schaltflächenlabel darf maximal 20 Zeichen lang sein. Die Mindestbreite der Schaltfläche beträgt 156 dp.
Das Schaltflächenlabel darf maximal 20 Zeichen lang sein. Die minimale Schaltflächenbreite beträgt 156 dp.

Schaltfläche mit Symbol vs. Standardschaltfläche

Schaltflächen können Symbole enthalten. Sind Symbole enthalten, werden sie in der Regel links vom Schaltflächentext angezeigt.
Schaltflächen können Symbole enthalten. Sind sie enthalten, werden sie in der Regel links vom Schaltflächentext angezeigt.

Schaltflächen können als Elemente in anderen Komponenten erscheinen, z. B. in der App-Leiste oder in Dialogfeldern.

Platzierung der Schaltfläche in der App-Leiste

Schaltflächen befinden sich auf der rechten Seite der App-Leiste
Schaltflächen befinden sich auf der rechten Seite der App-Leiste

Schaltfläche im Dialogfeld

Schaltflächen in Dialogfeldern befinden sich in der Regel links unten im Dialogfeld
Schaltflächen in Dialogfeldern befinden sich normalerweise links unten in einem Dialogfeld

Hero-Schaltfläche

Die abgerundeten Ecken einer Hero-Schaltfläche betonen ihre Bedeutung
Die abgerundeten Ecken einer Hero-Schaltfläche betonen ihre Bedeutung

Anpassbare

OEMs können ihre Marke reflektieren, indem sie das visuelle Erscheinungsbild einer Schaltfläche verändern. Beispiele:

  • Akzentfarbe festlegen
  • Benutzerdefinierte Symbole bereitstellen
  • Benutzerdefinierte Schriftarten hinzufügen
  • Darstellung von aktiven, inaktiven und deaktivierten Schaltflächen ändern
  • Abmessungen, Eckenform und Placements für Schaltflächen festlegen
  • Verwendung von Bewegungen, um Nutzenden Feedback zu geben

Im Integrationsleitfaden für die Auto-UI-Bibliothek findest du OEM-Anleitungen zum Anpassen der Komponenten.

Das Designsystem bietet spezifische Anleitungen für die Verwendung von Layout, Farbe, Typografie, Größe, Form und Bewegung, um Komponenten anzupassen.

Beispiele

nicht ausgefüllte und ausgefüllte Schaltflächen
Nicht ausgefüllte und ausgefüllte Schaltflächen, bei denen die ausgefüllte Schaltfläche die primäre Aktion angibt
Deaktivierte ausgefüllte Schaltfläche
Die Farbe und Deckkraft der ausgefüllten Schaltfläche weist auf einen deaktivierten Status hin
Dialogfeld für nicht gefüllte Schaltfläche
Nicht gefüllte Schaltflächen in einem Dialogfeld zeigen Aktionen mit gleich gewichteter Gewichtung an
Dauer der Wellenbewegung der Schaltfläche
Diese Wellenbewegungen haben eine Dauer von 330 ms. Sie werden verwendet, um den Kontakt von Nutzenden über eine Schaltfläche zu bestätigen.
Wellenanimation der Schaltflächen
Diese Wellenbewegungen überlagern anfangs 60% der Schaltflächenoberfläche. Sie werden beim Tippen des Nutzers erweitert und stoppen 10 dp vom Rand der Schaltfläche entfernt.