Home-theater-designers
Les interfaces utilisateur sombres ont gagné en popularité et de nombreuses applications offrent désormais la possibilité de basculer entre un mode clair et un mode sombre. Cependant, la mise en œuvre d'une interface utilisateur sombre peut être une tâche difficile qui nécessite une attention particulière aux couleurs, aux polices, aux images et à l'espacement utilisés.
Toute erreur dans ces éléments peut entraîner une mauvaise expérience utilisateur. Les conseils suivants devraient vous aider lors de la conception de votre première interface utilisateur sombre.
UTILISEZ LA VIDÉO DU JOUR FAITES DÉFILER POUR CONTINUER AVEC LE CONTENU
1. N'utilisez pas de noir pur
Lors de la conception d'une interface utilisateur sombre, évitez d'utiliser des arrière-plans noirs purs. Il est préférable d'utiliser une nuance de gris foncé. Par exemple, Thème de conception matérielle de Google recommande la couleur #121212.
Un fond noir combiné à du texte blanc peut avoir trop de contraste et provoquer une fatigue oculaire. Des nuances de gris plus foncées peuvent à la place montrer facilement les ombres, la profondeur et l'élévation.
2. Assurez-vous que le contraste du texte respecte les directives WCAG 2.0
Choisissez une combinaison de couleurs qui offre un bon niveau de contraste, de sorte que le texte soit lisible. Les directives WCAG 2.0 stipulent que le texte ou les images de texte doivent avoir un rapport de contraste d'au moins 4,5: 1 avec un texte de grande taille (au moins 18 points ou 14 points en gras) doit avoir un rapport de contraste d'au moins 3: 1.
comment faire une bande dessinée web
Il existe plusieurs outils pour vérifier le contraste des couleurs, y compris le VAGUE Extension Chrome qui vérifie également l'accessibilité des couleurs.
3. Choisissez le bon style de police
Vous devez également prendre en compte les styles de police de votre texte, notamment la taille, l'épaisseur et la hauteur de ligne. Si vous cherchez des options de police, n'oubliez pas qu'il y en a beaucoup de sites qui proposent des polices gratuites . En ce qui concerne la taille de la police, utilisez des valeurs suffisantes pour que le texte soit clair et visible sur un fond sombre.
Considérez les styles suivants pour une page Web :
body {
font-family: "Courier New", monospace;
font-size: 12px;
font-weight: 200;
line-height: 1;
color: #333333;
}
La famille de polices est difficile à lire, la taille de la police est trop petite et le poids de la police est trop léger. Ces styles rendent la page difficile à lire comme vous pouvez le voir sur la capture d'écran ci-dessous.
Vous trouverez ci-dessous quelques styles appropriés que vous pourriez utiliser à la place.
body {
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #FFFFFF;
background-color: #121212;
}
Et voici la page résultante :
4. Évitez les couleurs d'accent saturées
Les couleurs saturées peuvent être trop vives et floues sur des arrière-plans sombres. Au lieu de cela, utilisez des couleurs moins intenses et atténuées. De cette façon, vous créez une interface utilisateur qui contient du texte visible.
Pour illustrer, considérez ces deux styles de bouton :
/* Saturated blue */
.btn-saturated-blue {
background-color: #121212;
color: #0e0bf6;
}
/* Muted blue */
.btn-muted-blue {
background-color: #121212;
color: #4c5ab3;
}
La couleur bleue saturée peut être trop lumineuse et difficile à lire sur un fond sombre, tandis que la couleur bleue atténuée offre un bon contraste et est plus facile à lire.
Un outil comme colorable est utile pour générer des combinaisons de couleurs qui respectent les directives d'accessibilité.
5. Utilisez un espace négatif pour empêcher la création d'une interface utilisateur lourde
Une palette de couleurs sombres peut rendre l'interface utilisateur lourde pour les utilisateurs. Lorsqu'il est utilisé correctement, l'espace négatif peut vous aider à mettre en évidence des éléments importants de l'interface utilisateur et à faciliter la numérisation du texte. Un espacement suffisant peut également rendre le design plus propre et plus moderne.
où est passée mon icône de batterie
Prenez, par exemple, La page de destination d'Apple . L'espace entre les éléments donne à la page un aspect très moderne et visuellement intéressant, permettant aux éléments importants de se démarquer.
6. Utilisez différentes nuances de couleurs pour ajouter de la profondeur à l'interface utilisateur
Lors de la conception d'interfaces utilisateur claires, vous pouvez utiliser des ombres pour ajouter de la profondeur et de l'élévation aux éléments. Cependant, en raison des arrière-plans sombres, les ombres sont parfois difficiles à voir dans les interfaces utilisateur sombres.
Vous pouvez obtenir de la profondeur dans une interface utilisateur sombre en utilisant plusieurs nuances de couleurs sombres. Par exemple, au lieu d'un seul fond sombre, vous pouvez ajouter des nuances plus claires de la même couleur à différents éléments comme les boutons et les modaux.
7. Assurez-vous de correspondre à l'interface utilisateur sombre
Vous n'avez pas besoin d'utiliser les mêmes images pour le mode clair et le mode sombre. Vous pouvez utiliser le mode sombre Requêtes média CSS pour désactiver les images qui correspondent à l'interface utilisateur sombre chaque fois que l'utilisateur bascule en mode sombre.
Par exemple, pour appliquer un motif d'arrière-plan spécifique à des sections de votre page en mode sombre, vous pouvez utiliser le nom de classe .bgpattern et ajouter le code suivant à votre feuille de style.
@media (prefers-color-scheme: dark) {
/* Apply this style in dark mode only */
.bgpattern {
background-image: url("/dark.jpg");
}
}
Cette requête multimédia garantit que l'image d'arrière-plan référencée ne s'affiche que lorsque la palette de couleurs préférée de l'utilisateur est sombre.
Quand utiliser une interface utilisateur sombre
Les conceptions d'interface utilisateur sombres sont un excellent moyen de donner une esthétique moderne à votre site Web ou à votre application. Ils peuvent également minimiser la fatigue oculaire et économiser la durée de vie de la batterie. Cependant, les interfaces utilisateur sombres ne conviennent pas à toutes les applications et vous devez toujours tenir compte de la marque et de la base d'utilisateurs.
En règle générale, les interfaces utilisateur sombres conviennent mieux aux marques qui privilégient le luxe, le prestige, le minimalisme ou le mystère. Ils peuvent également être un excellent choix pour les tableaux de bord et les outils de visualisation.