Überlegungen zum Farbdesign für Mobilgeräte

  • Freigeben Version: Australia
  • Aktualisiert 12. März 2026
  • 2 Minuten Lesedauer

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

    Farbe wird verwendet

    Halten Sie Ihre Farbentscheidungen in der gesamten App konsistent. Durch die Zuordnung bestimmter Aufgaben oder Workflows zu Farben wissen Anwender, wann sie sich nicht am richtigen Ort befinden. Erwägen Sie, dieselben oder ähnliche Farben für zugehörige Applets zu verwenden. Wenn Sie beispielsweise Blau für Ihre Incident-bezogenen Applets und Grün für Arbeitsauftrags-Applets auswählen, können Ihre Anwender schnell zu zugehörigen Aufgaben gelangen.

    Verwenden Sie nicht zu viele Farben. Einfache Designs mit zwei bis drei Farben führen zu einem saubereren, zugänglicheren Layout.

    Farbe kann verwendet werden, um Kontrast für eine bessere Lesbarkeit zu bieten. Stellen Sie in Bereichen, in denen Text angezeigt wird, sicher, dass Ihr Text und Ihr Hintergrund einen hohen Kontrast aufweisen, um sowohl schwache als auch farbblinde Anwender aufzunehmen. Die Compliance mit Richtlinien für Barrierefreiheit für Webinhalte (WCAG) 2,0 erfordert ein Kontrastverhältnis von mindestens 3:1. Es sind mehrere Tools online verfügbar, die beim Anzeigen des Farbkontrast helfen.

    Kontrastreiche, ergänzende Farben können den Fokus Ihres Anwenders lenken. Verwenden Sie diese Farben, um Bereiche Ihrer Anwendungen hervorzuheben, die die Aufmerksamkeit Ihres Anwenders erfordern.

    Allgemeine Richtlinien für Farbvariablen

    Bevor Sie mit der Verwendung von Farbvariablen beginnen, beachten Sie die folgenden Richtlinien.
    Next Experience Muss aktiviert sein
    Farbvariablen werden nur wirksam, wenn Next Experience Ist aktiviert. Andernfalls werden Farbvariablen ignoriert
    Verfügbare Farben für Variablen befinden sich in der Tabelle „UX-Designeigenschaften“

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

    Farbvariablen sind additive Eigenschaften
    Vorhandene Farbeigenschaften (mit hartcodierten Farben) funktionieren weiterhin, wenn die neuen Farbvariablen nicht konfiguriert sind. Farbeigenschaften können jedoch die Farbe von Elementen nicht dynamisch basierend auf dem Design ändern​.
    Farbvariablen überschreiben Farbeigenschaften
    Farbvariablen überschreiben die entsprechenden nicht variablen Farbeigenschaften, wenn Next Experience Ist aktiviert, und der Wert der Farbvariablen wurde gefunden.
    Beispiel: Bei der Konfiguration dieser UI-Regelaktion:
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    Und eine Webfarbkarte mit dieser Konfiguration:
    {“--now-color-primary-0": “#22ff00”}
    Die aufgelöste Hintergrundfarbe für diese UI-Regelaktion ist #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 Farbvariablenwert nicht gefunden wird. In diesen Fällen wird die Farbeigenschaft (HEX) verwendet.
    Beispiel: Bei dieser Konfiguration:
    {“BackgroundColorVariable”: “", “BackgroundColor”: “#3f2c11”}
    Der Farbwert ist #3f2c11 .
    Bei dieser Konfiguration: 
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    Und eine Webfarbkarte mit dieser Konfiguration: 
    {“--now-color-primary-1": “#1134a1”}
    Der Wert für die Hintergrundfarbe ist #3f2c11 .
    Farbvariablen verwenden eine Benennungskonvention
    Die Benennungskonvention von Farbvariablen besteht darin, einen hinzuzufügen Variable Suffix zu vorhandenen Farbeigenschaften. ​
    Beispiel: BackgroundColorVariable Wird verwendet für Hintergrundfarbe
    Konfigurieren Sie sowohl Hex- als auch Farbvariablen

    Unterstützung von Farbvariablen nach Komponente

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