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