アイコンの色変数のサポート

色変数を使用してモバイルマップ画面のテーマを変更する方法を学びます

モバイルアイコンには、アイコンの外観を定義するために使用する [ 外観を設定 ] セクションがあります。FontColorVariable スタイルオプションを使用して、色変数 a 色を使用します。 このスタイルを使用すると、UX テーマプロパティ [sys_ux_theme_property] テーブルから任意の色変数を定義できます。使用可能な変数のリストについては、以下のカラーデザインガイドを参照してください。 マップ画面の作成の詳細については、「 アイコン UI セクションの構成」を参照してください。 モバイルでのアイコンの作成の詳細については、「 モバイルのアイコン」を参照してください。

モバイルアイコンの色ガイド

色変数は次のように分類されます。 設計ガイドラインを使用して、ユースケースに適した色変数を特定します。

アラートカラーパレット

アラートカラーパレットの色は、重要なステータス、状況、およびタスクを強調表示します。アラートの色は、装飾や整理ではなく、特定の意味を伝えるために使用します。

グループ化されたカラーパレット

グループ化されたカラーパレットの色は、業界の色の規則に従います。これらの色を使用して、色分けされたアイテムが特定の業界または LOB (基幹業務) に関連付けられていることを示します。各色の意味はコンテキストによって異なりますが、アプリ内で一貫性を保つ必要があります。

各サポート色には、アセスメント可能なオプションを含む 3 つのオプションがあります。ユーザーの操作性を向上させるために、テキストを含まないアイコンにはアクセス可能な色のオプションを使用することを検討してください。

表 : 1. アラートカラーパレット

色名	例	カラー変数
重要		モバイル変数 オプション 1: alert--critical-2 オプション 2: alert--critical-3 オプション 3 (アクセス可能): alert--critical-4 Web 変数 オプション 1:--now-color_alert--critical-2 オプション 2:--now-color_alert--critical-3 オプション 3 (アクセス可能):--now-color_alert--critical-4
高		モバイル変数 オプション 1: alert--high-2 オプション 2: alert--high-3 オプション 3 (アクセス可能): alert--high-4 Web 変数 オプション 1:--now-color_alert--high-2 オプション 2:--now-color_alert--high-3 オプション 3 (アクセス可能):--now-color_alert--high-4
警告		モバイル変数 オプション 1: alert--warning-2 オプション 2: alert--warning-3 オプション 3 (アクセス可能): alert--warning-4 Web 変数 オプション 1:--now-color_alert--warning-2 オプション 2:--now-color_alert--warning-3 オプション 3 (アクセス可能):--now-color_alert--warning-4
中		モバイル変数 オプション 1: alert--moderate-2 オプション 2: alert--moderate-3 オプション 3 (アクセス可能): alert--moderate-4 Web 変数 オプション 1:--now-color_alert--moderate-2 オプション 2:--now-color_alert--moderate-3 オプション 3 (アクセス可能):--now-color_alert--moderate-4
情報		モバイル変数 オプション 1: alert--info-2 オプション 2: alert--info-3 オプション 3 (アクセス可能): alert--info-4 Web 変数 オプション:1--now-color_alert--info-2 オプション 2:--now-color_alert--info-3 オプション 3 (アクセス可能):--now-color_alert--info-4
ポジティブ		モバイル変数 オプション 1: alert--positive-2 オプション 2: alert--positive-3 オプション 3 (アクセス可能): alert--positive-4 Web 変数 オプション 1:--now-color_alert--positive-2 オプション 2:--now-color_alert--positive-3 オプション 3 (アクセス可能):--now-color_alert--positive-4
低		モバイル変数 オプション 1: alert--low-2 オプション 2: alert--low-3 オプション 3 (アクセス可能): alert--low-4 Web 変数 オプション 1:--now-color_alert--low-2 オプション 2:--now-color_alert--low-3 オプション 3 (アクセス可能):--now-color_alert--low-4

表 : 2. グループ化されたカラーパレット

色名	例	カラーオプション
青		Web 変数 オプション 1:--now-color_grouped--blue-2 オプション 2:--now-color_grouped--blue-3 オプション 3 (アクセス可能):--now-color_grouped--blue-4
茶色		Web 変数 オプション 1:--now-color_grouped--brown-2 オプション 2:--now-color_grouped--brown-3 オプション 3 (アクセス可能):--now-color_grouped--brown-4
グレイ		Web 変数 オプション 1:--now-color_grouped--gray-2 オプション 2:--now-color_grouped--gray-3 オプション 3 (アクセス可能):--now-color_grouped--gray-4
緑		Web 変数 オプション 1:--now-color_grouped--green-2 オプション 2:--now-color_grouped--green-3 オプション 3 (アクセス可能):--now-color_grouped--green-4
緑黄		Web 変数 オプション 1:--now-color_grouped--green-yelow-2 オプション 2:--now-color_grouped--green-yelow-3 オプション 3 (アクセス可能):--now-color_grouped--green-yelow-4
マゼンタ		Web 変数 オプション 1:--now-color_grouped--magenta-2 オプション 2:--now-color_grouped--magenta-3 オプション 3 (アクセス可能):--now-color_grouped--magenta-4
オレンジ		Web 変数 オプション 1:--now-color_grouped--orange-2 オプション2"--now-color_grouped--orange-3 オプション 3 (アクセス可能):--now-color_grouped--orange-4
ピンク		Web 変数 オプション 1:--now-color_grouped--pink-2 オプション 2:--now-color_grouped--pink-3 オプション 3 (アクセス可能):--now-color_grouped--pink-4
紫		Web 変数 オプション 1:--now-color_grouped--purple-2 オプション 2:--now-color_grouped--purple-3 オプション 3 (アクセス可能):--now-color_grouped--purple-4
青緑		Web 変数 オプション 1:--now-color_grouped--teal-2 オプション2:--now-color_grouped--teal-3 オプション 3 (アクセス可能):--now-color_grouped--teal-4
黄		Web 変数 オプション 1:--now-color_grouped--yellow-2 オプション 2:--now-color_grouped--yellow-3 オプション 3 (アクセス可能):--now-color_grouped--yellow-4