モバイル用のカラーテーマに関する考慮事項

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む3読むのに数分

    • モバイルアプリケーションで色を使用してユーザーエクスペリエンスを向上させる方法について説明します。環境に適した色を使用すると、ユーザーがアプリ内をガイドし、重要な情報をすばやく識別するのに役立ちます。

    色を使う

    アプリ全体で色の決定に一貫性を保ちます。特定のタスクやワークフローを色に関連付けることで、ユーザーは自分が適切な場所にいないことを知ることができます。関連するアプレットに同じ色または類似色を使用することを検討してください。たとえば、インシデント関連のアプレットに青を選択し、作業指示アプレットに緑を選択すると、ユーザーは関連するタスクにすばやくアクセスできるようになります。

    あまり多くの色を使用することは避けてください。2〜3色のシンプルなデザインは、すっきりとした、よりアクセスしやすいレイアウトになります。

    色を使用してコントラストを出し、読みやすくすることができます。テキストが表示される領域では、視覚障がいや色覚異常のあるユーザーに対応するため、テキストと背景のコントラストを強くします。Web コンテンツ アクセシビリティ ガイドライン (WCAG) 2.0 に準拠するには、少なくとも 3:1 のコントラスト比が必要です。オンラインには、色のコントラストを測定するのに役立つツールがいくつかあります。

    コントラストの高い補色は、ユーザーの視線を誘導できます。これらの色を使用して、ユーザーの注意を引く必要があるアプリケーションの領域を強調します。

    色変数の一般的なガイドライン

    色変数の使用を開始する前に、次のガイドラインを念頭に置いてください。
    Next Experience を有効にする必要があります
    色変数は、 が有効になっている場合にのみ Next Experience 有効です。それ以外の場合、色変数は無視されます
    変数に使用できる色は、UX テーマプロパティテーブルにあります

    色変数は、UX テーマプロパティ [sys_ux_theme_property] テーブルで定義された色を使用します。

    色変数は加法プロパティです
    既存の色プロパティ (ハードコードされた色を使用) は、新しい色変数が構成されていない場合、引き続き機能します。ただし、色のプロパティでテーマに基づいて要素の色を動的に変更することはできません。
    色変数は色のプロパティを上書きします
    色変数は、有効で色変数値が見つかった場合 Next Experience 、対応する非変数の色プロパティを上書きします。
    たとえば、次の UI ルールアクション構成があるとします。
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    そして、この構成の Web カラーマップ:
    {“--now-color-primary-0": “#22ff00”}
    この UI ルールアクションの解決済みの背景色は #22ff00 になります。
    変数が見つからない場合、または値がない場合は、色のプロパティが使用されます
    変数が空の場合、または色変数値が見つからない場合、色変数は上書きされません。このような場合は、color プロパティ (HEX) が使用されます。
    たとえば、次の構成があるとします。
    {“BackgroundColorVariable”: “", “BackgroundColor”: “#3f2c11”}
    色の値は #3f2c11 です。
    この構成では、次のようになります。 
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    そして、この構成の Web カラーマップ: 
    {“--now-color-primary-1": “#1134a1”}
    背景色の値は #3f2c11 です。
    色変数は命名規則を使用します
    色変数の命名規則は、既存の色プロパティに 変数 接尾辞を追加することです。
    たとえば、BackgroundColorVariable は BackgroundColor に使用されます
    16 進数変数と色変数の両方を構成する

    コンポーネント別の色変数のサポート

    これらのリンクを使用して、色変数を使用してモバイルコンポーネントのテーマを変更する方法を学習します。