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

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 3 minutes de lecture

    • Découvrez comment utiliser la couleur dans vos applications mobiles 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 couleurs tout au long de l’application. L’association de tâches ou de workflows spécifiques à des couleurs aide les utilisateurs à 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 les 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 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 s’adapter à la fois aux 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 disponibles 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 surbrillance les zones de vos applications qui requièrent 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 instructions suivantes.
    Next Experience doit être activé
    Les variables de couleur ne prennent effet que lorsqu’elles Next Experience sont activées. 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 modifier 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é la configuration de l’action de règle d’interface utilisateur suivante :
    {“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 ce cas, la propriété de couleur (HEX) est utilisée.
    Par exemple, compte tenu de 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 nommage 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 à la fois 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 pour modifier le thème dans vos composants mobiles.