Diese Seite wurde mit KI und maschinellem Lernen übersetzt.

(Pocket-lint) - Der Dark-Modus war bis vor kurzem den Entwicklern und professionellen Kreativen wie Fotografen und Filmemachern vorbehalten.

Aber 2019 hat sich das geändert. Eine Reihe von Unternehmen, von Apple über Google bis hin zu Facebook, befürworteten die Idee, dass nicht immer alles weiß sein sollte, und boten den Nutzern die Möglichkeit, spät in der Nacht eine alternative Farbpalette zu wählen, die für die Augen einfacher ist.

Wir freuen uns, Ihnen mitteilen zu können, dass Sie jetzt Pocket-Lint zur Liste der Unternehmen hinzufügen können, die beim Surfen auf der Website eine Option für den Dunkelmodus anbieten. Ab heute können Sie Ihre Lieblingsnachrichten, Bewertungen, Funktionen, Kaufanleitungen und mehr in beiden Lichtern lesen Modus oder Dunkelmodus auf unserer Website.

Aber warum haben wir uns entschieden, Pocket-Lint um einen dunklen Modus zu erweitern, was sind die Vorteile und wie können Sie es selbst genießen?

Warum dunkel werden?

Die Verwendung des Dunkelmodus bietet eine Reihe von Vorteilen: Sie schont die Augen - insbesondere spät in der Nacht -, um Bilder besser hervorzuheben, die Akkulaufzeit zu verbessern und vor allem die Zugänglichkeit zu verbessern.

Google hat festgestellt, dass einer der größten Vorteile des Dunkelmodus nach der Implementierung auf der neuesten Version von Android (10) darin besteht, dass er zu einer längeren Akkulaufzeit führen kann.

Apple nennt keine Leistungssteigerungen bei Akkus, hat Pocket-lint jedoch zuvor mitgeteilt, dass der Grund für die Verwendung des Dunkelmodus in zahlreichen Kreativprofis liegt, die das Unternehmen auffordern, die Erfahrung zu nutzen, um Ablenkungen zu beseitigen.

Apple

Für Pocket-Lint war die Entscheidung, "dunkel" zu werden, eine Kombination all dieser Gründe, aber auch aufgrund einer Anfrage des Teams, dass es etwas ist, das sie wollten und sicher waren, dass unsere Leser es auch wollten.

Es ist verständlich, in einer Reihe von Umgebungen zu arbeiten, von einem Büro tagsüber oder einem Flugzeug, das über den Atlantik fliegt, bis zu einer Veranstaltung an einem weit entfernten Ort irgendwo auf der Welt. Team Pocket-Lint verbringt sehr viel Zeit damit, nicht nur auf einen Bildschirm eines Telefons, Tablets oder Computers zu starren, sondern auch auf Pocket-Lint.

Der Dunkelmodus wurde angefordert und die Herausforderung, ihn zu implementieren, begann.

Wie es funktioniert

Wir werden gleich auf den Entwurfsprozess eingehen, aber es ist erwähnenswert, wie er funktioniert und wie Sie den Dunkelmodus aktivieren können.

Von Anfang an war klar, dass der Dunkelmodus nicht für alle Umgebungen und Anwendungen geeignet ist. Es ist daher nicht etwas, das den Besuchern automatisch aufgezwungen werden sollte, unabhängig davon, ob sie es wollen oder nicht. Das ist der Ansatz, den wir bei Pocket-Lint gewählt haben. Sie können den dunklen Modus von Pocket-lint vollständig ignorieren, wenn Sie möchten, und den hellen Modus wie gewohnt weiter verwenden. Das war wichtig

Der Dunkelmodus und der jetzt entsprechende Lichtmodus sollten eine Benutzerpräferenz sein, um den Inhalt zu genießen, und nicht etwas, bei dem Sie keine Wahl haben.

Einige lieben die Idee von dunklem Hintergrund, hellem Text und allem, was mit dem dunklen Modus einhergeht, während andere es im Vergleich zu der Art, wie sie es gewohnt sind, Websites zu sehen, als zu polarisierend und zu irritierend empfinden.

In diesem Sinne bieten wir den Dunkelmodus auf drei verschiedene Arten an:

  1. Wird über das Betriebssystem des Geräts ermittelt
  2. Wird über einen Kippschalter oben auf der Site im Impressum aktiviert
  3. Kontrolliert über die Tageszeit

Das erste macht logisch Sinn. Wenn Sie den Dunkelmodus systemweit ausführen, weil Sie sich über die Systemeinstellungen des verwendeten Geräts angemeldet haben, besteht die Möglichkeit, dass Sie Pocket-Lint im Dunkelmodus sehen möchten.

Die zweite Option ermöglicht es Ihnen, den Dunkelmodus auszuschalten, wenn Sie ihn nicht mögen, aber auch, wenn Sie den Dunkelmodus nicht auf Systemebene ausführen.

Der dritte, denken wir, versucht, die Bedürfnisse des Benutzers zu verstehen, ohne dass er sich selbst darum kümmern muss. Der Dunkelmodus wird am besten genossen, wenn es draußen dunkel ist - dh nachts - und wir haben uns daher dafür entschieden, ihn automatisch von 22 Uhr bis 7 Uhr morgens einzuschalten, selbst wenn Ihre Systemeinstellungen auf den Lichtmodus eingestellt sind. Wir können dies tun, indem wir verstehen, in welcher Zeitzone sich der Benutzer befindet, und sie entsprechend einstellen. Natürlich können Sie die Einstellung über diesen wichtigen Kippschalter überschreiben, wenn Sie dies wünschen.

Entwerfen für den dunklen Modus

Im Dunkelmodus geht es nicht nur darum, die Farben von Schwarz zu Weiß und von Weiß zu Schwarz zu invertieren.

Bei Pocket-lint haben wir uns eine Reihe von Dark-Mode-Paletten angesehen, um zu analysieren, was nicht nur unter dem Gesichtspunkt der Barrierefreiheit, sondern auch unter dem Gesichtspunkt der Lesbarkeit am besten ist.

Die Dokumentation im Web steckt noch in den Kinderschuhen und während einige Paletten in einigen Umgebungen gut sind, funktionieren sie in anderen nicht.

Gehen Sie auf "Vollschwarz" und lange Artikel mit vielen Wörtern werden zum Lesen anstrengend. Wenn Sie ein zu helles Grau auswählen, gehen die Effekte des Dunkelmodus verloren. Sie müssen auch Schriftart und Schriftfarben, den Schriftabstand in Bezug auf Kerning und Leading sowie Elemente wie Hyperlinks, Bildunterschriften, Bildnachweise und andere "Schriftmöbel" auf der Seite berücksichtigen.

colorhunt

Das Endergebnis war die Auswahl einer Farbpalette mit einem starken blau-grauen und türkisfarbenen Einfluss, die unseres Erachtens einen dunklen Modus liefert, der auf mehreren Ebenen zugänglich ist, sowie eine Reihe von Zugänglichkeitstests für Benutzerfreundlichkeit und Lesbarkeit bestanden hat.

Zu Beginn haben wir colorhunt.co verwendet . Auf der benutzerfreundlichen Website können Sie verschiedene Farbpaletten anzeigen und sehen, wie sich die Farben ergänzen. Es ist eine fantastische Ressource, unabhängig von Ihren Anforderungen an das Entwerfen im Dunkelmodus.

Nachdem wir eine Palette ausgewählt hatten, mit der wir arbeiten wollten, machten wir uns daran, diese Farben in das Design von Pocket-lint zu übersetzen.

Wir haben die dunkelste Farbe innerhalb der Palette als Standardhintergrund verwendet, die zweitdunkelste als Textmarker für diesen Hintergrund.

Sie werden diese Farben am deutlichsten auf unseren neu gestalteten Hub-Seiten sehen . Die Verwendung von Farbe hebt hier unser "Karten" -Design von der Seite ab und verbessert die Lesbarkeit erheblich. Wir haben auch die Farbe für die horizontalen Regeln auf der Site verwendet, um beispielsweise Listen auf der Homepage aufzuteilen.

Die Darmreaktion wäre, die türkisfarbene Farbe in der Palette für Hyperlinks auf einem hellen Hintergrund zu verwenden, der gut funktioniert. Dies ist jedoch einer der häufigsten Fehler im Dunkelmodus. Farbiger Text auf dunklem Hintergrund funktioniert nicht.

Pocket-lint

Um dem entgegenzuwirken, haben wir den Hyperlink-Stil von Pocket-Lint in eine dicke Unterstreichung geändert, die beim Schweben hervorgehoben wird, anstatt das verknüpfte Wort oder die verknüpfte Phrase zu färben. Dieser Ansatz erleichtert das Auge erheblich, und wir haben ihn auch in Zukunft in unser Lichtmodus-Thema übernommen.

Um die Lesbarkeit zu verbessern, haben wir uns dafür entschieden, den Text auf der Seite in Weiß / Hellgrau, der endgültigen Farbe in der von uns gewählten Palette, zu färben, anstatt "Vollweiß" zu wählen. Dies führt zu einer viel weicheren Erfahrung, von der wir glauben, dass sie beim Lesen für das Auge viel einfacher ist.

Ja, im dunklen Modus geht es um Kontraste, aber Sie möchten nicht, dass sie zu kontrastreich sind. Schwarz und Weiß können wirklich sehr hart nebeneinander sein.

Nachdem wir den Dunkelmodus abgeschlossen hatten, haben wir unseren jetzt neuen Hellmodus aktualisiert. Früher war dies der einzige Modus, um einen einheitlichen Designstil und ein einheitliches Ethos beizubehalten. Auch dieser Modus musste geändert werden, um dem gleichen Ansatz und den gleichen Überzeugungen zu entsprechen.

Für Pocket-Lint bedeutet dies einen neuen Hyperlink-Stil und eine neue Schriftfarbe - die dunkelste Farbe in unserer neuen Palette sowie einige Verbesserungen und Änderungen an anderer Stelle, um die Konsistenz zu gewährleisten.

Barrierefreiheit

Während viele den dunklen Modus lediglich als etwas "Cooles" betrachten, gibt es eine Reihe von Hauptgründen, warum er auch in Bezug auf die Zugänglichkeit tatsächlich gut ist. Wir wollten sicherstellen, dass dies einer der Vorteile der Implementierung des Dunkelmodus auf Pocket-Lint ist.

Es gibt eine Reihe von Werkzeugen, mit denen Sie Kontrastfarben testen können. Das World Wide Web Consortium ist die wichtigste internationale Standardorganisation für das World Wide Web und verfügt über eine Reihe von Richtlinien, um das Web zugänglicher zu machen.

a11y

Die Richtlinien für die Barrierefreiheit von Webinhalten (WCAG) 2.1 enthalten insbesondere eine Vielzahl von Empfehlungen, um den Zugang zu Webinhalten zu verbessern.

Es war von größter Bedeutung, sicherzustellen, dass sowohl der von Pocket-lint eingeführte Hell- als auch der Dunkelmodus diese Tests bestanden haben.

Deshalb haben wir mit den Richtlinien gearbeitet, um kontrastierende Farben zu verwenden, damit alles so gut wie möglich funktioniert.

Designherausforderungen

Nachdem wir eine Farbpalette ausgearbeitet hatten, ist die Übersetzung auf die Website ziemlich einfach, wenn auch zeitaufwändig.

Pocket-Lint läuft seit 16 Jahren und daher war dies ein guter Zeitpunkt, um den Code in der Master-CSS-Datei aufzuräumen und zu verbessern. Die CSS-Datei ist die Datei, die alle Stile und Layouts der Artikel und Seiten auf der Website verarbeitet, sodass dies eine große Aufgabe ist.

Im Laufe der Jahre, als zahlreiche Entwickler den Code hinzufügten und änderten, gab es die Tendenz, Stile basierend auf ihrem Aussehen hinzuzufügen - einschließlich ihrer Farbe. Das ist ein großes Nein-Nein, wenn es um die Implementierung eines dunklen und hellen Designs geht, und es ist etwas, das geändert werden muss, wenn Sie eine positive und eine negative Farbpalette haben.

Pocket-lint

Die andere Herausforderung bestand darin, ein einheitliches Symbol zu wählen, das auf der gesamten Website verwendet wird, um den Lesern darzustellen, dass sie bei Bedarf zwischen Hell- und Dunkelmodus wechseln können.

Da der Dunkelmodus noch in den Kinderschuhen steckt, gibt es noch kein einheitliches Symbol, das im gesamten Web verwendet wird. Diejenigen, die einen Dunkelmodus implementiert haben, haben sich für eine Reihe verschiedener Symbole und Formulierungen entschieden, um zu symbolisieren, dass es eine Auswahl gibt. Monde, Sonnen, Glühbirnen sowie Wörter werden mit wenig Sorgfalt oder Aufmerksamkeit verwendet.

Nachdem wir eine Reihe verschiedener Symbole mit Mitgliedern des Teams, der Familie und Freunden getestet und getestet haben, haben wir uns für ein Halbmond-Symbol entschieden, das entweder fest oder leer ist, je nachdem, ob der Dunkelmodus aktiviert oder deaktiviert ist. Wir glauben, dass dies am sinnvollsten war und leicht zu verstehen ist, unabhängig davon, wo Sie sich befinden oder welche Sprache Sie sprechen.

Nächste Schritte

Jetzt haben wir den Dunkelmodus für Pocket-Lint implementiert. Wir planen, weiterhin zu überwachen, wie er von Lesern verwendet wird und ob eine unserer Designentscheidungen Bedenken oder Probleme verursacht, wenn sie einem viel breiteren Publikum zur Verfügung stehen.

Schreiben von Stuart Miles.