Oder was Sie bei der Entwicklung eines dunklen Modus für eine Anwendung oder Site beachten sollten
2018 zeigte: dunkle Modi unterwegs. Jetzt, da wir Mitte 2019 sind, können wir mit Zuversicht sagen: Sie sind hier und sie sind überall.
Ein Beispiel für einen alten grün-schwarzen MonitorZunächst ist der Dunkelmodus überhaupt kein neues Konzept. Es wird seit geraumer Zeit verwendet. Tatsächlich wurde es einmal nur lange Zeit verwendet: Monitore waren „grün-schwarz“, aber nur, weil die Lumineszenzbeschichtung im Inneren bei Bestrahlung grünlich leuchtete.
Aber auch nach der Einführung von Farbmonitoren blieb der Dunkelmodus bestehen. Warum so?
Es gibt zwei Hauptmotive, die erklären, warum sich jede zweite Person beeilt, seiner Bewerbung heute ein dunkles Thema hinzuzufügen. Zuallererst: Computer sind überall. Überall, wo wir hinschauen, gibt es eine Art Bildschirm. Wir benutzen unsere mobilen Geräte von morgens bis spät abends. Das Vorhandensein eines dunklen Modus verringert die Belastung der Augen, wenn Sie im Bett sind, bevor Sie „das letzte Mal“ ins Bett gehen und durch den Soc blättern. Netzwerk. (Wenn Sie wie ich aussehen, könnte "letztes Mal" eine 3-stündige Schriftrolle von
R / EngineeringPorn bedeuten. Dunkler Modus? Ja, bitte!)
Ein weiterer Grund ist die neue Anzeigetechnologie. Die 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 ein schwarzes Quadrat auf Ihrem Telefon. Bei einem LCD-Display beleuchtet die Hintergrundbeleuchtung den gesamten Bildschirm, obwohl der größte Teil schwarz ist. Wenn Sie jedoch dasselbe Bild auf dem OLED-Display anzeigen, werden die Pixel, aus denen das schwarze Quadrat besteht, einfach ausgeschaltet. Und das bedeutet, dass sie überhaupt keine Energie verbrauchen.
Diese Arten von Anzeigen machen dunkle Modi um ein Vielfaches interessanter. Mit einer dunklen Schnittstelle können Sie die Akkulaufzeit Ihres Geräts erheblich verlängern. Überzeugen Sie sich selbst von den Fakten und Zahlen des Android Dev Summit im vergangenen November . Dunkle Modi gehen natürlich Hand in Hand mit Änderungen an der Benutzeroberfläche. Lassen Sie uns also unser Wissen auffrischen!
Dunkle Modi 101
Zuallererst: „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 ähnliches Design wird super flach sein (auf eine schlechte Weise).
Es ist wichtig, die Grundprinzipien der Beschattung / Beleuchtung zu beachten. Objekte, die höher liegen, sollten im Schatten heller sein und echte Beleuchtung und Schattierung simulieren. Somit ist es einfacher, zwischen verschiedenen Komponenten und ihrer Hierarchie zu unterscheiden.
Zwei gleichermaßen graue Quadrate mit einem Schatten, eines auf 100% schwarzem Hintergrund, das andere auf # 121212. Beim Anheben erhält das Objekt einen helleren Grauton.
In einem dunklen Thema können Sie immer noch mit Ihrer üblichen Primärfarbe arbeiten, wenn der Kontrast gut ist. Lassen Sie uns anhand eines Beispiels veranschaulichen.
In dieser Benutzeroberfläche ist die Hauptaktion die große blaue Schaltfläche im unteren Bereich. Es gibt kein Problem in Bezug auf den Kontrast beim Umschalten zwischen Hell- und Dunkelmodus, die Taste fällt immer noch auf, das Symbol ist klar, im Allgemeinen ist alles in Ordnung.
Wenn dieselbe Farbe unterschiedlich verwendet wird, z. B. im Text, treten Probleme auf. Versuchen Sie, einen (viel) weniger gesättigten Farbton der Grundfarbe zu verwenden, oder suchen Sie nach anderen Möglichkeiten, um Markenfarben in die Benutzeroberfläche zu integrieren.
Links: Rot auf Schwarz sieht schlecht aus. Richtig: Sättigung reduzieren - und alles wird gut. - ca. perev.
Gleiches gilt für alle anderen gesättigten Farben, die Sie verwenden können, z. B. Warnfarben oder Fehler. Google verwendet eine 40% ige weiße Überlagerung über der Farbe des Standardfehlers in seinen Materialdesign-Richtlinien, um in den Dunkelmodus zu wechseln. Dies ist ein ziemlich guter Ausgangspunkt, da dadurch die Kontraststufen verbessert werden, um die AA-Standards zu erfüllen. Natürlich können Sie die Einstellungen jederzeit nach Belieben ändern, aber vergessen Sie nicht, die Kontraststufen zu überprüfen. Ein nützliches Werkzeug für diesen Zweck ist übrigens das Sketch- Stark- Plugin, das genau anzeigt, wie viel Kontrast zwischen den beiden Ebenen besteht.
Was ist mit dem Text?
Hier ist alles einfach: Nichts sollte 100% schwarz, 100% weiß sein und umgekehrt. Weiß reflektiert Lichtwellen aller Längen, Schwarz absorbiert. Wenn Sie 100% weißen Text auf 100% schwarzen Hintergrund platzieren, reflektieren die Buchstaben Licht, breiten sich aus und werden weniger lesbar, was sich negativ auf die Lesbarkeit auswirkt.
Gleiches gilt für einen 100% weißen Hintergrund, der zu viel Licht reflektiert, um sich vollständig auf Wörter zu konzentrieren. Versuchen Sie, die weiße Farbe etwas weicher zu machen. Verwenden Sie hellgrau für Hintergründe und Texte auf schwarzem Hintergrund. Dies reduziert die Belastung der Augen und verhindert, dass sie überfordert werden.
Der dunkle Modus hier wird nicht verschwinden
Die Zeit, die wir auf den Bildschirmen verbringen, wächst ständig und jeden neuen Tag erscheinen neue Bildschirme in unserem Leben, vom Moment des Aufwachens bis zum Einschlafen. Dies ist ein ziemlich neues Phänomen, unsere Augen sind noch nicht an eine solche Zeitzunahme am späten Abend auf dem Bildschirm gewöhnt. Hier kommt der Dunkelmodus ins Spiel. Nach der Einführung dieser Funktion in macOS und Material Design (und höchstwahrscheinlich in iOS) glauben wir, dass sie früher oder später in allen Anwendungen, sowohl auf Mobilgeräten als auch auf Desktops, zum Standard wird. Und es ist besser, darauf vorbereitet zu sein!
Der einzige Grund, den Dunkelmodus nicht einzuführen, besteht darin, dass Sie absolut 100% sicher sind, dass Ihre Anwendung ausschließlich bei hellem Tageslicht verwendet wird. Dies kommt jedoch selten vor.
Neben den zuvor zusammengefassten Grundprinzipien sind einige Dinge zu erwähnen, die bei der Umsetzung des dunklen Regimes besondere Aufmerksamkeit erfordern.
Unter dem Gesichtspunkt der Zugänglichkeit ist der Dunkelmodus nicht der bequemste, da der Kontrast im Allgemeinen geringer ist, was wiederum die Lesbarkeit überhaupt nicht verbessert.
Quelle
Aber stellen Sie sich vor, Sie bereiten sich auf das Bett vor, möchten wirklich schlafen, aber kurz bevor Sie einschlafen, haben Sie daran gedacht, dass Sie jemandem eine überaus wichtige Nachricht senden müssen, die nicht einmal eine Nacht warten kann. Sie nehmen Ihr Telefon, schalten es ein und AAAAAA ... der helle Hintergrund Ihrer iMessage lässt Sie weitere 3 Stunden nicht einschlafen. Während heller Text vor einem dunklen Hintergrund nicht als möglich angesehen wird, würde das Vorhandensein eines dunklen Modus in dieser Sekunde Ihren Komfort um eine Million erhöhen. Es hängt alles von der Situation ab, in der sich der Benutzer gerade befindet.
Aus diesem Grund halten wir den Auto-Dark-Modus für eine so 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 den Einstellungen für den Dunkelmodus großartige Arbeit geleistet. Darüber hinaus haben sie sowohl einen dunklen als auch einen noch dunkleren Modus für all diese OLED-Bildschirme, wodurch Batterie und alles, was damit zusammenhängt, gespart wird. Hierbei ist zu beachten: Lassen Sie den Benutzer manuell wechseln, wenn er möchte: Es gibt nichts Schlimmeres, als die Benutzeroberfläche automatisch zu ändern, ohne zurückschalten zu können.
Twitter hat einen automatischen Dunkelmodus, der sich abends einschaltet und morgens ausschaltet.
Bei der Entwicklung eines Themas sollte auch berücksichtigt werden, dass einige 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 ist immer weiß und simuliert ein echtes Blatt Papier.
Seiten mit aktiviertem DunkelmodusGleiches gilt für alle Arten von Inhaltseditoren wie Sketch oder Illustrator. Obwohl die Schnittstelle dunkel gemacht werden kann, ist die Montageplatte, mit der Sie arbeiten, standardmäßig immer weiß.
Die Skizze befindet sich im dunklen Modus und hat immer noch eine hellweiße Zeichenfläche.
Unabhängig von der Anwendung glauben wir daher, dass dunkle Modi für das von Ihnen verwendete Betriebssystem nativ werden. Dies bedeutet, dass es besser ist, sich im Voraus auf die Zukunft vorzubereiten. Es wird dunkel.
Wenn Sie mehr über die Entwicklung dunkler Schnittstellen erfahren möchten, lesen Sie unbedingt die Richtlinien für das Materialdesign . Dies war unsere Hauptinformationsquelle für diesen Artikel.