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