Kontext

Im Folgenden findest du alle Elemente, die dazu beitragen, den Ecken und Kanten der optischen Elemente deiner Web-App den letzten Schliff zu verpassen.

Randradius

Karten and Dialoge

Die Eigenschaft Randradius kann verwendet werden, um die Ecken von Elementen in der Benutzeroberfläche abzurunden. Du kannst Karten und Dialoge separat bearbeiten:

• Karten sind Flächen, die Inhalte und/oder Aktionen anzeigen. Auf Karten können Elemente wie Bilder und Texte enthalten
• Dialoge werden für Popups verwendet, also Container, die oben auf deinem Inhalt und deiner Seite angezeigt werden

Schatten

Der Hauptnutzen von Schatten besteht darin, zwei Flächen entlang der z-Achse (der Auf-/Ab-Achse) anzuheben. Größere Schatten bedeuten eine größere Abweichung von der Oberfläche auf der z-Achse. 

Andererseits wird der Fokusschatten als Rand verwendet, der anzeigt, welches Element ausgewählt ist. Das ist besonders nützlich für Benutzer mit verschiedenen Erkrankungen, die das Sehvermögen beeinträchtigen, so dass sie Tastaturen verwenden, um in der App zu 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 Farbe

Verwendung: Karte, Dialogfenster, Verzeichnis-Container, Navigation

Kurzer Schatten 

Standardwerte: 

• X: 0
• Y: 2
• Unschärfe: 4
• Streuung: 0
• Farbe: #2C2C31
• Deckkraft: 10%

Langer Schatten 

Standardwerte: 

• X: 0
• Y: 4
• Unschärfe: 10
• Streuung: 0
• Farbe: #2C2C31
• Deckkraft: 15%

Fokusschatten 

Standardwerte: 

• X: 0
• Y: 0
• Unschärfe: 0
• Streuung: 2
• Farbe: #F2613D
• Deckkraft: 100%