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

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 1 Minute Lesedauer

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

    Symbol-UI-Abschnitte haben einen Abschnitt „Farbe“ mit zwei Feldern zum Steuern der Vordergrund- und Hintergrundfarben für das Element.

    • Variable der Hintergrundfarbe
    • Variable der Vordergrundfarbe
    Diese beiden Felder sind in den folgenden Tabellen zu finden:
    • Ziel des Symbolabschnitts – Startprogramm [sys_sg_navigation_section_destination_applet_launcher]
    • Zielfunktion des Symbolabschnitts [sys_sg_navigation_section_destination_button]
    • Ziel des Symbolabschnitts – Bildschirm [sys_sg_navigation_section_destination_screen]

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

    Sie können 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.

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

    Farbleitfaden für UI-Abschnitt des mobilen Symbols

    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.

    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 das Symbol „Kritisch“.
    Mobile Variable
    alert--critical-2
    Webvariable
    --now-color_alert--critical-2
    Hoch  Symbolfarbe „Hoch“. Beispiel für hohes Symbol
    Mobile Variable
    alert--high-2
    Webvariable
    --now-color_alert--high-2
    Warnung Farbe des Warnsymbols Beispiel für Warnsymbol
    Mobile Variable
    alert--warning-2
    Webvariable
    --now-color_alert--warning-2
    Mittel Moderate Symbolfarbe Beispiel für ein Symbol „Mittel“.
    Mobile Variable
    alert--moderate-2
    Webvariable
    --now-color_alert--moderate-2
    Information Infosymbolfarbe Beispiel für ein Informationssymbol
    Mobile Variable
    alert--info-2
    Webvariable
    --now-color_alert--info-2
    Positiv Positive Symbolfarbe Beispiel für ein positives Symbol
    Mobile Variable
    alert--positive-2
    Webvariable
    --now-color_alert--positive-2
    Niedrig Niedrige Symbolfarbe Beispiel für Symbol „Niedrig“.
    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 grauen Symbol
    Webvariable
    --now-color_grouped--gray-2
    Grün Grüne Symbolfarbe Beispiel für grünes Symbol
    Webvariable
    --now-color_grouped--grün-2
    Grün-Gelb 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 ein Magenta-Symbol
    Webvariable
    --now-color_grouped--magenta-2
    Orange Orange Symbolfarbe Beispiel für orangefarbenes Symbol
    Webvariable
    --now-color_grouped--range-2
    Rosa Rosa Symbolfarbe Beispiel für ein Rosa-Symbol
    Webvariable
    --now-color_grouped--pink-2
    Lila Lila Symbolfarbe Beispiel für lila Symbol
    Webvariable
    --now-color_grouped--purple-2
    Blaugrün Blaugrüne Symbolfarbe Beispiel für Blaugrün-Symbol
    Webvariable
    --now-color_grouped--teal-2
    Gelb Gelbe Symbolfarbe Beispiel: Gelbes Symbol
    Webvariable
    --now-color_grouped--Yellow-2