网页设计中的鼠标滑过效果：最佳实践与范例（译文）
- 六月 29th, 2009
原文地址：http://www.spoonfeddesign.com/hover-effects-in-web-design-best-practices-and-examples
本文译者为little_fleur。译文只供网页设计爱好者分享学习，转载请注明原出处和译者，谢谢。本人翻译水平很一般，翻译只为学习之用，有不足之处，欢迎留言交流。
Hover Effects in Web Design: Best Practices and Examples
设计存在于细节之中。无论从事哪个领域的设计，你总会听到这句话，因为这是真理。无论是多么微不足道的细节对于整体设计效果都会有直接的影响。这个结论在网页设计中同样奏效。从两个界面元素之间间隙的大小到网站头部的尺寸都将直接影响整个网站。还有一个重要的细节就是鼠标经过的效果。可用性是导航条的关键。鼠标经过的效果不仅起到装饰网页的作用更重要的是能够提高网站的可用性。为什么？因为一个好的鼠标经过效果将告诉用户他们正在关注的链接焦点。
在本文中，我将总结出实现鼠标经过效果最好的案例和技术，用30个实例来展示出鼠标经过效果的妙处。
用渐变色实现鼠标经过的效果 Gradient Hovers
看看下图的导航例子就能明白Gradient Hovers的意思。未获得焦点和未被选中的标准按钮，自下而上被一种从深色到浅色的渐变色填充。当获得焦点时，渐变色反转，从浅色到深色填充。这个效果使获得焦点的按钮区别于标准按钮，同时又给整个设计增加了深度。将两个按钮放在一起，你可以很容易分辨出它们的差异。这就是设计者最需要实现的：鼠标经过的效果必须易于辨认。
渐变色按钮，获得焦点时转为实色 Gradient Button, Solid Color on Focus
另一种值得注意的通用导航，采用渐变色的普通按钮，当鼠标经过获得焦点时，由实色填充的按钮区别开。
采用两种渐变，一深一浅 Two Different Gradients, One Sharper than the Other
还有一种效果主要是采用同一方向的两种渐变色来实现。普通按钮的渐变色采用浅色，当鼠标经过时则替换为深色的渐变。这种效果的运用可以在apple.com看到。
模糊效果 Blur Effect
当面对更大的界面元素或图片链接时，获得焦点时采用模糊效果是不错的方法。这种效果很牛，尤其是其中的细节更能提高网站的易用性。看看下面这些网站是如何用模糊效果来展示获得焦点的图片的。值得注意到是，这些模糊效果都是轻微的以确保图片内容可见。
在下面的例子中，鼠标滑过的效果是用于各个文件缩略图。留意一下缩略图上的标签。模糊效果有助于用户将视觉焦点从图像转移到白色的文字上。这个一个非常好的可用性特点，视觉效果也相当不错。
而在Best Web Gallery（一个非常不错的网页设计showcase站点——译者注）这个网站，鼠标经过时图片的模糊效果有助于用户将视线集中到大的预览图。
颜色对比是关键 Contrast is Key
对于一个好的鼠标经过效果来说，最重要的一点是颜色的区分，尤其是反差对比。当鼠标停留在一段链接文字上时，文字的颜色应该跟普通文本的颜色强烈区分开。为什么？呵呵，当然是因为颜色对比强烈的链接有更好的可用性并且对于用户来说更方便。
以下是文本颜色反差的好例子。橙色文本跟周围的白色文本很好的区分开来，同时又与网站的主色调遥相呼应。Staying within thecolor palette of the entire design is something to keep in mind.（意思明白就是说不出来。大致就是设计作品时最好不要脱离整个设计的主色调。——译者）
讨论完文本的颜色对比，再看看按钮的背景颜色。看下面的这个站点，Bartelme Design，就将按钮背景颜色的对比处理得很好。正常的按钮使用淡蓝色的背景。当鼠标经过时，则采用深蓝色。它们都是蓝色的，有足够的一致性，同时又具备足够的对比度使用户区分它们。
有颜色（彩色），无颜色（黑白） Color Off, Color On
另一个很棒的技巧是当一个页面元素处于正常状态时黑白显示，鼠标经过时则变为彩色。还有一种技巧则是为鼠标经过时的导航条加上径向渐变（radial gradient）的发光效果。
第一种技巧Pixelmator网站为我们提供了很好的范例。在右侧的按钮栏中，图标被用于辅助按钮。当按钮没有获得焦点时，图标是黑白的，而当鼠标经过按钮的时候，图标则变成彩色的。
至于第二种技巧，标准按钮为实色填充而鼠标经过时的按钮会有一个渐变色的发光效果或者高光效果，看看下面的例子：
首先，让我们再次看看Best Web Gallery网站。在这个设计中，按钮使用了和网站头部相同的颜色。而当鼠标经过时，这种填充色周围添加了一圈由明亮的色彩渐变而成的高光。RSS图标在正常情况下是暗淡的，但是当按钮获得焦点时就变成了橙色的。
