Unterstützung für Farbvariablen für Symbole

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

    • Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design auf Ihren mobilen Kartenbildschirmen zu ändern

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

    Mit diesem Stil können Sie jede Farbvariable aus der Tabelle „UX-Designeigenschaften“ [sys_ux_theme_property] definieren. Eine Liste der verfügbaren Variablen finden Sie unten im Leitfaden für Farbdesign.

    Einzelheiten 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.

    		 Farbvariable, die in einem Symbol verwendet wird

    Farbanleitung für Mobile-Symbol

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

    Warnungsfarbpalette
    Die Farben in 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
    Die Farben in einer gruppierten Farbpalette entsprechen den Farbkonventionen einer Branche. Verwenden Sie diese Farben, um anzuzeigen, dass das farbige Element einer bestimmten Branche oder Branche zugeordnet ist. Die Bedeutung der einzelnen Farben hängt vom Kontext ab, sollte jedoch innerhalb Ihrer App konsistent bleiben.

    Für jede Unterstützungsfarbe sind drei Optionen verfügbar, einschließlich einer bewertbaren Option. Erwägen Sie die Verwendung der zugänglichen Farboption für Symbole, die keinen Text enthalten, um die Navigation für Ihre Anwender zu verbessern.

    Tabelle : 1. Warnungsfarbpalette
    Farbname Beispiel Farbvariablen
    Kritisch Mobile 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 Mobile Warnsymbole
    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
    Information 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 Symbole für niedrige Mobile-Apps
    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ün-Gelb 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 Magenta Mobile-Symbole
    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--range-2
    • Option 2"--now-color_grouped--range-3
    • Option 3 (Zugänglich):--now-color_grouped--range-4
    Rosa Rosa 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 Lila 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--Yellow-2
    • Option 2:--now-color_grouped--Yellow-3
    • Option 3 (Zugänglich):--now-color_grouped--Yellow-4