Überlegungen zum Farbdesign für Mobilgeräte

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 2 Minuten Lesedauer

    • Erfahren Sie, wie Sie Farbe in Ihren mobilen Anwendungen verwenden, um die Anwender-Experience zu verbessern. Wenn Sie die richtigen Farben für Ihre Umgebung verwenden, können Sie Ihre Anwender durch die App führen und wichtige Informationen schnell erkennen.

    Farbe wird verwendet

    Stellen Sie sicher, dass Ihre Farbentscheidungen in der gesamten App konsistent sind. Durch das Zuordnen bestimmter Aufgaben oder Workflows zu Farben wissen Anwender, wenn sie nicht am richtigen Ort sind. 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, gelangen Ihre Benutzer schneller zu zugehörigen Aufgaben.

    Vermeiden Sie die Verwendung zu vieler Farben. Einfache Designs mit zwei bis drei Farben ergeben ein übersichtlicheres und zugänglicheres Layout.

    Farbe kann verwendet werden, um Kontrast und dadurch bessere Lesbarkeit zu erzielen. Stellen Sie in Bereichen, in denen Text angezeigt wird, sicher, dass Text und Hintergrund einen hohen Kontrast aufweisen, um sowohl schlecht sehende als auch Farbenblinde Anwender zu unterstützen. Die Compliance mit den Web Content Accessibility Guidelines (WCAG) 2.0 erfordert ein Kontrastverhältnis von mindestens 3:1. Es stehen online mehrere Tools zur Verfügung, die bei der Messung des Farbkontrasts helfen.

    Kontrastreiche Komplementärfarben können die Aufmerksamkeit des Anwenders lenken. Verwenden Sie diese Farben, um Bereiche Ihrer Anwendungen hervorzuheben, die die Aufmerksamkeit der Anwender erfordern.

    Allgemeine Richtlinien für Farbvariablen

    Beachten Sie vor der Verwendung von Farbvariablen 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 sind. 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 Wert der Farbvariablen gefunden wird.
    Beispiel:
    {“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 lautet #22ff00.
    Farbeigenschaften werden verwendet, wenn eine Variable nicht gefunden wurde oder keinen Wert hat
    Die Farbvariable wird nicht überschrieben, wenn die Variable leer ist oder der Farbvariablenwert nicht gefunden wurde. In diesen Fällen wird die Farbeigenschaft (HEX) verwendet.
    Beispiel:
    {“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 Namenskonvention
    Die Namenskonvention von Farbvariablen besteht darin, vorhandenen Farbeigenschaften ein Variablensuffix hinzuzufügen.
    Beispielsweise wird „BackgroundColorVariable“ für „BackgroundColor“verwendet
    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 Ihrer mobilen Komponenten zu ändern.