Oder was Sie bei der Entwicklung eines Dark Modes für eine Anwendung oder Website beachten sollten
Das Jahr 2018 hat gezeigt, dass Dark Modes auf dem Weg sind. Jetzt, da wir die Hälfte des Jahres 2019 hinter uns haben, können wir mit Zuversicht sagen: Sie sind hier und sie sind überall.
Beginnen wir mit der Tatsache, dass der Dunkelmodus überhaupt kein neues Konzept ist. Es wird schon recht lange verwendet. Und es war einmal, lange Zeit sogar, dass dies das Einzige war, was sie verwendeten: Monitore waren vom Typ „Grün auf Schwarz“, aber nur, weil die Lumineszenzbeschichtung im Inneren bei Strahlung einen grünlichen Schimmer ausstrahlte .
Aber auch nach der Einführung von Farbmonitoren existierte der Dunkelmodus weiterhin. Warum ist das so?
Es gibt zwei Hauptgründe, warum es heute jeder Zweite eilig hat, seiner Bewerbung ein dunkles Thema hinzuzufügen. Zunächst einmal: Computer sind überall. Überall, wo wir hinschauen, ist eine Art Bildschirm. Wir nutzen unsere mobilen Geräte von morgens bis spät in die Nacht. Das Vorhandensein eines Dunkelmodus reduziert die Belastung Ihrer Augen, wenn Sie im Bett liegen, bevor Sie zum „letzten Mal“ durch Ihren sozialen Feed scrollen. Netzwerke. (Wenn Sie wie ich sind, könnte „letztes Mal“ eine dreistündige Schriftrolle bedeuten . Dunkler Modus? Ja, bitte! )
Ein weiterer Grund sind neue Display-Produktionstechnologien. Flaggschiffmodelle großer Unternehmen – Apple, Google, Samsung, Huawei – sind alle mit OLED-Bildschirmen ausgestattet, die im Gegensatz zu LCD-Displays keine Hintergrundbeleuchtung benötigen. Und das sind wirklich gute Nachrichten für Ihre Batterie. Stellen Sie sich vor, Sie sehen auf Ihrem Telefon das Bild eines schwarzen Quadrats. Bei einem LCD beleuchtet die Hintergrundbeleuchtung den gesamten Bildschirm, obwohl der größte Teil davon schwarz ist. Wenn Sie jedoch dasselbe Bild auf einem OLED-Display betrachten, werden die Pixel, aus denen das schwarze Quadrat besteht, einfach ausgeschaltet. Das heißt, sie verbrauchen überhaupt keine Energie.
Diese Art von Displays machen Dark Modes deutlich interessanter. Durch die Verwendung einer dunklen Oberfläche können Sie die Akkulaufzeit Ihres Geräts deutlich verlängern. . Dunkle Modi gehen natürlich mit Änderungen an der Benutzeroberfläche einher, also lasst uns unser Wissen auffrischen!
Dunkle Modi 101
Vorweg: „dunkel“ ist nicht gleich „schwarz“. Versuchen Sie nicht, einen weißen Hintergrund durch einen schwarzen zu ersetzen, da dies die Verwendung von Schatten unmöglich macht. Ein Design wie dieses wird superflach sein (im schlechten Sinne).
Es ist wichtig, die Grundprinzipien der Beschattung/Beleuchtung im Auge zu behalten. Höher gelegene Objekte sollten im Schatten heller sein und so die reale Beleuchtung und Schattierung simulieren. Dies erleichtert die Unterscheidung der verschiedenen Komponenten und ihrer Hierarchie.
Zwei identische graue Quadrate mit einem Schatten, eines auf einem 100 % schwarzen Hintergrund, das andere auf #121212. Je höher das Objekt steigt, desto heller wird es.
Bei einem dunklen Thema können Sie weiterhin mit Ihrer regulären Grundfarbe arbeiten, solange der Kontrast in Ordnung ist. Lassen Sie es uns anhand eines Beispiels erklären.
In dieser Benutzeroberfläche ist die Hauptaktion die große blaue Schaltfläche in der unteren Leiste. Beim Wechsel zwischen Hell- und Dunkelmodus gibt es keine Probleme mit dem Kontrast, die Schaltfläche ist immer noch ein Blickfang, das Symbol ist klar und im Großen und Ganzen ist alles in Ordnung.
Wenn dieselbe Farbe auf unterschiedliche Weise verwendet wird, beispielsweise in Texten, treten Probleme auf. Versuchen Sie, einen (viel) weniger gesättigten Farbton der Hauptfarbe zu verwenden, oder suchen Sie nach anderen Möglichkeiten, Markenfarben in die Benutzeroberfläche zu integrieren.
Links: Rot auf Schwarz sieht schlecht aus. Richtig: Sättigung reduzieren und alles sieht gut aus. — ca. Übersetzung
Das Gleiche gilt für alle anderen starken Farben, die Sie möglicherweise verwendet haben, z. B. Warn- oder Fehlerfarben. Google verwendet in seinem Browser eine 40 % weiße Ebenenüberlagerung über der Standardfehlerfarbe beim Wechsel in den Dunkelmodus. Dies ist ein ziemlich guter Ausgangspunkt, da dadurch die Kontrastniveaus verbessert werden, um den AA-Standards zu entsprechen. Sie können die Einstellungen natürlich jederzeit nach Belieben ändern, überprüfen Sie jedoch unbedingt die Kontraststufen. Ein nützliches Tool hierfür ist übrigens das Sketch-Plugin – , die genau zeigt, wie viel Kontrast zwischen zwei Schichten besteht.
Was ist mit dem Text?
Hier ist alles einfach: Nichts sollte 100 % schwarz und 100 % weiß sein und umgekehrt. Weiß reflektiert Lichtwellen aller Wellenlängen, Schwarz absorbiert. Wenn Sie 100 % weißen Text auf einem 100 % schwarzen Hintergrund platzieren, reflektieren die Buchstaben das Licht, verschmieren und werden schlechter lesbar, was sich negativ auf die Lesbarkeit auswirkt.
Das Gleiche gilt für einen 100 % weißen Hintergrund, der zu viel Licht reflektiert, um die Wörter vollständig hervorzuheben. Versuchen Sie, die weiße Farbe etwas abzuschwächen, verwenden Sie Hellgrau für Hintergründe und Text auf schwarzen Hintergründen. Dadurch wird die Belastung der Augen verringert und verhindert
Der Dunkelmodus ist da und wird nicht verschwinden
Die Zeit, die wir vor Bildschirmen verbringen, nimmt ständig zu und jeden Tag tauchen neue Bildschirme in unserem Leben auf, vom Aufwachen bis zum Einschlafen. Dabei handelt es sich um ein recht neues Phänomen; unsere Augen sind an diese Verlängerung der Bildschirmzeit am späten Abend noch nicht gewöhnt. Hier kommt der Dunkelmodus ins Spiel. Mit der Einführung dieser Funktion in macOS und Material Design (und höchstwahrscheinlich in iOS) gehen wir davon aus, dass sie früher oder später zum Standard in allen Anwendungen, sowohl auf Mobilgeräten als auch auf Desktops, werden wird. Und es ist besser, darauf vorbereitet zu sein!
Der einzige Grund, den Dunkelmodus nicht zu implementieren, besteht darin, dass Sie absolut zu 100 % sicher sind, dass Ihre Anwendung ausschließlich bei hellem Tageslicht verwendet wird. Dies kommt jedoch nicht oft vor.
Es lohnt sich, einige Dinge zu erwähnen, die über die zuvor zusammengefassten Grundprinzipien hinaus besondere Aufmerksamkeit bei der Implementierung des Dunkelmodus erfordern.
Hinsichtlich der Barrierefreiheit ist der Dunkelmodus nicht der bequemste, da der Kontrast in der Regel geringer ist, was wiederum die Lesbarkeit überhaupt nicht verbessert.
Aber stellen Sie sich vor, Sie machen sich fürs Bett fertig, Sie möchten wirklich schlafen, aber kurz bevor Sie einschlafen, fällt Ihnen ein, dass Sie jemandem eine superwichtige Nachricht schicken müssen, die nicht einmal eine Nacht warten kann. Du schnappst dir dein Telefon, schaltest es ein und AAAAAAH ... der helle Hintergrund deiner iMessage hält dich weitere 3 Stunden lang wach. Während heller Text auf dunklem Hintergrund nicht als besonders zugänglich gilt, wäre ein dunkler Modus in dieser Sekunde schon der Fall Erhöhen Sie den Komfort um eine Million. Es hängt alles von der Situation ab, in der sich der Benutzer gerade befindet.
Darum glauben wir automatischer Dunkelmodus so eine coole Idee. Es schaltet sich abends ein und morgens aus. Der Benutzer muss nicht einmal darüber nachdenken, was sehr praktisch ist. Twitter hat mit seinen Dark-Mode-Einstellungen ganze Arbeit geleistet. Darüber hinaus gibt es für alle diese OLED-Bildschirme sowohl einen Nur-Dunkel-Modus als auch einen noch dunkleren Modus, wodurch der Akku und alles, was damit zusammenhängt, gespart wird. Hier ist es wichtig zu beachten: Geben Sie dem Benutzer die Möglichkeit, jederzeit manuell zu wechseln: Es gibt nichts Schlimmeres, als die Benutzeroberfläche automatisch zu ändern, ohne die Möglichkeit, zurück zu wechseln.
Twitter verfügt über einen automatischen Dunkelmodus, der sich abends ein- und morgens ausschaltet.
Außerdem sollte man bei der Entwicklung eines Themes bedenken, dass manche Dinge einfach nicht dunkel gemacht werden können.
Nehmen Sie einen Texteditor wie Pages. Sie können die Benutzeroberfläche dunkel machen, aber das Blatt selbst bleibt immer weiß und simuliert so ein echtes Blatt Papier.
Seiten mit aktiviertem Dunkelmodus
Das Gleiche gilt für alle Arten von Editoren zur Inhaltserstellung, wie etwa Sketch oder Illustrator. Obwohl die Benutzeroberfläche dunkel gestaltet werden kann, ist die Zeichenfläche, mit der Sie arbeiten, standardmäßig immer weiß.
Skizzieren Sie im dunklen Modus und haben Sie trotzdem eine strahlend weiße Zeichenfläche.
Unabhängig von der App sind wir davon überzeugt, dass dunkle Modi in das von Ihnen verwendete Betriebssystem integriert sein werden. Daher ist es am besten, sich auf die Zukunft vorzubereiten. es wird dunkel sein.
Wenn Sie mehr über die Entwicklung dunkler Benutzeroberflächen erfahren möchten, lesen Sie unbedingt die Richtlinien , dies war unsere Hauptinformationsquelle für diesen Artikel.
Source: habr.com