Oder was man bei der Entwicklung eines Dunkelmodus für Apps oder Websites beachten sollte
Das Jahr 2018 hat gezeigt: Dunkelmodi sind auf dem Vormarsch. Jetzt, da wir bereits auf halbem Weg ins Jahr 2019 sind, können wir mit Sicherheit sagen: Sie sind da und überall.
Fangen wir damit an, dass der Dunkelmodus kein neues Konzept ist. Es wird schon lange verwendet. Tatsächlich wurde früher fast ausschließlich der Dunkelmodus genutzt: Monitore hatten die Darstellung "grün auf schwarz", und zwar nur, weil die fluoreszierende Beschichtung im Inneren ein grünliches Licht abstrahlte, wenn sie dem Strahlungslicht ausgesetzt war.
Doch selbst nach der Einführung von Farbmonitoren lebte der Dunkelmodus weiter. Warum ist das so?
Es gibt zwei Hauptgründe, warum heute jeder zweite Mensch darauf drängt, ein dunkles Thema in seine Anwendung zu integrieren. Erstens: Computer sind überall. Wo auch immer wir hinschauen, gibt es einen Bildschirm. Wir nutzen unsere mobilen Geräte von morgens bis spät in die Nacht. Ein dunkler Modus entlastet die Augen, wenn man vor dem Schlafengehen noch einmal durch seinen sozialen Feed scrollt. (Wenn du wie ich bist, bedeutet „noch einmal“ vielleicht ein dreistündiges Scrollen. . Dunkler Modus? Ja, bitte! )
Ein weiterer Grund sind die neuen Technologien zur Herstellung von Displays. Flaggschiffmodelle großer Unternehmen – Apple, Google, Samsung, Huawei – sind alle mit OLED-Bildschirmen ausgestattet, die im Gegensatz zu LCD-Bildschirmen keine Hintergrundbeleuchtung benötigen. Und das ist wirklich eine gute Nachricht für deinen Akku. Stell dir vor, du schaust dir ein Bild eines schwarzen Quadrats auf deinem Telefon an; bei einem LCD-Bildschirm würde die Hintergrundbeleuchtung den gesamten Bildschirm erleuchten, obwohl ein großer Teil davon schwarz ist. Aber beim Betrachten des gleichen Bildes auf einem OLED-Bildschirm werden die Pixel, aus denen das schwarze Quadrat besteht, einfach abgeschaltet. Das bedeutet, sie verbrauchen überhaupt keinen Strom.
Diese Displaytypen machen dunkle Modi um ein Vielfaches interessanter. Mit einer dunklen Benutzeroberfläche können Sie die Akkulaufzeit Ihres Geräts erheblich verlängern. . Dunkle Modi gehen selbstverständlich Hand in Hand mit Änderungen in der Benutzeroberfläche, also lassen Sie uns unser Wissen auffrischen!
Dunkle Modi 101
Zuerst: „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 wäre super flach (im schlechten Sinne).
Es ist wichtig, die grundlegenden Prinzipien von Schatten und Beleuchtung zu berücksichtigen. Objekte, die höher angehoben werden, sollten in den Schatten heller sein, um echtes Licht und Schatten nachzuahmen. So ist es einfacher, verschiedene Komponenten und deren Hierarchie zu unterscheiden.
Zwei identisch graue Quadrate mit Schatten, eines auf 100 % schwarzem Hintergrund, das andere auf #121212. Wenn das Objekt angehoben wird, erhält es einen helleren Grauton.
In einem dunklen Thema können Sie weiterhin mit Ihrer gewohnten Hauptfarbe arbeiten, solange der Kontrast stimmt. Lassen Sie uns dies anhand eines Beispiels erklären.
In dieser Oberfläche ist die Hauptaktion die große blaue Taste in der unteren Leiste. Es gibt kein Problem mit dem Kontrast, wenn zwischen dem hellen oder dunklen Modus gewechselt wird, die Taste zieht weiterhin die Aufmerksamkeit auf sich, das Symbol ist klar und insgesamt ist alles großartig.
Wenn dieselbe Farbe unterschiedlich verwendet wird, zum Beispiel im Text, gibt es Probleme. Versuchen Sie, einen (deutlich) weniger gesättigten Farbton der Hauptfarbe zu verwenden oder suchen Sie nach anderen Möglichkeiten, die Markenfarben in die Benutzeroberfläche einzubinden.
Links: Rot auf Schwarz sieht schlecht aus. Rechts: Wir reduzieren die Sättigung — und alles wird gut. — Anmerkung des Übersetzers.
Dasselbe gilt für alle anderen gesättigten Farben, die Sie möglicherweise verwendet haben, wie zum Beispiel Warn- oder Fehlermeldungsfarben. Google verwendet eine weiße Überlagerung in 40% über der Standardfehlermeldungsfarbe in seinen beim Wechsel in den Dark Mode. Das ist ein ziemlich guter Ausgangspunkt, da es die Kontrastwerte auf die AA-Standards verbessert. Natürlich können Sie die Einstellungen nach Belieben anpassen, aber vergessen Sie nicht, die Kontrastwerte zu überprüfen. Übrigens ist ein nützliches Werkzeug dafür das Plugin für Sketch — , das genau zeigt, wie viel Kontrast zwischen 2 Ebenen besteht.
Wie steht es um den Text?
Hier ist alles einfach: Nichts sollte 100 % schwarz auf 100 % weiß und umgekehrt sein. Weiß reflektiert Lichtwellen aller Längen, schwarz absorbiert. Wenn man 100 % weißen Text auf einen 100 % schwarzen Hintergrund setzt, reflektieren die Buchstaben das Licht, verwischen und werden weniger angenehm zu lesen, was sich negativ auf die Lesbarkeit auswirkt.
Das Gleiche gilt für einen 100 % weißen Hintergrund, der zu viel Licht reflektiert, um sich ganz auf die Wörter zu konzentrieren. Versuchen Sie, den Weißton etwas zu mildern; verwenden Sie hellgrau für Hintergründe und Texte auf schwarzen Hintergründen. Das wird die Augen entlasten und verhindern,
Der Dark Mode ist hier und wird nicht verschwinden.
Die Zeit, die wir vor Bildschirmen verbringen, wächst ständig, und mit jedem neuen Tag tauchen neue Bildschirme in unserem Leben auf, vom Aufwachen bis wir schlafen gehen. Das ist ein relativ neues Phänomen, und unsere Augen sind noch nicht an diese steigende Bildschirmzeit spät am Abend gewöhnt. Hier kommt der dunkle Modus ins Spiel. Nachdem diese Funktion in macOS und Material Design eingeführt wurde (und wahrscheinlich auch in iOS), glauben wir, dass sie früher oder später der Standard in allen Anwendungen wird, sowohl mobil als auch desktop. Es ist besser, darauf vorbereitet zu sein!
Der einzige Grund, den dunklen Modus nicht zu implementieren, ist, wenn Sie sich zu 100 % sicher sind, dass Ihre App ausschließlich bei hellem Tageslicht verwendet wird. Das kommt jedoch nicht oft vor.
Es gibt einige Punkte zu beachten, die besondere Aufmerksamkeit erfordern, wenn der dunkle Modus implementiert wird, zusätzlich zu den grundlegenden Prinzipien, die zuvor zusammengefasst wurden.
Aus Sicht der Barrierefreiheit ist der dunkle Modus nicht besonders benutzerfreundlich, da der Kontrast insgesamt geringer ist, was die Lesbarkeit nicht verbessert.
Stellen Sie sich vor, Sie bereiten sich darauf vor, ins Bett zu gehen, sind sehr müde, aber kurz bevor Sie einschlafen, fällt Ihnen ein, dass Sie jemandem eine super wichtige Nachricht senden müssen, die nicht einmal eine Nacht warten kann. Sie nehmen Ihr Telefon, schalten es ein und AAAAAAA... der helle Hintergrund Ihrer iMessage wird Sie weitere drei Stunden vom Schlafen abhalten. Während heller Text auf dunklem Hintergrund nicht als maximal barrierefrei gilt, würde die Verfügbarkeit eines Dunkelmodus genau in diesem Moment den Komfort um ein Vielfaches erhöhen. Alles hängt von der Situation ab, in der sich der Nutzer gerade befindet.
Deshalb sind wir der Meinung, dass ein automatischer Dunkelmodus eine wirklich geniale Idee. Es schaltet sich abends ein und morgens wieder aus. Der Nutzer muss überhaupt nicht darüber nachdenken, was sehr praktisch ist. Twitter hat großartige Arbeit beim Einstellen des Dunkelmodus geleistet. Außerdem gibt es sowohl einen einfachen Dunkelmodus als auch einen noch dunkleren Modus für all diese OLED-Bildschirme, um den Akku zu sparen und all das, was damit zusammenhängt. Es ist wichtig zu beachten: Geben Sie dem Nutzer die Möglichkeit, manuell umzuschalten, wenn er es möchte: Es gibt nichts Schlimmeres, als dass sich die Benutzeroberfläche automatisch ändert, 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 berücksichtigen, dass einige Elemente einfach nicht dunkel gestaltet werden können.
Nehmen wir zum Beispiel einen Texteditor wie Pages. Der Benutzer kann die Benutzeroberfläche dunkel gestalten, aber das Blatt bleibt immer weiß und imitiert echtes Papier.
Pages im Dunkelmodus aktiviert
Das gleiche gilt für alle Arten von Editoren zur Inhaltserstellung, wie Sketch oder Illustrator. Obwohl die Benutzeroberfläche dunkel gestaltet werden kann, bleibt die Arbeitsfläche, mit der Sie arbeiten, standardmäßig weiß.
Sketch im Dunkelmodus und dennoch ein helles, weißes Dashboard.
Deshalb sind wir der Ansicht, dass Dunkelmodi nativ für das Betriebssystem sein werden, das Sie verwenden, und es ist besser, sich frühzeitig auf die Zukunft vorzubereiten. es wird dunkel sein.
Wenn Sie mehr über die Entwicklung dunkler Benutzeroberflächen erfahren möchten, sollten Sie sich unbedingt die Richtlinien ansehen , das war unsere Hauptinformationsquelle für diesen Artikel.
Quelle: habr.com
