リンクのホバー色を論理的に選択する
Apple Webサイトのメニューの色は、ホバーするとフェードアウトします。これは、アイテムをホバーすることがそれをアクティブにするようなものであり、積極的なアクションであるため、これは間違っていると思います。
それでは、ホバーカラーを選択する論理的かつ合理的な方法は何ですか？
まず、質問への回答を簡単にするいくつかのことを説明します。
ホバー。リンクまたはコマンドのホバー応答の目的は、アフォーダンスを通知または強化すること、またはおそらくその柔軟性（ドラッグされたオブジェクトのドロップなどのアクションに対する意欲または受容性）を示すことです。
ポインタコンピュータ画面上の==は、私たちの指や手の代用です。これを使用して、プッシュまたはドラッグを示したり、選択したり、押したり、押したりします。
ホバースタイルの選択
「ホバー色を選択するための論理的で合理的な方法は何か」というあなたの質問には、おそらく組み合わせることができる多くの可能な答えがあります。
- se skeuomorphyを使用します。これは、ユーザーが物理的な世界からすでに知っているパターンに依存し、GUIで使用するためにそのパターンから視覚的な手がかりを借りることについてです。特に新しいタイプのインタラクションの場合、オンラインエクスペリエンスが現実の世界で何かを模倣できる場合、ユーザーの脳が関連付けることができるパターンを提供することで人々を助けます。この「関係」は、「私を押すことができ、私は移動する」という信号のボタンの3Dエッジのような、実際の物理的な相互作用に関するものである可能性があります。指や手の近接に反応する無生物の物体は考えられません。ええと、生物は身をひっくり返すか、飛び去るか、傾いたり、色を変えたりするかもしれません。
- 標準に従う。 1つの標準はテキストの装飾です。したがって、リンクの青いテキストは、ホバーすると下線が引かれ、mouseDownでは赤に、アクセスすると紫に変わります。他の標準を特定したり、それらを防御したりすることにあまり時間を費やしません。あなたの質問は、あなたがこの標準に従わないことを望んでいるからです。
- 事前学習の活用。これが、スキューモーフィズムを機能させるものです。また、標準が機能する理由でもあります。以前の経験や学習によって活用することができます。したがって、以前の経験に基づいて、ユーザーは小さい画像は今までに見たことがないをアイコンとして、ポインタをその上に移動して表示することができます。アフォーダンスを通知する場合、ツールヒントを表示する場合、またはブラウザのステータスバーにリンク先URLを表示する場合。これらは、ユーザーがlearnedで認識できるすべてのものです。
- 認識処理を活用。私はそれを考える機会がある前に私たちの脳が理解している認識反応を考えています。上記で、私はちらつきに言及しました。故意に決定するはしません。それは認識的反応です。 Gestalt は、私たちの認識処理が解釈できるさまざまな視覚的特性を識別します。上記の図でこれが動作しているのがわかります。メニューバーにはグループの一部であるいくつかのリンクがあり、ホバーすると、リンクの1つがグループから分離されます。 2D設計の原則 オブジェクトを使用して空間関係を示すことができるいくつかのことを識別します。たとえば、2つのオブジェクトが重なっている場合、「手前のオブジェクト」が近く、「大きいオブジェクト」が近く、「灰色のオブジェクト」が遠いというようになります。もちろん、これはGestaltにも依存しています。私たちの脳は、1つの円と1つの三日月ではなく、2つの円があると解釈しているからです。見てください：
あなたは組み合わせることができます上記のソリューションは、視聴者に最適な視覚的キューを定義/設計するために使用します。そうです。私はあなたの質問に特定の答えはありません。なぜなら、それは依存するは、コンテキスト、ユーザーのタイプと以前の経験、ビジュアルデザインの感情的な目標などに依存するためです。
ホバー状態はクリック機能を提供するため、ホバー色はnoticeableであることが推奨されます。 一般に、背景色とのコントラストは、この望ましい効果を実現するのに役立ちます。
このサイト自体で例を見ることができます：
ホバーの色は、基本色のトライアドスキームに従っています。
リンクの色とホバー状態を選択するために利用できるいくつかの技術的なガイドラインがあります。 W3CによるG183文書 を参照してください。周囲のテキストと3：1のコントラスト比を使用し、リンクまたはコントロールのフォーカスに追加の視覚的合図を提供して、色のみを使用してそれらを識別することをお勧めします。
お役に立てれば！
それには本当の「論理」はありません。それはもっとプロセスです。
可能なすべての視覚的変化を特定します。
- 前景色を変更する
- 背景色を変更する
- アウトラインの追加/変更
- 下線の追加/変更
または上記の任意の組み合わせ。 （サイズを変更することもできますが、問題があるため、通常は避けます。正しく実行することは可能ですが、複雑になります。）変更を明確に（十分なコントラスト）して、カラースキームと調和させて、 （テキストと背景のコントラストを下げすぎて）何かを不明瞭にしたくない。また、サイト/ページ全体で一貫性を保つ必要があります。すべての要素タイプのホバー効果はすべて同じである必要はありませんが、テーマのバリエーションであり、バリエーションの数は限られている必要があります。
また、タッチデバイスにはホバー効果がないので、ホバー効果は非タッチデバイスの装飾にすぎないと考えてください。