Unterstützung von Farbvariablen für Symbole

Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design auf Ihren mobilen Kartenbildschirmen zu ändern

Mobile Symbole haben einen Legen Sie die Darstellung fest Abschnitt, der zum Definieren der Darstellung Ihrer Symbole verwendet wird. Verwenden Sie FontColorVariable Stiloption zur Verwendung einer Farbvariablen einer Farbe. Mit diesem Stil können Sie eine beliebige Farbvariable aus der Tabelle „UX-Designeigenschaften“ [sys_ux_Theme_property] definieren. Eine Liste der verfügbaren Variablen finden Sie im Farbdesignleitfaden unten. Weitere Informationen 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.

Farbleitfaden für Mobilsymbol

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.

Jede Supportfarbe hat drei Optionen, einschließlich einer bewertbaren Option. Erwägen Sie die Verwendung der Farboption zugänglich für Symbole, die keinen Text enthalten, um die Navigationsfähigkeit für Ihre Anwender zu verbessern.

Tabelle : 1. Warnungsfarbpalette

Farbname	Beispiel	Farbvariablen
Kritisch		Mobile Variablen Option 1: Warnung--kritisch-2 Option 2: Warnung--kritisch-3 Option 3 (Zugänglich): Warnung--kritisch-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: Warnung--hoch-2 Option 2: Warnung--hoch-3 Option 3 (Zugänglich): Warnung--hoch-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: Warnung--warning-2 Option 2: Warnung--Warnung-3 Option 3 (Zugänglich): Warnung--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: Warnung--Mittel-2 Option 2: Warnung--Mittel-3 Option 3 (Zugänglich): Warnung--Mittel-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
Info		Mobile Variablen Option 1: Warnung--info-2 Option 2: Warnung--info-3 Option 3 (Zugänglich): Warnung--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: Warnung--positiv-2 Option 2: Warnung--positiv-3 Option 3 (Zugänglich): Warnung--positiv-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: Warnung--niedrig-2 Option 2: Warnung--niedrig-3 Option 3 (Zugänglich): Warnung--niedrig-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--Grey-2 Option 2: --now-color_grouped--Grey-3 Option 3 (Zugänglich): --now-color_grouped--Grey-4
Grün		Webvariable Option 1: --now-color_grouped--Green-2 Option 2: --now-color_grouped--Green-3 Option 3 (Zugänglich): --now-color_grouped--Green-4
Grüngelb		Webvariable Option 1: --now-color_grouped--Green-yelow-2 Option 2: --now-color_grouped--Green-yelow-3 Option 3 (Zugänglich): --now-color_grouped--Green-yelow-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--orange-2 Option 2“ --now-color_grouped--orange-3 Option 3 (Zugänglich): --now-color_grouped--orange-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--lila-2 Option 2: --now-color_grouped--lila-3 Option 3 (Zugänglich): --now-color_grouped--lila-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--blaugrün-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