web-dev-qa-db-ja.com

グラフ-コントラスト白黒の色は目を落ち着かせる色です

最近、グラフとチャートで作業する機会がありましたが、チャートに棒がたくさんあるか、グラフに棒が積み重なっていると問題に直面します。

実際にユーザーに影響を与えない、目を落ち着かせる色を検討する必要がありますか?それとも、同じ色で異なる色合いを使用するのではなく、それらの間に十分なコントラストを持つ色を使用して明確にする必要がありますか?

ユーザーにとってどちらがより良い体験でしょうか?色はプラットフォームのスタイルガイドの色と一致する必要がありますか、それとも別の色のセットを使用できますか?

enter image description here

編集済み:以下は作成した新しい配色です New Color Scheme

6
Harshith

グラフは常に、異なる値のセットを表示するために使用されます。コントラストは、ユーザーが値を即座に区別して分類するのに役立ちます。一方、同じ色の色合いは混乱を招き、より多くの脳の処理が必要になります。

常に目を落ち着かせる色を選択してください。画面上でシャープで曲がりくねった色が好きな人がいるかどうかはわかりません。

続きを読む グラフで色を使用するための実用的なルール

4
DPS

DPSの応答は良いスタートですが、情報の単一の「セグメント」で4つの異なる色が互いに触れているため、特定の状況には対応していませんチャート全体内。

補色を並べて配置すると、電気の「ブザー」効果のようなものが得られ、ユーザーの目をそらすだけでなく、いらいらさせることさえあります。 https://en.wikipedia.org/wiki/Complementary_colors

私は、(ある程度)彩度が同じで、白い背景では低く、黒い背景では高い色のセットをお勧めします。 https://en.wikipedia.org/wiki/Tints_and_shades

逆に、隣り合う2つの色が近すぎると混同してしまうので、ある程度のコントラストをつけて差別化できると思います。

時間を節約するには、無料のAdobe Kuhlerツールを試してみてください。 「トライアド」パレットジェネレーターは、一般的に十分に類似したトーンの色のセットを提供します。

最後の注意:色覚異常を忘れないでください:)

3
SS UX

スタイルよりも明快さを優先します。

質問をより直接的に回答するように編集します:すべての値が等しく重要な積み上げ棒グラフで、それらを互いに区別できるようにします。 2番目の例の色は、目立たなくするためにもっと努力が必要なため、呼びません。また、このグラフには多くの値がありますが、このグラフは十分に効率的ですか?最初のグラフは色が多すぎないので、色覚異常についてはかなり安全です。読んでください、私の以前の答えはより一般的でした。


色はスタイルガイドの色と一致する必要がありますか?

情報提供よりも宣伝的なのは目を引く人だけですか?
スタイルガイドと美化を優先することは、おそらく情報量の少ないグラフを正当化します。

あなたの場合、それはより有益なグラフのように見えます。
グラフをより有益で読みやすくするスタイルを優先します。つまり、色を選択することで、ストーリーをより効率的に読むことができるようになります。ストーリーとは、グラフの目的、つまりその背後で伝えようとするストーリーを意味します。

例:それが各製品のバー付きのグラフであり、新製品の販売状況を指摘したい場合、すべてを作成することが可能です。同じ色の商品と新しい商品の色が違うので目立ちます。たとえば赤と緑を使用する場合、この追加の読書補助具は色覚異常のある人にはあまり効果がありません。しかし、赤と緑が良い結果と悪い結果を表しており、伝達することが非常に重要である場合、これは犠牲にする可能性があります。私の例を参照してください、これらは正確に目を和らげる色ではありませんが、その目的を果たします。色覚異常の人には、テクスチャ、ラベルを追加するか、バーから赤い色を削除して、緑の色だけを塗りつぶすことができます。この例の場合、後者が私のお気に入りの選択です。スタイルを最小限に抑えたいと思います。

enter image description here

これに関する完全な本があり、少なくとも1冊読むことをお勧めします。

2
jazZRo

アプリケーションがグラフと全体的な配色を一致させることはめったにありません(データポイントの数によって異なります)。

モノクロのソリューションが必要な場合は、次のようなものも一般的です: enter image description here

0
bfritz