web-dev-qa-db-ja.com

アプリのメインカラーが赤の場合、「危険」として選択する色

私はかなり長い間、この質問を頭に抱えています。重要なのは、私のメインアプリケーションに赤い色のテーマがあることです。キャンセルボタンの場合は、以前はグレー色しか使用していませんでしたが、「危険」色が必要になりました...何を使用すればよいですか?紫の?オレンジ?もう一度赤を使うのは面倒です。おそらく濃い赤でしょうか。

PD:私達は私達の競争相手の色なので青を使うことはできません。

enter image description here

56
caravana_942

遊んでみる必要があると思います。画面が赤で、警告または危険を使用しようとしている場合。次の提案があります。

1-アプリの色と危険なアクションを区別するために、まだ赤を使用できますが、程度は異なります

2-真っ白なポップアップを使用し、このポップアップ内に赤いアイコン、感嘆符または記号を適用できます。

3-もう1つの提案は、黒色を使用し、黒色のポップアップに白色の記号を使用することです。これは変更になる可能性があります。

赤いシステムの画面を提供していただければ、簡単な解決策を提供できます。

enter image description here

101
Khalil Hanna

ボタンの色だけに焦点を当てるのではなく、その特定のタスクのエクスペリエンス全体に焦点を当てた方がよいでしょう。削除ボタンに必ずしも別の危険色は必要ありません。標準の赤いボタンを使用できますが、他の危険メッセージでそれをサポートしてください。このような:

enter image description here

ユーザーが何か危険なことをしようとしている場合は、ボタンの色だけに頼るのではなく、警告とメッセージを使用して危険を強調することをお勧めします。

また、赤いアプリには本質的に危険または怖いものは何もないことも言うに値します。しばらくコカ・コーラ用にデザインしましたが、メインのブランドカラーは赤です。あなたが探しているなら、それらはウェブサイトとアプリに赤いブランディングを適用する方法の非常に良い例です。彼らは主にそのアクセントカラーとして黒、グレー、白を使用しています。

52
Michael

ここで注意すべき1つの絶対的なkey事柄:

意味を伝えるために色だけに依存しないでください。

色は視覚的なメッセージを伝えるのに便利ですが、このようなUXの決定を行うときは、アクセシビリティを考慮する必要があります。ユーザーが何らかの形の色覚異常または他の視覚障害を持っている場合、意味を伝えるために他の種類のインジケーター(アイコンまたは表現)が必要です。ボタンのタイトルがDeleteであるという事実は素晴らしいですが、それが「システムクリティカル」な情報であることが心配な場合は、単にインジケーターとして色を使用する以上の方法でそれを伝える必要があります。

この記事 アクセシビリティに関する色の使用をカバーし、特にこれに関する段落があります:

「...重要なシステム情報をリレーするために色に依存しないことを確認することにより、アクセシビリティを確保してください。したがって、エラー状態、成功状態、またはシステム警告のようなものについては、何が起こっているのかを明確に伝えるメッセージまたはアイコンを必ず組み込んでくださいオン。"

また、赤がアプリの主要な色であることを考慮して、少なくとも4.5:1のコントラストを使用して、最低でも WCAG 2レベルAA に準拠していることを確認してください。これは、次のことをチェックするための本当に便利なツールです。 https://webaim.org/resources/contrastchecker/

35
indextwo

実行可能なオプションの数が増えるにつれ、最終的な決定を行うことがより困難になる可能性があります。いくつかに絞り込んだら、ユーザーが希望するスキームを選択できるようにすることを検討できます

考慮すべきいくつかの配色:

  • 赤=危険=アプリは危険です。 アプリのメインカラーを変更します。

  • 青=競合他社の色。競合他社=危険です。 青を危険に使用します。明るい青は肯定的なアラート(成功など)と間違えられるかもしれませんが、暗い青はそうではないかもしれません。

  • 白黒を使用してください。Khalil Hannaの回答 の例が印象的です。問題は、黒/白が通常のテキストと混同される可能性があることです。黒+オレンジ/黄色でも同じ問題は発生しない可能性があります。

  • テーマのメインカラーに関係なく、標準の色を使用します。緑=成功。黄/オレンジ=注意。赤=危険/警告。等。

    ただし、 Alineが指摘 のように、 Google Material Design Color Usage は次のように助言します。 "赤はブランドカラーであるため、エラー状態を伝えるために使用します。brandブランドの色を使用しない別のアラートの色を選択してください。 "彼らの例ではオレンジを使用しています。しかし、紫も実行可能なオプションのようです。

    Material Design Example

10
習約塔

「危険色」は、アプリの配色から目立つはずです。意味を考えるのもいいですね。赤/オレンジ/黄色は、ほとんどの文化で、危険、警戒、注意を示します。通常、青色または緑色のメッセージが表示された場合、それは自動的に成功のフィードバックであると思います。メインカラーから目立つように、オレンジか黄色を使うべきだと思います。

Googleマテリアルデザインでは、赤いテーマのオレンジを使用しています: https://material.io/design/color/color-usage.html#meaning

5
Aline

危険を示すために思い浮かぶ最初の配色は、特に黒が斜めのストライプにある場合、黄色と黒の組み合わせです。危険との関連は自然の中のミツバチから来るのではないかと思います。

単にyellow black sign Googleにアクセスすると、何らかの危険を示す多くの兆候が生じます。毒について、脱落の危険性について、犯罪現場で使用されているテープなどについて歌います。

個人的に、太い黄色と黒の斜めに縞模様のボーダーが付いたメッセージボックスを見たことがあります。これらのメッセージボックスは常に、何か危険な可能性がある、おそらく危険な可能性のある決定がなされることを思い起こさせます。同じパターンの丸みを帯びた三角形のボタンを見ると、そのボタンを押す場合は注意が必要です。

私にとって、プレーンレッドは実際にはそれほど強力ではなく、同じレベルの危険を完全に乗り越えるにはホワイトとブラックが必要になります。

5
trlkly

すでに赤を使用している場合は、黄と黒を使用します。これは、自然の警告サインであり、間違いなく注目を集めます。また、建設現場の多くの危険標識にも使用されています。

enter image description here

西洋諸国では、文化的に赤く黒より危険なものはありません。

enter image description here

2
Danielillo

注目を集める

色不足の意味

色だけでは意味が伝わらないため、それ自体では「危険」や「警告」の表現に依存すべきではありません。さらに、いくつかの人が述べたように文化的な違いは言うまでもありませんが、重症(男性の6%が影響を受ける)などの視覚障害は、特定の色のコントラストを見えなくします。

コントラスト、記号、テキスト

赤、黄、オレンジなどの色が選択されたのは、色に特定の意味があるのではなく、特定の色のコントラスト、輝度のコントラスト、および「アイキャッチ」を提供するため、背景に対して目立つためです。

適切な輝度のコントラストを持ち、その意図が明確な注意/魅力指向のシンボルを使用することがより重要です。

輝度コントラストは、障害や文化の違いにより誤解される可能性がある色のコントラストに依存せず、シンボルが目立つようにします。周囲の刺激(テキスト、ボタンなど)よりも高い輝度コントラストを使用すると、ユーザーの注意を引き、焦点を合わせるのに役立ちます。

色のコントラストは、警告の認知的認識に関する認識を高めるのに役立ちますが、これは設計上の二次的な考慮事項でなければなりません。たとえば、市場が北アメリカである場合、greenは警告に適さない可能性があります—しかし、緑とその反対色の赤(紫を含む) )通常の人間の視覚では非常に強力なエッジ検出を作成します。

理解できる記号aは、(理想的には)翻訳を必要としない方法で意味を伝えるのに非常に役立ちます。ただし、文化の違いは強い影響を与える可能性があります。

ラスベガスでは、MGMグランドホテルは当初、正面玄関が巨大なエメラルド色のライオンの口を通るように設計されていました。思想を開いて間もなく、彼らはライオンの口がいくつかのアジアの文化で特に否定的な象徴を持っていることを発見したので、それを引き裂いてライオンの口を取り除くために入り口を再建しました。

ただし、コンピューターの領域内には、特定の意味が国際的に受け入れられている共通のアイコンがあります。特に、警告を伝えるには、よく理解されている方が良い選択です。

テキストは王様、言語の違いにもかかわらず明確でシンプルなテキストは、特定の意味を伝えるための最良の方法です。追加情報のポップアップツールチップを備えた単一のWordは、ユーザビリティの私の個人的な好みです。

アニメーションとモーションが目標である場合、注意に影響します。たとえば、1000個の赤いLEDの壁に1つの点滅する赤いLEDがあれば、きっとあなたの注意を引くでしょう。

TL; DR

要するに、特定の色の組み合わせよりも、輝度の高いコントラストと説明的なテキストと記号を使用することが重要です。

輝度コントラストの使用例は、削除ボタンと保存ボタンの例を変更したものです。

SAVE DELETE MODIFIED

1
Myndex

ユーザーインターフェイスの作成に関して考慮すべきことは、色は意味を伝えてはならないです。ただし、破壊的なボタンを他のボタンや他のインターフェイスとは異なるものにして、強調表示することができます。使用できる色について考えるのではなく、ボタンの外観を異なるにする方法を考えてみてください。

デザインを変更する

  • ボーダー-現在のデザインにボーダーのないボタンがある場合は、非常にはっきりとした(太い?)黒または白のボーダーを追加してみてください。これにより、残りのインターフェイスからボタンが「ポップ」されます。
  • サイズ-ボタンの高さまたは幅で遊んでみてください。サイズは、破壊的なボタンを通常のボタンと区別するのに役立ちます。しかし、常にボタンのサイズである必要はありません。ラベルのフォントサイズを変更できますか?
  • フォントスタイル-フォントについて話しますが、ラベルに下線、斜体、または太字を追加して目立たせるのはどうですか。
  • Style-シャドウを追加するか、境界線のみを持ち、塗りつぶしの色はありません。デザインを試し、見た目をdifferentにします。

みんなのクリエイティブな側面はさまざまなので、現在のスタイルを維持したいが色を変更したい場合は、赤の反対側の色をカラーホイールで確認することをお勧めします。これにより、ボタンを目立たせることができます。黄色、赤(明らかに暗いまたは明るい)、黒または白(デザインに合っている場合)などの破壊的な色を使用して、ボタンを強調することもできます。

デザインは開発プロセスの非常に困難な部分です。そのため、遊ぶことは間違いなく役立ちます。人々の意見を得る-彼らにデザインを選ばせる。いくつかのモックアップデザインを作成します。これがお役に立てば幸いです。

0
Aaron