样式超链接与正文无法区分的重点是什么?

时间:2010-06-19 23:21:43

标签: css text colors hyperlink

似乎越来越流行的趋势是用一种几乎与正文无法区分的颜色来设置超链接的样式。前几天SFGate blog page我注意到了这一点。还要注意几个字前的链接。我的眼睛变得更糟,还是难以发现?

我当然理解样式超链接看起来比浏览器默认样式更好。但是,如果他们不容易看到,那么首先拥有它们有什么意义呢?

我最好的猜测是,设计师(或任何做出造型决定的人)都会谨慎地使用与正文相比明显不同的颜色或其他造型来打断眼动追踪。这会有一定道理,但我觉得还有更多的妥协空间 - 即造型链接与身体文字不同,它们很容易被发现,而不是让它们如此华丽以至于它们吸引眼球不利于阅读。

有人会认为微妙的超链接比更明显的超链接更有效吗?或者,您能指出任何可能证明其使用的理论或测试结论吗?


@Mike Daniels:谢谢你澄清我在这个网站上遇到问题的颜色是访问过的链接颜色 - 我没注意到,但你是对的。未访问的链接颜色相当突出,对我来说更有意义的是,访问过的链接会与周围的文本混合更多。

另一方面,我不确定我是否认为悬停颜色/效果足以正确区分超链接。我不认为用户应该将鼠标悬停在链接上以确认它实际上是可点击的,这是可用性的原因。我认为应该一目了然。

我实际上有一个非常好的IPS面板显示器和近乎完美的视力,戴着眼镜。我可以看到这个页面上的访问链接和SFGate博客上的访问链接,如果我扫描它们,但我的论点是它只需要下划线,不同颜色或其他视觉区别,以使链接更加突出。

我真正想知道的是为什么 - 假设像SFGate这样的高流量网站上的设计师知道他们正在做什么并且已经对链接颜色做出了有意识的决定 - 他们会选择将链接设置为像身体文字那么紧密?有没有推理呢?

9 个答案:

答案 0 :(得分:2)

我可以看到背后的推理不希望有超级样式与常规文本强烈冲突,因为它们在阅读时会分散注意力。但我认为这很少是一个问题。如果您查看类似Wikipedia的网站,这些链接在视觉上与常规文本截然不同,但它根本不会使文本更难阅读

因此,仅将内联链接与标准文本巧妙地区分开来的唯一真正原因是出于美学目的。我认为这就是SFGate设计师所做的。当它们不是内联时,它们使用的链接颜色很容易区分(例如最近的条目类别窗格),但它们可能更难以在文本中选择。< / p>

由于他们已经仔细选择了美观的色彩方案,并且您通常不希望在设计中使用太多不同的颜色或在不同的地方使用不同颜色的链接,因此没有太多选择。他们可以:

  • 加粗链接
  • 强调了他们
  • 使用虚线下划线(一个很好的妥协)
  • 或使用翻转

所有这些都有助于区分链接和文本,而无需为链接提供更明亮的颜色。

但是你还必须考虑它的页面类型和访问者的使用模式。如果您有很多内联链接,或者如果用户主要在那里阅读文章,而不是按照嵌入式链接,那么您不希望链接引起如此多的关注。 SFGate博客更类似于数字报纸。它不是标准新闻博客,其中链接是主要内容,或维基百科,其中嵌入链接也是网站的主要焦点。基本上,博客文章中的少数链接只是为好奇者提供一些补充信息,但预计会被大多数读者忽略。而且它们确实足够突出,以便在阅读文章时,您会在遇到它们时看到链接。

答案 1 :(得分:0)

主导航栏是可读的,子导航栏是普通文本,带有while背景,提供主导航栏视觉层次结构。该页面实际上是正常的。

答案 2 :(得分:0)

这取决于你想要完成的事情。作为网站所有者,我可能会发现(通过A / B测试)更微妙的链接颜色会增加点击率,降低跳出率等。

但是,我确实认为仅按颜色区分链接可能会导致colorblind folks出现问题。

答案 3 :(得分:0)

好的,在SO中,访问的超链接颜色有点暗,很难与未访问的超链接颜色区分开来。但我认为内联超链接设计是一个难以回答的问题。我的意思是你希望有人知道超链接在那里,但与此同时,它是否比你的内容更重要或更不重要?如果它是最终目的地,那么可能会使它更突出(即通过强调它),如果它的证据是一点,因此不那么重要,有人点击它是没有必要的。我认为可以进行简单的颜色更改,也许可以使访问/未访问的链接更加匹配,以便他们在内容中保持可见性。

答案 4 :(得分:0)

直到Mike Daniels指出你的问题是访问过的链接,而不是通常颜色的链接,我才意识到。访问链接传统上混合了更多,它并不是一个真正的新概念。我认为理论是如果你已经访问了你必须知道它的链接,所以没有理由再引起你的注意了;还有其他您尚未访问的链接,您可能对

更感兴趣

答案 5 :(得分:0)

我可以清楚地区分链接颜色和文本颜色。也许你应该调整你的显示设置?我认为将它与周围文本区分开来可能会更加大胆,但这是大概的。

如果SFGate blog page页面使用悬停属性提供另一个视觉提示,我认为链接实际上是一个链接,那就太好了。

答案 6 :(得分:0)

可能是我经历过的两种情景之一。

  1. 设计机构不精通网络,认为不同颜色的文字和(更糟糕的)下划线是不雅观的,并且要求设计师将链接明显统一(你会惊讶于我经常被要求这样做。)

  2. 这个文字被一个落后时间大约6年的人误认为是错误的,并认为你必须在一个页面上链接每个术语的实例,但要考虑到访问者,所以他们已经被打败了。

答案 7 :(得分:0)

我很好奇,如果像切斯特菲尔德上面所说的那样,有人妄图他们应该在页面上链接很多东西,以提高他们的搜索引擎排名。而且,正因为如此,他们认为如果他们减少了链接的颜色,那么页面可能看起来不那么难看,这样他们就更像是谷歌游戏而不是最终用户。

我很想看到一些关于次要重点链接的文章链接数量与链接清晰的文章的统计数据。显然它不是100%科学的,但它可能会使问题更加明确。

答案 8 :(得分:0)

也许这可能是一个很好的解决方案

a {
    font: inherit !imporant;
    text-decoration: inherit !imporant;
    color: inherit !imporant;
}