为什么链接需要鼠标悬停效果(Hover Effect)

对于我们的网站来说,为了增加可用性,链接虽然可以包含文本,但不应该看起来和文本一样。链接应该是容易识别的,易点击的,否则用户就不会去点击它,我们不仅应该注意链接本身的外观,还应该注意设计鼠标悬停效果。

仅仅改变颜色还不够

现在很多网站的链接和普通文本相比仅仅是颜色不同,如果链接和普通文本的颜色对比度不明显,对于色盲用户可能是个灾难,他们无法判断这是不是链接。

比如上面这俩行字,要知道眼睛好的人眼里和眼睛看东西不清楚的人眼里颜色是不一样的。他们为了确定这是一个链接,必须将鼠标光标放在上面显示一个手型才能艰难地知道这确实是一个链接。

鼠标悬停效果要明显

不仅是色盲用户需要明显的鼠标悬停效果,对于普通用户也需要明显的鼠标悬停效果。如果一个链接仅仅在颜色上区分链接和文本,那么所有用户想要点击链接必须要首先保证确实是在链接上面,用户需要仔细观察光标形状是否变为手的形状才能确定。如果有鼠标悬停效果则不然,只需要看链接内容即可。

为什么链接需要鼠标悬停效果(Hover Effect)_第1张图片

比如上面右图,有鼠标悬停效果,加了下划线,用户很容易看清楚光标确实是在链接上面,因为链接颜色变为清楚的红色,而且加了下划线。

几种不同的鼠标悬停效果

那么如何加鼠标悬停效果呢?可以有颜色变化;加下划线;文本加上背景;也可以上面几个变化同时使用。

为什么链接需要鼠标悬停效果(Hover Effect)_第2张图片

总之,悬停效果越明显,效果越好。

在手机上怎么办

我们都知道,当我们使用移动设备时,由于没有光标,因此并没有鼠标悬停效果。那么应该怎么办呢?这时候就应该确保链接和文本内容应该尽可能的明显,有下面几种方式:

为什么链接需要鼠标悬停效果(Hover Effect)_第3张图片

可以加一个向右的箭头;或者加下划线;或者加一个背景;不应该仅仅是颜色不同于文本。

总结:

无论我们的目标用户是不是色盲用户,我们的链接都应该明显,清晰,易于点击,和普通文本不仅仅是颜色不同,而应该也有明显的鼠标悬停效果

你可能感兴趣的:(为什么链接需要鼠标悬停效果(Hover Effect))