{"id":35325,"date":"2019-10-31T22:03:38","date_gmt":"2019-10-31T19:03:38","guid":{"rendered":"https:\/\/prohoster.info\/blog\/tyomnye-vremena-nastupayut\/"},"modified":"2019-10-31T22:03:38","modified_gmt":"2019-10-31T19:03:38","slug":"tyomnye-vremena-nastupayut","status":"publish","type":"post","link":"https:\/\/prohoster.info\/de\/blog\/news\/tyomnye-vremena-nastupayut","title":{"rendered":"Dunkle Zeiten brechen an","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Was Sie bei der Entwicklung des Dunkelmodus f\u00fcr eine App oder eine Website beachten sollten<\/h2>\n

<\/p>\n

Das Jahr 2018 hat gezeigt: Dunkelmodi sind auf dem Vormarsch. Jetzt, wo wir bereits auf halbem Weg ins Jahr 2019 sind, k\u00f6nnen wir mit Sicherheit sagen: Sie sind hier und sie sind \u00fcberall.<\/p>\n

<\/p>\n

\"DunkleBeispiel eines alten Monitors \u00abgr\u00fcn-auf-schwarz\u00bb<\/a><\/noindex><\/em><\/p>\n

Beginnen wir damit, dass der Dunkelmodus kein neues Konzept ist. Er wird schon seit langem genutzt. Einst war er tats\u00e4chlich die einzige Option: Monitore waren in der Art \u00abgr\u00fcn-auf-schwarz\u00bb, und das lag nur daran, dass die fluoreszierende Beschichtung im Inneren ein gr\u00fcnliches Licht abstrahlte, wenn sie angestrahlt wurde.<\/p>\n

<\/p>\n

Doch selbst nach der Einf\u00fchrung farbiger Monitore lebte der Dunkelmodus weiter. Warum ist das so?<\/p>\n

<\/a><\/noindex><\/p>\n

\"DunkleEs gibt zwei Hauptgr\u00fcnde, die erkl\u00e4ren, warum heute jeder Zweite eilig einen Dunkelmodus in seine App integrieren m\u00f6chte. Zun\u00e4chst einmal: Computer sind \u00fcberall. Wohin wir auch schauen, \u00fcberall gibt es einen Bildschirm. Wir nutzen unsere mobilen Ger\u00e4te von fr\u00fch bis sp\u00e4t. Ein Dunkelmodus verringert die Augenbelastung, wenn man abends im Bett \u201ezum letzten Mal\u201c durch den Social-Media-Feed scrollt. (Wenn Sie wie ich sind, kann \u201ezum letzten Mal\u201c bedeuten, dass man drei Stunden scrollt. R\/EngineeringPorn<\/a><\/noindex>. Dunkelmodus? Na klar, gerne!<\/p>\n

Ein weiterer Grund sind die neuen Display-Technologien. Die Spitzenmodelle gro\u00dfer Unternehmen \u2013 Apple, Google, Samsung, Huawei \u2013 sind alle mit OLED-Displays ausgestattet, die im Gegensatz zu LCD-Displays keine Hintergrundbeleuchtung ben\u00f6tigen. Das ist wirklich eine gute Nachricht f\u00fcr 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\u00dfer 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 \u00fcberhaupt keine Energie.<\/p>\n

<\/p>\n

Diese Displaytypen machen Dunkelmodi um ein Vielfaches interessanter. Mit einer dunklen Benutzeroberfl\u00e4che k\u00f6nnen Sie die Batterielebensdauer Ihres Ger\u00e4ts erheblich verl\u00e4ngern. Sehen Sie sich die Fakten und Zahlen vom Android Dev Summit im November letzten Jahres an, um sich selbst zu \u00fcberzeugen.<\/a><\/noindex>. Dunkelmodi gehen nat\u00fcrlich Hand in Hand mit \u00c4nderungen der Benutzeroberfl\u00e4che, also lassen Sie uns unser Wissen auffrischen!<\/p>\n

<\/p>\n

Dunkelmodi 101<\/h3>\n

<\/p>\n

Zun\u00e4chst: \u201edunkel\u201c ist nicht gleich \u201eschwarz\u201c. Versuchen Sie nicht, den wei\u00dfen Hintergrund durch Schwarz zu ersetzen, da dies die Verwendung von Schatten unm\u00f6glich macht. Ein solches Design wird super flach sein (im schlechten Sinne).<\/p>\n

<\/p>\n

Es ist wichtig, die grundlegenden Prinzipien der Schattierung\/Beleuchtung zu beachten. Objekte, die h\u00f6her 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.<\/p>\n

<\/p>\n

\"Dunkle<\/p>\n

Zwei gleichfarbige graue Quadrate mit Schatten, eines auf einem 100% schwarzen Hintergrund, das andere auf #121212. Wenn das Objekt angehoben wird, erh\u00e4lt es einen helleren Grauton.<\/em><\/p>\n

<\/p>\n

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\u00e4ren.<\/p>\n

<\/p>\n

\"Dunkle<\/p>\n

In dieser Benutzeroberfl\u00e4che ist die Hauptaktion die gro\u00dfe blaue Schaltfl\u00e4che in der unteren Leiste. Hier gibt es kein Problem mit dem Kontrast beim Wechsel zwischen hellen oder dunklen Modus, die Schaltfl\u00e4che zieht weiterhin die Aufmerksamkeit auf sich, das Symbol ist klar, insgesamt ist alles gut.<\/p>\n

<\/p>\n

\"Dunkle<\/p>\n

Wenn dieselbe Farbe unterschiedlich verwendet wird, zum Beispiel im Text \u2013 wird es Probleme geben. Versuchen Sie, einen (deutlich) weniger ges\u00e4ttigten Farbton der Hauptfarbe zu verwenden oder suchen Sie nach anderen Wegen, die Markenfarben in die Benutzeroberfl\u00e4che zu integrieren.<\/p>\n

<\/p>\n

\"Dunkle<\/p>\n

Links: Rot auf Schwarz sieht schlecht aus. Rechts: Reduzieren wir die S\u00e4ttigung \u2013 und alles sieht gut aus.<\/em><\/p>\n

<\/p>\n

Das Gleiche gilt f\u00fcr alle anderen ges\u00e4ttigten Farben, die Sie m\u00f6glicherweise verwendet haben, wie zum Beispiel Warn- oder Fehlermeldungen. Google verwendet eine wei\u00dfe Schicht mit 40% Deckkraft \u00fcber der Standard-Fehlerfarbe in seinen Material Design-Richtlinien<\/a><\/noindex> beim Wechsel in den Dunkelmodus. Dies ist ein ziemlich guter Ausgangspunkt, da es die Kontrastniveaus auf das AA-Niveau verbessern wird. Sie k\u00f6nnen nat\u00fcrlich jederzeit Ihre Einstellungen nach Belieben \u00e4ndern, aber vergessen Sie nicht, die Kontrastniveaus zu \u00fcberpr\u00fcfen. \u00dcbrigens ist ein n\u00fctzliches Werkzeug f\u00fcr dieses Ziel das Plugin f\u00fcr Sketch \u2013 Stark<\/a><\/noindex>, das genau zeigt, wie viel Kontrast zwischen zwei Ebenen besteht.<\/p>\n

<\/p>\n

Was ist mit dem Text?<\/h4>\n

<\/p>\n

Hier ist alles einfach: Nichts sollte 100 % schwarz auf 100 % wei\u00df und umgekehrt sein. Wei\u00df reflektiert Lichtwellen aller L\u00e4ngen, Schwarz absorbiert. Wenn Sie 100 % wei\u00dfen 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.<\/p>\n

<\/p>\n

Das gilt auch f\u00fcr 100 % wei\u00dfen Hintergrund, der zu viel Licht reflektiert, um sich vollst\u00e4ndig auf die Worte zu konzentrieren. Versuchen Sie, die wei\u00dfe Farbe etwas abzumildern; verwenden Sie hellgrau f\u00fcr Hintergr\u00fcnde und Texte auf schwarzen Hintergr\u00fcnden. Das reduziert die Augenbelastung und verhindert deren \u00dcberanstrengung.<\/a><\/noindex><\/p>\n

<\/p>\n

\"Dunkle<\/p>\n

Der Dunkelmodus ist hier und wird nicht verschwinden.<\/h3>\n

<\/p>\n

Die Menge an Zeit, die wir vor Bildschirmen verbringen, w\u00e4chst st\u00e4ndig und jeden neuen Tag tauchen neue Bildschirme in unserem Leben auf, vom Aufwachen bis zum Einschlafen. Das ist ein ziemlich neues Ph\u00e4nomen; unsere Augen sind noch nicht an den Anstieg der Bildschirmzeit sp\u00e4t am Abend gew\u00f6hnt. Hier kommt der Dunkelmodus ins Spiel. Nach der Einf\u00fchrung dieser Funktion in macOS und Material Design (und h\u00f6chstwahrscheinlich auch in iOS) glauben wir, dass sie fr\u00fcher oder sp\u00e4ter der Standard in allen Anwendungen, sowohl mobil als auch auf dem Desktop, wird. Und es ist besser, darauf vorbereitet zu sein!<\/p>\n

<\/p>\n

Der einzige Grund, den Dunkelmodus nicht zu implementieren, ist, wenn Sie sich zu 100 % sicher sind, dass Ihre Anwendung ausschlie\u00dflich bei hellen Tageslichtbedingungen verwendet wird. Das kommt allerdings selten vor.<\/p>\n

<\/p>\n

Es gibt einige Dinge zu erw\u00e4hnen, die besondere Aufmerksamkeit bei der Implementierung des Dunkelmodus erfordern, abgesehen von den grundlegenden Prinzipien, die zuvor zusammengefasst wurden.<\/p>\n

<\/p>\n

Aus Sicht der Barrierefreiheit ist der Dunkelmodus nicht der benutzerfreundlichste, da der Kontrast insgesamt niedriger ist, was die Lesbarkeit nicht verbessert.<\/p>\n

<\/p>\n

\"Dunkle<\/p>\n

Quelle<\/a><\/noindex><\/em><\/p>\n

<\/p>\n

Aber stellen Sie sich vor, dass Sie sich auf den Schlaf vorbereiten, sehr m\u00fcde 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\u2026 der helle Hintergrund Ihres iMessage wird Sie noch f\u00fcr 3 Stunden wachhalten. W\u00e4hrend heller Text auf dunklem Hintergrund nicht als maximal barrierefrei gilt, w\u00fcrde das Vorhandensein eines Dunkelmodus in diesem Moment den Komfort um eine Million erh\u00f6hen. Alles h\u00e4ngt von der Situation ab, in der sich der Benutzer gerade befindet.<\/strong><\/p>\n

<\/p>\n

Deshalb glauben wir.\u00a0automatischer Dunkelmodus\u00a0<\/strong>eine so coole Idee. Er schaltet sich abends ein und morgens aus. Der Benutzer muss sich nicht einmal Gedanken dar\u00fcber machen, was sehr praktisch ist. Twitter hat gro\u00dfartige Arbeit bei den Einstellungen des Dunkelmodus geleistet. Au\u00dferdem gibt es nicht nur einen einfachen Dunkelmodus, sondern auch einen noch dunkleren Modus f\u00fcr 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\u00f6glichkeit, manuell zu wechseln, wann immer er m\u00f6chte: Es gibt nichts Schlimmeres, als eine automatische \u00c4nderung der Benutzeroberfl\u00e4che ohne die M\u00f6glichkeit, zur\u00fcckzuwechseln.<\/p>\n

<\/p>\n

\"Dunkle<\/p>\n

Twitter hat einen automatischen Dunkelmodus, der abends aktiviert und morgens deaktiviert wird.<\/em><\/p>\n

<\/p>\n

Bei der Entwicklung eines Themas sollte man auch bedenken, dass einige Dinge einfach nicht dunkel gestaltet werden k\u00f6nnen.<\/p>\n

<\/p>\n

Nehmen Sie einen Texteditor, zum Beispiel Pages. Sie k\u00f6nnen die Benutzeroberfl\u00e4che dunkel gestalten, aber das Blatt wird immer wei\u00df bleiben, um ein echtes Blatt Papier zu simulieren.<\/p>\n

<\/p>\n

\"DunklePages mit aktivem Dunkelmodus<\/em><\/p>\n

Das gleiche gilt f\u00fcr alle Arten von Content-Erstellern, wie Sketch oder Illustrator. Obwohl die Benutzeroberfl\u00e4che dunkel gestaltet werden kann, wird die Arbeitsfl\u00e4che, mit der Sie arbeiten, standardm\u00e4\u00dfig immer wei\u00df sein.<\/p>\n

<\/p>\n

\"DunkleSketch im Dunkelmodus und die Arbeitsfl\u00e4che bleibt hellwei\u00df.<\/em><\/p>\n

Deshalb glauben wir, dass Dunkelmodi nativ f\u00fcr Ihr Betriebssystem sein werden, egal welche Anwendung Sie verwenden, und es ist besser, sich im Voraus auf die Zukunft vorzubereiten. es wird dunkel sein.<\/strong>\u00a0<\/p>\n

<\/p>\n

Wenn Sie mehr \u00fcber die Entwicklung dunkler Benutzeroberfl\u00e4chen erfahren m\u00f6chten, sollten Sie unbedingt die Richtlinien durchsehen Material Design<\/a><\/noindex>, das war unsere Hauptinformationsquelle f\u00fcr diesen Artikel.<\/p>\n

Quelle: habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"

\u0418\u043b\u0438 \u043e \u0447\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0442\u0451\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 2018 \u0433\u043e\u0434 \u043f\u043e\u043a\u0430\u0437\u0430\u043b: \u0442\u0451\u043c\u043d\u044b\u0435 \u0440\u0435\u0436\u0438\u043c\u044b \u043d\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0435. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u0436\u0435 \u043d\u0430 \u043f\u043e\u043b\u043f\u0443\u0442\u0438 \u0432 2019, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043a\u0430\u0437\u0430\u0442\u044c: \u043e\u043d\u0438 \u0437\u0434\u0435\u0441\u044c, \u0438 \u043e\u043d\u0438 \u0432\u0435\u0437\u0434\u0435. \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430 \u00ab\u0437\u0435\u043b\u0435\u043d\u044b\u043c-\u043f\u043e-\u0447\u0451\u0440\u043d\u043e\u043c\u0443\u00bb \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0442\u0451\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u2014 \u044d\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043d\u043e\u0432\u0430\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f. \u0415\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 […]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":26518,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-35325","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"\ud83e\udd47Dunkle Zeiten stehen bevor | ProHoster","description":"Oder was man bei der Entwicklung des Dunkelmodus einer Anwendung oder Website beachten sollte, das Jahr 2018 hat gezeigt: Dunkelmodi sind auf dem Vormarsch.","canonical_url":"https:\/\/prohoster.info\/de\/blog\/news\/tyomnye-vremena-nastupayut","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"de_DE","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u0422\u0451\u043c\u043d\u044b\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0430 \u043d\u0430\u0441\u0442\u0443\u043f\u0430\u044e\u0442 | ProHoster","og:description":"\u0418\u043b\u0438 \u043e \u0447\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0442\u0451\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 2018 \u0433\u043e\u0434 \u043f\u043e\u043a\u0430\u0437\u0430\u043b: \u0442\u0451\u043c\u043d\u044b\u0435 \u0440\u0435\u0436\u0438\u043c\u044b \u043d\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0435.","og:url":"https:\/\/prohoster.info\/de\/blog\/news\/tyomnye-vremena-nastupayut","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-10-31T19:03:38+00:00","article:modified_time":"2019-10-31T19:03:38+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"35325","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-21 22:48:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-03-01 02:06:23","updated":"2026-01-21 22:48:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts\/35325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/comments?post=35325"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts\/35325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/media\/26518"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/media?parent=35325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/categories?post=35325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/tags?post=35325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}