有効なボタンと無効なボタンの違いは何ですか？ （特に灰色の場合）
ボタンが有効または無効であることを示す最良の方法は何ですか？ （特に灰色の場合）
たとえば、次のボタンについてどう思いますか？有効か無効か？どうすれば改善できますか？
無効にしたボタンを平らにし、コントラストを下げます。比較してください。
グラデーションを削除すると、押せなかったことをユーザーに知らせ、テキストのコントラストを下げると、ユーザーにオフであることを伝えます-ネオンとの類推では、点灯してオンになります。それ以外の場合は、「いいえ」のようにオフになります"下の画像の一部：
アクティブなボタンは通常、コントラストが高く、外観が浮き上がっており、ホバー状態にすると触覚インタラクションがさらに伝わります。 （いい感じですが、ホバー状態は、最も急速に成長しているユーザーのセグメント、つまりモバイルデバイスを使用している人々には関係がないことを覚えておくことが重要です。）
無効になっているボタンは通常、グレー表示され、平坦化または押し下げられており、ホバー状態に反応しません。
画面、透明度、グラデーション、ベベルを示すドロップシャドウ、インデントなどを微妙かつ注意深く使用することは、すべて優れたツールです。ただし、パフォーマンスと複雑さの問題に留意してください。最高のユーザーエクスペリエンス、メンテナンス性、セマンティクス/インデックス付けを実現するには、CSSでこれらのボタンを作成する必要があります。
そして、それが Twitter Bootstrap や Zurb Foundation のようなフレームワークが登場する場所であり、幅広いアクティブな要素と無効な要素の十分にテストされたデフォルトがあります。ボタンだけでなく、フォーム要素やメニュー項目などのさまざまな状態も含まれます。多くの賢い人々が、あらゆる角度から研究、設計、テストを行うことで、これらのプロジェクトに貢献しています。それらを利用して、一般的なインターフェース設計要素とパターンの適切な開始点を提供できます。
Bootstrapの基本的なボタンの例：
ボタンは適切です。特に、2次的なアクションの場合、ボタンは有効になっています。
ボタンが無効になっているように見えるようにするには、ボタンの透明度を下げ、ユーザーがボタンにカーソルを合わせると、ボタンが無効になっている理由を説明するツールヒントを表示します。ウィキペディアの「 このページを評価 」セクションをご覧ください。チェックボックスとテキストは、隣のテキストと比べると透明に見えます。実際、Wikiはこれを達成するために銀色を使用しましたが、透明度を使用しても同じ結果が得られます。
ボタンの目的が何で、どこで使用するのかわからないので、あまり提案できません。
有効状態と無効状態の違いを示す灰色のボタンの最も一般的な例の1つは、ブラウザ自体です。明らかに、これらはここでの他の回答と同じルールに従いますが、表示が無効になるようにフラットでグレー表示されます。
Firefox v19
Chrome v23
IE 9
これに加えて、デフォルトのブラウザボタンの良い点の1つは、ボタンの無効な状態がボタンのように見えることです（これは Peter でコメントされた問題になる可能性があります）。彼らは、ボタンの湾曲したボーダーとボタンの内部の1pxの白いボーダーを持つことでこれを達成しているようです。
障害者のために-あなたはそれを灰色にすることができます。
状態をオンまたはオフに変更するには、シェーディングを使用します。最も一般的な状況は、光が上から来ることです。ボタンは凸状で、上から照らされているように見えます。だから、今は押されていません。シェードを反転すると、押されたように見えます（凸面から凹面になります）。ただし、それが座っているシャーシによってキャストされた新しいシャドウを追加することで、凸状に保ち、単に後退させることができます。