Ou ce qu'il faut garder à l'esprit lors du développement d'un mode sombre pour une application ou un site
L'année 2018 a montré que les modes sombres sont en train d'arriver. Maintenant que nous sommes déjà à mi-chemin de 2019, nous pouvons affirmer avec certitude : ils sont ici et partout.
Commençons par le fait que le mode sombre n'est pas une nouvelle conception. Il est utilisé depuis longtemps. À une époque, il n'y avait en fait que cela : les moniteurs étaient de type « vert sur noir », mais seulement parce que le revêtement fluorescent à l'intérieur émettait une lueur verdâtre lorsqu'il était exposé à des radiations.
Mais même après l'introduction des moniteurs couleur, le mode sombre a continué à exister. Pourquoi donc ?
Il y a deux principales raisons qui expliquent pourquoi aujourd'hui chacun se presse d'ajouter un mode sombre à son application. Tout d'abord : les ordinateurs sont partout. Où que nous regardions, il y a un écran. Nous utilisons nos appareils mobiles du matin au soir. Avoir un mode sombre réduit la fatigue oculaire lorsque vous faites défiler votre fil d'actualité sur les réseaux sociaux « une dernière fois » avant de vous coucher. (Si vous êtes comme moi, « une dernière fois » peut signifier un défilement de 3 heures. . Mode sombre ? Eh bien, oui !)
Une autre raison est les nouvelles technologies de fabrication des écrans. Les modèles phares des grandes entreprises — Apple, Google, Samsung, Huawei — sont tous équipés d'écrans OLED, qui, contrairement aux écrans LCD, ne nécessitent pas de rétroéclairage. Et c'est vraiment une bonne nouvelle pour la batterie de votre appareil. Imaginez que vous regardez une image d'un carré noir sur votre téléphone ; avec un écran LCD, le rétroéclairage éclairera tout l'écran, bien qu'une grande partie soit noire. Mais en regardant la même image sur un écran OLED, les pixels qui composent le carré noir s'éteignent simplement. Donc, ils ne consomment aucune énergie.
Ces types d'écrans rendent les modes sombres de beaucoup plus intéressants. En utilisant une interface sombre, vous pouvez considérablement prolonger la durée de vie de la batterie de votre appareil. Les modes sombres vont bien sûr de pair avec les changements d'UI, alors rafraîchissons nos connaissances !
Modes sombres 101
Tout d'abord : « sombre » n'est pas égal à « noir ». 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).
Il est important de garder à l'esprit les principes de base de l'ombre/lumière. Les objets qui sont plus en hauteur doivent être plus clairs à l'ombre, imitant un éclairage et une ombre réels. Ainsi, il est plus facile de différencier les différents composants et leur hiérarchie.
Deux carrés gris identiques avec une ombre, l'un sur un fond noir à 100 %, l'autre sur #121212. En s'élevant, l'objet prend une teinte de gris plus claire.
Dans un thème sombre, vous pouvez toujours travailler avec votre couleur principale habituelle, si le contraste est en ordre. Illustrons cela avec un exemple.
Dans cette interface, l'action principale est un grand bouton bleu dans la barre inférieure. Il n'y a pas de problème de contraste lors du passage en mode clair ou sombre, le bouton attire toujours l'attention, l'icône est claire, en général, tout est excellent.
Lorsque la même couleur est utilisée de manière différente, par exemple dans le texte, il y aura des problèmes. Essayez d'utiliser une teinte (beaucoup) moins saturée de la couleur principale ou cherchez d'autres moyens d'intégrer les couleurs de la marque dans l'interface.
À gauche : le rouge sur noir semble mauvais. À droite : diminuons la saturation — et tout devient bon. — note du trad.
Il en va de même pour toutes les autres couleurs saturées que vous avez pu utiliser, comme les couleurs d'avertissement ou d'erreur. Google utilise un superposition d'une couche blanche à 40 % sur la couleur par défaut d'erreur dans ses lors du passage en mode sombre. C'est un bon point de départ, car cela améliorera les niveaux de contraste pour répondre aux normes AA. Bien sûr, vous pouvez toujours ajuster les paramètres à votre convenance, mais n'oubliez pas de vérifier les niveaux de contraste. D'ailleurs, un outil utile pour cela est un plugin pour Sketch — , qui montre exactement combien de contraste existe entre 2 couches.
Et qu'en est-il du texte ?
C'est simple : rien ne doit être 100 % noir ou 100 % blanc, et vice versa. Le blanc reflète 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éfléchiront la lumière, deviendront floues et seront moins agréables à lire, ce qui nuira à la lisibilité.
Il en va de même pour un fond 100 % blanc, qui reflète trop de lumière 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éduira la fatigue oculaire, évitant
Le mode sombre n'est pas près de disparaître ici
Le temps que nous passons devant les écrans augmente constamment, et chaque jour, de nouveaux écrans apparaissent dans nos vies, depuis le moment où nous nous réveillons jusqu'à ce que nous nous endormions. C'est un phénomène relativement nouveau, nos yeux ne sont pas encore habitués à ce temps d'écran accru tard dans la nuit. C'est là que le mode sombre entre en jeu. Depuis l'introduction de cette fonctionnalité dans macOS et Material Design (et probablement dans iOS), nous pensons qu'il finira par devenir par défaut dans toutes les applications, qu'elles soient mobiles ou de bureau. Et il vaut mieux être préparé !
La seule raison de ne pas mettre en œuvre le mode sombre est si vous êtes absolument sûr à 100 % que votre application est utilisée uniquement en pleine lumière du jour. Cela arrive, en vérité, rarement.
Il convient de mentionner plusieurs points qui nécessiteront une attention particulière lors de la mise en œuvre du mode sombre, en plus des principes de base résumés précédemment.
Du point de vue de l'accessibilité, le mode sombre n'est pas le plus convivial, car le contraste est généralement plus faible, ce qui n'améliore pas la lisibilité.
Mais imaginez que vous vous préparez à dormir, que vous avez très envie de dormir, mais juste avant de vous endormir, vous vous souvenez que vous devez envoyer un message super important à quelqu'un, qui ne peut pas attendre même une nuit. Vous prenez votre téléphone, l'allumez et AAAAAA… 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éré comme pleinement accessible, la disponibilité du mode sombre à cet instant augmenterait le confort d'un million. Tout dépend de la situation dans laquelle l'utilisateur se trouve à ce moment-là.
C'est pourquoi nous pensons que le mode sombre automatique est une super idée. Il s'active le soir et se désactive le matin. L'utilisateur n'a même pas à y penser, c'est très pratique. Twitter a fait un excellent travail avec les paramètres du mode sombre. De plus, ils proposent à la fois un mode sombre standard et un mode encore plus sombre pour tous ces écrans OLED, favorisant l'économie d'énergie 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é de revenir en arrière.
Twitter dispose d'un mode sombre automatique qui s'active le soir et se désactive le matin.
De même, lors du développement d'un thème, il faut garder à l'esprit que certaines choses ne peuvent pas être rendues sombres.
Prenez un éditeur de texte, par exemple, Pages. L'interface peut être sombre, mais la feuille restera toujours blanche, imitant la véritable feuille de papier.
Pages avec le mode sombre activé
Il en va de même pour tous les types d'éditeurs de contenu, comme Sketch ou Illustrator. Bien que l'interface puisse être sombre, la zone de travail avec laquelle vous travaillez sera toujours blanche par défaut.
Sketch en mode sombre avec une zone de travail blanche éclatante.
Donc, quel que soit l'application, nous pensons que les modes sombres deviendront natifs sur votre système d'exploitation, il est donc préférable de se préparer à l'avenir. Ce sera sombre.
Si vous souhaitez en savoir plus sur le développement d'interfaces sombres, n'hésitez pas à consulter les directives de , c'était notre principale source d'informations pour cet article.
Source : habr.com
