Schaltflächen

Ein Button signalisiert eine Aktion, die beim Berühren durch einen Benutzer ausgelöst wird.

Schaltflächen sind Standardkomponenten des Android Open Source Project (AOSP). Sie können entweder mit einer einfarbigen Hintergrundfarbe gefüllt oder transparent (ohne Hintergrund) sein. Gefüllte Schaltflächen kennzeichnen eine primäre oder bevorzugte Aktion. Schaltflächen können einzeln oder in Gruppen angezeigt werden – im Gegensatz zu Tabs , die immer in Gruppen erscheinen.

Anatomie

Anatomie der Knöpfe
1. Nicht ausgefüllter Button-Container
2. Ausgefüllter Schaltflächenbereich, der die primäre oder bevorzugte Aktion anzeigt.
3. Schaltflächenbeschriftung

Spezifikationen

Minimale und maximale Tastenlänge

Die maximale Länge der Schaltflächenbeschriftung beträgt 20 Zeichen. Die minimale Schaltflächenbreite beträgt 156 dp.
Die maximale Länge der Schaltflächenbeschriftung beträgt 20 Zeichen. Die minimale Schaltflächenbreite beträgt 156 dp.

Schaltfläche mit Symbol vs. Standardschaltfläche

Schaltflächen können Symbole enthalten. Falls Symbole verwendet werden, erscheinen diese üblicherweise links neben dem Schaltflächentext.
Schaltflächen können Symbole enthalten. Falls Symbole verwendet werden, erscheinen diese üblicherweise links neben dem Schaltflächentext.

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

Schaltflächenplatzierung in der App-Leiste

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

Schaltfläche im Dialog

Schaltflächen in Dialogfeldern befinden sich typischerweise unten links im Dialogfeld.
Schaltflächen in Dialogfeldern befinden sich üblicherweise unten links im Dialogfeld.

Helden-Schaltfläche

Die abgerundeten Kanten eines Hero-Buttons unterstreichen seine Bedeutung
Abgerundete Kanten unterstreichen die Bedeutung eines Hero-Buttons.

Anpassung

OEMs können ihre Marke zum Ausdruck bringen, indem sie das visuelle Erscheinungsbild eines Knopfes verändern, zum Beispiel:

  • Festlegen einer Akzentfarbe
  • Bereitstellung von benutzerdefinierten Symbolen
  • Hinzufügen benutzerdefinierter Schriftarten
  • Ändern des Erscheinungsbilds von aktiven, inaktiven und deaktivierten Schaltflächen
  • Einstellen von Tastenabmessungen, Eckform und Positionierung
  • Bewegung nutzen, um Nutzern Feedback zu geben

Der Leitfaden zur Integration der Car UI Library bietet OEM-Richtlinien zur Anpassung von Komponenten.

Beispiele

leere und gefüllte Schaltflächen
Leere und gefüllte Schaltflächen, wobei die gefüllte Schaltfläche die primäre Aktion anzeigt.
deaktivierte Schaltfläche
Die Farbe und Deckkraft dieses gefüllten Buttons deuten auf einen deaktivierten Zustand hin.
Dialogfeld für leere Schaltflächen
Nicht ausgefüllte Schaltflächen in einem Dialogfeld deuten auf gleichwertige Aktionen hin.
Dauer der Tasten-Rippbewegung
Diese Wellenbewegungen haben eine Dauer von 330 ms. Sie dienen der Bestätigung der Berührung eines Buttons durch den Benutzer.
Wellenanimation der Schaltflächen
Diese wellenförmigen Bewegungen bedecken anfänglich 60 % der Schaltflächenoberfläche. Sie breiten sich vom Berührungspunkt des Benutzers weg aus und enden 10 dp vom Rand der Schaltfläche entfernt.