Fluent UIの設計原則(色)
始めに
Fluent UI は非常に便利なUIコンポーネントで使用するだけである程度のUIの共通化やアクセシビリティが確保できるなどの効果が期待できる。
しかし、その効果を最大限に発揮させるためにははやりFluent UIの設計ガイドラインにそって設計することが大事である。
ここでは、Fluent UI Blazorを念頭において記述しているが他のPlatformでも十分に通用するものと思う。
Fluent UIにおける色の種類
ニュートラル
ニュートラルパレットはインターフェースの基本となる黒、グレー、白から構成されます。これらの色は背景やテキスト、レイアウト要素で指定されます。コンポーネントで使用される場合は状態の変化を暗示します。
ニュートラルを使用した階層感
表面に明るいニュートラルを使用して、例えばアクティブモーダルを強調表示して階層感を作成します。これによってユーザの目は最も必要なインターフェースの領域に注目させることができます。
共通の色
アバター、カレンダー、バッチなどの高価値で再利用可能なコンポーネントで使用されます。色を共有することで製品全体のコンポーネントと機能を頭の中で素早く認識できるようになります。
ただし、インターフェイスの重要な領域にアクセントをつけて強調表示をするのはよくありません。
ダークモードでは共有パレットの色と彩度が変化して目の疲れが軽減されて視覚的なアクセシビリティのニーズに対応します。
セマンティックカラー
共通の色で選択した色はフィードバック、ステータス、緊急性を伝えるために特に使用されます。これはセマンティックカラーとして知られており、常に重要な情報を伝える必要があります。
セマンティックカラーを装飾として使用してはいけません。
セマンティックカラーは、赤は危険、黄色は注意、緑は肯定的なフィードバックなど現実的な関連付けに基づいて一目で分かる情報を伝えます。これらを一貫して使用して他の指標と組み合わせることはコンテキストを強化して認知的な付加を軽減することに役立ちます。
ブランドカラー(アクセントカラー)
色は製品のブランドを即座に認識させるための鍵となります。
例えば、PowerPointならえんじ色、Wordなら青、Excelなら緑など即座に思い浮かべる色があると思います。
インターフェイスの様々な領域にブランドカラーを適用すると視覚的に目立つだけではなく、ユーザーに特定の製品エクスペリエンスに定着させることができます。
しかしながら過度にブランドカラーを使用しすぎると階層が希薄になりナビゲートしにくくなる可能性があります。
相互作用の状態
FluentUIではコンポーネントの状態を示すために色で示されます。
一般に、最も明るい静止状態から、マウスオーバーするとより暗いホバー状態、そして最も暗い選択状態になります。
フォーカス状態の場合は色は変わりませんがコンポーネントの枠が太くなりマウスとキーボードの操作を視覚的に操作できます。
アクセシビリティのためのヒント
- 視覚障害や色覚異常のある人でも認識できるコントラストを確保する
- 可能であれば配色をカスタマイズできるようにします
- コミュニケーションの唯一の方法として色を使用しないこと。テキスト、グラフィック、その他のインジケーターを使って様々な方法で情報を伝えるようにしてください。
カラートークン
一貫した色の使用により、エクスペリエンス全体、さらには製品全体の視覚的な連続性が生まれます。
色の使用方法で最もよいかつ簡単な方法はFluentUIのデザイントークンシステムを使用することです。これにより、視覚障害や色覚異常がある人でも認識できるコントラストの確保を提供できます。
また、色の16進コードを探すことなく適切な色を簡単に選択できるコンテキストを提供します。
グローバルトークン
FluentUIは2層のトークンを使用します。
グローバルトークンではコンテキストに依存せず色の16進コードをなど生の値を格納します。
エイリアストークン
エイリアストークンはFluentUIの2番目のトークン層であり保存された値に意味的なものを付加します。
Discussion