Unterstützung von Farbvariablen für Symbol-UI-Abschnitte

  • Freigeben Version: Australia
  • Aktualisiert 12. März 2026
  • 1 Minute Lesedauer

    • Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design in Ihren UI-Abschnitten für mobile Symbole zu ändern.

    Symbol-UI-Abschnitte haben einen Farbe Abschnitt mit zwei Feldern zur Steuerung der Vorder- und Hintergrundfarben für das Element.

    • Hintergrundfarbvariable
    • Variable der Vordergrundfarbe
    Diese beiden Felder finden Sie in den folgenden Tabellen:
    • Ziel-Startprogramm des Symbolabschnitts [sys_sg_navigation_section_destination_applet_launcher]
    • Zielfunktion des Symbolabschnitts [sys_sg_navigation_section_destination_button]
    • Zielbildschirm des Symbolabschnitts [sys_sg_navigation_section_destination_screen]

    Details zum Erstellen dieser Aktionen finden Sie unter Konfigurieren Sie einen Symbol-UI-Abschnitt.

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

    		 Farbvariable, die in einem Symbol-UI-Abschnitt verwendet wird

    Farbleitfaden für UI-Abschnitt des mobilen Symbols

    Farbvariablen sind unterteilt. Verwenden Sie die Designleitlinie, 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, anstatt für Dekoration oder Organisation.
    Gruppierte Farbpalette
    Gruppierte Farbpalettenfarben entsprechen den Farbkonventionen in 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.

    Warnungsfarbpalette

    Farbname Farbe Beispiel Farboptionen
    Primär Primäre Symbolfarbe Beispiel für primäres Symbol
    Mobile Variable
    primär
    Webvariable
    --now-color--primary-1
    Kritisch Farbe des kritischen Symbols Beispiel für kritisches Symbol
    Mobile Variable
    Warnung--kritisch-2
    Webvariable
    --now-color_Alert--critical-2
    Hoch Farbe des Symbols „hoch“ Beispiel für „hoch“-Symbol
    Mobile Variable
    alert--high-2
    Webvariable
    --now-color_Alert--High-2
    Warnung Farbe des Warnungssymbols Beispiel für Warnungssymbol
    Mobile Variable
    Warnung--Warnung-2
    Webvariable
    --now-color_Alert--warning-2
    Mittel Symbolfarbe „Mittel“ Beispiel für Symbol „Mittel“
    Mobile Variable
    Warnung--Mittel-2
    Webvariable
    --now-color_Alert--moderate-2
    Info Farbe des Info-Symbols Beispiel für Infosymbol
    Mobile Variable
    alert--info-2
    Webvariable
    --now-color_Alert--info-2
    Positiv Positive Symbolfarbe Beispiel für positives Symbol
    Mobile Variable
    Warnung--positiv-2
    Webvariable
    --now-color_Alert--positive-2
    Niedrig Niedrige Symbolfarbe Beispiel für niedriges Symbol
    Mobile Variable
    alert--low-2
    Webvariable
    --now-color_Alert--low-2

    Gruppierte Farbpalette

    Farbname Farbe Beispiel Farboptionen
    Blau Blaue Symbolfarbe Beispiel für blaues Symbol
    Webvariable
    --now-color_grouped--Blue-2
    Braun Braune Symbolfarbe
    Webvariable
    --now-color_grouped--Brown-2
    Grau Graue Symbolfarbe Beispiel für graues Symbol
    Webvariable
    --now-color_grouped--Grey-2
    Grün Grüne Symbolfarbe Beispiel für grünes Symbol
    Webvariable
    --now-color_grouped--Green-2
    Grüngelb Grün-gelbe Symbolfarbe Beispiel für grün-gelbes Symbol
    Webvariable
    --now-color_grouped--Green-yellow-2
    Magenta Magenta-Symbolfarbe Beispiel für Magenta-Symbol
    Webvariable
    --now-color_grouped--magenta-2
    Orange Farbe des orangefarbenen Symbols Beispiel für orangefarbenes Symbol
    Webvariable
    --now-color_grouped--orange-2
    Rosa Rosa Symbolfarbe Beispiel für Rosa-Symbol
    Webvariable
    --now-color_grouped--pink-2
    Lila Farbe des lila Symbols Beispiel für lila Symbole
    Webvariable
    --now-color_grouped--lila-2
    Blaugrün Farbe des blauen Symbols Beispiel für blaugrün-Symbol
    Webvariable
    --now-color_grouped--blaugrün-2
    Gelb Gelbe Symbolfarbe Beispiel für gelbes Symbol
    Webvariable
    --now-color_grouped--yellow-2