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:
- Schaltfläche mit Füllung
- Schaltfläche „Umriss“
- Symbolschaltfläche
- Schaltfläche mit dem Symbol „Umriss“
- Lange Taste
- Schaltfläche „Bild“
![Schaltfläche mit Füllung](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/button-1.webp?authuser=8&hl=de)
![Schaltfläche „Umriss“](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/button-2.webp?authuser=8&hl=de)
![Symbolschaltfläche](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/button-3.webp?authuser=8&hl=de)
![Schaltfläche mit dem Symbol „Umriss“](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/button-4.webp?authuser=8&hl=de)
![Lange Taste](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/button-5.webp?authuser=8&hl=de)
![Schaltfläche „Bild“](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/button-6.webp?authuser=8&hl=de)
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
- Container
- Labeltext
- Symbol (optional)
Bundesstaaten
Visuelle Darstellung des Status einer Komponente.
- Standard
- konzentriert
- 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
- Container
- Symbol
Bundesstaaten
- Standard
- konzentriert
- 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
- Container
- Vorangestelltes Symbol
- Titel
- Untertitel
Bundesstaaten
- Standard
- konzentriert
- 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
- Container
- Vorangestelltes Symbol
- Titel
- Untertitel
- Bildebene, die aus Folgendem besteht:
- Scrim (Status-Overlay)
- Farbverlauf (basierend auf der Oberflächenfarbe)
- Bild
Bundesstaaten
- Standard
- konzentriert
- 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.
- Container
- Symbol
- Labeltext
- Titel
- Untertitel
- 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.
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/container-do.webp?authuser=8&hl=de)
Dos
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/container-caution.webp?authuser=8&hl=de)
Achtung
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.
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/icons-do.webp?authuser=8&hl=de)
Dos
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/icons-dont-1.webp?authuser=8&hl=de)
Don'ts
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/icons-dont-2.webp?authuser=8&hl=de)
Achtung
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.
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/label-do.webp?authuser=8&hl=de)
Dos
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/label-caution.webp?authuser=8&hl=de)
Achtung
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
![Schaltflächenzeile](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/button-row.webp?authuser=8&hl=de)
![Spalte für Schaltflächen](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/button-column.webp?authuser=8&hl=de)
- Zeilenlayout
- 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.
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/button-group-1.webp?authuser=8&hl=de)
Dos
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/button-group-2.webp?authuser=8&hl=de)
Don'ts
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/button-group-3.webp?authuser=8&hl=de)
Achtung
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/buttons/button-group-4.webp?authuser=8&hl=de)