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

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 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

    Gardez la cohérence de vos décisions de couleur dans toute 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 d’incident 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 apparaît, 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 votre utilisateur.

    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 Next Experience est activé. Sinon, les variables de couleur sont ignorées
    Les couleurs disponibles pour les variables se trouvent dans la table des propriétés du thème UX

    Les variables de couleur utilisent des 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 (à l’aide de 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 sans variable correspondantes si cette option est activée et que 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 carte couleur 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 carte couleur Web avec cette configuration : 
    {“--now-color-primary-1": “#1134a1”}
    La valeur de 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 changer de thème dans vos composants mobiles.