Unterstützung von Farbvariablen für Symbole

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

    • Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design in Ihren Mobile-Kartenbildschirmen zu ändern

    Mobile-Symbole verfügen über einen Abschnitt „ Darstellung festlegen“, in dem Sie die Darstellung Ihrer Symbole festlegen können. Verwenden Sie die Stiloption FontColorVariable, um eine Farbvariable als Farbe zu verwenden.

    Mit diesem Stil können Sie eine beliebige Farbvariable aus der Tabelle „UX-Designeigenschaften“ [sys_ux_theme_property] definieren. Eine Liste der verfügbaren Variablen finden Sie im Farbdesignleitfaden unten.

    Weitere Informationen zum Erstellen von Kartenbildschirmen finden Sie unter UI-Abschnitt vom Typ „Symbol“ konfigurieren.

    Weitere Informationen zum Erstellen von Symbolen in Mobile finden Sie unter Mobile-Symbole.

    		 In einem Symbol verwendete Farbvariable

    Farbleitfaden für Mobile-Symbole

    Farbvariablen sind unterteilt in Verwenden Sie die Designrichtlinie, um die richtige Farbvariable für Ihren Anwendungsfall zu identifizieren.

    Warnungsfarbpalette
    Farben der Warnungsfarbpalette heben wichtige Status, Status und Aufgaben hervor. Verwenden Sie Warnungsfarben, um eine bestimmte Bedeutung zu kommunizieren, und nicht zur Dekoration oder Organisation.
    Gruppierte Farbpalette
    Farben in gruppierten Farbpaletten folgen den Farbkonventionen in einer Branche. Verwenden Sie diese Farben, um anzuzeigen, dass das farbige Element einer bestimmten Branche oder Branche zugeordnet ist. Die Bedeutung jeder Farbe hängt vom Kontext ab, sollte jedoch in Ihrer App konsistent bleiben.

    Für jede Supportfarbe gibt es drei Optionen, darunter eine bewertbare Option. Erwägen Sie die Verwendung der barrierefreien Farboption für Symbole, die keinen Text enthalten, um die Navigation für Ihre Benutzer zu verbessern.

    Tabelle : 1. Warnungsfarbpalette
    Farbname Beispiel Farbvariablen
    Kritisch Wichtige Mobile-Symbole
    Mobile-Variablen
    • Option 1: alert--critical-2
    • Option 2: alert--critical-3
    • Option 3 (Zugänglich): alert--critical-4
    Webvariable
    • Option 1:--now-color_alert--critical-2
    • Option 2:--now-color_alert--critical-3
    • Option 3 (Zugänglich):--now-color_alert--critical-4
    Hoch High-Mobile-Symbole
    Mobile-Variablen
    • Option 1: alert--high-2
    • Option 2: alert--high-3
    • Option 3 (Zugänglich): alert--high-4
    Webvariable
    • Option 1:--now-color_alert--high-2
    • Option 2:--now-color_alert--high-3
    • Option 3 (Zugänglich):--now-color_alert--high-4
    Warnung Warnung für Mobile-Symbole
    Mobile-Variablen
    • Option 1: alert--warning-2
    • Option 2: alert--warning-3
    • Option 3 (Zugänglich): alert--warning-4
    Webvariable
    • Option 1:--now-color_alert--warning-2
    • Option 2:--now-color_alert--warning-3
    • Option 3 (Zugänglich):--now-color_alert--warning-4
    Mittel Moderate Mobile-Symbole
    Mobile-Variablen
    • Option 1: alert--moderate-2
    • Option 2: alert--moderate-3
    • Option 3 (Zugänglich): alert--moderate-4
    Webvariable
    • Option 1:--now-color_alert--moderate-2
    • Option 2:--now-color_alert--moderate-3
    • Option 3 (Zugänglich):--now-color_alert--moderate-4
    Info Mobile Info-Symbole
    Mobile-Variablen
    • Option 1: alert--info-2
    • Option 2: alert--info-3
    • Option 3 (Zugänglich): alert--info-4
    Webvariable
    • Option: 1--now-color_alert--info-2
    • Option 2:--now-color_alert--info-3
    • Option 3 (Zugänglich):--now-color_alert--info-4
    Positiv Positive Mobile-Symbole
    Mobile-Variablen
    • Option 1: alert--positive-2
    • Option 2: alert--positive-3
    • Option 3 (Zugänglich): alert--positive-4
    Webvariable
    • Option 1:--now-color_alert--positive-2
    • Option 2:--now-color_alert--positive-3
    • Option 3 (Zugänglich):--now-color_alert--positive-4
    Niedrig Niedrige Mobile-Symbole
    Mobile-Variablen
    • Option 1: alert--low-2
    • Option 2: alert--low-3
    • Option 3 (Zugänglich): alert--low-4
    Webvariable
    • Option 1:--now-color_alert--low-2
    • Option 2:--now-color_alert--low-3
    • Option 3 (Zugänglich):--now-color_alert--low-4
    Tabelle : 2. Gruppierte Farbpalette
    Farbname Beispiel Farboptionen
    Blau Blaue Mobile-Symbole
    Webvariable
    • Option 1:--now-color_grouped--blue-2
    • Option 2:--now-color_grouped--blue-3
    • Option 3 (Zugänglich):--now-color_grouped--blue-4
    Braun Braune Mobile-Symbole
    Webvariable
    • Option 1:--now-color_grouped--brown-2
    • Option 2:--now-color_grouped--brown-3
    • Option 3 (Zugänglich):--now-color_grouped--brown-4
    Grau Graue Mobile-Symbole
    Webvariable
    • Option 1:--now-color_grouped--gray-2
    • Option 2:--now-color_grouped--gray-3
    • Option 3 (Zugänglich):--now-color_grouped--gray-4
    Grün Grüne Mobile-Symbole
    Webvariable
    • Option 1:--now-color_grouped--grün-2
    • Option 2:--now-color_grouped--grün-3
    • Option 3 (Zugänglich):--now-color_grouped--grün-4
    Grüngelb Grün-gelbe Mobile-Symbole
    Webvariable
    • Option 1:--now-color_grouped--grün-gelb-2
    • Option 2:--now-color_grouped--grün-gelb-3
    • Option 3 (Zugänglich):--now-color_grouped--grün-gelb-4
    Magenta Mobile-Symbole in Magenta
    Webvariable
    • Option 1:--now-color_grouped--magenta-2
    • Option 2:--now-color_grouped--magenta-3
    • Option 3 (Zugänglich):--now-color_grouped--magenta-4
    Orange Orangefarbene Mobile-Symbole
    Webvariable
    • Option 1:--now-color_grouped--orange-2
    • Option 2"--now-color_grouped--orange-3
    • Option 3 (Zugänglich):--now-color_grouped--orange-4
    Rosa Rosafarbene Mobile-Symbole
    Webvariable
    • Option 1:--now-color_grouped--pink-2
    • Option 2:--now-color_grouped--pink-3
    • Option 3 (Zugänglich):--now-color_grouped--pink-4
    Lila Lilafarbene Mobile-Symbole
    Webvariable
    • Option 1:--now-color_grouped--purple-2
    • Option 2:--now-color_grouped--purple-3
    • Option 3 (Zugänglich):--now-color_grouped--purple-4
    Blaugrün Blaugrüne Mobile-Symbole
    Webvariable
    • Option 1:--now-color_grouped--teal-2
    • Option 2:--now-color_grouped--teal-3
    • Option 3 (Zugänglich):--now-color_grouped--teal-4
    Gelb Gelbe Mobile-Symbole
    Webvariable
    • Option 1:--now-color_grouped--gelb-2
    • Option 2:--now-color_grouped--gelb-3
    • Option 3 (Zugänglich):--now-color_grouped--gelb-4