web-dev-qa-db-ja.com

ブランディングと赤色

Webサービスのプロトタイプとデザインを作成します。このサービスは、内部使用(CRMなど)向けに設計されています。当社の主なブランドカラーは赤です(#d50000など)。しかし、ほとんどの場合、警告と危険メッセージには赤が使用されます。

この色は、「OK」、「Sand」、「Submit」(CTAボタン)などのリンクとメインボタンに使用できますか?色の共通のアフォーダンスを壊さない方法のアイデアはありますか?または、赤ではなく警告メッセージと危険メッセージを識別する方法。

6

要素、ユーザー操作に対するこれらの要素の反応、一般的な使いやすさ、アプリの目標などを含む、UIの範囲を慎重に測定する必要があると思います。あなたの説明から私を驚かせることの1つはこの部分です:

この色は、「OK」、「Sand」、「Submit」(CTAボタン)などのリンクとメインボタンに使用できますか?

okボタン(通常はダイアログにあり、一般的には不適切なuxの選択)と送信ボタンCTAボタンは言うまでもありませんエラーメッセージ!それらは非常に異なるものであり、異なる処理が必要です。色だけでなく、コピー(特にコピー!)

仕事に入る...

Gmailは(別の回答で述べたように)ボタンに赤を使用する好例です。これは、アプリで最も重要なボタンをすばやく表示してほしいからです。そのボタンとそのボタンのみがその色を使用していることに気付くでしょう。その色を使用したリンクとGmailドロップダウンが表示されますが、ボタンが表示されている限り、それが唯一の要素であり、すぐに目立ちます。

ただし、これはすべての場合に適しているわけではありません。彼らの場合、彼らはマルチカラーロゴを持っているので、ボタンは彼らのロゴやブランドカラーと競合しません。あなたの場合、ブランドは赤です。したがって、エラーメッセージなどの一般的なアフォーダンスは別にして、赤を避けてアクセントを選択する必要があります。説明したシナリオを参照してください。

enter image description here

ご覧のとおり、すべての階層が同じであり、要素のクイックスキャンを実行することはほとんど不可能です。そして、これが理由です:アクセントカラーはありません。これは、建築と家具に由来するコンセプトであり、デザインに採用されています。 Google Material Color Guidelines はこれを推奨します:

プライマリパレットから3つの色相を選択し、セカンダリパレットから1つのアクセントカラーを選択して、色の選択を制限します。

gmailに移動します。 enter image description here

Google Materialはデザインのアルファやオメガではないため、次のようなものを簡単に使用できます。

enter image description here

ボタンの緑色に気付くでしょう。このグリーンは赤の色合いとは正反対ですが、もちろん何でも選択できます。

または、もちろん、マテリアルガイドラインに従うこともできます。

enter image description here

結論として

これには多くのアプローチがあります。重要な部分は、アクセントを選択することです。したがって、アフォーダンスの考慮にもかかわらず、赤を使用することは適切ではありません。

6
Devin

UI設計では、警告、削除、エラーに赤を使用することがよくあります。しかし、赤は常に人々に近づかないように指示する色ではありません。 ユーザーの注意を引くために赤を効果的に使用できます

例としては、Googleがユーザーに気づかせたりアクションを起こしてほしいほとんどすべてのボタンに赤を使用する方法があります。

enter image description here

UIのボタンに赤を使用する場合は、

  • エラーメッセージをどのように表示するかをよく考えてください。エラーメッセージは、赤い[OK]ボタンが付いたポップアップの形式で表示できます。ただし、状況に応じて、エラーのポップオーバーを表示することも、ユーザーにとって非常に面倒な場合があります。
  • 非主ボタンにもっと微妙な色を使用する
  • ボタンを赤で着色する前に、それがユーザーをガイドする場所であることを確認してください。ユーザーが選択する可能性が最も高いのはこのオプションです。

以下に、役立つスタック交換の回答をいくつか示します。

赤はボタンの正しい色ですか?

「危険な」ボタンは大きくて赤いか、小さくて目立たないようにする必要がありますか?

「はい、削除しますか」は赤ですか、緑ですか?

7
nuwa

使用するパレットが大きいほど、色に意味を持たせる方がはるかに簡単です。

行動を促すフレーズのボタンは、サイトの他のボタンと同じ色だと目立たなくなります。

また、色覚異常のある人にとってサイトがどのように見えるかを考慮する必要があります。これに最適なツールは http://paletton.com/ (配色を作成し、画面右下のビジョンシミュレーションをクリックして、配色がどのように見えるかを確認します。色覚異常のさまざまな形で)

色覚異常の人が利用しやすいように、色だけを使って意味を伝えないでください。

https://24ways.org/2012/colour-accessibility/

1
Yvonne Aburrow

警告色を赤にしないでください。対照的な色でも同じ効果が得られます。私の場合、ロゴも赤のサイトがありますが、#ff4500(乱れた)が目立ちます。この場合、コンテキストは、一般的な画像が赤の場合に役立ちます。

1
Rob

あなたが私のような人で、アプリのすべてのボタンを同じスタイルにしたい場合は、赤いボタンを使用すると遅かれ早かれ問題が生じます。アプリのスケーラビリティ、および将来コードに取り組んでいる誰かが存在する可能性があることも念頭に置く必要があります。その場合、色の異なるボタンを用意するのは面倒です。

ルックアンドフィールをデザインする場合、カラーパレットをロゴに似せたままにする代わりに、背景の赤の色合いを変えてみました。原色をデザインに使いすぎる必要はありません。いつでも赤を使用してセクションに注意を引くことができます。ただし、背景が赤で無理しないでください。

1
StudentX