web-dev-qa-db-ja.com

青い色で最高のエラー色？

色があります：#4285f4そして、私は読みやすいエラーカラーコードを探しています。 Googleのデフォルトのエラー色を使用しています：#dd2c00。しかし、これはページであまりよく読みません...

Example

designinterfaceinput-fieldscolor-scheme
35
Gaetano Herman

中間色のボックスにエラーメッセージを表示します。

mockup

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

19
Ken Mohnkern

MDガイドラインはルールではない

Googleデザインチームは、色で考えることができないアプリ開発者向けに、適切な色の選択を提供したいと考えていました。堅実なパレットですが（UIフレームワーク全体がすばらしい）、すべてのシナリオに対応できるわけではありません。それらを手放すことを恐れないでください。

あなたの青い背景を元にして、私はすぐに、痛みを伴うコントラストなしに目立つ「警告」の色を見つけました。アラートテキストを太字に変更すると、読みやすくなります。そして、他の場所で述べたように、よく知られているアイコンは、ユーザーの目を引くのにも良い方法です。

enter image description here

他にもいくつか提案があります。ただ考えるための食べ物。

  • AcceptアクションをCancelと区別します。ユーザーがおそらくこのフォームを開始したので、受け入れがより可能性が高い意図です。
  • エントリを促進するために、フィールドのより自然なラベルを検討してください。
  • エラーテキストのサイズを大きくします。それも読書に役立ちます。
  • フィールドの下線の色を変更しただけです。これは通常、問題を強調するのに十分であり、エラーテキストを強調するのに役立ちます。
95
plainclothes

明るい黄色は、青い背景のコントラストが優れています。 UIによっては、濃い青と対照的に明るいフクシア/ピンクを使用することもあります。 マテリアルデザインの色のガイドライン で2つのスウォッチが機能することがわかりました。

黄色：＃FFFF00
ピンク：＃FF80AB

enter image description here

7
Side Swiped

私は、色が暖かく感じるまで、デフォルトの色と赤を混ぜる傾向がありますが、テキストはまだ読みやすくなっています。警告の場合はオレンジまたは黄色と混ぜ、中立の場合は青（または白）と混ぜ、肯定的なメッセージの場合は緑と混ぜます。

これは、人々がより広い範囲の色を特定のレベルの重大度に関連付けるために機能します。

代わりの方法は、メッセージを目立たせるために、テキストの色ではなく背景を変更することです。繰り返しますが、伝えたいメッセージに応じて、背景色を赤、オレンジ/黄色、青/白、または緑に混ぜます。

標準の色がまったく機能しない場合は、代替の色を使用しますが、アイコンまたは「エラー」などの説明テキストを使用して、それを目立たせ、テキストの意味をそのように伝えます。特にアプリケーションを使用している人が色覚異常/色覚異常である場合、アイコンは色よりも認識されやすいため、アイコンを使用することはおそらくあなたがやりたいことです。

3
Sumurai8

エラーは色だけで伝えられるわけではありません

エラーは、エラーであることを示す方法を組み合わせて表示できます。

mockup

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

これは、複数のバリエーションの2つにすぎません。また、アクションが実行された後にポップアップするメッセージのアニメーションも、メッセージのタイプのアフォーダンスを作成することに注意してください。

私の推奨は、メッセージの前にアイコンを追加することです。

それでもうまくいかない場合は、青色の背景の使用を再検討する必要があるかもしれません。

1
Majo0od

秘訣は、単色の代わりにアルファ色を使用することです。

Googleはこれを Material Design specs の箇条書きの "Legibility"で説明しています。

スペックから：

「ウッドマンはすぐに働くように設定されました」というテキストは、両方の写真で同じ色です。最初のものでは、それはしっかりしています。

Bad contrast

この図では、黒が初期色として使用されています。背景色が透けて見えるように不透明度を下げ、コントラストを改善しました。

dff

画像のソース

したがって、エラーの色を少し透明に設定してみてください。明るいまたは暗い赤のバリエーションを試してください。

Material Design red palette

画像ソース

Googleのデフォルトのエラー色の例：

rgba(221, 44, 0, 0.87)

1
Noah Krasser

互いに引き立たない色については、背景をいじってみてください。

  • Placeholder textを削除すると、エラーが表示され、ユーザーが何をする必要があるかが明確に示されます。
  • [〜＃〜] accept [〜＃〜]ボタンのopacityを減らして、エラーメッセージ。 （この場合、タイトルを追加しないとユーザーがメモを保存できないため、この値は非常に高くなります。）

Background color of the error is turned red rather than the text color

[〜＃〜] note [〜＃〜]：たぶん[〜＃〜] save [〜＃〜]は、OKボタンのテキストとして適しています。ただの考えですが、状況を完全に認識していないので、私は間違っている可能性があります。

0
Shreyas Tripathy