灰色のボタンを使用するのは悪い考えですか？
私たちのデザインチームは、サイトで灰色のセカンダリボタンを使用することを検討しています。ユーザーには無効になっているように見えるかもしれません（特に、オレンジ色の主ボタンを使用した場合）。それらの上にホバー状態があるので、マウスオーバーしたときにユーザーが無効になっていないことがわかります。
十分な ボタンが実際に無効になっていないことを示す を指定できる場合は、灰色のボタンを引き続き使用できます。次のように、フォントの色を暗くすることができます。
それでも、このアプローチはお勧めできません。 Pashaの考えを裏付けると、灰色のボタンを「無効化されていない」ように見せようとするこのような試みは、まだすべてのユーザーに納得していないかもしれません。グレーを維持することにこだわらない限り、次のオプションを試すことができます。
（A）
セカンダリボタンをWebサイトのカラーパレットに合わせます。ヘッダーにあるのと同じ青をボタンに色付けしてみることができます。
カラーパレットに一致するボタンがあると、ボタンがテーマの残りの部分と調和し、サイトの完全性をユーザーに安心させることができます。ただし、鮮やかなオレンジ色のボタンと並んでいるため、ボタンの2次的な性質について混乱を招くことはありません。
（B）
別の方法として、すべてのボタンにオレンジ色の配色を使用することもできますが、Koenが言ったように、配色を反転させることにより、セカンダリボタンをプライマリボタンと区別します。
話はここで終わりません。これに加えて、これらのボタンのホバー状態、押し下げ状態、および無効（必要な場合）状態の配色を検討する必要があります。頑張ってね！
アフォーダンスをホバー状態に依存しないでください。クリックできるかどうかを判断するのが難しいのではなく、見せてください。また、タブレットやその他のタッチ中心のデバイスでは、ホバー状態はまったくありません。
同じ形の色付きのボタンの横にある灰色のボタンは、これらのボタンが無効になっていて、現時点では使用できないことを示しています。 （一時的に）利用できないアイテムをグレー表示することは、あなたが行くことができず、利用できないものをグレーアウトするような標準です。これらをさらにグレー表示することもできますが、ユーザーを不確実にするリスクがすでにあります。
セカンダリボタンは、プライマリボタンとは異なる方法で表示する必要があります。彼らがテキストリンクであることは一般的です。このフィールドの下にある[回答を投稿]ボタンは実際には灰色ですが、唯一のボタンであることは、明らかに主要なアクションです。 「破棄」は青いテキストリンクであり、明らかに2番目のアクションです。
オレンジの別の色合いを使用するか、配色を反転させることもできます（白っぽいボタンのオレンジ色のテキスト）。
灰色のボタンを使用することは悪い考えではありません！灰色のボタンは、アイテムがプライマリアクション（オレンジ）と比較してセカンダリアクションであることをユーザーに示します。ミックスに別の色「青」を追加すると、どのボタンが主要なアクションであるかについてユーザーを混乱させる可能性があります。
たとえば、私の会社では、ライトグレーのボタンを使用してセカンダリアクションを表示し、ダークブルーをプライマリアクションに使用しています。
無効になっているボタンには、このタイプのグレー表示されたボタンを使用します。プライマリ/セカンダリボタンと比較して、色あせて見えることに注意してください。
これらの灰色のボタンは、従来の「アクティブ」ボタンと従来の「無効」ボタンの中間にあります。スクリーンショットを見るだけで、これらのボタンが機能するかどうかはnclearになります。
さて、この文脈でunclearはどういう意味ですか？つまり、これらのボタンがアクティブであると考える人もいれば、無効になっていると考える人もいます。残りのユーザーは困惑し、ボタンをマウスでホバーして、ボタンが点灯するかどうかを確認します。これらのユーザーは、ボタンが実際に機能することを理解しますが、グレー=無効になっているという知識が損なわれるため、おそらく不快に感じるでしょう。他のアプリケーションでは、灰色のボタンが実際に機能するかどうかを確認する必要があります。
したがって、問題は本当になります。これらのボタンを本当に灰色にして、顧客の一部を失い、別の一部をわずかに疎外するリスクを負う必要がありますか？
ほとんどのWebサイトで、無効化されたボタンを使用していることがわかりましたが、アクティブ化と無効化は明確に区別されています。灰色が無効であることを意味する事前定義されたルールはありません。通常、無効になっているものは単に不透明度を変更します。ブラウザのデフォルトボタンでも不透明度が変更されます。これらのボタンがクリック可能であることはユーザーには明らかだと思います。
Googleは、セカンダリボタンが灰色で、灰色で無効になっていないことを知る良い例です。
グレーと無効を区別する方法は次のとおりです。
ほとんどの場合、要素がグレー表示になると、コントラストが低くなります（たとえば、背景が薄い灰色でテキストが白い）。
コンテキストも重要です。その灰色がウェブサイトのどこかにある場合、それは単にサイト自体のカラーパレットの一部と見なされます。
明確な：hover状態があり、それで問題ないことを確認してください。
これらの灰色のボタンは問題ありません。タイトルの色が灰色ではないため、無効として数える意味はありません。
例として、Apple.comにアクセスして、水平メニューが無効になっているので誰も考えたことがないことを確認できます。