--- sourceDocument: Yokohama Mobile-Konfiguration und -Navigation sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/mobile Release : - yokohama ft:locale : - de-DE ft:publication_title : - Yokohama Mobile-Konfiguration und -Navigation ft:clusterId : - mobile bundleId : - mobile workflow : - Platform --- # Überlegungen zum Farbdesign für Mobilgeräte # Überlegungen zum Farbdesign für Mobilgeräte {#ariaid-title1} * Freigeben Version: Yokohama * * Aktualisiert 30. Januar 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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 {#color-guide-landing__section_rgn_mth_vwb} 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 {#color-guide-landing__section_z3c_xhv_xvb} Bevor Sie mit der Verwendung von Farbvariablen beginnen, beachten Sie die folgenden Richtlinien. Next Experience Muss aktiviert sein : Farbvariablen werden nur wirksam, wenn Next ExperienceIst 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 ExperienceIst 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 für vorhandene Farbeigenschaften. ​ : Beispiel: `BackgroundColorVariable `Wird verwendet für `Hintergrundfarbe ` Konfigurieren Sie sowohl Hex- als auch Farbvariablen : ## Unterstützung von Farbvariablen nach Komponente {#color-guide-landing__section_xrp_fj5_cxb} Verwenden Sie diese Links, um zu erfahren, wie Sie Farbvariablen verwenden, um das Design in Ihren mobilen Komponenten zu ändern. * [Unterstützung von Farbvariablen für UI-Regeln](https://servicenow-prod.fluidtopics.net/itmXEi7~uxVlouAb_s0Fhg "Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design in Ihren mobilen UI-Regeln zu ändern.") * [Unterstützung von Farbvariablen für Symbol-UI-Abschnitte](https://servicenow-prod.fluidtopics.net/iew15VrJfoKIufD~cF4A8g "Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design in Ihren UI-Abschnitten für mobile Symbole zu ändern.") * [Unterstützung von Farbvariablen für Kartensymbole](https://servicenow-prod.fluidtopics.net/~KQKIZxmxbMbrJUTPmwr2Q "Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design in Ihren Symbolen für mobile Karten zu ändern") * [Unterstützung von Farbvariablen für Symbole](https://servicenow-prod.fluidtopics.net/zSGQGHrHG1L69aDWjiEuVQ "Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design auf Ihren mobilen Kartenbildschirmen zu ändern") * [Unterstützung von Farbvariablen für Kartenansichtsvorlagen](https://servicenow-prod.fluidtopics.net/zwCt9rO2Lju~KzjmIZ5LOw "Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design in Ihren mobilen Kartenansichten zu ändern.") * [Unterstützung von Farbvariablen für Kartenansichtsschaltflächen](https://servicenow-prod.fluidtopics.net/u2eLAkN4n_lTI4WB_y_l5Q "Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design in den Schaltflächen für die Kartenansicht für Mobilgeräte zu ändern.") * [Unterstützung von Farbvariablen für Eingabebeschreibungen](https://servicenow-prod.fluidtopics.net/UVwkHqOi6Emt0aipvTm17w "Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design in Ihren Beschreibungen mobiler Eingaben zu ändern.") {#color-guide-landing__ul_o3v_4j5_cxb}