文字划线的2个小故事之——下划线的前世今生

| 导语 划线看似简单的呈现，背后有着设计师们深入的思考。 这一次，分享2个小故事，都是关于设计师为什么要在文字上作划线的。

文字下划线的小故事

1下划线创造的体验

在早期打字机年代，是缺乏样式，比如字体大小、样式、颜色、缩进和符号都没有，文字下划线的样式，被印刷设计师用作强调文本的重点。

随后，也被用作印刷广告中

（1915年绿箭口香糖的广告）

在其他实体物体信息传达中同样被用到，比如路牌

今时今日，设计师不主张也不再使用下划线的方式来强调重点信息，因为这样的样式被认为它是分散受众注意力的。

可以对比下面这2段文字，可以很清晰看出差异。整段的划线文字可读性大大降低。

对于特定场景下，比如标题，在西文字体下也可以考虑使用全部字母大写的方式。

现在，我们所使用的的文字处理器和浏览器都不仅限于文字叠加下划线的这单一方式。

如果想要表达强调突出显示，可以使用使用粗体、斜体、颜色。

2下划线的演变与评价

当蒂姆·伯纳斯·李最初在1991年提出万维网的概念时，他表示：“万维网由文档和链接组成。”从那以后，链接已经成为在线体验的一个基本要素，粘合在一起的网络。

最早的网页设计师的工具箱太有限 - 只有简单的字体和有限的颜色。黑白显示器占比更多，彩色监视器只显示16种颜色。

强调与不同风格的联系是必不可少的，所以早期采用者通过下划线的方式强调哪些元素是重要的。

此后，强调文字已成为HTML超链接的标准装饰。

这是早期的网页

尽管在过去的30年中设计师们尝试了大量方式，但仍然有许多网页设计师喜欢使用下划线，蓝色+下划线链接被作为一种经典体验而保留下来。

下划线运用在互联网中，有着它多方面的好处。

建立了统一的认知，提供了强烈的可点击性的提示

无论水平或者垂直浏览阅读时，视线扫射的切断带来的强调，突出重要信息

作为辅助功能，当单独使用蓝色作为点击链接会对某些特定色盲群体带来识别问题，对于网站链接或者按钮来说颜色不应该作为唯一指标，必须添加另外一个视觉元素，而下划线是个合乎逻辑的选择。

大家看看这个图，觉得效果怎么样？好还是不好？

反面教材：百度百科页面中对大量的特定词进行标记，影响了对“电话机”一词（页面主旨）的信息理解，也在美学上带来了视觉噪音。这种方式是不适用于需要强理解的页面的。

下划线在同一页面中运用过多，也有他的缺点

过量的特定标记，会影响到我们对页面主旨信息的理解。

 强制理解页面，带来了美学上的噪音。

还有很多新的处理方式，借鉴了移动端的表现方法，会使用箭头来变现链接，它更好建立了交互操作的“跳转”预期。

在hover时依旧延用了下划线样式，通过外加样式来表达差异，而不是在原有元素上利用“颜色”“粗细”差异。效果是很清晰的。

这种样式，它的定位是勇于辅助延展的，比按钮更弱，必要时候为了整体效果，去掉蓝色的定义依然不会带来影响。

在我们的网页平台设计中，什么可以点，什么不可以点，交互预期是怎么样，可以说定义还不够严谨。

字体颜色、大小、位置、排版、样式内容上有着非常细微的差异，是在原有基础上做维度差异，还是附加元素辅助表达，还有进步和探索的空间。

下次的故事讲讲当代设计师利用简单的删除线样式解决什么问题？

本文作者：梁晓雯，著作权归作者所有，禁止转载。

这里是未来之势的每一帧

试着把这帧分享给伙伴吧

▼