web-dev-qa-db-ja.com

プロジェクトステータスの色

プロジェクトは

  • まだ始まっていない
  • 活発な
  • アクティブですが一時停止しています
  • 完成した

それらの状態を表現するのに役立つ適切な色は何ですか(テキストへの拡張としてのみ)?

ステータスとしての色はトリッキーで、Webアプリケーションとそのアプリケーションのコンテキストに大きく依存します。これはただ考えるための食べ物です。

コンテキストの一貫性は混乱を避けるのに役立ちます(たとえば、赤を使用して何かが一時停止されていることを示すだけでなく、システムが壊れていることも示します。一方の状況はもう一方よりも悲惨ですが、視覚的にはユーザーと同等です)。

grid with paused status and red and alert the building is burning in red

順次的なステータス(次々と起こることを示すために試行)と色の関連付けを行おうとしており、考慮すべきことは、このプロセスのいずれかのステップで、このステータスがユーザーにとって「良好」または「不良」であることを示しているかどうかです。シーケンスが完了したら、緑や赤などの一般的に認識されている色を使用することが適切な場合があります。シーケンスが「良い」または「悪い」を示していない場合、それらの色を使用する前に、アプリケーションの他の側面で赤がユーザーに危険を示すために使用されているかどうかを検討する必要があります。

sequence vs color

色に関する追加のアイデア/メモ:

grey scale colors

単色スケールを使用すると、ユーザーに暗闇/明度に基づいて完全性を感じさせることができますが、(グリッド内などで)色を互いに比較する場合、ユーザーが色合いの違いをすばやく区別することは困難です。

grey and color

あなたのケースでは2つの異なるシナリオがあるため、2つの異なる色を使用すると便利な場合があります。 A)アイテムが進行中でないB)その進行のステータス。無効なアイテムによく使用される灰色を使用すると、「まだ開始されていません」および「アクティブですが一時停止」のステータスに役立ちます。一方、青(または緑)などの別の色を使用して、「アクティブ」および「完了」を示すことができます。

redgreen

多くのプログラムは、これらの状況で赤、緑、黄色を使用します。個人的にこれは癖からやっているように思えます。緑は「良い」または「大丈夫」を意味する傾向があり、黄色は伝統的に「危険」を意味しますが、その中間のステータスとしてよく使用されます。赤は「危険」または「ここを見る」のように注意を引く傾向があることを意味します。多くの場合、「何が行われていないかを見る」など、ユーザーを恥じさせるために赤を使用することもできます。

roygbiv

[〜#〜] roygbiv [〜#〜] も使用できますが、シーケンスよりも縮尺を示す方がはるかに優れており、従来の赤、黄、緑の意味と混同されることがよくあります。

neutral colors

グレー、ブルー、ピンク、パープルのように使用するニュートラルカラーがありますが、多くの人はピンクとパープルを避けて嫌います。

考慮すべき他の要因は、人々があなたのテキストを読むことができるように十分なコントラストを持っていることです(色にテキストがある場合)。ここにいくつかのウェブカラーチェッカーがあります:

  1. http://webaim.org/resources/contrastchecker/
  2. http://jxnblk.com/colorable/demos/text/

色がどのように表示されるか、アプリケーション全体でさまざまな形で繰り返されるかなど、他の要因も関係しています。シーケンスをユーザーに表示し、1つの色を使用してシーケンスのどこにあるかを示すのは、ユーザーである場合もあります。

enter image description here

これが根本的すぎる場合は、申し訳ありません。 「(ass augmentation、only、to text)」の意味がよくわかりません。テキストの色を変更するだけの場合は、ブルーは通常ハイパーリンクに使用されるため、ブルーは使用しないことを強くお勧めします。これらの色をリストなどのテキストに直接適用するのか、またはインジケーターとして使用するタイトルなど、他のテキストに色を適用するのかわかりません。色覚異常などの色に敏感な人は色のみに基づいてインジケーターを取得できない場合があるため、インジケーターとして色のみを使用することはWebアクセシビリティ標準では推奨されないことに注意することが重要です。 http://webaim.org/standards/508/checklist

18
Chromarush

ムードを呼び出すのではなく、ステータスに色を付ける場合、いくつかの一般的な色を次に示します。

ここに色の意味のすばらしいリストを見つけてください

  • 薄い灰色、中立で何かの行動をしていないものに関連付けられています
  • 、重要ではない基本情報に関連付けられています
  • 黄色、警告に関連付けられている、またはアクション前の重要ではないメッセージ
  • 、成功と完了に関連付けられています
  • 、エラーに関連付けられている、または重要なメッセージ

これを考慮に入れて、このプロジェクトを前提として、私たちができることは次のとおりです。

  • まだ開始されていません:ライトグレー
  • アクティブ:明るい青
  • アクティブですが、一時停止しています:無効な外観を呼び出して、アクションが実行されていないことを示す青色の明るい色調
  • 完全:薄緑
8
Cody Brantley

これは質問に直接答えるものではありませんが、ステータスへの興味深いアプローチは、テキストと色を表示するだけではありません。この画像のようなインジケーターを使用して、関連するすべてのステップ(状態)を示すことができます status progress

いくつかの長所:

  • ユーザーは常にすべてのステップと、現在の状態を認識しています
  • さまざまな色とステップを組み合わせることで、意識がさらに高まります

いくつかの短所:

  • スペース、アプリケーションで表示するにはさらにスペースが必要です
4
John

信号機を使用するのではなく、それを詳しく説明することができます。グローバルな標準に準拠する一連の視覚的表現(信号機など)があります。色の定義を理解するのではなく、ユーザーにステータスを知らせることをお勧めします。つまり、言葉は視覚的な手がかりよりも「時々」強力です。

2
Arvind Sagar

プロジェクトのステータスには次の色を使用しています。

  1. ダークグレー-キャンセル
  2. ブルー-完成
  3. 3a。ダークグリーン-将来(2〜3か月)-順調

    3b。明るい緑-要対応/緊急(翌月、次)

  4. 黄-警告

  5. 赤-脅威/危険
  6. 色なし-通常
1
Francois