Kontext
Im Folgenden findest du alle Elemente, die dazu beitragen, den Ecken und Kanten der optischen Elemente deiner Web-App den letzten Schliff zu geben.
Randradius
Diese Eigenschaft wird verwendet, um die Ecken des äußeren Randes eines Elements abzurunden.
Eingaben
- Wird für umrissene Texteingaben verwendet
- Standardwert: 8px
Karten
- Karten und Flächen, die Inhalte und/oder Aktionen anzeigen. Auf Karten können Elemente wie Bilder, Texte etc. enthalten
- Standardwert: 8px
Dialoge
- Wird für ein Popup verwendet, einen Container, der oben auf deinem Inhalt und deiner Seite angezeigt wird)
- Standardwert: 16px
Bilder
- Wird für jedes Bild verwendet, außer für Bilder, die die Gesamtbreite der Webseite oder eines Containers einnehmen)
- Standardwert: 8px
Linien
Definiert eine Farbe für alle Trennlinien, die auf der Oberfläche verwendet werden. Die Linien dienen dazu, kleinere Datenblöcke visuell zu trennen. Normalerweise beziehen sich die kleineren Blöcke auf dieselbe Art von Informationen. Es gibt zwei verschiedene Varianten: Standard und passiv. Sie besitzen zwei Werte: die Farbe der Linie und ihre Transparenz.
Standard
Geeignet für die Unterteilung von Elementen auf helleren Flächen.
Standardwerte:
- Farbe: #2C2C31
- Deckkraft: 6%
Passiv
Geeignet zur Unterteilung von Elementen auf dunkleren Flächen und/oder zur Unterteilung größerer Abschnitte auf einer Seite.
Standardwerte:
- Farbe: #2C2C31
- Deckkraft: 20%
Schatten
Die Hauptanwendung von Schatten ist das Anheben zweier Flächen entlang der Z-Achse. Ein größerer Schatten bedeutet eine größere Abweichung von der Oberfläche auf der z-Achse - der vertikalen Achse (nach oben/unten).
Andererseits wird der Fokusschatten als Grenze verwendet, die anzeigt, welches Element ausgewählt ist. Das ist besonders nützlich für Benutzer mit bestimmten Sehbehinderungen, die mit Tastaturen innerhalb der App navigieren.
Der einzige Wert, der dein Branding beeinflusst, ist die Farbe des Fokusschattens. Die Farbe sollte die Werte deiner Hauptfarbe verwenden. Wir empfehlen dir, keine anderen Standardeinstellungen zu ändern, da sie fein abgestimmt sind, um die Funktionalität zu verbessern.
Schatten werden durch 6 Eigenschaften definiert:
- X-Versatz: Verschiebt den Schatten auf der X-Achse (links/unten)
- Y-Versatz: Verschiebt den Schatten auf der Y-Achse (rechts/unten)
- Unschärfe: verwischt den Schatten. Simuliert den Abstand der Oberfläche von der Lichtquelle. Je größer die Unschärfe, desto heller ist der äußere Teil des Schattens
- Streuung: Kontrastiert den Schatten in alle Richtungen. Genau wie Unschärfe, Kontrast und Streuung stehen in direkter Beziehung zueinander
- Farbe: Definiert die Farbe des Schattens
- Deckkraft: Bestimmt die Transparenz der Farbeigenschaft
Verwendung: Hover-Status, Karte, Dialogfenster, Verzeichnis-Container, Navigation
Schatten Kurz
Standardwerte:
- X: 0
- Y: 2
- Unschärfe: 4
- Streuung: 0
- Farbe: #2C2C31
- Deckkraft: 10%
Schatten Lang
Standardwerte:
- X: 0
- Y: 4
- Unschärfe: 10
- Streuung: 0
- Farbe: #2C2C31
- Deckkraft: 15%
Schattenfokus
Standardwerte:
- X: 0
- Y: 0
- Unschärfe: 0
- Streuung: 2
- Farbe: #F2613D
- Deckkraft: 100%
Kommentare
0 Kommentare
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.