Unterstützung von Farbvariablen für UI-Abschnitte des Symbols

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 1 Minute Lesedauer

    • Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design in den Abschnitten Ihrer mobilen Symbol-UI zu ändern.

    UI-Abschnitte des Symbols 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:
    • Zielstartprogramm 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 UI-Abschnitt vom Typ „Symbol“ konfigurieren.

    Sie können eine beliebige 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 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 Symbols „Kritisch“ Beispiel für kritisches Symbol
    Mobile Variable
    alert--critical-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 Warnsymbol
    Mobile Variable
    alert--warning-2
    Webvariable
    --now-color_Alert--warning-2
    Mittel Symbolfarbe „Mittel“ Beispiel für Symbol „Mittel“
    Mobile Variable
    alert--moderate-2
    Webvariable
    --now-color_Alert--moderate-2
    Info Farbe des Info-Symbols Beispiel für Info-Symbol
    Mobile Variable
    alert--info-2
    Webvariable
    --now-color_Alert--info-2
    Positiv Positive Symbolfarbe Beispiel für positives Symbol
    Mobile Variable
    alert--positive-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--grün-gelb-2
    Magenta Magenta-Symbolfarbe Beispiel für Magenta-Symbol
    Webvariable
    --now-color_grouped--magenta-2
    Orange Farbe des orangefarbenen Symbols Beispiel für ein orangefarbenes Symbol
    Webvariable
    --now-color_grouped--orange-2
    Rosa Rosa Symbolfarbe Beispiel für ein 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--Teal-2
    Gelb Gelbe Symbolfarbe Beispiel für gelbes Symbol
    Webvariable
    --now-color_grouped--yellow-2