Schaltflächen

Schaltflächen sind der primäre visuelle Indikator für Nutzeraktionen.

Grundsätze

Aktionsorientiert: Schaltflächen sollten deutlich machen, dass sie eine Aktion auslösen.

Deutliches Feedback: Das Erscheinungsbild der Schaltfläche muss sich in den verschiedenen Interaktionsstatus (Mouseover, gedrückt, Fokus) deutlich ändern, um sofortiges Feedback zu geben.

Einheitlich: Alle Schaltflächen sollten eine gemeinsame visuelle Sprache haben, damit sie sofort erkennbar sind.

Flexibel: Die Schaltflächenkomponente sollte gängige Variationen wie Symbole und unterschiedliche Größen unterstützen, ohne die Einheitlichkeit zu beeinträchtigen.

Nutzung und Platzierung

Eine Schaltfläche sollte in der Nähe der zugehörigen Inhalte platziert werden. Sie können allein oder zusammen mit anderen Komponenten wie Karten und Listen platziert werden.

check_circle

Das sollten Sie tun

Verwenden Sie die progressive Offenlegung, um weniger relevante Aktionen zu verbergen.

cancel

Das sollten Sie nicht tun

Die Ansicht des Nutzers mit zu vielen Schaltflächen überladen.

check_circle

Das sollten Sie tun

Verwenden Sie Schaltflächen, um eine Aktion auszulösen. Oder verwenden Sie einen Titel-Chip für ein statisches Element.

cancel

Das sollten Sie nicht tun

eine Schaltfläche als statisches dekoratives Element verwenden.

Anatomie

Standard

1. Aktiviert: Standardstatus. 2. Hover 3. Tippen

Groß

1. Aktiviert: Standardstatus. 2. Hover 3. Tippen

Personalisierung

Schaltflächen enthalten eine Standard- und eine große Variante sowie die Zustände „Standard“, „Fokus“ und „Gedrückt“ für jede Variante. Mit Symbolen kann die Schaltfläche besser hervorgehoben, verdeutlicht und erkannt werden. Die Schaltflächengröße kann die Wichtigkeit unterstreichen.

Standard

Properties	Personalisierung	Standardeinstellungen
Form	Ja	Groß, Kreis
Padding	Ja	16 dp, 8 dp
Rahmen	Ja	2 dp, #606460
Text	Ja	Body Small
Vorangestelltes Symbol	Ja	40 dp
Schluss-Symbol	Ja	40 dp
Größe	Ja	Mindesthöhe: 56 dp
Tiefe	Ja	0

Groß

Properties	Personalisierung	Standardeinstellungen
Form	Ja	Groß, Kreis
Padding	Ja	20 dp, 8 dp
Rahmen	Ja	2 dp, #606460
Text	Ja	Body Small
Vorangestelltes Symbol	Ja	56 dp
Schluss-Symbol	Ja	56 dp
Größe	Ja	Mindesthöhe: 72 dp
Tiefe	Ja	0
Surface	Nein