ホバーするとボタンが明るくなったり暗くなったりしますか？
ユーザーがボタンをホバーしたときにボタンを明るくするか暗くするかについてオフィスで話し合っています。
以下は、フィールドの例です。
アップルの「今すぐ購入」ボタン（2番目がホバー、3番目が押されている）- http://www.Apple.com/iphone/
Twitter Bootstrap- http://Twitter.github.com/bootstrap/
（未選択）
（ホバー）
Githubホームページ-github.com
FogBugzホームページのボタンは、黄色から少し明るい黄色に変わります。 OptimizelyおよびVisual Website Optimizerのボタンはほとんど変更されません。
Amazonの[今すぐ購入]ボタンは、ポインターを置いたときに何もしません（ポインターカーソルに変わります）。 Googleの新しいインターフェース（Gmailまたはカレンダーを参照）の色付きボタンは、それらにカーソルを合わせると少し暗くなります。
最後にここに私たちのボタンがあります：
ボタンにカーソルを合わせると、ボタンが明るくなったり暗くなったりしますか？他に何を考慮すべきですか？ホバー効果がコンバージョンにとって重要かどうかについてのデータはありますか？
ほとんどの人がこれを「正常」と見なすのに十分一般的なパターンはありません。そのため、アプリケーションにとって意味がある限り、（どちらを選択してもかまいませんです。
重要なのは、ホバーしたときに暗くなったり明るくなったりすることではありません。少し変化があるということです。サイトを使用している人は、「ホバーで光ではなく暗くなったので、別の何かに違いない」とは言わないでしょう。
変更はクリック可能であることを通知するためだけにありますカーソルの変更に加えて。それがどのような変化なのかは、使いやすさよりもデザインや美学の問題です。
暗いテキストのより一般的なシナリオがあり、ホバー時にデザインの他の部分が変更されず、それが背景のみであるとすると、ホバーするとボタンが表示されますハイライト。あなたはアイテムに焦点を合わせようとしています-それを調べるために、それを見るためにより多くの光を与えるかのようにそれを明るくすることは理にかなっています。バックライト付きでもフロントライト付きでも違いはありません。
例外...ただし、これは普遍的に書かれたルールではありません-それは単なる論理的であり、一般的です。
キーは実際には色ではなく、コントラストです。
上記のシナリオの主な結果は、ホバーの下のボタンがわずかに明確に識別され、数字が隣のものよりも地面に対してよりよく対照的であるということです。
したがって、たとえば、比較として、明るいテキストがある逆のシナリオを見てください。同じ経験則では、図と地面の相対的なコントラストを上げるために、 、背景をdarkenにして、相対的なコントラストを上げる必要があります。
たとえば Apple.com のように。
Appleは必ずしも「正しい」の代名詞です！-たとえば-これら ダウンロードボタン にははありませんホバーまたはを押して効果を！
あなたが従うルールは単にこれです。
アイテムにカーソルを合わせると、周りの他のアイテムと比較して強調表示（一部のクライアントが言うように「ポップ」にする）する必要があります。
だからロールオーバーで...
背景テキストが[〜＃〜] white [〜＃〜]の場合、あなたは[〜＃〜] darken [〜＃〜]ボタンコントラストを強調します。
背景テキストが[〜＃〜] black [〜＃〜]の場合、[〜＃〜] lighten [〜＃〜]コントラストを強調するボタン。
あなたの場合：
追加のアドバイスとして、ドロップシャドウを上ではなくテキストの下に表示します。影とのその遊びはあなたのデザインに不吉な外観を与えるでしょう。邪悪なキャラクターを識別可能にする一般的な映画のトリックは、光源を[〜＃〜] below [〜＃〜]から照らすことです。
背景色に依存しませんか？エンドユーザーがボタンをホバーすると、ボタンが他のUI要素に比べて「より見やすく」なるため、暗いデザインではボタンが明るくなり、逆も同様です。 （注：「不透明度が低い」ではなく、「明るい」と言いました:)）
マテリアルデザイン-ボタン から例をとると、ボタンが明るい場合は暗く、ボタンが明るい場合は明るくなるという印象です闇：
- フラットボタン
- 浮き出しボタン：ボタンは少し暗くなりますが、主な違いは、影が浮き上がったように見えることです。
ガイドで気づいたことですが、それが言及されているかどうかはわかりませんが、ボタンを押すかホバーしたときにボタンのテキストの色が維持されます。
私はそれが明るいか暗いよりも少し複雑だと思います。他のボタンから目立たせたい場合、白が少ないでそれができれば問題ありません。 白が少ないと言います黒が多いとは異なるためです（学校で使用していた大きなボトルのペイントを混ぜることを想像してみてください）。黒を増やすと、ボタンが影になっているように見え、ボタンが押し下げられたように見える場合があります。ボタンを押し下げて見えるようにすることは、マウスダウンIMO用に予約する必要があります。ホバリングのためにそれをしないでください。
わずかに主観的な用語白が少ないおよび黒が多いを色の技術的な説明に変換できます。明度（HSLで）が50％未満の場合、白が少なく、黒が多いことは本質的に同じであり（明度が低くなります）、ボタンが押し下げられているように見えるかどうかを判断する必要があります。明度が50％を超えると、明度を下げると白が少なくなりますが、彩度を少しでも下げると、黒が多くなります。
もちろん、黒を増やしてもボタンが押し下げられたように見えない場合もありますが、特にほとんどの例で3Dの印象を与えているため、これは一般的なルールです。
ホバー状態はデフォルトより明るい必要があります。あなたはそれをテキストや背景の異なるカラースケールで、または影や光で強調することができます。
最も単純な例：テキストリンクは通常、下線のない青色で表示され、ホバーすると下線になります。
背景によると思います。ホバー時の背景が明らかに明るいよりも白い場合！
このような相互作用を単独で見るべきではありません。おそらく、望ましい効果はすでに議論の中で浮上しています。
...そして、ボタンの上にカーソルを置くと、ハイライト ...になります。
明るい/暗いも唯一のオプションではありません-多くの場合、ホバー時にボタンをより飽和させるのが適切だと思います（これは簡単な選択です-インタラクティブな場合は、しないでください） -ボタンを飽和させます！）
これはシナリオ（ホバー時の明るい）に適していますが、他のレンダリングされた状態を調整することもできます。とても淡いので、ほとんど無効になっています。
サイト/アプリに他のボタン/リンクはありますか？そして、ホバーまたはオンクリックのUI処理はどうですか？考慮すべき重要なことは、一貫性と関連性です。
サイト全体に同様のUIデザインパターンを表示することを理解している限り、一貫性について説明する必要はありません。
関連性とは、この「接続」ボタンを行動を促すフレーズのどれだけ強くするかを考えることです。アクション可能なボタンであることをユーザーが理解していないのではないかと心配ですか、またはボタンをonHoverに変更したい特定の理由がありますか？私が得ようとしているのは、サイトの他の要素からボタンを目立たせるようにデザインした場合、そもそもなぜ色を明るい色から暗い色に、またはその逆に変更する必要があるのでしょうか。
背景にもよると思います。背景が暗い場合は明るい色、その逆の場合、マウスを上に置いたときにすでに色が見えているため、暗い場合は明るくしたり、明るい場合は暗くしたりできます。
少なくともそれは、ボタンで行うのが理にかなっていると思います。それがあなたが本当に注目を集めたいボタンである場合です。それ以外の場合は、ホバーで明るくなるより明るくなるように選択します。これは、Windowsコンピューターでの作業に慣れているためです。