Schaltflächen

Schaltflächen helfen Nutzenden dabei, Aktionen oder Abläufe zu initiieren. Wählen Sie aus verschiedenen Schaltflächentypen aus.

Weitere Informationen

Typ	Verknüpfen	Status
Design	Designquelle (Figma)	Verfügbar
Implementierung	Jetpack Compose	Verfügbar

Highlights

• Wählen Sie die Art der Schaltfläche entsprechend der Wichtigkeit der Aktion aus. Je wichtiger die Aktion ist, desto mehr wird die Schaltfläche betont.
• Schaltflächen sollten klar beschriftet sein, um die von ihnen ausgeführte Aktion anzuzeigen.
• Platzieren Sie Schaltflächen logisch auf dem Bildschirm – dort, wo Nutzer sie wahrscheinlich finden.
• Verwende nicht zu viele Schaltflächen. Zu viele Schaltflächen auf einem Bildschirm stören die visuelle Hierarchie.

Varianten

Es gibt sechs Arten von Schaltflächen:

1. Schaltfläche mit Füllung
2. Schaltfläche „Umriss“
3. Symbolschaltfläche
4. Schaltfläche mit dem Symbol „Umriss“
5. Lange Taste
6. Schaltfläche „Bild“

Wählen Sie die Art der Schaltfläche entsprechend der Wichtigkeit der Aktion aus. Je wichtiger die Aktion ist, desto stärker sollte die Schaltfläche betont werden.

Schaltfläche „Ausgefüllt“ und „Umriss“

Ausgefüllte Schaltflächen haben die größte visuelle Wirkung und sollten für wichtige letzte Aktionen verwendet werden, die einen Ablauf abschließen, z. B. „Speichern“, „Jetzt teilnehmen“, „Bestätigen“ oder „Herunterladen“.

Umrissene Schaltflächen sind Schaltflächen mit mittlerer Betonung. Sie enthalten Aktionen, die wichtig sind, aber nicht die primäre Aktion in einer App sind. Umrissene Schaltflächen passen gut zu gefüllten Schaltflächen, um eine alternative, sekundäre Aktion anzuzeigen.

Anatomie

1. Container
2. Labeltext
3. Symbol (optional)

Bundesstaaten

Visuelle Darstellung des Status einer Komponente.

1. Standard
2. konzentriert
3. Gedrückt

Spezifikation

Schaltfläche mit Symbol und Umriss

Verwenden Sie Symbolschaltflächen, um Aktionen in einem kompakten Layout anzuzeigen. Symbolschaltflächen können öffnende Aktionen wie das Öffnen eines Dreipunkt-Menüs oder einer Suche oder binäre Aktionen darstellen, die ein- und ausgeschaltet werden können, z. B. Favoriten oder Lesezeichen. Sie werden auch zum Abspielen oder Pausieren von Medien verwendet.

Symbolschaltflächen können in drei Größen definiert werden: klein, mittel und groß.

Anatomie

1. Container
2. Symbol

Bundesstaaten

1. Standard
2. konzentriert
3. Gedrückt

Stadien sind visuelle Darstellungen, mit denen der Status einer Komponente oder eines interaktiven Elements kommuniziert wird.

Technische Daten

Breite Schaltfläche

Breite Schaltflächen werden für eine stärkere Betonung als gewöhnliche Schaltflächen verwendet. Sie enthalten wichtige Aktionen. Schaltflächen, die ähnliche Optionen repräsentieren, sind gruppiert. Die Gruppe sollte eine gemeinsame Oberfläche haben.

Anatomie

1. Container
2. Vorangestelltes Symbol
3. Titel
4. Untertitel

Bundesstaaten

1. Standard
2. konzentriert
3. Gedrückt

Stadien sind visuelle Darstellungen, mit denen der Status einer Komponente oder eines interaktiven Elements kommuniziert wird.

Technische Daten

Schaltfläche „Bild“

Bildschaltflächen werden in der Regel verwendet, um Miniaturansichten der Inhalte anzuzeigen, die in der nächsten Navigationsebene verfügbar sind. Sie sind normalerweise mit zusammengehörigen Aktionen gruppiert und die Gruppe sollte eine gemeinsame Oberfläche haben.

Anatomie

1. Container
2. Vorangestelltes Symbol
3. Titel
4. Untertitel
5. Bildebene, die aus Folgendem besteht:
   1. Scrim (Status-Overlay)
   2. Farbverlauf (basierend auf der Oberflächenfarbe)
   3. Bild

Bundesstaaten

1. Standard
2. konzentriert
3. Gedrückt

Stadien sind visuelle Darstellungen, mit denen der Status einer Komponente oder eines interaktiven Elements kommuniziert wird.

Technische Daten

Nutzung

Schaltflächen werden im Allgemeinen verwendet, um die Aktionen zu kommunizieren, die Nutzende ausführen können. Sie sind häufig in UI-Elementen wie Dialogfeldern, modalen Fenstern, Formularen, Karten und Symbolleisten zu finden.

Schaltflächen sind nur eine Möglichkeit, Aktionen in Ihrer Benutzeroberfläche darzustellen. Verwenden Sie sie nicht zu oft. Zu viele Schaltflächen auf einem Bildschirm stören die visuelle Hierarchie.

1. Container
2. Symbol
3. Labeltext
4. Titel
5. Untertitel
6. Bild

Container

Schaltflächen stellen einen Container um Inhalt dar. Der Container wird im Fokus um das 1,1-Fache skaliert, wobei das interne Padding beibehalten wird. Im Folgenden finden Sie einige Überlegungen zu Containern:

• Die Containerbreite wird anhand des Inhalts mit einheitlichem Innenrand festgelegt.
• Legen Sie die relative Position des Containers im Raster des responsiven Layouts fest.
• Verwenden Sie Container in Deckfarbe für ausgefüllte Schaltflächen.
• Verwenden Sie Strich- und Füllfarbe für den Fokus für umrissene Schaltflächen. Der Container erhält eine Füllfarbe und den Umriss.
• Bei breiten Schaltflächen und Bildschaltflächen wird die Containerbreite gemäß dem Layoutraster festgelegt.
• Größe, Position und Ausrichtung des Containers können sich ändern, wenn der übergeordnete Container skaliert wird.

Text- und Symbolschaltflächencontainer haben vollständig abgerundete Ecken. Breiten- und Bildschaltflächencontainer haben abgerundete Container mit 12 dp.

Symbol

Symbole vermitteln visuell die Aktion der Schaltfläche und helfen, Aufmerksamkeit zu erregen. Sie sollten am Anfang der Schaltfläche platziert werden. Symbole sind innerhalb des Containers immer vertikal zentriert.

Labeltext

Der Labeltext ist das wichtigste Element einer Schaltfläche. Sie beschreibt die Aktion, die auftritt, wenn Nutzende auf eine Schaltfläche tippen.

Verwenden Sie für den Labeltext der Schaltfläche die Groß- und Kleinschreibung und verwenden Sie die Groß- und Kleinschreibung für das erste Wort und Eigennamen. Vermeiden Sie Textumbrüche. Der Labeltext sollte für maximale Lesbarkeit in einer Zeile stehen.

Bild

Bildschaltflächen haben immer ein Farbverlauf-Overlay und Gitter über dem Bild im Hintergrund. Das Farbverlaufs-Overlay wird entsprechend der Containerfarbe festgelegt. Das Scrum ändert sich je nach Zustand.

Schaltflächengruppen

Schaltflächen werden zusammen in einer Zeile oder Spalte angezeigt, um eine einheitliche Navigation zwischen Aktionen aufrechtzuerhalten. In den folgenden Abschnitten werden einige Überlegungen beschrieben.

Hierarchie informieren

Jeder Bildschirm sollte eine primäre Aktion haben, die durch eine auffällige, üblicherweise breite Schaltfläche dargestellt wird. Die Schaltfläche sollte übersichtlicher und verständlicher sein. Andere Schaltflächen sollten weniger auffällig sein und die Nutzer nicht von der primären Aktion ablenken.

Die erste Schaltfläche in der Gruppe fungiert als primäre Aktion, da der Fokus zuerst auf ihr gelegt wird.

Lineares Layout beibehalten

1. Zeilenlayout
2. Spaltenlayout

Varianten logisch verwenden

Beim Spaltenlayout sollten Varianten mit einer einzelnen Schaltfläche beibehalten werden. Im Zeilenlayout können verschiedene Varianten in einer Schaltflächengruppe gruppiert werden, aber die Logik sollte klar sein. Die Schaltflächen „Ausgefüllt“ und „Umriss“ können in derselben Gruppe verwendet werden, sorgen aber für eine klare Hierarchie der Aktionen.