Überlegungen zu Farbdesigns für Mobilgeräte

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 2 Minuten Lesedauer

    • Erfahren Sie, wie Sie Farben in Ihren Mobile-Anwendungen verwenden, um die Benutzer-Experience zu verbessern. Die Verwendung der richtigen Farben für Ihre Umgebung kann dazu beitragen, Ihre Benutzer durch Ihre App zu führen und wichtige Informationen schnell zu identifizieren.

    Farbe wird verwendet

    Sorgen Sie in der gesamten App für Konsistenz bei Ihren Farbentscheidungen. Durch die Zuordnung bestimmter Aufgaben oder Workflows zu Farben wissen Benutzer, wenn sie sich nicht am richtigen Ort befinden. Erwägen Sie die Verwendung derselben oder ähnlicher Farben für zugehörige Applets. Wenn Sie beispielsweise Blau für Ihre Incident-bezogenen Applets und Grün für Arbeitsauftrags-Applets auswählen, können Ihre Benutzer schnell zu zugehörigen Aufgaben gelangen.

    Vermeiden Sie die Verwendung zu vieler Farben. Einfache Designs mit zwei bis drei Farben führen zu einem übersichtlicheren und zugänglicheren Layout.

    Farbe kann verwendet werden, um Kontrast für eine bessere Lesbarkeit bereitzustellen. Stellen Sie in Bereichen, in denen Text angezeigt wird, sicher, dass Text und Hintergrund ein hohes Maß an Kontrast aufweisen, um sowohl für schlecht sehende als auch für farbblinde Benutzer geeignet zu sein. Die Einhaltung der Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 erfordert ein Kontrastverhältnis von mindestens 3:1. Im Internet sind mehrere Tools verfügbar, die bei der Messung des Farbkontrasts helfen.

    Hoher Kontrast, Komplementärfarben können den Fokus des Anwenders lenken. Verwenden Sie diese Farben, um Bereiche Ihrer Anwendungen hervorzuheben, die die Aufmerksamkeit Ihrer Benutzer erfordern.

    Allgemeine Richtlinien für Farbvariablen

    Bevor Sie Farbvariablen verwenden, beachten Sie die folgenden Richtlinien.
    Next Experience muss aktiviert sein
    Farbvariablen werden nur wirksam, wenn Next Experience aktiviert ist. Andernfalls werden Farbvariablen ignoriert
    Die für Variablen verfügbaren Farben befinden sich in der Tabelle „UX-Designeigenschaften“.

    Farbvariablen verwenden Farben, die in der Tabelle „UX-Designeigenschaften“ [sys_ux_theme_property] definiert sind.

    Farbvariablen sind zusätzliche Eigenschaften
    Vorhandene Farbeigenschaften (mit hartcodierten Farben) funktionieren weiterhin, wenn die neuen Farbvariablen nicht konfiguriert werden. Farbeigenschaften können jedoch die Farbe von Elementen basierend auf dem Design nicht dynamisch ändern.
    Farbvariablen überschreiben Farbeigenschaften
    Farbvariablen überschreiben die entsprechenden nicht variablen Farbeigenschaften, wenn Next Experience aktiviert ist und der Farbvariablenwert gefunden wird.
    Beispiel für die Konfiguration dieser UI-Regelaktion:
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    und eine Web-Farbkarte mit der folgenden Konfiguration:
    {“--now-color-primary-0": “#22ff00”}
    Die aufgelöste Hintergrundfarbe für diese UI- Regelaktion lautet #22ff00.
    Farbeigenschaften werden verwendet, wenn eine Variable nicht gefunden wird oder keinen Wert hat
    Die Farbvariable wird nicht überschrieben, wenn die Variable leer ist oder der Wert der Farbvariablen nicht gefunden wird. In diesen Fällen wird die Farbeigenschaft (HEX) verwendet.
    Beispiel:
    {“BackgroundColorVariable”: “", “BackgroundColor”: “#3f2c11”}
    Der Farbwert ist #3f2c11.
    Angesichts dieser Konfiguration: 
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    und eine Web-Farbkarte mit der folgenden Konfiguration: 
    {“--now-color-primary-1": “#1134a1”}
    Der Hintergrundfarbwert ist #3f2c11.
    Farbvariablen verwenden eine Namenskonvention
    Die Benennungskonvention für Farbvariablen besteht darin, vorhandenen Farbeigenschaften ein Variablensuffix hinzuzufügen
    Zum Beispiel wird BackgroundColorVariable für BackgroundColorverwendet
    Konfigurieren Sie sowohl Hex- als auch Farbvariablen

    Farbvariablenunterstützung nach Komponente

    Verwenden Sie diese Links, um zu erfahren, wie Sie Farbvariablen verwenden, um das Design in Ihren Mobile-Komponenten zu ändern.