艾斯互动视觉创意Acepx视觉创意

探索设计的视界

界面设计中,关于字体设计的10个锦囊

当前位置:首页 > 设计观点 > 文章详情  转载:互联网的那点事

在现代的交互界面中,文本即界面,字体设计则成为主要的设计规范。


字体即界面设计的基石


在用户界面中,每一个单词和字母都至关重要。好的字体等于好的设计。字体成了界面设计的基石,而我们设计师,则是这些这类「信息基石」的修造者。


观察下面这个例子,想象一下,把以下图片中的元素拆解开来,看看会是什么样子——一个个单词、两张图片、几个图标。



作为设计师,我们的工作并不是在屏幕上随机摆弄几个元素,让他们看起来美观漂亮就行了,而应从最重要的部分着手,即字体和内容,以及由此产生的相关细节。这才是我们作为设计师的核心技艺。


字体的可辨识性也十分重要。关于这一点,一开始看起来似乎不重要,特别当辨认单词是如此容易的时候——人类大脑辨识出某一个单词所需的时间还不到一秒钟。但是,当需要辨认的单词和字母组合变多,字体的重要性就显而易见了。


虽然在界面设计上,有很有多微小的细节需要考虑:比如平衡、定位、层级和结构,但是有了好的文案和字体,就成功了 95% 。


一个优秀的设计师懂得:网页上的文字不仅仅作为内容而存在,它还是用来交互的界面。  – Oliver Reichenstein


我们人类是如何阅读的?


既然字体设计如此重要,那么我们就应该花点时间学习「我们人类是如何阅读的」,以及「字体设计是如何影响设计策略的」。


在阅读 Billy Whited 的文章「Setting Type for User Interfaces」时, 我有一个重要发现,即阅读效率和文本的数量有很大关系。这意味着,在阅读少于 20 个字母的单词时,单独提出来阅读相比于放在长句中阅读速度会更慢。这是因为,当我们阅读长句时,眼睛并不是顺着句子中单词一个一个看的,而是有选择性跳读的,这个动作被称作「扫视」。


跳读提升了阅读效率,使阅读时可以忽略掉一些功能性单词成为可能。这点要深记于心,因为用户界面上大都是一个个独立的单词,也就意味着「扫视」在 UI 设计中不起作用了。


因此,当我们明白细微到每一个字母都会对阅读体验产生重要影响时,我们也就明白为什么字体的选择那么重要了。



过去,我们认为我们是以单词的外形轮廓来辨识单词的,这个理论被称为「Bouma shape 伯马形」,后来研究发现,这个观点并非完全正确,字体的可读性和辨识度并不单单由字体的整体轮廓决定。我们更应该重视字形本身。


决定字母可读性的因素是什么?


首先,回答这个问题似乎有点难。阅读是一种习惯,有良好阅读习惯的人肯定读得越顺畅。我们怎么可能知道影响字母可读性的因素是什么?为了便于理解,我们需要首先把句子分解成单词,单词分解成字母,字母分解成更小的元素,然后解剖出更多细微层面的细节。


UI字体设计应该注意哪些方面?


在了解人类阅读原理和字母可辨识度的概念之后,对于 UI 设计我们有了一个更好的全局观。以下是我总结的几点:


1. 辨识度


辨识度是需要考虑的首要因素。字母的格式要清晰、可辨认。在 UI 设计中,清晰可见的字母更具辨识度。很多无衬线字体(San Serif),包括 Helvetica ,大写的字母 I 和小写的 l 字母难以区分,对于 UI 设计来说是非常不好的体验。



比较左边的 Source Sans Pro 字体和右边的 Helvetica 字体。右边的 Helvetica 字体中,前三个字母几乎是一模一样。而左边的 Source Sans Pro 字体表现更佳。甚至有人认为,Helvetica 不适用于任何 UI 设计,不过它本来就不是为屏幕显示而生的。


Helvetica 真的弱爆了。它不是为小屏显示而设计的。像「milliliter」这样的单词显示效果就很差。 – Erik Spiekermann


当年苹果曾经暂时使用过 Helvetica 作为其主要的 UI 设计字体,不过这一举动曾给一些用户带来了阅读上的问题。不过,正是因为这次事件才导致了苹果后来设计了 San Francisco 字体。 San Francisco 字体是为屏幕而生, [2] x-height 比 Helvetica 字体更高,有着更宽的字距,单个字母更容易辨认。



2. 低调


一个完美的 UI 字体让人意识不到它的存在,绝不会喧宾夺主。字体应该是方便用户完成任务的,而不应为用户添加认知上的负担。



3. 灵活度


UI 字体应该具有一定的灵活度。记住,我们是在为各种不同的媒介设计用户体验,我们无法掌握的是——用户的能力、应用场景、所用的浏览器、屏幕大小、连接速度,甚至使用的输入方式。


我们选择使用的设计字体应该支持尽可能多的使用场景,能在不同大小、各种不同的设备、以及特定的小屏设备上运行良好。比如 Sans serifs 字体能在低分辨率的小屏上运行良好。



4. 高的x-height


X 字高是指小写字母「x」的高度。x-height 越高,小屏阅读体验就越好。但字高也不能过大,要不然 n 和 h 难以区分。



5. 宽比例


比例是指一个字符的高和宽的比值。宽度的比值越大,字体辨识度越好,小屏阅读体验也越好。



6. 宽松的字母间距


一个重要的原则是,字母之间的间距要比 [3]「字柜」(counter)要小。


字母周围的空间和字母的内部空间同样重要。字母如果相距太近读起来很费劲。一个好的 UI 字体应该要给字母之间留有充分的呼吸空间,留有一些空间,建立起稳定的节奏。


另一方面,如果间距太大,则会打破单词的整体性。一个重要的原则是,字母之间的间距要比「字柜」(counter)小。



7. 平顺的笔画


好的 UI 字体应该是笔画平顺。不够平顺的字体在大屏上看起来可能还好,一旦在小屏上显示,细长的笔画就难以辨认。另一方面,像 Arial 和 Helvetica 这样的字体,由于字母笔画粗细几乎一样,因此让阅读变得尤其困难。


所以,需要在这两者之间达到平衡。下面两个案例,你觉得哪个更好?



8. 支持OpenType功能


确保你选择的字体支持 OpenType 功能这一点很重要,因为它能为我们提供更多的自由度。支持 OpenType 功能也表明可以很好地支持不同的语言和特殊字符。


对于我来说, OpenType 功能最有用的一点是「表格数据」,它是指相同宽度的一连串数字。计时器、计算器或者 IP 数字的设计中,可以用到这个功能。



9. 字体回退机制(Fallback)


下面这个案例你可能非常熟悉。在加载未完成时,网页字体不能完全显示出来。



要解决这个问题,只需要以非阻碍的方式来加载字体,这样可以大大减少内容加载的时间。这样做的缺点是,需要在默认系统字体中设置回退字体,默认系统字体是在页面加载时屏幕显示的字体。



10. 微调


微调是一个过程,是指字体的调整以获得最佳阅读体验。微调能让字体矢量线条更好适应像素网格的显示。在低分辨率屏幕上对字体进行微调对获得清晰、可辨识的文本十分重要。


微调最早是由苹果发明的,但自从推出 TrueType 字体格式后,微调就逐渐消失了。现在,只有在需要支持 IE8 或者基于 TTF or EOT 格式的浏览器时才会考虑使用微调。