Überlegungen zum Farbdesign für Mobilgeräte

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 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 Ihre Anwender durch Ihre App führen und wichtige Informationen schnell identifizieren.

    Mit Farbe

    Halten Sie Ihre Farbentscheidungen in der gesamten App konsistent. Die Zuordnung bestimmter Aufgaben oder Workflows zu Farben hilft Anwendern zu wissen, wann sie sich nicht am richtigen Ort befinden. Erwägen Sie, die gleichen oder ähnlichen Farben für zugehörige Applets zu verwenden. Wenn Sie beispielsweise Blau für Ihre Applets im Zusammenhang mit Incidents und Grün für Arbeitsauftrags-Applets auswählen, können Ihre Anwender 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, zugänglicheren Layout.

    Farbe kann verwendet werden, um Kontrast für eine bessere Lesbarkeit zu schaffen. Stellen Sie in Bereichen, in denen Text angezeigt wird, sicher, dass Ihr Text und Ihr Hintergrund einen hohen Kontrast aufweisen, um sowohl schwache Sicht- als auch farbblinde Anwender zu berücksichtigen. Die Compliance mit Web Content Accessibility Guidelines (WCAG) 2,0 erfordert ein Kontrastverhältnis von mindestens 3:1. Es sind mehrere Tools online verfügbar, die beim Anzeigen des Farbkontrasts 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
    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 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 Web-Farbkarte mit dieser Konfiguration:
    {“--now-color-primary-0": “#22ff00”}
    Die aufgelöste Hintergrundfarbe für diese UI-Regelaktion ist Nr. 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: Bei dieser Konfiguration:
    {“BackgroundColorVariable”: “", “BackgroundColor”: “#3f2c11”}
    Der Farbwert ist #3f2c11 .
    Bei dieser Konfiguration: 
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    Und eine Web-Farbkarte 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 für verwendet BackgroundColor
    Konfigurieren Sie Hex- und 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.