Schaltflächen

Verwenden Sie eine Schaltfläche-Komponente für Aktionen, die für Nutzer leicht verständlich sind und kein Textlabel erfordern. Schaltflächen unterscheiden sich von Chips durch ihre runde Form.

Anatomie

A. Inhalte

Schaltflächen haben nur einen Platz, der für ein Symbol oder einen Text reserviert ist. Wählen Sie ein Symbol aus, das für die von der Schaltfläche ausgeführte Aktion relevant ist. Sie können Text mit maximal drei Zeichen verwenden, wenn ein Symbol die relevante Aktion nicht beschreiben kann. Erwägen Sie die Verwendung einer Chip-Komponente, wenn ein Symbol die Aktion nicht klar beschreiben kann

B. Container

Schaltflächencontainer sind auf eine einfarbige Füllung beschränkt.


Schaltflächentypen

Ein-/Aus-Schaltflächen

Ein-/Aus-Schaltflächen ermöglichen es Nutzern, zwischen zwei Status zu wechseln.

Kompakte Schaltflächen

Kompakte Schaltflächen werden kleiner, haben aber einen größeren antippbaren Bereich. Standardmäßig ist der antippbare Bereich 48 x 48 dp groß.

Hierarchiediagramm

Verwenden Sie verschiedenfarbige Füllungen, um die Schaltflächenhierarchie darzustellen.

Starke Betonung

Schaltflächen mit hoher Betonung enthalten Aktionen, die für die App primär sind. Verwenden Sie für diese Schaltflächen eine primäre oder sekundäre Farbe für den Container und "Ein" als primäre und eine sekundäre Farbe für den Inhalt. Weitere Informationen findest du unter Wear-Material-Designs.

Mittlere Betonung

Schaltflächen mit mittlerer Betonung zeichnen sich durch eine weniger kontrastreiche Farbfüllung aus. Sie enthalten Aktionen, die weniger wichtig sind als die primären Aktionen. Verwenden Sie die Oberflächenfarbe des Containers und die On Surface-Farbe für den Inhalt.

Alternativ können Sie für eine Schaltfläche mit mittlerer Betonung die benutzerdefinierte OutlinedButton-Komponente verwenden. Sie hat einen transparenten Hintergrund, einen Farbstrich der primären Variante mit einer Deckkraft von 60% und Inhalte mit primärer Farbe.

Geringe Hervorhebung (nur Symbol)

Schaltflächen mit geringer Betonung zeichnen sich dadurch aus, dass sie keine Füllung haben. Sie eignen sich am besten für kleinere Bereiche auf dem Zifferblatt, in denen eine kompakte Anordnung erforderlich ist. Verwenden Sie für Inhalte die Farbe „On Surface“.

Größen

Verwenden Sie Schaltflächen unterschiedlicher Größe, um Aktionen zu betonen oder weniger hervorzuheben.

Groß

Symbol (30 x 30 dp)
Container (60 x 60 dp)

Standardeinstellung

Symbol (26 x 26 dp)
Container (52 x 52 dp)

Klein

Symbol (24 x 24 dp)
Container (48 x 48 dp)

Extraklein

Symbol (24 x 24 dp)
Container (32 x 32 dp)

Es wird empfohlen, diese Schaltfläche mit einem zusätzlichen Abstand zu versehen, um ein Tippziel mit mindestens 48 dp zu erreichen. Dies ist die Mindestgröße des Tippziels für Bedienungshilfen.

Nutzung

Verwenden Sie Standardschaltflächen, über die Nutzer eine einzelne Aktion ausführen können, z. B. einen Anruf annehmen oder ablehnen oder einen Timer starten.

Verwenden Sie Ein-/Aus-Schaltflächen, um dem Nutzer zu ermöglichen, eine Option zu aktivieren oder zu deaktivieren, z. B. das Auswählen und Deaktivieren der Wochentage oder das Pausieren und Neustarten eines Timers.

Adaptive Layouts

Responsives Verhalten

1-Taste

Der innere Abstand bleibt gleich und die Ränder sollten als Prozentsätze angegeben werden, damit die Schaltflächen nicht zu stark gedehnt werden und ihre relative Größe beibehalten wird.

2 Tasten

Wenn es zwei Schaltflächen gibt, werden innere Ränder prozentual hinzugefügt, um zu verhindern, dass die Schaltflächen zu stark gedehnt werden und ihre relative Größe beibehalten wird.

IMEs

1 oder 2 Tasten

IMEs mit 2- oder 1-Tasten-Lockup dehnen sich unabhängig von der Bildschirmgröße immer bis zum Rand.

3 Schaltflächen

Auf Bildschirmen unter 225 dp bleiben die Schaltflächen kreisförmig und werden nicht gestreckt. Auf größeren Bildschirmen, 225 dp oder größer, strecken die Schaltflächen bis zum Seitenrand.