Sie wissen bereits, wie man Elemente im Glassmorphic-Stil erstellt ? Jetzt ist es Zeit, ein bisschen weiter zu gehen und zu sehen, wie man es in UI-Komponenten mit Bedacht einsetzt!

Glassmorphism ist ein visueller Designtrend, der Ende 2020 festgestellt wurde. Es ist keine völlig neue Sache, da wir bereits vor Jahren mit Windows Vista eine Benutzeroberfläche gesehen haben, die Glasmaterial verwendet.

Heutzutage haben Designer begonnen, Glas auf attraktive und nutzbare Weise mit Bedacht einzusetzen. Gute Beispiele für Benutzeroberflächen, die Glas verwenden, sind Apples iOS , macOS und Fluent Design System von Microsoft.

Glasmorphe Elemente erstellen…

Wenn Sie nur ein einziges visuelles Element im Glassmorphic-Stil erstellen möchten. Befolgen Sie die 6 einfachen Schritte, die ich in das Tutorial aufgenommen habe - Erstellen eines glasmorphen Karten-UI-Designs . Es enthält auch Video-Tutorials für Sketch und Figma .

Glassmorphism UI - Probleme ⚠️

Key Fragen von allen , die echte UI Glassmorphic Elemente erstellen möchten , werden - wie eine gute Zugänglichkeit zu gewährleisten und wie Stilelemente auf die richtige visuelle Hierarchie festgelegt .

Wenn Sie nicht wissen, wie man mit dem Glasmaterial spielt. Sie können Ihre Benutzer verletzen. Für eine gute Zugänglichkeit müssen Sie Ihre Glashöhen- und UI-Elemente testen, um die WCAG 2.0-Richtlinien mit mindestens einem AA-Kontrastverhältnis zu erfüllen.

Gehen Sie folgendermaßen vor, um eine gute visuelle Hierarchie zu erstellen:

Wie stelle ich die visuelle Hierarchie sicher?

Schauen wir uns das folgende Beispiel an. 3 Schichten mit den gleichen Glasmaterialien überlappen sich. Dieser anfängliche Satz sieht nicht so gut aus, aber er wird uns helfen, eine bessere visuelle Hierarchie zu erstellen.

Diese vier Schritte werden unsere Wahrnehmung des digitalen Glases stark verändern:

1. Fügen Sie den subtilen Schatten hinzu

Schatten ist fast immer der naheliegendste Weg, um die Hierarchie der UI-Elemente anzuzeigen. Selbst wenn sich Objekte mit derselben Farbe überlappen, wird deutlich, welches Element oben liegt.

2. Unschärfe unterscheiden

Während die klassischen skeuomorphen Schnittstellen das Lied der Vergangenheit sind, ist es gut, sich von der realen Welt inspirieren zu lassen. Schauen Sie, wie Acryl- oder Glasmaterialien miteinander spielen.
Elemente, die näher am Hintergrund liegen, weisen normalerweise eine geringere Unschärfe auf. Diejenigen, die höher sind (größerer Abstand vom Hintergrund), haben einen höheren Unschärfewert.

Nun sehen Sie, wie es in der digitalen Welt funktioniert. Sieht ganz gut aus, nicht wahr?

3. Verringern Sie die Deckkraft und dimmen Sie den Inhalt

Wenn Sie aktive Elemente besser lesbar machen möchten, sollten Sie ihre Deckkraft erhöhen. Versuchen Sie, Unschärfetrübungen zu unterscheiden. Der niedrigste Wert für Hintergrundelemente. Höchste Deckkraft für die Elemente, die derzeit aktiv sind und sich oben in der Hierarchie befinden.

Denken Sie daran, dass glasmorphe Elemente hintergrundempfindlich sind. Ich habe die spezifischen Werte nicht angezeigt, da Sie sie in der Umgebung Ihres Projekts selbst ausprobieren müssen.

Sie können auch den Kontrast oder die Deckkraft von Inhalten in Glasoberflächenelementen verringern. Dank dieser höchsten Schicht wird mehr Fokus gewonnen.

Sehen Sie in unserem Beispiel, wie es aussieht:

4. Fügen Sie Rahmen hinzu

Wenn die in den vorherigen Punkten vorgestellten Techniken nicht ausreichen, können Sie jederzeit einen Rahmen hinzufügen . Dies kann der subtile weiße Strich mit 20% Deckkraft sein. Es wird die Grenzen der spezifischen UI-Elemente klar kommunizieren.

Wenn Sie sehen möchten, wie die Elemente in der realen Benutzeroberfläche aussehen, finden Sie hier ein Beispiel von mir:

Sehen Sie Glassmorphic Visual Hierarchy live

Ich habe auch ein kurzes Video-Tutorial vorbereitet, das Schritt für Schritt zeigt, wie man den oben genannten Effekt erzielt. Dies kann in Sketch und Figma auf sehr ähnliche Weise geschehen. Hör zu:

Der letzte Rat für Glassmorphism:

Obwohl der Stil selbst ziemlich attraktiv ist, verwenden Sie ihn bitte nicht überall. Wenn die Barrierefreiheit in Ihrem Projekt eine Schlüsselrolle spielt, versuchen Sie, Glaselemente als große Teile der Benutzeroberfläche zu vermeiden. Ihre Unschärfe und Transparenz können zu einigen Zugänglichkeitsproblemen führen.

Beobachten Sie, wie Benutzeroberflächen für echte Designsysteme aussehen, und lernen Sie daraus. macOS Big Sur enthält viele Beispiele, die es wert sind, befolgt zu werden. Apple hat eine Einstellung hinzugefügt, mit der Benutzer transkulente Hintergründe deaktivieren können, um die Lesbarkeit zu verbessern.

Schlussfolgern

Jetzt wissen Sie, wie Sie Glassmorphic UI-Elemente verwenden, um in Ihren Projekten gut auszusehen. Denken Sie an Schlagschatten, unterscheiden Sie Unschärfe und Deckkraft und ziehen Sie subtile Ränder hinzu.

Digitale Materialien haben ihre eigenen Regeln, aber es lohnt sich, sich von der Natur inspirieren zu lassen. Diese Art von Elementen sieht für Benutzer immer natürlicher aus.

Wenn Sie das Tutorial nützlich fanden, teilen Sie es mit, damit Ihre Freunde wissen, wie sie ihre Benutzeroberfläche verbessern können! Fühlen Sie sich frei, more weitere Tutorials wie dieses zu entdecken !

Dieser Artikel wurde ursprünglich in meinem Blog veröffentlicht (der seinen Ursprung im Instagram-Tutorial hat).

Danke fürs Lesen!