7 hilfreiche Tipps zum Entwerfen einer dunklen Benutzeroberfläche

Dunkle Benutzeroberflächen haben an Popularität gewonnen, und viele Anwendungen bieten jetzt die Möglichkeit, zwischen einem hellen und einem dunklen Modus zu wechseln. Die Implementierung einer dunklen Benutzeroberfläche kann jedoch eine herausfordernde Aufgabe sein, die eine sorgfältige Beachtung der verwendeten Farben, Schriftarten, Bilder und Abstände erfordert.

Alle Fehler in diesen Elementen können zu einer schlechten Benutzererfahrung führen. Die folgenden Tipps sollen Ihnen bei der Gestaltung Ihrer ersten Dark UI helfen.

1. Verwenden Sie kein reines Schwarz

Vermeiden Sie beim Entwerfen einer dunklen Benutzeroberfläche die Verwendung rein schwarzer Hintergründe. Es ist besser, einen dunklen Grauton zu verwenden. Zum Beispiel, Das Materialdesign-Thema von Google empfiehlt die Farbe #121212.

Ein schwarzer Hintergrund in Kombination mit weißem Text kann zu kontrastreich sein und die Augen überanstrengen. Dunklere Grauschattierungen können stattdessen Schatten, Tiefe und Höhe leicht zeigen.

2. Stellen Sie sicher, dass der Textkontrast den WCAG 2.0-Richtlinien entspricht

Wählen Sie eine Farbkombination, die einen angemessenen Kontrast bietet, damit der Text gut lesbar ist. Die Richtlinien der WCAG 2.0 besagen, dass Text oder Textbilder ein Kontrastverhältnis von mindestens 4,5:1 haben müssen, wobei großer Text (mindestens 18 Punkt oder 14 Punkt fett) ein Kontrastverhältnis von mindestens 3:1 haben muss.

Es gibt mehrere Tools zum Überprüfen des Farbkontrasts, darunter das WELLE Chrome-Erweiterung, die auch prüft, wie zugänglich die Farben sind.

3. Wählen Sie den richtigen Schriftstil

Sie müssen auch die Schriftart Ihres Textes berücksichtigen, einschließlich Größe, Gewicht und Zeilenhöhe. Wenn Sie nach Schriftartoptionen suchen, vergessen Sie nicht, dass es welche gibt viele Websites, die kostenlose Schriftarten anbieten. Verwenden Sie für die Schriftgröße Werte, die ausreichen, um sicherzustellen, dass der Text klar und auf einem dunklen Hintergrund sichtbar ist.

Betrachten Sie die folgenden Stile für eine Webseite:

Körper {
Schriftfamilie: "KurierNeu", Einraum;
Schriftgröße: 12px;
Schriftstärke: 200;
Zeilenhöhe: 1; 
Farbe: #333333;
}

Die Schriftfamilie ist schwer lesbar, die Schriftgröße zu klein und die Schriftstärke zu gering. Diese Stile erschweren das Lesen der Seite, wie Sie dem Screenshot unten entnehmen können.

Nachfolgend finden Sie einige geeignete Stile, die Sie stattdessen verwenden könnten.

Körper {
Schriftfamilie: "Arial", serifenlos;
Schriftgröße: 16px; 
Schriftstärke: 400; 
Zeilenhöhe: 1.5; 
Farbe: #FFFFFF;
Hintergrundfarbe: #121212; 
}

Und hier ist die resultierende Seite:

4. Vermeiden Sie gesättigte Akzentfarben

Gesättigte Farben können auf dunklen Hintergründen zu hell und verschwommen wirken. Verwenden Sie stattdessen Farben, die weniger intensiv und gedeckt sind. Auf diese Weise erstellen Sie eine Benutzeroberfläche mit sichtbarem Text.

Betrachten Sie zur Veranschaulichung diese beiden Schaltflächenstile:

/* Gesättigtes Blau */
.btn-gesättigt-blau {
Hintergrundfarbe: #121212;
Farbe: #0e0bf6;
}
/* Blau gedämpft */
.btn-stumm-blau {
Hintergrundfarbe: #121212; 
Farbe: #4c5ab3;
}

Die gesättigte blaue Farbe kann auf einem dunklen Hintergrund zu hell und schwer lesbar sein, während die gedämpfte blaue Farbe einen guten Kontrast bietet und leichter zu lesen ist.

Ein Werkzeug wie färbbar ist hilfreich, um Farbkombinationen zu erstellen, die den Zugänglichkeitsrichtlinien entsprechen.

5. Verwenden Sie negativen Raum, um das Erstellen einer schweren Benutzeroberfläche zu verhindern

Eine dunkle Farbpalette kann die Benutzeroberfläche schwer erscheinen lassen. Bei richtiger Verwendung kann Negativraum Ihnen dabei helfen, wichtige UI-Elemente hervorzuheben und Text einfach zu scannen. Ausreichender Abstand kann das Design auch sauberer und moderner machen.

Nimm zum Beispiel, Landingpage von Apple. Der Abstand zwischen den Elementen lässt die Seite sehr modern und optisch interessant aussehen, sodass wichtige Elemente hervortreten können.

6. Verwenden Sie verschiedene Farbschattierungen, um der Benutzeroberfläche Tiefe zu verleihen

Beim Entwerfen von hellen Benutzeroberflächen können Sie Schatten verwenden, um Elementen Tiefe und Höhe hinzuzufügen. Aufgrund der dunklen Hintergründe sind Schatten in dunklen UIs jedoch manchmal schwer zu erkennen.

Sie können Tiefe in einer dunklen Benutzeroberfläche erzielen, indem Sie mehrere Schattierungen dunkler Farben verwenden. Anstelle nur eines dunklen Hintergrunds können Sie beispielsweise verschiedenen Elementen wie Schaltflächen und Modals hellere Schattierungen derselben Farbe hinzufügen.

7. Stellen Sie sicher, dass Ihre Bilder mit der dunklen Benutzeroberfläche übereinstimmen

Sie müssen nicht dieselben Bilder für den hellen Modus und den dunklen Modus verwenden. Sie können den Dunkelmodus verwenden CSS-Medienabfragen um Bilder auszutauschen, die der dunklen Benutzeroberfläche entsprechen, wenn der Benutzer in den dunklen Modus wechselt.

Um beispielsweise ein bestimmtes Hintergrundmuster auf Bereiche Ihrer Seite im dunklen Modus anzuwenden, können Sie den Klassennamen .bgpattern verwenden und Ihrem Stylesheet den folgenden Code hinzufügen.

@Medien (bevorzugtes Farbschema: dunkel) {
/* Wende diesen Stil nur im dunklen Modus an */
.bgMuster {
Hintergrundbild: URL("/dunkel.jpg");
 }
}

Diese Medienabfrage stellt sicher, dass das referenzierte Hintergrundbild nur angezeigt wird, wenn das bevorzugte Farbschema des Benutzers dunkel ist.

Wann sollte eine dunkle Benutzeroberfläche verwendet werden?

Dunkle UI-Designs sind eine großartige Möglichkeit, Ihrer Website oder Anwendung eine moderne Ästhetik zu verleihen. Sie können auch die Belastung der Augen minimieren und die Batterielebensdauer verlängern. Allerdings sind dunkle UIs nicht für jede Anwendung geeignet, und Sie sollten immer die Marke und die Benutzerbasis berücksichtigen.

Im Allgemeinen eignen sich dunkle UIs am besten für Marken, die Luxus, Prestige, Minimalismus oder Mystery priorisieren. Sie können auch eine gute Wahl für Dashboards und Visualisierungstools sein.