Unterstützung von Farbvariablen für UI-Abschnitte vom Typ „Symbol“.

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 1 Minute Lesedauer

    • Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design in den UI-Abschnitten mit Mobile-Symbolen zu ändern.

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

    • Hintergrundfarbe Variable
    • Variable der Vordergrundfarbe
    Diese beiden Felder befinden sich 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]

    Weitere Informationen 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 UI-Abschnitt vom Typ „Symbol“ verwendet wird

    Farbleitfaden für UI-Abschnitt des Mobile-Symbols

    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.

    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 Symbolfarbe „Kritisch“. Beispiel für Symbol „Kritisch“.
    Mobile-Variable
    alert--critical-2
    Webvariable
    --now-color_alert--critical-2
    Hoch Hohe Symbolfarbe 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 moderates Symbol
    Mobile-Variable
    alert--moderate-2
    Webvariable
    --now-color_alert--moderate-2
    Info Info-Symbolfarbe 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
    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 graues 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üngelb Grüngelbe Symbolfarbe Beispiel für grüngelbes Symbol
    Webvariable
    --now-color_grouped--grün-gelb-2
    Magenta Symbolfarbe „Magenta“. Beispiel für ein lilafarbenes Symbol
    Webvariable
    --now-color_grouped--magenta-2
    Orange Symbolfarbe Orange Beispiel für orangefarbenes Symbol
    Webvariable
    --now-color_grouped--orange-2
    Rosa Rosa Symbolfarbe Beispiel für rosafarbenes Symbol
    Webvariable
    --now-color_grouped--pink-2
    Lila Lila Symbolfarbe Beispiel für lilafarbenes Symbol
    Webvariable
    --now-color_grouped--purple-2
    Blaugrün Blaugrüne Symbolfarbe Beispiel für ein blaugrünes Symbol
    Webvariable
    --now-color_grouped--teal-2
    Gelb Gelbe Symbolfarbe Beispiel für gelbes Symbol
    Webvariable
    --now-color_grouped--gelb-2