链接，怎么办？

2月 12th, 2008

表示文字链接最清楚的方式是“蓝色文字+下划线”，这是在浏览器发展过程中形成的。这个问题大家都说过很多次了，我也曾经说过。然而，这样的规范却总是难以实行。视觉设计师会把文字颜色作为一个表现视觉风格的元素，完全出于视觉表现的需要来配色，而不顾及这个规范。在埋怨视觉设计师的同事，我也在考虑，规范之不行，问题恐怕并不全在执行者。这如同交通规则不允许骑自行车带人，但是交警也不能见到骑车带人的都拦住罚款。

显然，这个规范对视觉设计的局限是比较大的，所以视觉设计师才不愿意去遵守。在网页的开发流程中，留给视觉设计的时间是很有限的，并且往往要求有比较绚丽的视觉表现。这样的条件下，再要视觉设计师顾及这个规范确实也比较难。

那么，我们来设计另外一个规范，让文字链接同样能表现的很清楚，做到“操作可识别”，同时，又让视觉设计比较容易做。

方案如下：
将文字链接分为两种，区别对待。
第一种. 对于较大的列表，默认时不显示下划线，光标经过时才显示下划线。

上图中这样的内容是一个个列表，一个新闻标题的列表，一个日志标题的列表，一个网友昵称的列表…显然是可以点击的。那么，好，既然能猜到，就不下划线了。只在光标划过的时候显示下划线，“嗯，对的，是可以点击滴！”

第二种. 对于混杂在页面文字中零散出现的文字链接，默认时候就出现下划线，光标经过的时候，样式不变。

散布与一大堆文字中的链接，如果在默认的时候不加以区别，就完全没法识别了。

这个规范的优点：对文字颜色没有要求。
不要求链接文字全部用蓝色，给视觉设计留出了足够的空间。不要求链接文字全部加下划线，避免了页面象横格本一样的满篇全是横线。

这个规范的缺点：对有链接的文字用了两种不同的处理方法，有的默认有下划线，有的没有。这两种情况同时显示在一个页面上时，加了下划线的文字显然会更明显的表示出：“这个是可以点击的。”于是，页面中的大列表可点击，表达的就不那么明显了。而页面中的大列表往往又是重点内容，是希望用户关注的内容。类似下面这种情况：

这个缺陷需要通过视觉设计来弥补了，背景颜色、字号、加粗之类的办法。

要说的就是这些。最后来看一下gmail，大体上就是按照这个方案来处理文字链接问题的。

有29 条对“链接，怎么办？”的评论

  1. 不是俺 说：
    2月 12th, 2008 at 12:54 下午

    有本老外写的书，专门说过这个问题。

  2. 醉中仙 说：
    2月 13th, 2008 at 11:14 上午

    確實，標注不能窮舉所有情況；
    就算列出了這許多“樣本”，也有人會牛頭配上馬嘴的。
    執行是個難題啊，呵呵~

  3. 绝路 说：
    2月 13th, 2008 at 9:52 下午

    对于链接样式，个人认为如此重要的元素还是需要设计师去遵守规范，链接样式的花样越多，用户想要点击时产生疑惑越多。“一致性”是一种品质，值得我们去追求。
    试想，一个普通的电视遥控器，上面的按钮样式五花八门，你会不会在使用时大感头疼呢。
    在以上大前提下，小范围可以让设计师适当发挥。

  4. 西贝 说：
    2月 15th, 2008 at 1:46 下午

    恩，同意

  5. 无此人 说：
    2月 17th, 2008 at 1:53 下午

    “没有规矩，不成方圆”
    如果事先不规定好64格的棋盘，今天的国际象棋比赛将会怎样 ？

  6. 空格 说：
    2月 18th, 2008 at 11:33 下午

    不是月刊么，成了周刊了？呵呵。

    这个规则我认为不一定要视觉设计师去尊守。
    链接多时不需要默认下划线，以免造成视觉干扰；链接不多时需要下划线，以区分非链接，也是从视觉方面。

  7. eling 说：
    2月 19th, 2008 at 1:01 下午

    我是做视觉设计的，我现在越来越迷糊了呢，交互设计师定出来很多很有用的规则，确实很好，但是这种规则，很多是收集了原先设计师一些好的想法，然后当成了规则在用，那么，都是遵守这样的规则下去，其实设计师们是要更懒更无奈了

  8. 匿名 说：
    2月 19th, 2008 at 5:05 下午

    比较关注你截的那张club的图,捏哈哈哈.

    相对来说,如果一个标准来限定链接的标准,对页面的局限性非常大.用户对链接的固定思维模式是下划线,蓝色.当然以后在这个固定的思维模式下会增加,
    比如字体加粗之类的.这个过程有多长,完全取决于交互设计师.
    呵呵,交互设计师总是在遵循规则,同时也在创造规则.

  9. 臭鱼 说：
    2月 19th, 2008 at 9:36 下午

    To 空格：“链接多时”“链接不多时”这样的描述本身不够准确。如果一段100字的正文中有10处链接算不算“链接多时”呢？如果是这段文字中有6处链接算多吗？4处链接是不是不算多了呢？要怎样区别呢？不够准确的定义显然很难执行。

    To eling：一门学科发展的过程不就是从“实践->理论->实践”的过程吗？

    To 上面这位匿名的同学：互联网的设计正是在发展过程中的。我们就是在这个过程中，不断总结，归纳，才能得以进步。

  10. asun 说：
    2月 21st, 2008 at 1:34 下午

    我觉得总的规则就是，“突出”就可以了。

  11. 这一技客 说：
    2月 23rd, 2008 at 12:08 下午

    做链接可否?
    网站名：这一技客
    网址：http://www.geekso.com

  12. jaryxie 说：
    2月 26th, 2008 at 9:28 上午

    其实方法有很多的，只是一个产品页面，需要制定链接样式表的规范，且不宜过多，也不宜太单一，这样产品的每个页面在使用链接样式上有比较灵活的应用。不至于死板。太多了，又容易引起用户认知困难，这点，有经验的视觉设计师都能把握好，关键要沟通

  13. 尘缘 说：
    2月 27th, 2008 at 10:58 上午

    “有本老外写的书，专门说过这个问题。”
    是哪本书？

  14. xiaonei 说：
    2月 28th, 2008 at 6:45 下午

    这篇文章的PR好高哦~~~站长牛人也

    ——————————AD一下
    http://www.xiaonei007.cn

  15. xw 说：
    2月 29th, 2008 at 10:46 上午

    让用户根据页面的情景来判断普通文字是否是连接，譬如hao123.com 和news.163.com 如果 用户在情景里面无法准确的判断时候，譬如图文混排的blog文章，那么可以用下划线，或者用标准的蓝色字体来标识这个是可以点的链接

  16. ibio 说：
    3月 4th, 2008 at 6:00 下午

    呵呵,很有看法.学习中.我也是研究这个.希望和你交换连接.
    爱博吧 ibio8.com

  17. 糖糖 说：
    3月 7th, 2008 at 5:58 下午

    学习了.

  18. Azero 说：
    4月 23rd, 2008 at 5:47 下午

    大部份照这个方案来处理文字链接问题
    然而，有时为了美观，不得不把下划线去掉。
    目前的做法是：同一个站点，固定一个属于链接的规则，即便是没有下划线。
    关键是：如何让它看起来就是一个可点击的链接。don’t let me think此书也貌似有提及。

  19. AZURE 说：
    4月 24th, 2008 at 2:06 下午

    是否可点击链接 鼠标划过变小手也可以表明啊

  20. office2003 说：
    4月 24th, 2008 at 3:28 下午

    可以做个链接么 我的网站是 http://wwwps.cn office2003 请查收！

  21. Potato 说：
    4月 24th, 2008 at 7:11 下午

    蓝色 + 下划线

    这个规则，和小学时代的红领巾一样。。。我相信每个人都见过一根绳似的红领巾，如果还能叫红领巾的话。

    针对中国用户，象化思维可以考虑进去，喜欢新的g.cn设计。符合国人的视觉文化。

  22. loyi2008 说：
    4月 29th, 2008 at 12:09 下午

    谢谢楼主，楼上，受益匪浅

  23. 木鱼猫 说：
    5月 13th, 2008 at 10:50 上午

    我觉得最主要的还是要让用户有很熟悉的感觉，觉得那块就应该是链接

  24. xiefei 说：
    5月 29th, 2008 at 10:00 上午

    现在的设计师对文字的处理都太过于视觉化..其实一个很原则的问题..就像小学课本的文字标题和注释..最原始也是最容易理解的.

  25. 小角色 说：
    6月 18th, 2008 at 9:24 上午

    蓝色也分好多种，加不同的灰也可以和不同的色彩去搭配的。效果也会很好，这样即不违反搭规则也会使页面整体协调

  26. 道哥 说：
    10月 16th, 2008 at 4:11 下午

    小角色 说：
    June 18th, 2008 at 9:24 am
    蓝色也分好多种，加不同的灰也可以和不同的色彩去搭配的。效果也会很好，这样即不违反搭规则也会使页面整体协调

    说的很好。

  27. Lu Heli 说：
    2月 15th, 2009 at 12:14 上午

    链接颜色应该与主体文字颜色相区别，Jakob说链接颜色最好是蓝色的，但如何让用户辨识某个词，短语或句子是链接呢？一个方法是加上动词，比如Cancel, Leave a comment, Log in

    动词是属于指示性语言(Instruction), 指示性语言是用于提示和指导用户完成一个流程

    Lu Heli

  28. andol 说：
    6月 8th, 2009 at 9:25 下午

    I dont think it is mandatory to design the link texts as a specific style with underline or blue color. Anyway, the functionalities of link is to lead to a click and to jump to another content. Under that context, probably, if the link is attractive and meaningful enough, as well as obvious contrast with other context’s content, it is by no mean a fault of web usabiligy design.

  29. 链接，怎么办？ - 每天都有新发现！ 说：
    10月 28th, 2009 at 10:10 上午

    [...] 来源：臭鱼的交互设计 [...]

发表评论

您的大名：