web-dev-qa-db-ja.com

ナビゲーションバーの背景色を選択する際のベストプラクティスは何ですか?

私はTwitterを使用していますbootstrapで、ナビゲーションバーのデフォルトの濃い灰色の背景色が好きではありません。

だから私は別の色を選ぶことを考えていました。しかし、最初はプログラマーでありデザイナーではないので、これは想像以上に難しい問題であることが判明しています。

ナビゲーションバーの背景色を選択する際のガイドライン/原則/ベストプラクティス、およびその色がページ上の他の色とどのように関連/補完されるかについて説明します。

インスピレーションを得るためのウェブサイトはありますか?

5
numan

これであなたの痛みを感じます。カラーパレット/補色に関するいくつかの優れたアイデアについては、Adobeの Kuler を参照したい。

また、 PatternTap にはナビゲーション要素の巨大なギャラリーがありますが、新しい色を探しているだけの場合は、少しふるいにかけるかもしれません。

何よりもここで従うべき原則は単純だと思います。読みやすいように十分なコントラストがあることを確認してください。 Contrast-A は、テキストと背景色のコントラストが読みやすいほど高いかどうかを判断できる優れたWebベースのツールです。制作サイトを調べるようなものが必要な場合は、 checkmycolours.com でそれを実行できますが、間抜けな結果が得られるようです。

9
Mark D

決定する色は、UIデザイナーの視点、UXの視点、またはアクセシビリティの視点のどちらから来て、すべての適切なレベルを見つけるかによって異なります。

たとえば、100%のアクセシビリティを見ている場合は、黄色の背景に黒いテキストを使用し、変更するオプションがあります。 100%UI p.o.vの場合システムの他の部分に適合するように設計することになるかもしれませんが、読みにくくなります。 100%UXは、ユーザーが読みやすく目立つ、おそらく正しい順序でも何かを見ているように感じさせないように十分に設計されています。

3つすべてを適切な比率で組み合わせると、読みやすく、使いやすく、見栄えがよく、よく見えない人にも読みやすいものが必要です。

ヒント-情報を表現するために色に依存しないでください。色は情報を補足するもので、色を簡単に見ない人は混乱しないようになっています。たとえば、サイトのセクションごとに異なる色を使用することは、その色をテキストやシンボルでバックアップすることなく、ノーノです!

3
TJH

優れたインフォグラフィックデザインの本は、色の選択に関する適切な事実を説明します。 kulerのようないくつかのWebサイトやツールは、既存のパレットに基づいた無料の色をすぐに満足させることができます。あなたのパレットが色調または他のスキームである場合、同じ脈で続けるのが最善です。

0
Chris