Considérations relatives au thème de couleur pour mobile

  • Rversion finale: Australia
  • Mis à jour 12 mars 2026
  • 3 minutes de lecture

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

    Utilisation de la couleur

    Veillez à ce que vos décisions de couleur soient cohérentes dans l’ensemble 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és 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 donnent une mise en page plus propre et plus accessible.

    La couleur peut être utilisée pour fournir un contraste pour une meilleure lisibilité. Dans les zones où du texte s’affiche, assurez-vous que votre texte et votre arrière-plan ont un niveau de contraste élevé pour répondre aux besoins des utilisateurs malvoyants et daltoniens. La conformité aux Règles pour l’accessibilité des contenus Web (WCAG) 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 requièrent l’attention de vos utilisateurs.

    Directives générales pour les variables de couleur

    Avant de commencer à utiliser des variables de couleur, gardez à l’esprit les instructions suivantes.
    Next Experience doit être activé
    Les variables de couleur ne prennent effet que lorsque cette Next Experience option est activée. Sinon, les variables de couleur sont ignorées
    Les couleurs disponibles pour les variables figurent 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. Cependant, 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 Next Experience cette option est activée et que 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 carte des 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 remplace pas si la variable est vide ou si la valeur de la variable de couleur est introuvable. Dans ce 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 carte des 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 de couleur

    Prise en charge des variables de couleur par composant

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