链接,怎么办?

二月 12th, 2008 75 Comments »

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

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

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

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

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

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

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

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

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

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

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

有75 条对“链接,怎么办?”的评论

  1. 不是俺 说:

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

  2. 醉中仙 说:

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

  3. 绝路 说:

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

  4. 西贝 说:

    恩,同意

  5. 无此人 说:

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

  6. 空格 说:

    不是月刊么,成了周刊了?呵呵。

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

  7. eling 说:

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

  8. 匿名 说:

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

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

  9. 臭鱼 说:

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

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

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

  10. asun 说:

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

  11. 这一技客 说:

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

  12. jaryxie 说:

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

  13. 尘缘 说:

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

  14. xiaonei 说:

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

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

  15. xw 说:

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

  16. ibio 说:

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

  17. 糖糖 说:

    学习了.

  18. Azero 说:

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

  19. AZURE 说:

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

  20. office2003 说:

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

  21. Potato 说:

    蓝色 + 下划线

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

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

  22. loyi2008 说:

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

  23. 木鱼猫 说:

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

  24. xiefei 说:

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

  25. 小角色 说:

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

  26. 道哥 说:

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

    说的很好。

  27. Lu Heli 说:

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

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

    Lu Heli

  28. 链接,怎么办? - 每天都有新发现! 说:

    […] 来源:臭鱼的交互设计 […]

  29. ice 说:

    我得拿这个去说事儿

  30. Neil 说:

    I think the admin of this site is truly working hard in favor of his web page, because here every material is quality based information.

    My page … Neil

  31. Latoya 说:

    Hello! It looks as though we both have a passion for the same thing.
    Your blog, “臭鱼的交互设计

  32. Thurman 说:

    Super-Duper site! I am loving it!! Will come back again – taking you
    feeds also, Thanks.

  33. Chara 说:

    Thanks for finally talking about > 臭鱼的交互设计

  34. Rosella 说:

    Heya just happened upon your website via Google after I entered
    in, “臭鱼的交互设计

  35. http://bonefix.co.nz/store.asp?module=list&brand=cheap-nike-free&page=1 说:
  36. Ferne 说:

    Definitely believe that which you said. Your favorite reason seemed to be on the internet the simplest thing to be aware of.
    I say to you, I certainly get annoyed while people consider worries that they just don’t know about.
    You managed to hit the nail upon the top as well as defined out the whole thing without having side-effects , people could
    take a signal. Will probably be back to get more.
    Thanks

    Feel free to surf to my weblog :: entrepreneur électricien Boisbriand

  37. 欧美美女图片 说:

    欧美人体艺术 欧美超模 美女图片 日韩美女 , 欧美人体艺术 欧美人体艺术图片; 酒柜定抽 衣柜定制 中技物 欧美超模 美女图片

  38. 香港挂牌网 说:

    宋凌珊点了点头,跟着这个**来到了医生的办公室,那**给宋凌珊介绍道:“这是刘博佳的主治医师杨医 我认输了 生,我认输了。”
    “杨医生你好,我是宋凌珊。”宋凌珊礼貌的伸出手来与杨 ”林逸说道 医生握了手后,问道:“杨医生,刘博佳的情况怎么样?有没有醒过来的可能,”林逸说道,白小姐开奖?”
    “我已经尽了全力了,不过仍然没有效果……”杨医生有些歉意的笑了笑:“宋队长,我已经无能为力了,只能先维持着……”
    “也就是说,咱们医院没有康复的可能了?”宋 白小姐开奖 凌珊有些失望的看着杨医生:“转院的话,,有没有希望?”

  39. Daisy 说:

    Thanks for finally talking about > 臭鱼的交互设计

  40. Audry 说:

    Thanks for finally talking about > 臭鱼的交互设计

  41. Lyndon 说:

    How to Upload Photos To Facebook From Your Cell Phone.
    To build your facebook sign in account for
    you text message notifications, you firstly have to get an activation code.

  42. 米人微贷 说:

    有消息称,今年前两月银行新增不良贷款已逾600亿元,不良贷款压力凸显。记者调查了解得知,目前广州、佛山地区银行不良贷款增加,监管层 信用贷款 正在排查相关情况,其中, 贷款 某银行一家支行不良贷款率甚至超过了50%。

    银行进入二季度以来,全线收紧了贷款审批和发放,有银行已完全不受理信用贷款,抵押贷款获批额度也有所降低,各家银行对贷款的审批和门槛都进入了”最严”时期。

    有业内人士向媒体透露称,今年一季度,不良贷款也出现井喷的现象,仅今年前两个月,新增不良贷款已逾600亿元。

    受相关不良贷款增加的影响,银行全线收紧贷 米人金融 款审批发放。有业内人士此前透露称,目前银行贷款审批

  43. 成都美发店装修设计 说:

    成都美发店设计公司

    成都美发店空间设计公司 1、会议室的布局
      会议室在写字楼装修设计中 成都美发 成都美发店设计公司 店装修设计,影响画面质量的一大因素 成都美发店装修设计公司,是会场四处的景物跟颜色 成都美发店装修施工公司,以及桌椅的色调 成都美发店设计 成都美发店空间设计公司 。海昱隆装潢作为北京装修公司中专业的写字楼装修公司、北京写字楼装修公司 成都美发店装修施工,多年致力于写字楼装修、北京写字楼装修、写字楼装修设计等 成都美发店空间设计公司,对公司的每一位员工 成都美发店设计公司,讲求的是当真过细专业的实现工作 成都美发店装修设计公司,对客户我们不仅在设计施工服务上让客户释怀 成都美 成都美发店装修设计 发店设计公司,而且在每个写字楼装修

  44. 盛宝多项合约期权 说:

    2015年盛宝银行续约莲花F1车队,继续成为其主赞助商

    来源:亚洲外汇网

    盛宝期货交易
    作者:SAXO盛宝金融

    多资产在线交易与投资专家盛宝银行今天宣布,将在2015赛季继续与莲花F1车队和车手罗 盛宝外汇期权 曼格罗斯让的合作。

    作为合作计划的一部分,盛宝银行的商标将喷涂在莲花F1车队E23 Hybrid型赛车标志性的黄黑色内侧上。

    此外,盛宝银行还将获得极其难得的机会,邀请客户到豪华的围场俱乐部近距观赏F1赛事,到莲花F1车队赛车间观看GP2系列赛赛车手Marco Sørensen模拟F 盛宝合约现货外汇交易 1比赛,并将获得观看GP2比赛的门票。莲花F1车队的商标也将用于盛宝银

  45. 盛宝现货外汇 说:

    2015年盛宝银行续约莲花F1车队,继续成为其主赞助商

    来源:亚洲外汇网

    作者:SAXO盛 盛宝外汇远期合约 宝金融

    盛宝政府债券网上交易
    多资产在线交易与投资专家盛宝银行今天宣布,将在2015赛季继续与莲花F1车队和车手罗曼格罗斯让的合作。

    作为合作计划的一部分,盛宝银行的商标将喷涂在莲花F1车队E23 Hybrid型赛车标志性的黄黑色内侧上。

    此外,盛宝银行还将获得极其难得的机会,邀请客户到豪华的围场俱乐部近距观赏F1赛事,到莲花F1车队赛车间观看GP2系列赛赛车手Marco Sørensen pressoffice@lotusf1team.com 模拟F1比赛,并将获得观看GP2比赛的门票,盛宝网上交易期货合约。莲花F1车

  46. Jamal 说:

    Thunderbird is mozilla firefox free download for windows 7’s popular free
    email and newsreader application. You will next be directed to your screen saying that you can void your warranty.

  47. Seth 说:

    Civilization Revolution takes the series to new heights and lets you take charge of a historical civilization and dominate the world.
    Using the DS’ touch-based system, Heroes of Mana lets players convene exotic monsters to fight alongside hero units against a
    group of enemies on a large battlefield. World Championships finals
    in 2007, Marlene was teammate Wang Liqin staged reversed into the history of a rare World Championships Sanya Wang.

    My site gameplay novi

  48. Rod 说:

    Retirement Solutions a top firm of independent financial advisers (IFA) provides equity release schemes that gives you the retirement you deserve, an equity release BMI Calculator (imagexchange.com.au) helps you to
    find out how much you’ll be able to release.

  49. Jerold 说:

    Ԝhaat a material of un-ambiguity and preserveness of ѵaluable experience about unpredicted feelings.

    Here is mmy web page: chat

  50. Louie 说:

    Its such as you read my mind! You seem to grasp so much about
    this, such as you wrote the book in iit oor something.
    I feel that you simply can do with some % to force the message home
    a little bit, but instead of that, this is excellent blog.
    A great read. I will definitely be back.

    My blog :: sacramento balloon artists

发表评论

您的大名: