Dunkle Zeiten brechen an

Was Sie bei der Entwicklung des Dunkelmodus für eine App oder eine Website beachten sollten

Das Jahr 2018 hat gezeigt: Dunkelmodi sind auf dem Vormarsch. Jetzt, wo wir bereits auf halbem Weg ins Jahr 2019 sind, können wir mit Sicherheit sagen: Sie sind hier und sie sind überall.

Beispiel eines alten Monitors «grün-auf-schwarz»

Beginnen wir damit, dass der Dunkelmodus kein neues Konzept ist. Er wird schon seit langem genutzt. Einst war er tatsächlich die einzige Option: Monitore waren in der Art «grün-auf-schwarz», und das lag nur daran, dass die fluoreszierende Beschichtung im Inneren ein grünliches Licht abstrahlte, wenn sie angestrahlt wurde.

Doch selbst nach der Einführung farbiger Monitore lebte der Dunkelmodus weiter. Warum ist das so?

Es gibt zwei Hauptgründe, die erklären, warum heute jeder Zweite eilig einen Dunkelmodus in seine App integrieren möchte. Zunächst einmal: Computer sind überall. Wohin wir auch schauen, überall gibt es einen Bildschirm. Wir nutzen unsere mobilen Geräte von früh bis spät. Ein Dunkelmodus verringert die Augenbelastung, wenn man abends im Bett „zum letzten Mal“ durch den Social-Media-Feed scrollt. (Wenn Sie wie ich sind, kann „zum letzten Mal“ bedeuten, dass man drei Stunden scrollt. R/EngineeringPorn. Dunkelmodus? Na klar, gerne!

Ein weiterer Grund sind die neuen Display-Technologien. Die Spitzenmodelle großer Unternehmen – Apple, Google, Samsung, Huawei – sind alle mit OLED-Displays ausgestattet, die im Gegensatz zu LCD-Displays keine Hintergrundbeleuchtung benötigen. Das ist wirklich eine gute Nachricht für Ihre Batterielebensdauer. Stellen Sie sich vor, Sie betrachten ein Bild eines schwarzen Quadrats auf Ihrem Telefon; mit einem LCD-Display wird die Hintergrundbeleuchtung den gesamten Bildschirm beleuchten, obwohl ein großer Teil davon schwarz ist. Aber bei der Betrachtung des gleichen Bildes auf einem OLED-Display werden die Pixel, aus denen das schwarze Quadrat besteht, einfach abgeschaltet. Das bedeutet, sie verbrauchen überhaupt keine Energie.

Diese Displaytypen machen Dunkelmodi um ein Vielfaches interessanter. Mit einer dunklen Benutzeroberfläche können Sie die Batterielebensdauer Ihres Geräts erheblich verlängern. Sehen Sie sich die Fakten und Zahlen vom Android Dev Summit im November letzten Jahres an, um sich selbst zu überzeugen.. Dunkelmodi gehen natürlich Hand in Hand mit Änderungen der Benutzeroberfläche, also lassen Sie uns unser Wissen auffrischen!

Dunkelmodi 101

Zunächst: „dunkel“ ist nicht gleich „schwarz“. Versuchen Sie nicht, den weißen Hintergrund durch Schwarz zu ersetzen, da dies die Verwendung von Schatten unmöglich macht. Ein solches Design wird super flach sein (im schlechten Sinne).

Es ist wichtig, die grundlegenden Prinzipien der Schattierung/Beleuchtung zu beachten. Objekte, die höher angeordnet sind, sollten in den Schatten heller sein und echtes Licht und Schatten imitieren. Auf diese Weise ist es einfacher, verschiedene Komponenten und deren Hierarchie zu unterscheiden.

Zwei gleichfarbige graue Quadrate mit Schatten, eines auf einem 100% schwarzen Hintergrund, das andere auf #121212. Wenn das Objekt angehoben wird, erhält es einen helleren Grauton.

In einem dunklen Thema kann man immer noch mit Ihrer gewohnten Hauptfarbe arbeiten, solange der Kontrast stimmt. Lassen Sie es uns an einem Beispiel erklären.

In dieser Benutzeroberfläche ist die Hauptaktion die große blaue Schaltfläche in der unteren Leiste. Hier gibt es kein Problem mit dem Kontrast beim Wechsel zwischen hellen oder dunklen Modus, die Schaltfläche zieht weiterhin die Aufmerksamkeit auf sich, das Symbol ist klar, insgesamt ist alles gut.

Wenn dieselbe Farbe unterschiedlich verwendet wird, zum Beispiel im Text – wird es Probleme geben. Versuchen Sie, einen (deutlich) weniger gesättigten Farbton der Hauptfarbe zu verwenden oder suchen Sie nach anderen Wegen, die Markenfarben in die Benutzeroberfläche zu integrieren.

Links: Rot auf Schwarz sieht schlecht aus. Rechts: Reduzieren wir die Sättigung – und alles sieht gut aus.

Das Gleiche gilt für alle anderen gesättigten Farben, die Sie möglicherweise verwendet haben, wie zum Beispiel Warn- oder Fehlermeldungen. Google verwendet eine weiße Schicht mit 40% Deckkraft über der Standard-Fehlerfarbe in seinen Material Design-Richtlinien beim Wechsel in den Dunkelmodus. Dies ist ein ziemlich guter Ausgangspunkt, da es die Kontrastniveaus auf das AA-Niveau verbessern wird. Sie können natürlich jederzeit Ihre Einstellungen nach Belieben ändern, aber vergessen Sie nicht, die Kontrastniveaus zu überprüfen. Übrigens ist ein nützliches Werkzeug für dieses Ziel das Plugin für Sketch – Stark, das genau zeigt, wie viel Kontrast zwischen zwei Ebenen besteht.

Was ist mit dem Text?

Hier ist alles einfach: Nichts sollte 100 % schwarz auf 100 % weiß und umgekehrt sein. Weiß reflektiert Lichtwellen aller Längen, Schwarz absorbiert. Wenn Sie 100 % weißen Text auf 100 % schwarzem Hintergrund platzieren, werden die Buchstaben Licht reflektieren, unscharf werden und weniger leicht lesbar sein, was sich negativ auf die Lesbarkeit auswirkt.

Das gilt auch für 100 % weißen Hintergrund, der zu viel Licht reflektiert, um sich vollständig auf die Worte zu konzentrieren. Versuchen Sie, die weiße Farbe etwas abzumildern; verwenden Sie hellgrau für Hintergründe und Texte auf schwarzen Hintergründen. Das reduziert die Augenbelastung und verhindert deren Überanstrengung.

Der Dunkelmodus ist hier und wird nicht verschwinden.

Die Menge an Zeit, die wir vor Bildschirmen verbringen, wächst ständig und jeden neuen Tag tauchen neue Bildschirme in unserem Leben auf, vom Aufwachen bis zum Einschlafen. Das ist ein ziemlich neues Phänomen; unsere Augen sind noch nicht an den Anstieg der Bildschirmzeit spät am Abend gewöhnt. Hier kommt der Dunkelmodus ins Spiel. Nach der Einführung dieser Funktion in macOS und Material Design (und höchstwahrscheinlich auch in iOS) glauben wir, dass sie früher oder später der Standard in allen Anwendungen, sowohl mobil als auch auf dem Desktop, wird. Und es ist besser, darauf vorbereitet zu sein!

Der einzige Grund, den Dunkelmodus nicht zu implementieren, ist, wenn Sie sich zu 100 % sicher sind, dass Ihre Anwendung ausschließlich bei hellen Tageslichtbedingungen verwendet wird. Das kommt allerdings selten vor.

Es gibt einige Dinge zu erwähnen, die besondere Aufmerksamkeit bei der Implementierung des Dunkelmodus erfordern, abgesehen von den grundlegenden Prinzipien, die zuvor zusammengefasst wurden.

Aus Sicht der Barrierefreiheit ist der Dunkelmodus nicht der benutzerfreundlichste, da der Kontrast insgesamt niedriger ist, was die Lesbarkeit nicht verbessert.

Quelle

Aber stellen Sie sich vor, dass Sie sich auf den Schlaf vorbereiten, sehr müde sind, aber kurz bevor Sie einschlafen, erinnern Sie sich daran, jemandem eine super wichtige Nachricht zu senden, die nicht einmal eine Nacht warten kann. Sie nehmen Ihr Telefon, schalten es ein und AAAAAHHH… der helle Hintergrund Ihres iMessage wird Sie noch für 3 Stunden wachhalten. Während heller Text auf dunklem Hintergrund nicht als maximal barrierefrei gilt, würde das Vorhandensein eines Dunkelmodus in diesem Moment den Komfort um eine Million erhöhen. Alles hängt von der Situation ab, in der sich der Benutzer gerade befindet.

Deshalb glauben wir. automatischer Dunkelmodus eine so coole Idee. Er schaltet sich abends ein und morgens aus. Der Benutzer muss sich nicht einmal Gedanken darüber machen, was sehr praktisch ist. Twitter hat großartige Arbeit bei den Einstellungen des Dunkelmodus geleistet. Außerdem gibt es nicht nur einen einfachen Dunkelmodus, sondern auch einen noch dunkleren Modus für all diese OLED-Bildschirme, um den Akku zu schonen und alles, was damit verbunden ist. Es ist wichtig zu beachten: Geben Sie dem Benutzer die Möglichkeit, manuell zu wechseln, wann immer er möchte: Es gibt nichts Schlimmeres, als eine automatische Änderung der Benutzeroberfläche ohne die Möglichkeit, zurückzuwechseln.

Twitter hat einen automatischen Dunkelmodus, der abends aktiviert und morgens deaktiviert wird.

Bei der Entwicklung eines Themas sollte man auch bedenken, dass einige Dinge einfach nicht dunkel gestaltet werden können.

Nehmen Sie einen Texteditor, zum Beispiel Pages. Sie können die Benutzeroberfläche dunkel gestalten, aber das Blatt wird immer weiß bleiben, um ein echtes Blatt Papier zu simulieren.

Pages mit aktivem Dunkelmodus

Das gleiche gilt für alle Arten von Content-Erstellern, wie Sketch oder Illustrator. Obwohl die Benutzeroberfläche dunkel gestaltet werden kann, wird die Arbeitsfläche, mit der Sie arbeiten, standardmäßig immer weiß sein.

Sketch im Dunkelmodus und die Arbeitsfläche bleibt hellweiß.

Deshalb glauben wir, dass Dunkelmodi nativ für Ihr Betriebssystem sein werden, egal welche Anwendung Sie verwenden, und es ist besser, sich im Voraus auf die Zukunft vorzubereiten. es wird dunkel sein. 

Wenn Sie mehr über die Entwicklung dunkler Benutzeroberflächen erfahren möchten, sollten Sie unbedingt die Richtlinien durchsehen Material Design, das war unsere Hauptinformationsquelle für diesen Artikel.

Quelle: habr.com