モバイルのカラーテーマに関する考慮事項
モバイル アプリケーションで色を使用してユーザー エクスペリエンスを向上させる方法について説明します。環境に適した色を使用すると、ユーザーにアプリ内を案内し、重要な情報をすばやく特定するのに役立ちます。
色の使用
アプリ全体で色の決定に一貫性を保ちます。特定のタスクまたはワークフローを色に関連付けると、ユーザーが適切な場所にいないときにそれを知るのに役立ちます。関連するアプレットに同じ色または類似の色を使用することを検討してください。たとえば、インシデント関連のアプレットには青を選択し、作業指示アプレットには緑を選択すると、ユーザーが関連タスクにすばやくアクセスするのに役立ちます。
あまり多くの色を使用することは避けてください。2〜3色のシンプルなデザインにより、よりクリーンでアクセスしやすいレイアウトになります。
色を使用してコントラストを提供し、読みやすくすることができます。テキストが表示される領域では、弱視のユーザーと色覚異常の両方のユーザーに対応するために、テキストと背景のコントラストを高くしてください。Web コンテンツアクセシビリティガイドライン (WCAG) 2.0 に準拠するには、少なくとも 3:1 のコントラスト比が必要です。色のコントラストを測定するのに役立つツールがオンラインで入手できます。
高コントラストの補色は、ユーザーのフォーカスを導くことができます。これらの色を使用して、ユーザーの注意が必要なアプリケーションの領域を強調表示します。
色変数の一般的なガイドライン
色変数の使用を開始する前に、次のガイドラインに留意してください。
- ネクストエクスペリエンス を有効にする必要があります
- 色変数は、 ネクストエクスペリエンス が有効になっている場合にのみ有効になります。それ以外の場合、色変数は無視されます
- 変数に使用できる色は、[UX テーマプロパティ] テーブルにあります
色変数は、UX テーマプロパティ [sys_ux_theme_property] テーブルで定義された色を使用します。
- 色変数は加法的なプロパティです
- 新しい色変数が設定されていない場合でも、既存の色プロパティ (ハードコードされた色を使用) は引き続き機能します。ただし、色のプロパティは、テーマに基づいて要素の色を動的に変更することはできません。
- 色変数は色プロパティを上書きします
- 色変数は、 ネクストエクスペリエンス が有効になっていて色変数の値が見つかった場合、対応する非変数の色プロパティを上書きします。
- 変数が見つからないか、値がない場合、色のプロパティが使用されます
- 変数が空の場合、または色変数の値が見つからない場合、色変数は上書きされません。このような場合、color プロパティ (HEX) が使用されます。
- 色変数は命名規則を使用します
- 色変数の命名規則は、既存の色プロパティに
変数サフィックスを追加することです。 - 16 進数と色の両方の変数の構成
コンポーネント別の色変数のサポート
色変数を使用してモバイルコンポーネントのテーマを変更する方法については、次のリンクを参照してください。