文本链接的固化思维

我这段时间做的一个网站里有很多文本链接,尤其是辅助性的。例如一个帖子的作者、时间、标签、路径等有链接的文字信息。

直到几天前,我才发现自己对文本链接有一个根深蒂固的固化思维——有链接的文本要么用颜色区分,要么用下滑线区分。这么做的理由看似非常合理:文本链接当然要有所不同,不然谁知道那里可以点?但是当我继续做下去,问题就慢慢显现出来。

我在《谷歌 Material Design 从这些方面打破了我思维局限》中提到过“信息碎片化”的概念,就是在界面给用户抛出零碎短小的信息碎片,用户通过这些信息碎片嗅到自己感兴趣的暗示,然后便会挪动鼠标(触屏的话就是手指),通过点击等交互方式,顺着这引子慢慢找到自己感兴趣的东西。文本链接,就是信息碎片的一个很好的范例。例如我在这一段开始时把我的文章的文本链接附上,刚兴趣的读者就可以通过那个文本链接找到我之前写的那篇文章。

根据信息碎片化的理论,所有可以深挖的信息最好都做成链接,像是Wikipedia或是百度百科一样,将一切知识编制成一张网。

这样问题就来了,当一切可能又链接的文本都具备链接后,页面上的文本链接就会比较密集了。此时再继续贯彻“链接的文本要么用颜色区分,要么用下滑线区分”的惯性思维,就会导致整个界面看起来极度混乱。再加上不同的默认文本要对应统一或不同的链接样式,文字规范将十分复杂。

最可行的解决方式是去掉所有辅助性文本链接的特殊样式,也就是让他们看起来和没有链接时一样。当我和同事们商量修改方案时,果然遭到了抵触,理由和我以前所想的一样:没有特殊样式怎么看得出是链接?

调查

这个问题让我感叹,自以为做了这么久的设计早已不算新手,可是知道今天还对文本链接这种最基础的东西有不清楚的地方。好奇之下,我调查了国内外几个常见网站的文本链接样式。

我调查的这些网站里面,只有两个网站的辅助性文本链接在默认状态是有特殊样式的:百度使用色彩和下划线,谷歌使用色彩。除此之外,淘宝、微博、优酷、网易新闻、爱奇艺、简书、YouTube、Facebook、Medium、Instagram、Twitter使用的文本链接都没有特殊样式。

百度和谷歌的文本链接

默认样式很统一,但是悬停样式就相差甚远了。我个人比较喜欢的明暗效果,这些网站中只有“文艺”向的Medium和简书使用。使用色彩的有淘宝、优酷、网易新闻,使用下划线的有谷歌、YouTube浮窗、Facebook、Medium浮窗,同时使用色彩和下划线的有爱奇艺、YouTube首页、Twitter,这三种的使用率相差不大。此外,还有一些网站不给文本链接设计任何悬停效果,它们有百度、微博、YouTube推荐、Instagram。

综上所述,文本链接无默认样式果然是大势所趋,两个异类也只不过是搜索类网站而已。文本链接的悬停样式几乎不存在主流选择,只是发现了明暗效果这个小众。有趣的是,微博的文本链接不但没有默认样式,就连悬停样式也没有……

传说中的“双无”文本链接

反省

文本链接无特殊样式这种业界主流竟然成了我最近才发现的“新闻”,这值得我反省(请在评论里吐槽我没有常识吧……)。这里面的原因除了我自己经验不足之外,恐怕固化思维也占有一定比例。不怪 Donald A. Norman 提出了 Affordance(功能可见性),一切都必须在主次分明的前提下。

话又说回来,我以前设计的哪些东西很少又如此多的文本链接,所以给每个文本链接特殊的默认样式也合乎情理。现在设计的界面文本链接多了,所以样式也自然要低调一些。想到这里,我也找到了点心理安慰。

总之,这次是很有趣的教训,设计师都应该多抬头看看业界行情。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,049评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,314评论 19 139
  • 今早上班途中,正好收听到喜马拉雅App上《易中天中华史·三国纪》中关于刘备永安托孤的故事,不由心生感慨。 三国故事...
    正言锋语阅读 1,794评论 0 2
  • 姓名:周立 zhou li 公司:宁波大发化纤有限公司 【日精进打卡第55天】 【知~学习】 (六项精进)大纲背...
    周立zhouli阅读 1,358评论 0 0