Schatten

Überblick

Schatten verleihen Objekten visuelle Tiefe und ermöglichen es den Benutzern, wichtige Elemente auf der Oberfläche von Seiten zu erkennen. Schatten sind wichtig, um Tiefe, Bewegungsrichtung und die Kanten von Oberflächen zu kommunizieren. Sie helfen den Benutzern, Hierarchien zu verstehen, und machen Ihre Benutzeroberfläche intuitiver.

Aufbau

1. Schattencontainer

2. Innerer Schatten

3. Äußerer Schatten

Schatten befinden sich hinter verschiedenen Seitenformen, die eine Füllfarbe (einschließlich Weiß) haben. Sie können entweder als äußere oder als innere Schatten eingestellt werden.

Schatten bestehen aus den folgenden Elementen:

Schatten (enthalten)

1. Schattencontainer: Ein Container in der Anwendung.
2. Innere Schatten: Innere Schatten werden innerhalb eines Containers angezeigt.
3. Äußerer Schatten: Äußere Schatten werden auf Containern angezeigt.

Best Practices

• Verwenden Sie äußere Schatten, um interaktive Seitenelemente, z. B. Schaltflächen, zu kennzeichnen.
• Verwenden Sie äußere Schatten, um wichtige Inhaltselemente für die Aufmerksamkeit der Benutzer hervorzuheben, z. B. Objektkarten.
• Verwenden Sie innere Schatten, um Container zu kennzeichnen, die für die Eingaben des Benutzers vorgesehen sind, z. B. ein Textfeld.
• Verwenden Sie Schatten einheitlich in Ihrem gesamten Design und achten Sie darauf, dass auch die Schattenwerte einheitlich sind.
• Wenn Elemente übereinander gestapelt sind, verwenden Sie die gleiche Tiefe des Schattens.
• Wenn sich ein Element auf der dritten Ebene befindet und nichts darunter liegt, muss der Schatten doppelt so tief und diffus sein.
• Schatten sollten auf sinnvolle Weise zur Benutzererfahrung beitragen, etwa indem sie die Aufmerksamkeit des Benutzers auf wichtige Seitenelemente lenken, z. B. auf eine Reihe von Preisoptionen für ein Produktabonnement.
• Wenn Sie äußere und innere Schatten zusammen verwenden, achten Sie darauf, dass die Seiten nicht überladen oder verwirrend aussehen.