So entwerfen Sie den dunklen Modus: Ein 2021-Leitfaden für Entwickler mobiler Apps

Dimmen Sie das Licht, entspannen Sie Ihre Augen und sparen Sie Energie. Der Dark Mode ist einer der größten Designtrends, und Weltklasse-Marken wie WhatsApp, Instagram, Google, Facebook und Apple sind bereits auf den Designzug des Dark Mode aufgesprungen.

D er offizielle Start von Android 10 und iOS 13 rückte die Dark-Theme-Benutzeroberfläche ins Rampenlicht. Sowohl Apple als auch Google widmen dem Dark Mode seit einem Jahr ihre Ressourcen und Aufmerksamkeit.

Bei richtiger Ausführung sind die Vorteile des Dunkelmodus beispiellos. Sie können bei schwachem Licht besser gelesen werden. Sie verringern die Belastung der Augen. Sie können den Batterieverbrauch basierend auf dem Bildschirm stark reduzieren.

Das dunkle Thema für eine App fertig zu machen, wird zu einer Pflicht für jedes Designunternehmen für mobile Apps. Nichtsdestotrotz können die Herausforderungen beim App-Design im Dunkelmodus nicht ignoriert werden. Es ist nicht möglich, Farben einfach wiederzuverwenden oder die Farben zu invertieren. Wenn Sie dies tun, erhalten Sie das genaue Gegenteil von dem, was Sie benötigen.

Wenn der Dunkelmodus falsch gestaltet ist, führt dies zu einer Überanstrengung der Augen und erschwert das Lesen bei schwachem Licht. Die geringe Helligkeit dieses Themas schafft ein Gefühl der Sicherheit in einer dunklen Umgebung. Stellen Sie daher beim Erstellen düsterer Themen sicher, dass sie unterhaltsam, ausgewogen und lesbar sind.

In diesem Artikel werden wir untersuchen, wie Designer mobiler Apps damit beginnen können, ihren Benutzern ein UI-Designerlebnis im Dunkelmodus bereitzustellen.

Wie entwerfe ich ein dunkles Thema für die Android-App?

Google verfügt über eine umfangreiche Dokumentationsunterstützung , die Designern beim Einstieg hilft, zu verstehen, wie man dunkle Designs für Android - Apps entwirft .

Der Tech-Riese hat vier Prinzipien aufgestellt, die die Dark -Theme-Benutzeroberfläche definieren und einen Ausgangspunkt für die Entwicklung des Dark-Mode -App-Designs bieten –

1. Grau gegen Schwarz

Als Erstes fällt Ihnen vielleicht auf, dass der Standardhintergrund für Apps im dunklen Design nicht schwarz, sondern dunkelgrau ist: #121212.

Es gibt viele Diskussionen darüber, warum wir uns für Grau oder Schwarz entschieden haben, zumal die Plattform in Android 10 einen schwarzen Hintergrund verwendet. Dies ist größtenteils ein Kompromiss zwischen Benutzerfreundlichkeit und Energieeinsparung.

Die Verwendung einer rein schwarzen #000000-Farbe als Hintergrund in der Plattform ermöglicht es den System-Apps und -Oberflächen, so wenig Strom wie möglich zu verbrauchen, wenn sie auf OLED-Displays geöffnet sind. Diese Systemoberflächen sind in der Regel recht einfach, normalerweise nur Text und einfache Symbole. Um Kontrastprobleme zu bekämpfen, können wir die Text- und Symbolfarben entsprechend anpassen.

In Apps können Ihre Oberflächen jedoch alles enthalten: komplexe farbenfrohe Vektoranimationen, leuchtende Bilder, kontrastierende Markenoberflächen und vieles mehr. Wenn Sie diese vor einem rein schwarzen Hintergrund platzieren, ist der resultierende Kontrast viel höher, was die Belastung der Augen erhöhen kann. Daher ist die Verwendung eines hellen oder grauen Hintergrunds die Lösung.

2. Liebe zum Detail in Farbe mit Akzenten

Bei der Definition eines Farbschemas für eine dunkle Benutzeroberfläche empfiehlt Google, begrenzte Farbakzente in Benutzeroberflächen mit dunklen Themen anzuwenden, sodass der Großteil des Platzes dunklen Oberflächen gewidmet ist. Außerdem macht die Beibehaltung des dunklen Hintergrunds die Fotovisualisierung tiefer und erzeugt einen ansprechenden Kontrast zur Akzentfarbe. Die Verwendung von geteilten Komplementärfarben kann hilfreich sein. Das Schema hat eine dominante Farbe und zwei Farben neben der Komplementärfarbe der dominanten Farbe. Dadurch wird der erforderliche Kontrast ohne die Spannung des komplementären Farbschemas erzielt.

3. Konservieren Sie die Batterielebensdauer

Dunkle Themen reduzieren die von Gerätebildschirmen abgegebene Leuchtdichte, erfüllen aber dennoch die Mindestfarbkontrastverhältnisse. Sie tragen zur Verbesserung der visuellen Ergonomie bei, indem sie die Augenbelastung verringern, die Helligkeit an die aktuellen Lichtverhältnisse anpassen und die Bildschirmnutzung in dunklen Umgebungen erleichtern – und das alles bei gleichzeitiger Schonung der Batterieleistung. Geräte mit OLED-Bildschirmen profitieren von der Möglichkeit, schwarze Pixel zu jeder Tageszeit auszuschalten oder die Verwendung von hellen Pixeln zu reduzieren.

4. Auswahl barrierefreier Farbkombinationen

Passen Sie regelmäßige Benutzer dunkler Designs (z. B. Personen mit Sehbehinderung) an, indem Sie die Farbkontraststandards für Barrierefreiheit erfüllen .

Es gibt verschiedene Eigenschaften, die sie in den Google Material Design Guidelines für das dunkle Farbschema und den Gesamtmodus behoben haben –

Höhe: Beim Entwerfen des dunklen Themas behalten die Komponenten die gleichen standardmäßigen Schattenkomponenten und Höhenstufen wie im Fall des hellen Themas bei. Was sich unterscheidet, ist die Ausleuchtung der Oberfläche von Höhenstufen.

Je höher eine Oberflächenerhebung, desto heller wäre die Oberfläche. Die Leichtigkeit wird durch eine halbtransparente Overlays-Anwendung gezeigt. Überlagerungen ermöglichen es auch, die Komponenten zu unterscheiden und die Schatten zu sehen.

Barrierefreiheit und Kontrast: Der Hintergrund im UI-Design mit dunklem Thema sollte dunkel genug sein, um weißen Text anzuzeigen. Sie müssen einen Kontrast von mindestens 15,8:1 zwischen Hintergrund und Text verwenden. Dadurch wird sichergestellt, dass der Haupttext den AA-Standard der WCAG von 4,5:5:1 erfüllt, wenn er auf Oberflächen in der höchsten Höhe hinzugefügt wird.

Farben: Designer sollten sich darauf konzentrieren, entsättigte Farben zu verwenden, da sie die Lesbarkeit erhöhen. Die Wahl der Primär- und Sekundärfarben muss auch von der Berücksichtigung sowohl heller als auch dunkler UI-Designs abhängen.

Heller Text auf dunklem Hintergrund: Wenn ein heller Text auf dunklem Hintergrund erscheint, muss er diese Deckkraftstufen verwenden:

• Hervorgehobener Text hat eine Deckkraft von 87 %
• Text mit mittlerer Betonung und Hinweistext haben eine Opazität von 60 %
• Deaktivierter Text hat eine Deckkraft von 38 %

Zustände : Zustände kommunizieren den Status interaktiver Elemente für Layouts oder Komponenten mit dunklem Design mithilfe der Overlays. Im dunklen Design müssen die Zustände die gleichen Overlay-Werte wie im standardmäßigen hellen Design verwenden. Es gibt zwei Container, die die Zustandsüberlagerungen erben: Surface und Primary .

Oberflächencontainer, die die Oberflächenfarbe verwenden, müssen eine Überlagerung anwenden, die der Farbe von Text oder Symbol entspricht. Für die Oberflächencontainer, die die Primärfarbe verwenden, muss die Zustandsüberlagerung weiß sein.

Wie entwerfe ich eine App für iOS im Dark Mode?

Mit dem Dunkelmodus hat Apple die Bedeutung des UI-Stils und der Farben in iOS überarbeitet. Sehen wir uns die Änderungen an, die Apple eingeführt hat, um Ihnen beim Entwerfen für den Dunkelmodus unter iOS 13 zu helfen.

Semantische Farben

Apple hat semantische Farben für häufig verwendete UI-Komponenten eingeführt, um das Gefühl und das Erscheinungsbild von iOS-Apps sowohl im hellen als auch im dunklen Modus auszugleichen. Diese Farben haben nicht den besten RGB-Wert; Stattdessen ändern sie den Stil der iOS-Oberfläche direkt. Darüber hinaus helfen diese semantischen Farbtöne im Dunkelmodus beim Umgang mit der Overlay-Farbe und dem Text.

Systemfarben

Apple hat neun vordefinierte Systemfarben mitgebracht , die ein dunkles systemweites und dynamisches Erscheinungsbild unterstützen. Daher passen sich diese Farben an ausgewählte Schnittstellenstile an.

Lebendigkeit und Blur-Effekte

Mit iOS 13 hat Apple 4 Blur-Effekte und 8 Vibrancy-Effekte eingeführt, die sich automatisch an den Stil der iOS-Oberfläche anpassen.

Hier sind die Unschärfe-Effekte im dunklen und hellen Modus:

Apple hat außerdem 4 Lebendigkeitseffekte in der iOS-Dunkelmodus-Typografie - Suite eingeführt, 3 in Overlay und 1 als Trennzeichen. Hier sind sie:

SF-Symbole

Apple bietet in seinen Human Interface Guidelines eine Sammlung von mehr als 1500 Symbolen für Produktentwickler und Designer zur Verwendung in ihren Anwendungen. Sie sehen im Dunkelmodus automatisch fantastisch aus, da sie sowohl für helle als auch für dunkle Benutzeroberflächen optimiert wurden.

Tipps für ein effektives dunkles Theme-Design für mobile Apps

Der Dunkelmodus ist eine der am häufigsten nachgefragten Funktionen der letzten Jahre. Sowohl Apple als auch Google haben das dunkle Thema zu einem wesentlichen Bestandteil der Benutzeroberfläche gemacht. Die reduzierte Leuchtdichte des Dunkelmodus bietet Sicherheit in dunklen Umgebungen und kann die Belastung der Augen minimieren.

Es gibt bestimmte Prozesse, die beim Erstellen der Dunkelmodus-Benutzeroberfläche ordnungsgemäß funktionieren müssen. Schließlich möchten Sie, dass Ihr Produkt erstaunlich ist, oder? Lassen Sie uns alle Kästchen ankreuzen, um eine Best Practices-Checkliste zum Entwerfen eines Dunkelmodus für Ihre App zu erhalten.

1. Vermeiden Sie die reine schwarze Farbe

Ein dunkles Thema darf nicht aus weißem Text auf schwarzem Hintergrund bestehen. Tatsächlich kann es schwierig sein, in einen kontrastreichen Bildschirm zu schauen.

Wenn Sie Ihrer App den Dunkelmodus hinzufügen, ist es am sichersten, Dunkelgrau als Primärfarbe für die Dunkelmoduskomponenten zu verwenden , da dies die Belastung der Augen verringert und es außerdem viel einfacher ist, Schatten auf einer grauen Oberfläche im Vergleich zu Schwarz zu sehen .

2. Vermeiden Sie die Verwendung von gesättigten Farben bei dunklen Themen

Die gesättigten Farben, die auf den hellen Oberflächen großartig aussehen, können vor dem dunklen Hintergrund vibrieren, wodurch der Text extrem schwer lesbar wird.

Sie sollten helle Farbtöne verwenden, da sie eine bessere Lesbarkeit bieten und die Benutzeroberfläche nicht unnötig ausdrucksstark machen, was unnötige Augenbelastung erspart.

3. Berücksichtigen Sie die emotionale Seite Ihres App-Designs

Wenn Sie ein dunkles Design für Ihre App entwerfen, besteht die Möglichkeit, dass Sie darauf abzielen müssen, das gleiche emotionale Gefühl Ihres Designs mit hellem Design auch in das dunkle Design zu übertragen.

Aber es ist unklug, dies zu tun. Denn letztendlich projizieren unterschiedliche Farben unterschiedliche Emotionen. Infolgedessen werden Ihre Farben im Dunkelmodus ein anderes Gefühl hervorrufen. Aus diesem Grund ist es notwendig, eine gemeinsame emotionale Basis für beide Themen-UIs zu finden.

4. Testen Sie das Design in beiden Erscheinungsbildern

So wie Ihre Benutzer zu unterschiedlichen Tageszeiten zwischen den beiden Themen-UIs wechseln würden, ist es notwendig, die App zweimal am Tag zu testen, um zu sehen, wie sie bei unterschiedlichen Lichtverhältnissen funktioniert. Und um sicherzustellen, dass es Ihren Kriterien entspricht.

5. Integrieren Sie den Dunkelmodus in Animationen und Illustrationen

Wenn Ihre App Animationen oder umfangreiche grafische Elemente enthält, müssen Sie sich auch auf deren Einführung im dunklen Design vorbereiten. Falls die Illustration ein Thema und einen Hintergrund enthält, wäre es gut, die Hintergrundfarben vollständig zu entsättigen, um die Aufmerksamkeit auf das Thema zu lenken.

6. Erfüllen Sie die Farbkontraststandards für Barrierefreiheit

Stellen Sie sicher, dass Ihre Inhalte im Dunkelmodus gut lesbar bleiben. Dunkle Themenoberflächen müssen dunkel genug sein, um weißen Text anzuzeigen. Google Material Design empfiehlt die Verwendung eines Kontrastniveaus von mindestens 15,8:1 zwischen Text und Hintergrund. Verwenden Sie Farbkontrast-Tools , um das Kontrastverhältnis zu testen.

7. Nicht einfach umkehren

Wenn Sie vom Standard- in den dunklen Modus wechseln, kann das ursprüngliche Design nützliche visuelle Signale liefern. Um ein dunkles Thema zu erstellen, drehen Sie nicht einfach die Farben um. Sie könnten Farben mit psychologischer Bedeutung in bedeutungslose, milde Töne verwandeln. Entscheiden Sie sich bewusst für die verwendeten Farben.

8. Verwenden Sie die richtigen „Ein“-Farben

„On“-Farben befinden sich über den wichtigsten Oberflächen und Elementen. Normalerweise werden sie für Text verwendet. Für ein dunkles Thema ist die Standardfarbe „Ein“ reines Weiß. Aber es ist eine helle Farbe und würde vor dunklen Hintergründen visuell vibrieren. Aus diesem Grund schlägt Google Material Design vor, ein etwas dunkleres Weiß zu verwenden.

• Deaktivierter Text verwendet eine Dunkelheit von 38 %.
• Bei 60 % wird Text mit mittlerer Betonung ausgeführt.
• Hervorgehobener Text muss eine Schwärzung von 87 % aufweisen.

9. Tief werden

Je höher eine Schicht ist, desto leichter sollte sie sein. Dadurch wird im dunklen Modus eine visuelle Hierarchie erstellt, die von den am häufigsten verwendeten Elementen in Ihrer Anzeige bis zu den am wenigsten reicht.

Damit wissen Sie jetzt alles, was Sie über das Entwerfen der Dark-Mode-Version Ihrer App wissen müssen. Der nächste umsetzbare Schritt besteht darin, mit einem Expertenteam zu sprechen, das die Benutzeroberfläche in Anwendungen implementiert hat. Sie sollten dies als eine Möglichkeit sehen, Ihrer Absicht, Ihren Endbenutzern ein gesundes Erlebnis zu bieten, näher zu kommen.

Einpacken

Damit wissen Sie jetzt alles, was Sie über das Entwerfen der Dark-Mode-Version Ihrer App wissen müssen. Das App-Design im Dunkelmodus ist eine Revolution, die gerade in Gang kommt. Das heißt, es ist die perfekte Zeit, um in die Dunkelheit zu gehen und kreativ zu werden. Der nächste umsetzbare Schritt besteht darin, mit einem Team von UI-Experten zu sprechen, die die UI in Anwendungen implementiert haben, und sich einen echten Überblick über die Bedeutung des UI-Designs in der App-Entwicklung zu verschaffen . Sie sollten dies als eine Möglichkeit sehen, Ihrer Absicht, Ihren Endbenutzern ein gesundes Erlebnis zu bieten, näher zu kommen.

Möchten Sie mehr über das App-Design im Dunkelmodus erfahren? Treten Sie mit den Experten in der App-Entwicklung in Kontakt .

Häufig gestellte Fragen zum Entwerfen von Dark-Mode-Apps

1. Ist der Dunkelmodus besser für das Auge?

Ja. Das App-Design im Dark Mode verhindert Ermüdung und Austrocknung der Augen bei längerer Handynutzung. Da kein Kontrast vorhanden ist, wird es für Benutzer einfacher, im Dunkeln durch die Anwendung zu scrollen.

2. Wie entwerfen Sie für den Dunkelmodus?

Während sowohl Apple als auch Google ihre Dokumentation haben, die den Prozess des Entwerfens einer Dark-Theme-Anwendung erklärt, gibt es einige Tipps, die berücksichtigt werden müssen. Einige von ihnen sind: Vermeiden Sie durchgehend schwarze Farbe, behalten Sie den emotionalen Aspekt der Verwendung von schwarzer Farbe im Auge, sehen Sie sich den Übergangsunterschied zwischen dem App-Design im weißen und dunklen Modus an.

3. Gibt es so etwas wie einen ungesunden Dunkelmodus?

Ja, es gibt Fälle, in denen der Dunkelmodus mehr schaden als nützen kann. Sie können einen Trübungseffekt hervorrufen oder, wenn dem Kontraststil nicht genug Aufmerksamkeit geschenkt wird, die Augen massiv belasten.