Ou ce qu'il faut garder à l'esprit lors du développement d'un mode sombre pour une application ou un site
2018 a montré: des modes sombres en route. Maintenant que nous sommes à mi-chemin de 2019, nous pouvons dire avec confiance: ils sont ici et ils sont partout.
Un exemple d'un vieux moniteur vert-noirPour commencer, le mode sombre n'est pas du tout un nouveau concept. Il est utilisé depuis un certain temps. Et une fois, en fait, il n'a été utilisé que pendant longtemps: les moniteurs étaient «vert-noir», mais uniquement parce que le revêtement luminescent à l'intérieur émettait une lueur verdâtre lorsqu'il était exposé aux radiations.
Mais même après l'introduction des moniteurs couleur, le mode sombre a continué de vivre. Pourquoi
Deux raisons principales expliquent pourquoi une personne sur deux se dépêche d'ajouter un thème sombre à sa candidature aujourd'hui. Tout d'abord: les ordinateurs sont partout. Partout où nous regardons, il y a une sorte d'écran. Nous utilisons nos appareils mobiles du matin jusqu'à tard le soir. La présence d'un mode sombre réduit la charge sur les yeux lorsque vous êtes au lit avant de vous coucher «la dernière fois» en feuilletant le soc. réseau. (Si vous me ressemblez, alors "la dernière fois" pourrait signifier un défilement de 3 heures de
R / EngineeringPorn . Mode sombre? Ouais, s'il vous plaît!)
Une autre raison est la nouvelle technologie d'affichage. 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 votre batterie. Imaginez que vous visualisez une image carrée noire sur votre téléphone; avec un écran LCD, le rétro-éclairage illuminera tout l'écran, bien que la plupart soit noir. Mais lors de la visualisation de la même image sur l'écran OLED, les pixels dont le carré noir se compose s'éteignent simplement. Et cela signifie qu'ils ne consomment pas d'énergie du tout.
Ces types d'écrans rendent les modes sombres beaucoup plus intéressants. En utilisant une interface sombre, vous pouvez prolonger considérablement la durée de vie de la batterie de votre appareil. Découvrez les faits et chiffres du sommet Android Dev en novembre dernier pour voir par vous-même . Les modes sombres, bien sûr, vont de pair avec les changements d'interface, 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 rendrait impossible l'utilisation des ombres. Un design similaire sera super plat (dans le mauvais sens).
Il est important de garder à l'esprit les principes de base de l'ombrage / éclairage. Les objets plus élevés devraient être plus clairs dans l'ombre, simulant un éclairage et un ombrage réels. Ainsi, il est plus facile de distinguer les différents composants et leur hiérarchie.
Deux carrés également gris avec une ombre, l'un sur un fond 100% noir, l'autre sur # 121212. Lors du levage, l'objet acquiert une nuance de gris plus claire.
Dans un thème sombre, vous pouvez toujours travailler avec votre couleur primaire habituelle, si le contraste est bon. Illustrons par un exemple.
Dans cette interface, l'action principale est le gros bouton bleu dans le panneau inférieur. Il n'y a pas de problème de contraste lors du passage du mode clair au mode sombre, le bouton attire toujours l'attention, l'icône est claire, en général, tout va bien.
Lorsque la même couleur est utilisée différemment, par exemple dans le texte, il y aura des problèmes. Essayez d'utiliser une teinte (beaucoup) moins saturée de la couleur de base, ou cherchez d'autres façons d'incorporer les couleurs de la marque dans l'interface.
Gauche: le rouge sur le noir est mauvais. À droite: réduisez la saturation - et tout devient bon. - env. perev.
Il en va de même pour toutes les autres couleurs saturées que vous pourriez utiliser, telles que les couleurs d'avertissement ou les erreurs. Google utilise une superposition blanche de 40% sur la couleur de l'erreur par défaut dans ses directives Material Design pour passer en mode sombre. C'est un très bon point de départ, car il améliorera les niveaux de contraste pour répondre aux normes AA. Bien sûr, vous pouvez toujours modifier les paramètres comme vous le souhaitez, mais n'oubliez pas de vérifier les niveaux de contraste. Soit dit en passant, un outil utile à cet effet est le plugin Sketch - Stark , qui montre avec précision le contraste entre les 2 couches.
Et le texte?
Ici, tout est simple: rien ne doit être 100% noir, 100% blanc et vice versa. Le blanc réfléchit les ondes lumineuses de toutes longueurs, le noir - absorbe. Si vous placez du texte 100% blanc sur un fond 100% noir, les lettres refléteront la lumière, maculeront et deviendront moins lisibles, ce qui affectera négativement la lisibilité.
Il en va de même pour un fond 100% blanc qui réfléchit trop de lumière pour se concentrer pleinement sur les mots. Essayez d'adoucir un peu la couleur blanche, utilisez le gris clair pour les arrière-plans et les textes sur les arrière-plans noirs. Cela réduira la pression sur les yeux, les empêchant de surcharger.
Le mode sombre ici ne va pas disparaître
La quantité de temps que nous passons sur les écrans est en constante augmentation, et chaque nouveau jour, de nouveaux écrans apparaissent dans nos vies, du moment où nous nous réveillons jusqu'à ce que nous nous endormions. C'est un phénomène assez nouveau, nos yeux ne sont pas encore habitués à une telle augmentation du temps à l'écran en fin de soirée. C'est là que le mode sombre entre en jeu. Après avoir introduit cette fonction dans macOS et Material Design (et, très probablement, dans iOS), nous pensons que tôt ou tard, elle deviendra par défaut dans toutes les applications, mobiles et de bureau. Et il vaut mieux s'y préparer!
La seule raison de ne pas introduire le mode sombre est lorsque vous êtes absolument sûr à 100% que votre application est utilisée exclusivement en plein jour. Cela se produit cependant rarement.
Il convient de mentionner quelques éléments qui nécessitent une attention particulière lors de la mise en œuvre du régime 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 pratique, car le contraste est généralement plus faible, ce qui n'améliore pas du tout la lisibilité.
Source
Mais imaginez que vous vous préparez pour le lit, que vous voulez vraiment dormir, mais juste avant de vous endormir, vous vous souvenez que vous devez envoyer à quelqu'un un message super important qui ne peut pas attendre même une nuit. Vous prenez votre téléphone, allumez-le et AAAAAA ... le fond clair de votre iMessage ne vous laissera pas endormi pendant encore 3 heures. Bien qu'un texte clair sur un fond sombre ne soit pas considéré comme aussi accessible que possible, avoir un mode sombre à droite cette seconde augmenterait votre confort d'un million. Tout dépend de la situation dans laquelle se trouve actuellement l'utilisateur.
C'est pourquoi nous considérons le mode sombre automatique comme une idée géniale. Il s'allume le soir et s'éteint le matin. L'utilisateur n'a même pas besoin d'y penser, ce qui est très pratique. Twitter a fait un excellent travail avec les paramètres du mode sombre. De plus, ils ont à la fois juste un mode sombre et un mode encore plus sombre pour tous ces écrans OLED, économisant la batterie et tout ce qui s'y rapporte. Il est important de noter ici: laisser l'utilisateur basculer manuellement quand il le veut: il n'y a rien de pire que de changer automatiquement l'interface sans avoir la possibilité de revenir en arrière.
Twitter a un mode sombre automatique qui s'active le soir et s'éteint le matin.
De plus, lors du développement d'un thème, il convient de garder à l'esprit que certaines choses ne peuvent tout simplement pas être obscurcies.
Prenez un éditeur de texte, tel que Pages. Vous pouvez assombrir l'interface, mais la feuille elle-même sera toujours blanche, simulant une vraie feuille de papier.
Pages avec mode sombre activéIl en va de même pour toutes sortes d'éditeurs de contenu, tels que Sketch ou Illustrator. Bien que l'interface puisse être sombre, la plaque de montage avec laquelle vous travaillez sera toujours blanche par défaut.
Le croquis est en mode sombre et a toujours un plan de travail blanc brillant.
Par conséquent, quelle que soit l'application, nous pensons que les modes sombres deviendront natifs du système d'exploitation que vous utilisez, ce qui signifie qu'il vaut mieux se préparer à l'avenir, il sera sombre.
Si vous souhaitez en savoir plus sur le développement d'interfaces sombres, assurez-vous de consulter les directives de conception de matériaux , c'était notre principale source d'informations pour cet article.