web-dev-qa-db-ja.com

データテーブルの個々のセルを分類する

私はデータ製品に取り組んでおり、個々のセルを分類する必要があります。これは現在、そのセル内のテキストの色を変更することで実現されています。たとえば、黒=実際のデータ、青=推定データ(下の画像を参照)。

Color coded data

私はこれの美学が本当に好きではありません。また、色覚障害のあるユーザーには役に立たないので、代替オプションを検討しています。これを達成するために私が考えた方法の1つは、値の横にある色付きの点を使用することです。ツールチップをホバーに表示すると、色覚異常のユーザーに役立ちます(以下を参照)。しかし、利害関係者はこのオプションを実際に好まなかった。

誰かが私にアクセス可能であると同時に美的にも楽しいソリューションを見つけるのを手伝ってくれる?

Coloured dot next to value

2
Jeffrey

色覚異常のユーザー向けに設計しても、色の使用が許可されているわけではありません。それはむしろ色を意味します。それらの明るさに大きな違いがあるはずです:

enter image description here

ソース: https://designshack.net/articles/accessibility/tips-for-designing-for-colorblind-users/

次に、別の例を示します。不良(淡い、不飽和色)対良好(鮮やかな色)対最良(異なるテクスチャを含む)

enter image description here

enter image description here

出典(詳細説明あり): http://jfly.iam.u-tokyo.ac.jp/color/

Font-colorsではなくbackground-colorsを使用することをお勧めします。これにより、色のスペースが広がり、値を比較しやすくなり(見た目も良くなると思います)、テクスチャを適用しやすくなります。

1
Anna Prenzel

意味を強調するために色を使用しますが、それだけに依存しないでください。解決策として、色なしで開始してから、色をプッシュしてください。これは白黒(およびグレー)の画像です。

enter image description here

いくつかの要素を他の要素よりも際立たせるために、さまざまなアプローチを取ることができます。

  • フォントの太さ
  • フィールドの背景(最初に明度、次に彩度)
  • 各フィールドの横に「見積もり」、「E」、または下の凡例付きの記号を書くことにより、明確にします。必須入力がラベルにアスタリスクが付いている方法と同様に、その下には*必須と表示されています。

これは色のない例です:

enter image description here

余談ですが、この場合はテキストを中央に揃えた方が良いと思います。

0
Alvaro