Considérations relatives aux thèmes de couleur pour Mobile

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 3 minutes de lecture

    • Découvrez comment utiliser la couleur dans vos applications Mobile pour améliorer l’expérience utilisateur. L’utilisation des bonnes couleurs pour votre environnement peut aider à guider vos utilisateurs dans votre application et à identifier rapidement les informations importantes.

    Utilisation de la couleur

    Gardez une cohérence dans vos décisions de couleur tout au long de l’application. L’association de tâches ou de workflows spécifiques à des couleurs permet aux utilisateurs de savoir quand ils ne sont pas au bon endroit. Envisagez d’utiliser des couleurs identiques ou similaires pour les applets associés. Par exemple, sélectionner le bleu pour vos applets liées aux incidents et le vert pour les applets de commande de travaux peut aider vos utilisateurs à accéder rapidement aux tâches connexes.

    Évitez d’utiliser trop de couleurs. Des conceptions simples de deux à trois couleurs permettent d’obtenir une mise en page plus propre et plus accessible.

    La couleur peut être utilisée pour améliorer la lisibilité grâce à un meilleur contraste. Dans les zones où le texte apparaît, assurez-vous que votre texte et votre arrière-plan ont un niveau de contraste élevé pour convenir à la fois aux utilisateurs malvoyants et daltoniens. La conformité aux règles WCAG (Web Content Accessibility Guidelines) 2.0 exige un rapport de contraste d’au moins 3 :1. Il existe plusieurs outils en ligne pour vous aider à évaluer le contraste des couleurs.

    Des couleurs complémentaires à contraste élevé peuvent guider l’attention de votre utilisateur. Utilisez ces couleurs pour mettre en évidence les zones de vos applications qui nécessitent l’attention de l’utilisateur.

    Directives générales pour les variables de couleur

    Avant de commencer à utiliser des variables de couleur, gardez à l’esprit les consignes suivantes.
    Next Experience doit être activé
    Les variables de couleur ne prennent effet que lorsqu’elle Next Experience est activée. Sinon, les variables de couleur sont ignorées
    Les couleurs disponibles pour les variables se trouvent dans la table Propriétés du thème UX

    Les variables de couleur utilisent les couleurs définies dans la table Propriétés du thème UX [sys_ux_theme_property].

    Les variables de couleur sont des propriétés additives
    Les propriétés de couleur existantes (utilisant des couleurs codées en dur) continuent de fonctionner si les nouvelles variables de couleur ne sont pas configurées. Toutefois, les propriétés de couleur ne peuvent pas changer dynamiquement la couleur des éléments en fonction du thème.
    Les variables de couleur remplacent les propriétés de couleur
    Les variables de couleur remplacent les propriétés de couleur non variables correspondantes si cette option est activée et si Next Experience la valeur de la variable de couleur est trouvée.
    Par exemple, étant donné cette configuration d’action de règle d’interface utilisateur :
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    et une palette de couleurs Web avec cette configuration :
    {“--now-color-primary-0": “#22ff00”}
    La couleur d’arrière-plan résolue pour cette action de règle d’interface utilisateur sera #22ff00.
    Les propriétés de couleur sont utilisées si une variable est introuvable ou n’a pas de valeur
    La variable de couleur ne sera pas remplacée si la variable est vide ou si la valeur de la variable de couleur est introuvable. Dans ces cas, la propriété de couleur (HEX) est utilisée.
    Par exemple, étant donné cette configuration :
    {“BackgroundColorVariable”: “", “BackgroundColor”: “#3f2c11”}
    La valeur de couleur est #3f2c11.
    Compte tenu de cette configuration : 
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    et une palette de couleurs Web avec cette configuration : 
    {“--now-color-primary-1": “#1134a1”}
    La valeur de la couleur d’arrière-plan est #3f2c11.
    Les variables de couleur utilisent une convention de dénomination
    La convention de dénomination des variables de couleur consiste à ajouter un suffixe de variable aux propriétés de couleur existantes.
    Par exemple, BackgroundColorVariable est utilisé pour BackgroundColor
    Configurer les variables hexadécimales et les variables de couleur

    Prise en charge des variables de couleur par composant

    Utilisez ces liens pour apprendre à utiliser des variables de couleur afin de modifier le thème de vos composants Mobile.