web-dev-qa-db-ja.com

色分けアラート

プロジェクトのアラートの色に問題があります。

アラートが発生する2つのケースがあります。

1つは、値が40を超え、もう1つが45を超える場合です。

40の値に到達することは本当に悪いことであり、45に到達することはさらに悪いことです。

問題は、オレンジは本当に重要で、すぐに対処する必要があるため、40を超えるオレンジを使用できないことです。

現在はライトレッドとハードレッドを使用していますが、十分に見分けがつかないと思います。

何か提案がありますか?

enter image description here

10

グラフィック要素を区別する方法について疑問がある場合、優れたツールは、デザインのすべての視覚的コントラストをテストすることです。

形状コントラスト

Shape contrast

サイズのコントラスト

Size contrast

テクスチャのコントラスト

Texture contrast

色のコントラスト

色のコントラストが十分でないか許可されていない場合は、色とテクスチャを混ぜてみてください。

color contrast

体重コントラスト

Weight contrast

図/地面のコントラスト

Figure/ground

スタイルのコントラスト

style

間隔のコントラスト

enter image description here

答えを完成させるために、別のコントラストがありますが、このデザインには当てはまらないと思います。

位置コントラスト

Position


最後に、私たちがしばしばそのように除外する別のタイプのコントラストがあります:

タイムラインのコントラスト

timeline

35
Danielillo

赤の1シェード、ボックスの背景、および不透明度を使用する必要があるようです。

赤の1色を使用したいくつかの異なる状態の例を次に示します。不透明度は42の例で1回だけ使用され、50%の背景になります。

これらでは、ユーザーは黒、赤、赤の50%の違いを確認できれば十分です。

enter image description here

15
moot

UIがそれ以外の場合は明るい場合は、濃い赤の色合いを使用して「非常に悪い」として区別することができます。下部に色のある凡例を参照してください。

image demonstrating the different colors

7
iHaveacomputer

オーストラリアの山火事警告では、縞模様を使用して最高の深刻度を示しています。

Bushfire warning scale

例:

enter image description here

7
Ahmad

enter image description here あなたは色を保つことを試みることができ、コーディング中にそれが40を超える値である場合、おそらく三角形または円の中に感嘆符をトリガーします。三角形の反対側の右側のボックス内。または、横にあるボックスの外側でも。オレンジから赤に変化する可視光スペクトルに従って、増加する重大度の数値を示すことは、これまでと同じように優れた設計パターンです。しかし、40以上のマークでトリガーされた追加のアイコンと色によって、このデザインコンポーネントがユーザーにわかりやすくなる場合があります...

5
mastablasta

それらを異なるようにスタイリングする利点はないと私は主張します。 47は42より悪いとおっしゃっていますが、40を超えるものはすぐに対処する必要がありますとおっしゃっています。

ユーザーが42と47の両方に対して行う必要があるアクションは同じ(すぐにアクション)のようです。したがって、同じスタイルに設定しても問題はありません。

議論が47の方が42よりも重要だというのであれば、まあ...それはすでに数字自体から明らかであるため、異なるスタイルでそれを示す必要はありません。

要約すると、赤は「すぐに行動を起こす」ことを意味し、番号は優先順位を示します(最初に高い)。

2
musefan

暗い色を使用する必要がない場合は、赤以外に明るい「黄色」を使用することをお勧めします。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

または、フォントと同じ色で点滅する境界を推奨します。

mockup

bmmlソースをダウンロード

そして最後の選択肢として、上記の2つの組み合わせです

mockup

bmmlソースをダウンロード

注:エディタではデフォルトで提供されていないため、同じ幾何学的形状を作成しようとはしませんでしたが、質問と私の回答はより色の遠近法なので、形状から独立していると考えてください。

1
Erhan Yaşar