web-dev-qa-db-ja.com

アプリケーションの色のテーマとアラート通知の色/ステータスの色

私はこれと永遠に戦い続けてきましたが、ここに投稿していくつかの有用なフィードバックを得ることは良い考えだと思いました。

私が働いている会社の主な用途は、ロゴの色のため、当初は赤黒のパレットに基づいていました。同社は最近、青白を使用する大企業に買収されました。そのため、アプリを自社で使用するか親会社で使用するかに応じて、2つの異なるカラーテーマを作成しました。

アプリケーションはセキュリティダッシュボードです。したがって、支配的な色(赤または青)は、アクションボタン、リンクの色、チャートの色、グラフのノードの色などに使用されます。私は最初に、2つのテーマの両方の上にうまく配置されたナイトモードテーマを作成しました。

これはセキュリティアプリケーションであるため、重要度の色などのアラートが必要です。緑から赤までの5つの重要度レベルを簡単に区別できるように、できるだけニュートラルな色のバリエーションを使用するようにしました。最初の問題は、クリティカルアラートが赤であるため、赤のテーマボタンやグラフの読み取りノードなどと混同されることです。アラートの重大度を表すために何百万ものさまざまな方法を試してみましたが、解決策が見つかりませんでした満足しているので、どんな提案も本当に役に立ちます。現在、上部にバナーが表示され、アラートが表示されます。アラートが更新されるたびに、重要度に応じて背景色が変化します。これは要求された機能であり、回避できないため、不一致の原因となっていることがわかります。テーマ。

上記を踏まえ、私は新しいテーマをゼロから作成する過程にありました。ニュートラルカラー、白、グレー、黒、ホバリング時の色とリンクだけの色を維持し、ユーザーに表示される唯一の色が実際に警告色-ニュートラル色はさまざまな警告色とうまく調和します。

親会社がアプリの視覚的なガイドラインに準拠するように要求する指示を受け取ったとき、私は結果に非常に満足しました(約85%完了しました)。したがって、青のバリエーションを使用します。言うまでもなく、テーマを無力化するためのすべての努力は無駄になりましたが、今は警告色で多くの問題に直面しています。私は両方のテーマを独立して維持する必要があることを覚えておいてください。

a)トラフィックに応じて(たとえば)グラフにはカラースケールが必要です。このため、ドミナントレッドを使用しているとします。グラフの下にアラートのあるマップがあります。緑、黄色、赤の5色があります。したがって、ユーザーはアラートをプレーンな要素と混同することがあります。オンライン/保留中/オフラインのように見える場合もあるので、より多くの色がゲームに登場します。アラートマップまたはデバイスマップがあるため、ユーザーはコンテキストを読み取らないと簡単に混乱する可能性があります。

だから私は現在3つのカラーセットを持っています:テーマカラー、アラートカラー、ステータスカラー

b)スタイルガイドで定義された青色と警告色のスペクトルがまったく一致していません。

これは中程度の重要度レベルのペーストです: http://imgur.com/2vkx3Jt

アラートとステータスの色を表すために誰かが考えることができる他の方法はありますか?

4
scooterlord

覚えておく必要のあるカラーコードがたくさんあるようですね。これが最善のアプローチかどうかはわかりません。色分けする代わりに、ステータスの優先順位を視覚的に表現してみませんか?

多分このようなもの:

enter image description here

1
Mark

あなたはすでに色に大きな問題を抱えています。私の意見では、特に黒/赤のテーマですが、ここでは説明しません。別の方法を試してみますアラート。

背景:警告は注意を引く必要があり、カラーバリエーションは1つの可能なソリューションです。

解決策:カラーバリエーションを使用しない(のみ)、それは1つ可能な解決策ですが、唯一の解決策ではありません。まばたき、フォントサイズ、および形状も、アラートへのユーザーの注意を効果的に促します。

Simple example

この単純な例では、ユーザーの注意を引く要素が複数あります。

  • 色(この場合は赤)。まだ他の色に使用されていない場合、明るい色または異なる色が表示されます。
  • ボーダーとバックグラウンド:ほとんどの要素にバックグラウンドとボーダーがない場合、変化がわかります。
  • フォント:太字フォント(きらきらと使用されている場合)が表示されます。フォントサイズを大きくすると効果が向上する場合があります。

さらに、使用したいいくつかのツール:

  • 点滅。点滅は煩わしいですが、目を引くものです。重要でないアラートについては、点滅時間を制限することができます(たとえば、ユーザーアクティビティの5秒後)。
  • 音。有用というよりは迷惑ですが、非常に重要なアラートの場合は、実行可能なオプションです。 cum grano salisを使用します。
  • 画像。特に画面がカラフルな写真でいっぱいでない場合、画像が注目されます。彼らは情報を伝える必要すらありません。最も重要なことは目立つことです。

これをさまざまなアラートに適用するにはどうすればよいですか?ブログはすでにこれに慣れています:

Example 2

要約すると:1)すでに色を多用していて、アラートが気付かれないと心配している場合アラートを強調するために色を使用しないでください

2)カラースケールが原因で心配する場合は、代わりに、表示するグラフ/パネル/マップごとに異なるスケールを選択する必要があります。

Single hue color scales

さらに良いことに、自分が何をしているのかが明確でない限り、カラースケールに頼らないでください( エンジニアや科学者が色を気にする必要があるのはなぜですか? さらに、忘れないでください) カラーブラインド人の視覚的な結果を確認します)。灰色の色合い(または単一の適切に選択された色)は、多くの状況で完全に機能します。彼らが混合しなければならないとき、あなたは効果的で素晴らしいデザインを生み出すことができることに注意してください:

Zingchart example

1
Adriano Repetti