Unterstützung für Farbvariablen für Symbole

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.

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 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		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 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		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 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		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		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		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		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		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		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		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		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		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		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		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		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		Webvariable Option 1:--now-color_grouped--Yellow-2 Option 2:--now-color_grouped--Yellow-3 Option 3 (Zugänglich):--now-color_grouped--Yellow-4