Ou ce qu'il faut garder à l'esprit lors du développement d'un mode sombre pour une application ou un site Web
2018 a montré que les modes sombres étaient en route. Maintenant que nous sommes à la moitié de l’année 2019, nous pouvons affirmer avec confiance : ils sont là et ils sont partout.
Commençons par le fait que le mode sombre n’est pas du tout un concept nouveau. Il est utilisé depuis assez longtemps. Et il était une fois, en fait, pendant longtemps, la seule chose qu'ils utilisaient : les moniteurs étaient du type « vert sur 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é d’exister. Pourquoi cela est-il ainsi?
Il y a deux raisons principales qui expliquent pourquoi aujourd'hui une personne sur deux est pressée d'ajouter un thème sombre à son application. 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 jusque tard le soir. La présence d’un mode sombre réduit la fatigue oculaire lorsque vous êtes au lit avant de vous coucher pour la « dernière fois » en parcourant votre flux social. réseaux. (Si vous êtes comme moi, "la dernière fois" pourrait signifier un parchemin de 3 heures . Mode sombre ? Oui s'il vous plait! )
Une autre raison réside dans les nouvelles technologies de production d’é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 une très bonne nouvelle pour votre batterie. Imaginez que vous regardez l'image d'un carré noir sur votre téléphone ; avec un écran LCD, le rétroéclairage éclairera tout l’écran même si la majeure partie est noire. Mais lorsque vous visualisez la même image sur un écran OLED, les pixels qui composent le carré noir sont simplement éteints. Cela signifie qu’ils ne consomment aucune énergie.
Ces types d'affichages 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. . Les modes sombres vont bien sûr de pair avec les modifications de l’interface utilisateur, alors révisons nos connaissances !
Modes sombres 101
Tout d’abord : « foncé » n’est pas la même chose que « noir ». N'essayez pas de remplacer un fond blanc par un fond noir, car cela rendrait impossible l'utilisation des ombres. Un design comme celui-ci 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 doivent être plus clairs dans l’ombre, simulant ainsi l’éclairage et les ombres réels. Cela facilite la distinction entre les différents composants et leur hiérarchie.
Deux carrés gris identiques avec une ombre, l'un sur fond 100% noir, l'autre sur #121212. À mesure que l’objet s’élève, sa nuance de gris devient plus claire.
Dans un thème sombre, vous pouvez toujours travailler avec votre couleur de base habituelle tant que le contraste est correct. Expliquons avec un exemple.
Dans cette interface, l'action principale est le gros bouton bleu dans la barre du bas. Il n'y a aucun problème en termes de contraste lors du passage du mode clair au mode sombre, le bouton est toujours accrocheur, l'icône est claire et dans l'ensemble tout va bien.
Lorsque la même couleur est utilisée de différentes manières, par exemple dans un texte, des problèmes surgissent. Essayez d'utiliser une nuance (beaucoup) moins saturée de la couleur principale ou recherchez d'autres moyens d'incorporer les couleurs de la marque dans l'interface.
À gauche : le rouge sur le noir semble mauvais. À droite : réduisez la saturation et tout semble bon. - environ. traduction
Il en va de même pour toutes les autres couleurs fortes que vous auriez pu utiliser, telles que les couleurs d'avertissement ou d'erreur. Google utilise une superposition de calque blanc de 40 % au-dessus de la couleur d'erreur par défaut dans son lors du passage en mode sombre. C'est un très bon point de départ car cela améliorera les niveaux de contraste pour correspondre aux normes AA. Vous pouvez bien sûr toujours modifier les paramètres comme bon vous semble, mais veillez à vérifier les niveaux de contraste. À propos, un outil utile à cet effet est le plugin Sketch - , qui montre exactement le contraste entre 2 couches.
Et le texte ?
Tout est simple ici : rien ne doit être 100 % noir et 100 % blanc et vice versa. Le blanc reflète les ondes lumineuses de toutes les longueurs d'onde, le noir les absorbe. Si vous placez du texte 100 % blanc sur un fond 100 % noir, les lettres refléteront la lumière, tacheront et deviendront moins lisibles, ce qui aura un impact négatif sur 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 la couleur blanche, utilisez du gris clair pour les arrière-plans et le texte sur les arrière-plans noirs. Cela réduira la fatigue oculaire, empêchant
Le mode sombre est là et ne disparaîtra pas
Le temps que nous passons devant les écrans ne cesse de croître et chaque jour, de nouveaux écrans apparaissent dans nos vies, depuis le réveil jusqu'à l'endormissement. Il s’agit d’un phénomène assez nouveau, nos yeux ne sont pas encore habitués à cette augmentation du temps d’écran en fin de soirée. C'est là que le mode sombre entre en jeu. Avec l'introduction de cette fonctionnalité dans macOS et Material Design (et très probablement dans iOS), nous pensons que tôt ou tard, elle deviendra la valeur 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 implémenter le mode sombre est lorsque vous êtes absolument sûr à 100 % que votre application est utilisée exclusivement en plein jour. Toutefois, cela n’arrive pas souvent.
Il convient de mentionner quelques éléments qui nécessiteront une attention particulière lors de la mise en œuvre du mode sombre, au-delà des principes de base résumés précédemment.
En termes d'accessibilité, le mode sombre n'est pas le plus pratique, puisque le contraste est généralement plus faible, ce qui n'améliore en rien la lisibilité.
Mais imaginez que vous vous préparez à vous coucher, que vous voulez vraiment dormir, mais juste avant de vous endormir, vous vous souvenez que vous devez envoyer à quelqu'un un message très important qui ne peut pas attendre même une nuit. Vous prenez votre téléphone, l'allumez et AAAAAAH... le fond clair de votre iMessage vous tiendra éveillé pendant encore 3 heures. Bien qu'un texte clair sur un fond sombre ne soit pas considéré comme le plus accessible, avoir un mode sombre dès cette seconde serait Augmentez la commodité d'un million. Tout dépend de la situation dans laquelle se trouve actuellement l'utilisateur.
C'est pourquoi nous pensons mode sombre automatique une idée tellement cool. 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 ses paramètres de mode sombre. De plus, ils disposent à la fois d'un mode sombre et d'un mode encore plus sombre pour tous ces écrans OLED, économisant ainsi la batterie et tout ce qui s'y rapporte. Il est important de noter ici : donner à l’utilisateur la possibilité de basculer manuellement quand il le souhaite : il n’y a rien de pire que de changer automatiquement d’interface sans possibilité de revenir en arrière.
Twitter dispose d'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 assombries.
Prenez un éditeur de texte comme Pages. Vous pouvez assombrir l'interface, mais la feuille elle-même sera toujours blanche, simulant une vraie feuille de papier.
Pages avec le mode sombre activé
Il en va de même pour tous les types d’éditeurs de création de contenu, comme Sketch ou Illustrator. Bien que l'interface puisse être rendue sombre, le plan de travail avec lequel vous travaillez sera toujours blanc par défaut.
Esquissez en mode sombre tout en conservant un plan de travail blanc brillant.
Ainsi, quelle que soit l'application, nous pensons que les modes sombres seront intégrés au système d'exploitation que vous utilisez, ce qui signifie qu'il est préférable de préparer l'avenir. il fera nuit.
Si vous souhaitez en savoir plus sur le développement d'interfaces utilisateur sombres, assurez-vous de consulter les directives , c'était notre principale source d'information pour cet article.
Source: habr.com