Wie kann ich den dunklen Modus für Ihre mobile App im Jahr 2021 effektiv gestalten?

In den letzten Jahren waren dunkle Themen die am häufigsten nachgefragten Funktionen im App-Design. Im vergangenen Jahr startete macOS den Dark Mode und Google erklärte auf der Google I / O 2019-Konferenz eine universelle Verbreitung von Dark Theme. Obwohl es früher selten war, sind jetzt dunkle Themen die neuesten Trends und weit verbreitet.

Wenn es richtig gemacht wird, haben dunkle Themen viele Vorteile. Sie können bei schlechten Lichtverhältnissen leichter abgelesen werden. Sie senken die Überanstrengung der Augen. Sie können den Batterieverbrauch je nach Bildschirm stark senken.

Das Dark Theme fertig zu machen ist für einen Designer für seine App wichtig. Trotzdem ist es nicht einfach, ein schönes dunkles Thema zu erstellen. Sie können Farben nicht einfach wiederverwenden oder die Schattierungen umkehren. Wenn Sie dies tun, erhalten Sie das Gegenteil von dem, was Sie brauchen.

Das falsche Entwerfen des Dunkelmodus erhöht die Belastung der Augen und erschwert das Lesen bei schlechten Lichtverhältnissen. Sowohl Google als auch Apple haben das dunkle Thema zu einem wichtigen Bestandteil der Benutzeroberfläche gemacht. Die geringe Helligkeit dieses Themas bietet Sicherheit in dunkler Umgebung. Achten Sie daher beim Entwerfen dunkler Themen darauf, dass diese angenehm, ausgewogen und lesbar sind.

Warum sollten Sie sich für den dunklen Modus entscheiden?

In diesem Blog diskutieren wir einige Tipps, die Sie beim Entwerfen eines dunklen Themas für Ihre App unterstützen. Lassen Sie uns vorher die Bedeutung des Dunkelmodus kennen:

1. Ein beliebter Trend

Der Dunkelmodus ist eines der anspruchsvollsten Designelemente, die seit dem letzten Jahr im Trend liegen. Es entwickelt sich Tag für Tag gemäß den aktuellen Marktanforderungen.

2. Verlängert die Batterielebensdauer

Der Dunkelmodus einer Anwendung spart die Akkulaufzeit eines Geräts. Das dunkler Modus funktioniert Erstaunlicherweise auf OLED-Bildschirmen Um die Akkulaufzeit des Geräts zu verlängern, bestätigte Google.

3. Löst Gesundheits- und Wellnessprobleme

Die Apps mit zu viel Helligkeit sind für Ihre Augen schädlich, wenn sie auf lange Sicht verwendet werden. Hier kommen die Vorteile des Dunkelmodus. Es entspannt Ihre Augen, um Anwendungen im Dunkeln zu öffnen und zu bearbeiten, und löst diese Gesundheits- und Wellnessprobleme.

Auswirkungen des ungesunden dunklen Modus auf Ihre Gesundheit

Wenn Sie einen weißen Text auf dem schwarzen Hintergrund lesen, wird die Iris unter Druck gesetzt, da sie sich mehr öffnet und mehr Licht empfängt. Durch die Verformung der Linse entsteht ein krauser Fokus in Ihren Augen. Dies ist als Fuzzing-Effekt oder Halation bekannt, was eine der größten Herausforderungen beim Design von Dark-Mode-Apps darstellt.

Fuzzing-Effekt

Wie der Name schon sagt, ist der ungesunde Dunkelmodus aufgrund seines hohen Kontrasts für Ihre Augen hart und kann sie sehr schnell belasten. Wenn Sie beispielsweise Ihren Laptop oder Ihr Telefon bei höchster Dunkelheit verwenden, wissen Sie bereits, wie schmerzhaft es ist, den gesamten Text zu lesen.

Wie bereits erwähnt, verlängert der Dunkelmodus die Batterielebensdauer. Es betrifft also nur die Geräte mit dem OLED-Bildschirm. Wenn Benutzer diesen Auswirkungen ausgesetzt sind, fühlen sie sich durch ihre digitale Erfahrung erschöpft. Aus diesem Grund ist eine ordnungsgemäße Gestaltung des Dunkelmodus erforderlich.

Nachdem Sie nun wissen, wie sich ungesundes oder unsachgemäßes Design des Dunkelmodus auf Ihre Gesundheit und Ihr Wohlbefinden auswirkt, können Sie mit der nächsten Phase dieses Blogs fortfahren!

Welche Änderungen hat Apple vorgenommen, um den dunklen Modus unter iOS 13 zu entwerfen?

Im dunklen Modus hat Apple den Kontext von Farben und UI-Stil in iOS zurückgegeben. Lassen Sie uns die Änderungen untersuchen, die Apple vorgenommen hat, um Ihnen beim Entwerfen des dunklen Modus unter iOS 13 zu helfen:

1. Systemfarben

Apple hat neun vordefinierte gebracht Systemfarben das unterstützt dunkles systemweites Aussehen und Dynamik. Daher werden diese Farben an ausgewählte Schnittstellenstile angepasst.

2. Semantische Farben

Um das Gefühl und das Erscheinungsbild der iOS-Apps sowohl im hellen als auch im dunklen Modus auszugleichen, hat Apple semantische Farben für normalerweise implementierte UI-Komponenten eingeführt.

Diese Farben weisen nicht den optimalen RGB-Wert auf. Sie ändern sich direkt in den iOS-Schnittstellenstil. Darüber hinaus helfen diese semantischen Farben beim Umgang mit der Überlagerungsfarbe und dem Text im Dunkelmodus.

3. SF-Symbole

In den Richtlinien für Benutzeroberflächen stellt Apple über 1500 bereit SF-Symbole für Designer und Entwickler zur Verwendung in ihren Apps. Im dunklen Modus sehen sie automatisch großartig aus, weshalb sie sowohl für die dunkle als auch für die helle Benutzeroberfläche optimiert wurden.

4. Unschärfe- und Lebendigkeitseffekte

Apple hat mit iOS 13 8 Lebendigkeitseffekte und 4 Unschärfeeffekte gestartet, die sich automatisch in den Stil der iOS-Benutzeroberfläche ändern. Darüber hinaus hat Apple 4 Lebendigkeitseffekte im iOS-Dunkelmodus-Typografie-Anzug eingeführt – 1 für Trennzeichen und 3 für das Overlay.

So gestalten Sie den dunklen Modus für mobile Apps effektiv

Um Ihnen eine gesunde Benutzeroberfläche zu bieten, haben sich sowohl Google als auch Apple auf ihre Designstandards für den Dunkelmodus konzentriert. Wie oben erwähnt, kann die Nichtbeachtung des Designthemas im dunklen Modus jedoch zu einer schlechten Erfahrung führen.

Dabei müssen Sie die folgenden Tipps befolgen, um den Dunkelmodus für mobile Apps effektiv zu gestalten:

1. Verwenden Sie keine gesättigten Farben

Obwohl gesättigte Farben auf hellen Oberflächen fantastisch aussehen, können sie visuell gegen dunkle Oberflächen vibrieren und die Lesbarkeit erschweren. Um den Kontrast gegen die dunkle Oberfläche ausreichend zu machen, sättigen Sie daher die Hauptfarben.

gesättigte Farben

Verwenden Sie Farben im Bereich von 200 bis 50 (hellere Töne), da diese auf dunklen Themenoberflächen besser lesbar sind. Hellere Töne machen die Benutzeroberfläche Ihrer App nicht weniger ausdrucksstark, behalten jedoch den relevanten Kontrast bei, ohne Ihre Augen zu schmerzen.

2. Ferne Oberflächen dunkler machen

Einer Leitregel folgen die Hintergrundfarben in dunklen Themen für Benutzeroberflächenelemente: Wenn sich die Ebene näher am Benutzer befindet, wird die Oberfläche heller. Bei diesem Modell wird eine Lichtquelle von oben gegossen, die einem Ambiente entspricht. Wenn die Ebene entfernt ist, wird sie weniger hell und tritt mehr in den Hintergrund.

Der Designer kann versucht sein, das aktuelle Lichtthema umzukehren, während er ein dunkles Thema erstellt. Trotzdem würden engere Oberflächen dunkel und entfernte hell werden. Durch das Brechen der Körperlichkeit würde sich dies unnatürlich anfühlen.

Verwenden Sie stattdessen nur die primäre Oberflächenfarbe Ihres Lichtthemas. Invertieren Sie dann die Farbe, um die primäre Oberflächenfarbe Ihres dunklen Themas zu erstellen. Machen Sie diese Farbe nun für entfernte Oberflächen dunkel und für engere Oberflächen hell.

3. Verwenden Sie “Ein” -Farben für Text

“Ein” -Farben befinden sich auf wichtigen Oberflächen und Elementen. Normalerweise werden sie für Text verwendet. Für ein dunkles Thema ist die Standardfarbe “Ein” reines Weiß (#FFFFFF). Aber es ist eine helle Farbe und würde vor dunklem Hintergrund visuell vibrieren. Aus diesem Grund empfiehlt Google Material Design die Verwendung eines etwas dunkleren Weiß.

  • Deaktivierter Text verwendet eine Dunkelheit von 38%.
  • Bei 60% wird Text mit mittlerer Betonung ausgeführt.
  • Text mit hoher Betonung muss eine Dunkelheit von 87% haben.

4. Verringern Sie die Verwendung großer Blöcke mit hellen Farben

Manchmal verwenden wir große helle Farbblöcke in hellen Themen. Im Allgemeinen ist dies in Ordnung: Dennoch werden unsere wichtigsten Komponenten bald heller.

Bei dunklen Themen funktioniert dies jedoch nicht: Die großen Blöcke der hellen Farbe konzentrieren sich stärker auf alle erforderlichen Elemente.

5. Verwenden Sie keine reine schwarze Farbe

Das dunkle Thema Ihrer App sollte nicht aus vollständig weißem Text auf schwarzem Hintergrund bestehen. Es kann schwierig sein, einen kontrastreichen Bildschirm zu erkunden.

Verwenden Sie Dunkelgrau als Hauptfarbe für die Elemente des Dunkelmodus, wenn Sie den Modus zu Ihrer Anwendung hinzufügen. Die Verwendung von Dunkelgrau ist sicher, da es die Augenbelastung verringert und es für Sie im Vergleich zu Schwarz einfacher ist, Schatten auf einer grauen Oberfläche zu betrachten.

6. Denken Sie über den emotionalen Aspekt Ihres Designs nach

Wenn Sie das dunkle Thema für Ihre aktuelle App entwerfen möchten, müssen Sie möglicherweise einen ähnlichen Bereich von Emotionen im dunklen Modus kommunizieren. Sie dürfen dies jedoch nicht tun, da Farben aufgrund ihres Hintergrunds unterschiedlich erkannt werden.

Daher kann ein dunkles Thema nicht ähnlich wie das helle Thema kommunizieren. Infolgedessen lösen beide Themen unterschiedliche Emotionen aus.

Leistungs-Dashboard

Anstatt zu versuchen, dies zu lösen, sollten Sie dies besser für die Erkennung Ihres Produkts nutzen. Ein dunkler Modus sollte nicht unbedingt immer aus dem aktuellen hellen Thema abgeleitet werden.

7. Vertiefen Sie die Farben des Themas

Wenn Sie Ihren Text moderieren, um Lichthofbildung und Ermüdung der Augen zu vermeiden, sehen Ihre farbigen Schaltflächen und Akzente möglicherweise sehr hell aus. Und jetzt müssen Sie diese Farben ändern, um in einem dunklen Thema besser arbeiten zu können. Verringern Sie also zunächst die Helligkeit, damit diese Farben den näheren Text nicht übertreffen. Maximieren Sie dann die Sättigung, damit sie einen Charakter haben.

Wenn Sie beispielsweise das Purpur direkt aus dem Lichtthema verwenden, erscheint es gegenüber dem näheren Text sehr hell. Im eigentlichen dunklen Thema können Sie diese Farbe vertiefen, damit sich die Benutzer auf ihren Text konzentrieren können.

8. Fügen Sie dunkle Themen in Illustrationen und Animationen ein

Wenn Ihre Anwendung aus umfangreichen grafischen Komponenten wie Animationen besteht, müssen Sie auch für deren Änderung in einem dunklen Thema bereit sein.

Wenn die Abbildung aus einem Hintergrund und einem Motiv besteht, sollten Sie die Hintergrundfarben besser vollständig entsättigen, um den Fokus auf das Motiv zu richten.

9. Untersuchen Sie Ihr Design sowohl in dunklen als auch in hellen Designs

Sehen Sie sich das Erscheinungsbild Ihrer Benutzeroberfläche in beiden Themen an und ändern Sie Ihre Designs nach Bedarf, um jedem Thema gerecht zu werden. Testen Sie Ihr Produkt nach der Dämmerung mit strahlendem Licht.

10. Erlauben Sie den Benutzern, den Dunkelmodus ein- oder auszuschalten

Es ist aufregend, dem System zu ermöglichen, zu entscheiden, wann das dunkle Thema ein- oder ausgeschaltet werden soll, nicht wahr? Trotzdem kann diese Entscheidung auch zu einer schlechten Benutzererfahrung führen. Auf diese Weise können Sie die Kontrolle über Benutzer übernehmen und dem System ermöglichen, Entscheidungen für sie zu treffen.

Dabei sollten Sie ein dunkles Thema nicht automatisch aktivieren. Ermöglichen Sie Benutzern, mithilfe der Benutzeroberflächensteuerung vom regulären Thema in den dunklen Modus zu wechseln. Benutzer müssen in der Lage sein, den Modus je nach ihren Anforderungen manuell auszuwählen. Sie sollten den Moduswechsler sorgfältig platzieren und gestalten.

11. Verwenden Sie das Höhenwerkzeug

Wenn Sie eine Benutzeroberfläche für dunkle Themen entwerfen möchten, müssen Sie eine Hierarchie erstellen und die erforderlichen Komponenten in Ihrem Layout hervorheben, ähnlich wie bei der Gestaltung heller Themen. Das Elevation-Tool dient zur Kommunikation der Komponentenhierarchie. Sie können Schatten im Lichtmodus verwenden, um die Höhe auszudrücken.

Wenn die Oberfläche höher wird, wirft sie einen breiteren Schatten. Eine ähnliche Methode würde im dunklen Thema nicht funktionieren, da es schwierig ist, den Schatten vor dem dunklen Hintergrund zu sehen. Vielmehr kannst du die Oberfläche jedes Levels beleuchten.

In dunklen Themen, die mit Material erstellt wurden, werden Elemente und erhöhte Oberflächen mit Überlagerungen eingefärbt. Wenn die Höhe einer Oberfläche höher ist, wird die Oberfläche heller.

12. Farbkontrastprinzipien für Barrierefreiheit erfüllen

Stellen Sie sicher, dass Ihre Inhalte im Dunkelmodus gut lesbar bleiben. Oberflächen des dunklen Themas sollten dunkel genug sein, um den weißen Text darzustellen.

Gemäß Google Material Design Empfehlung, Sie sollten eine Kontraststufe von mindestens 15,8: 1 zwischen Hintergrund und Text verwenden.

mieten ui ux designer banner

Einpacken

Dunkle Themen haben viele Vorteile und sind heutzutage sehr beliebt. Trotzdem sind sie schwer richtig umzusetzen. Die einfache Möglichkeit, Farbtöne umzukehren und Farben wiederzuverwenden, maximiert die Überanstrengung der Augen, erschwert das Lesen bei schlechten Lichtverhältnissen und kann sogar Daten und visuelle Hierarchien beschädigen.

Nachdem Sie nun alles wissen, um den Dunkelmodus für Ihre mobile App effektiv zu gestalten, sollten Sie sich an das professionelle UI / UX-Designteam wenden, das die Benutzeroberfläche in Apps ausgeführt hat. Sie müssen dies als einen Ansatz betrachten, um Ihrem Bestreben, eine gesunde Benutzererfahrung zu bieten, näher zu kommen.

FAQs zum Dark Mode Design

Warum sollten Sie sich für den Dunkelmodus entscheiden?

Es gibt viele Gründe, sich für einen dunklen Modus zu entscheiden, da dieser einer der anspruchsvollsten Designtrends ist, die Batterielebensdauer verlängert, Gesundheits- und Wellnessprobleme löst usw.

Welche Auswirkungen hat ein ungesunder Dunkelmodus auf Ihre Gesundheit?

Wie der Name schon sagt, ist der ungesunde Dunkelmodus wegen seines hohen Kontrasts schlecht für die Augen und kann sie sehr schnell belasten.

Was sind einige nützliche Tipps zum Entwerfen des Dunkelmodus?

Sie müssen sich auf einige Aspekte konzentrieren, z. B. auf die Verwendung gesättigter Farben verzichten, entfernte Oberflächen dunkler machen, ‘Ein’-Farben für Text verwenden, das Design in dunklen und hellen Themen überprüfen, das Höhenwerkzeug verwenden usw.

Similar Posts

Leave a Reply