{"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\/fr\/blog\/news\/tyomnye-vremena-nastupayut","title":{"rendered":"Des temps sombres arrivent","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Ou ce qu'il faut garder \u00e0 l'esprit lors du d\u00e9veloppement d'un mode sombre pour une application ou un site<\/h2>\n

<\/p>\n

L'ann\u00e9e 2018 a montr\u00e9 que les modes sombres sont en train d'arriver. Maintenant que nous sommes d\u00e9j\u00e0 \u00e0 mi-chemin de 2019, nous pouvons affirmer avec certitude : ils sont ici et partout.<\/p>\n

<\/p>\n

\"DesExemple d'un ancien moniteur \u00ab vert sur noir \u00bb<\/a><\/noindex><\/em><\/p>\n

Commen\u00e7ons par le fait que le mode sombre n'est pas une nouvelle conception. Il est utilis\u00e9 depuis longtemps. \u00c0 une \u00e9poque, il n'y avait en fait que cela : les moniteurs \u00e9taient de type \u00ab vert sur noir \u00bb, mais seulement parce que le rev\u00eatement fluorescent \u00e0 l'int\u00e9rieur \u00e9mettait une lueur verd\u00e2tre lorsqu'il \u00e9tait expos\u00e9 \u00e0 des radiations.<\/p>\n

<\/p>\n

Mais m\u00eame apr\u00e8s l'introduction des moniteurs couleur, le mode sombre a continu\u00e9 \u00e0 exister. Pourquoi donc ?<\/p>\n

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

\"DesIl y a deux principales raisons qui expliquent pourquoi aujourd'hui chacun se presse d'ajouter un mode sombre \u00e0 son application. Tout d'abord : les ordinateurs sont partout. O\u00f9 que nous regardions, il y a un \u00e9cran. Nous utilisons nos appareils mobiles du matin au soir. Avoir un mode sombre r\u00e9duit la fatigue oculaire lorsque vous faites d\u00e9filer votre fil d'actualit\u00e9 sur les r\u00e9seaux sociaux \u00ab une derni\u00e8re fois \u00bb avant de vous coucher. (Si vous \u00eates comme moi, \u00ab une derni\u00e8re fois \u00bb peut signifier un d\u00e9filement de 3 heures. R\/EngineeringPorn<\/a><\/noindex>. Mode sombre ? Eh bien, oui !)<\/p>\n

Une autre raison est les nouvelles technologies de fabrication des \u00e9crans. Les mod\u00e8les phares des grandes entreprises \u2014 Apple, Google, Samsung, Huawei \u2014 sont tous \u00e9quip\u00e9s d'\u00e9crans OLED, qui, contrairement aux \u00e9crans LCD, ne n\u00e9cessitent pas de r\u00e9tro\u00e9clairage. Et c'est vraiment une bonne nouvelle pour la batterie de votre appareil. Imaginez que vous regardez une image d'un carr\u00e9 noir sur votre t\u00e9l\u00e9phone ; avec un \u00e9cran LCD, le r\u00e9tro\u00e9clairage \u00e9clairera tout l'\u00e9cran, bien qu'une grande partie soit noire. Mais en regardant la m\u00eame image sur un \u00e9cran OLED, les pixels qui composent le carr\u00e9 noir s'\u00e9teignent simplement. Donc, ils ne consomment aucune \u00e9nergie.<\/p>\n

<\/p>\n

Ces types d'\u00e9crans rendent les modes sombres de beaucoup plus int\u00e9ressants. En utilisant une interface sombre, vous pouvez consid\u00e9rablement prolonger la dur\u00e9e de vie de la batterie de votre appareil. Venez voir les faits et chiffres du sommet Android Dev de novembre dernier pour en \u00eatre convaincu par vous-m\u00eame.<\/a><\/noindex>Les modes sombres vont bien s\u00fbr de pair avec les changements d'UI, alors rafra\u00eechissons nos connaissances !<\/p>\n

<\/p>\n

Modes sombres 101<\/h3>\n

<\/p>\n

Tout d'abord : \u00ab sombre \u00bb n'est pas \u00e9gal \u00e0 \u00ab noir \u00bb. N'essayez pas de remplacer le fond blanc par du noir, car cela rendra impossible l'utilisation des ombres. Un tel design sera super plat (dans le mauvais sens).<\/p>\n

<\/p>\n

Il est important de garder \u00e0 l'esprit les principes de base de l'ombre\/lumi\u00e8re. Les objets qui sont plus en hauteur doivent \u00eatre plus clairs \u00e0 l'ombre, imitant un \u00e9clairage et une ombre r\u00e9els. Ainsi, il est plus facile de diff\u00e9rencier les diff\u00e9rents composants et leur hi\u00e9rarchie.<\/p>\n

<\/p>\n

\"Des<\/p>\n

Deux carr\u00e9s gris identiques avec une ombre, l'un sur un fond noir \u00e0 100 %, l'autre sur #121212. En s'\u00e9levant, l'objet prend une teinte de gris plus claire.<\/em><\/p>\n

<\/p>\n

Dans un th\u00e8me sombre, vous pouvez toujours travailler avec votre couleur principale habituelle, si le contraste est en ordre. Illustrons cela avec un exemple.<\/p>\n

<\/p>\n

\"Des<\/p>\n

Dans cette interface, l'action principale est un grand bouton bleu dans la barre inf\u00e9rieure. Il n'y a pas de probl\u00e8me de contraste lors du passage en mode clair ou sombre, le bouton attire toujours l'attention, l'ic\u00f4ne est claire, en g\u00e9n\u00e9ral, tout est excellent.<\/p>\n

<\/p>\n

\"Des<\/p>\n

Lorsque la m\u00eame couleur est utilis\u00e9e de mani\u00e8re diff\u00e9rente, par exemple dans le texte, il y aura des probl\u00e8mes. Essayez d'utiliser une teinte (beaucoup) moins satur\u00e9e de la couleur principale ou cherchez d'autres moyens d'int\u00e9grer les couleurs de la marque dans l'interface.<\/p>\n

<\/p>\n

\"Des<\/p>\n

\u00c0 gauche : le rouge sur noir semble mauvais. \u00c0 droite : diminuons la saturation \u2014 et tout devient bon. \u2014 note du trad.<\/em><\/p>\n

<\/p>\n

Il en va de m\u00eame pour toutes les autres couleurs satur\u00e9es que vous avez pu utiliser, comme les couleurs d'avertissement ou d'erreur. Google utilise un superposition d'une couche blanche \u00e0 40 % sur la couleur par d\u00e9faut d'erreur dans ses lignes directrices de Material Design<\/a><\/noindex> lors du passage en mode sombre. C'est un bon point de d\u00e9part, car cela am\u00e9liorera les niveaux de contraste pour r\u00e9pondre aux normes AA. Bien s\u00fbr, vous pouvez toujours ajuster les param\u00e8tres \u00e0 votre convenance, mais n'oubliez pas de v\u00e9rifier les niveaux de contraste. D'ailleurs, un outil utile pour cela est un plugin pour Sketch \u2014 Stark<\/a><\/noindex>, qui montre exactement combien de contraste existe entre 2 couches.<\/p>\n

<\/p>\n

Et qu'en est-il du texte ?<\/h4>\n

<\/p>\n

C'est simple : rien ne doit \u00eatre 100 % noir ou 100 % blanc, et vice versa. Le blanc refl\u00e8te les ondes lumineuses de toutes les longueurs, le noir absorbe. Si vous placez du texte 100 % blanc sur un fond 100 % noir, les lettres r\u00e9fl\u00e9chiront la lumi\u00e8re, deviendront floues et seront moins agr\u00e9ables \u00e0 lire, ce qui nuira \u00e0 la lisibilit\u00e9.<\/p>\n

<\/p>\n

Il en va de m\u00eame pour un fond 100 % blanc, qui refl\u00e8te trop de lumi\u00e8re pour se concentrer pleinement sur les mots. Essayez d'adoucir un peu le blanc, utilisez un gris clair pour les fonds et les textes sur des fonds noirs. Cela r\u00e9duira la fatigue oculaire, \u00e9vitant une surcharge<\/a><\/noindex><\/p>\n

<\/p>\n

\"Des<\/p>\n

Le mode sombre n'est pas pr\u00e8s de dispara\u00eetre ici<\/h3>\n

<\/p>\n

Le temps que nous passons devant les \u00e9crans augmente constamment, et chaque jour, de nouveaux \u00e9crans apparaissent dans nos vies, depuis le moment o\u00f9 nous nous r\u00e9veillons jusqu'\u00e0 ce que nous nous endormions. C'est un ph\u00e9nom\u00e8ne relativement nouveau, nos yeux ne sont pas encore habitu\u00e9s \u00e0 ce temps d'\u00e9cran accru tard dans la nuit. C'est l\u00e0 que le mode sombre entre en jeu. Depuis l'introduction de cette fonctionnalit\u00e9 dans macOS et Material Design (et probablement dans iOS), nous pensons qu'il finira par devenir par d\u00e9faut dans toutes les applications, qu'elles soient mobiles ou de bureau. Et il vaut mieux \u00eatre pr\u00e9par\u00e9 !<\/p>\n

<\/p>\n

La seule raison de ne pas mettre en \u0153uvre le mode sombre est si vous \u00eates absolument s\u00fbr \u00e0 100 % que votre application est utilis\u00e9e uniquement en pleine lumi\u00e8re du jour. Cela arrive, en v\u00e9rit\u00e9, rarement.<\/p>\n

<\/p>\n

Il convient de mentionner plusieurs points qui n\u00e9cessiteront une attention particuli\u00e8re lors de la mise en \u0153uvre du mode sombre, en plus des principes de base r\u00e9sum\u00e9s pr\u00e9c\u00e9demment.<\/p>\n

<\/p>\n

Du point de vue de l'accessibilit\u00e9, le mode sombre n'est pas le plus convivial, car le contraste est g\u00e9n\u00e9ralement plus faible, ce qui n'am\u00e9liore pas la lisibilit\u00e9.<\/p>\n

<\/p>\n

\"Des<\/p>\n

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

<\/p>\n

Mais imaginez que vous vous pr\u00e9parez \u00e0 dormir, que vous avez tr\u00e8s envie de dormir, mais juste avant de vous endormir, vous vous souvenez que vous devez envoyer un message super important \u00e0 quelqu'un, qui ne peut pas attendre m\u00eame une nuit. Vous prenez votre t\u00e9l\u00e9phone, l'allumez et AAAAAA\u2026 le fond clair de votre iMessage ne vous laissera pas dormir pendant encore 3 heures. Alors que le texte clair sur fond sombre n'est pas consid\u00e9r\u00e9 comme pleinement accessible, la disponibilit\u00e9 du mode sombre \u00e0 cet instant augmenterait le confort d'un million. Tout d\u00e9pend de la situation dans laquelle l'utilisateur se trouve \u00e0 ce moment-l\u00e0.<\/strong><\/p>\n

<\/p>\n

C'est pourquoi nous pensons que\u00a0le mode sombre automatique\u00a0<\/strong>est une super id\u00e9e. Il s'active le soir et se d\u00e9sactive le matin. L'utilisateur n'a m\u00eame pas \u00e0 y penser, c'est tr\u00e8s pratique. Twitter a fait un excellent travail avec les param\u00e8tres du mode sombre. De plus, ils proposent \u00e0 la fois un mode sombre standard et un mode encore plus sombre pour tous ces \u00e9crans OLED, favorisant l'\u00e9conomie d'\u00e9nergie et tout ce qui s'y rapporte. Il est important de noter : laissez l'utilisateur basculer manuellement quand il le souhaite : rien de pire que le changement automatique de l'interface sans possibilit\u00e9 de revenir en arri\u00e8re.<\/p>\n

<\/p>\n

\"Des<\/p>\n

Twitter dispose d'un mode sombre automatique qui s'active le soir et se d\u00e9sactive le matin.<\/em><\/p>\n

<\/p>\n

De m\u00eame, lors du d\u00e9veloppement d'un th\u00e8me, il faut garder \u00e0 l'esprit que certaines choses ne peuvent pas \u00eatre rendues sombres.<\/p>\n

<\/p>\n

Prenez un \u00e9diteur de texte, par exemple, Pages. L'interface peut \u00eatre sombre, mais la feuille restera toujours blanche, imitant la v\u00e9ritable feuille de papier.<\/p>\n

<\/p>\n

\"DesPages avec le mode sombre activ\u00e9<\/em><\/p>\n

Il en va de m\u00eame pour tous les types d'\u00e9diteurs de contenu, comme Sketch ou Illustrator. Bien que l'interface puisse \u00eatre sombre, la zone de travail avec laquelle vous travaillez sera toujours blanche par d\u00e9faut.<\/p>\n

<\/p>\n

\"DesSketch en mode sombre avec une zone de travail blanche \u00e9clatante.<\/em><\/p>\n

Donc, quel que soit l'application, nous pensons que les modes sombres deviendront natifs sur votre syst\u00e8me d'exploitation, il est donc pr\u00e9f\u00e9rable de se pr\u00e9parer \u00e0 l'avenir. Ce sera sombre.<\/strong>\u00a0<\/p>\n

<\/p>\n

Si vous souhaitez en savoir plus sur le d\u00e9veloppement d'interfaces sombres, n'h\u00e9sitez pas \u00e0 consulter les directives de Material Design<\/a><\/noindex>, c'\u00e9tait notre principale source d'informations pour cet article.<\/p>\n

Source : 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\udd47Les temps sombres arrivent | ProHoster","description":"Ou ce qu'il faut garder \u00e0 l'esprit lors du d\u00e9veloppement du mode sombre d'une application ou d'un site web. L'ann\u00e9e 2018 a montr\u00e9 : les modes sombres sont en approche.","canonical_url":"https:\/\/prohoster.info\/fr\/blog\/news\/tyomnye-vremena-nastupayut","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"fr_FR","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\/fr\/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\/fr\/wp-json\/wp\/v2\/posts\/35325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/comments?post=35325"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/posts\/35325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/media\/26518"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/media?parent=35325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/categories?post=35325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/tags?post=35325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}