web-dev-qa-db-ja.com

主要な「行動を促すフレーズ」ボタンで使用する色に「科学」はありますか?

主な「行動を促すフレーズ」ボタンに使用する色について、どのような研究が見つかるか疑問に思いました。ボタンのサイズと、ボタンの背景とのコントラストが大きな役割を果たすことを知っています。私は青とオレンジがよく使われているのを見ていますが、サイトデザインの主ボタンの色を決定するのに役立つ、これに関する詳細情報がどこにあるのか疑問に思います...

14
Christie Day

良い質問!私はこの問題をページの送信、キャンセル、および終了ボタンで自分で処理しています。

これが プライマリおよびセカンダリアクションボタンの視覚的な重み プライマリおよびセカンダリボタンの視覚的な重みです。

これが Primary&Secondary Action で、下部に長いリストがあります。

これは デザインで視覚的な重みを使用する であり、特に5つしかリストされていませんが、色に対応しています。

オンラインで本を見つけました: グラフィックデザイン:新しい基本 。全体的に非常に優れたデザインのヒントが得られますが、色に関するセクションは、用語と基本を理解するのに役立ちました。

私は最近、このセクションを色について MSデベロッパーセンター-Windows UX相互作用ガイドライン:色 で見つけ、UXに対するMicrosoftのアプローチについて説明しています。基本的な色がユーザーにとって何を意味するかについての非常に短いセクションがあり、私は興味深いと思いました。

ここに私が見つけたものの基本的な要約があります:

  • プライマリアクションボタンを目立たせます。プライマリおよびセカンダリカラーを使用して、プライマリセカンダリボタンと一致させるか、プライマリおよびセカンダリボタンをより暗くするためにより強い彩度カラーを使用します。柔らかい灰色は、ミュートされたセカンダリボタンを表示するのに適した方法です。
  • 色以外のオプションについては、ボタンのデザイン自体のコントラスト、明度/暗さ、サイズ、密度、複雑さを使用できます。
  • 混乱を避けるために、リンクを特別な反対のアクションとして使用します。
  • 可能な場合は、セカンダリボタンを避けてください。

最後に、色の意味の基本的なグラフを次に示します。

enter image description here

7
user9533

主ボタンの色の選択は、インターフェイスが使用しているカラーパレットにも依存します。主要色ではない色を選択しますが、他の要素から際立つ十分な彩度とコントラストを提供します。主ボタンの色は控えめに使用する必要があります。主な色としてではなく、要素を強調または強調するために使用してください。

2
Kartik G