【动态】VR/AR也是一样,UI大神想跟你谈谈人机交互界面的字体设计

pano-1

作者:Viljami Salminen

 

 

早在2004年在我刚开始工作的时代,sIFR算得上是当时最热门的东西了。这项由Shaun Inman开创的技术可以将定制的字体嵌入电影短片中,同时还能与JavaScript和CSS兼容。在当时,这项技术是唯一一项能够让浏览器(如Firefox和Safari)显示定制字体的技术。但这项技术非常依赖Flash的使用,加上后来iPhone的发售(不再需要flash),这项技术很快就淡出了视线。

 

2008年,多种浏览器开始支持新版CSS3的字体设计规则。其实早在1998年,这套规则已经融入在CSS的配置中,只是后来被移除了。我还记得那时当我终于说服我的一位顾客使用新的字体设计时有多兴奋。当时“渐进增长技术”已经能够支持浏览器为用户提供更好的浏览体验。

 

自打我开始从事这个行业以来,我对字体设计就非常感兴趣。在这篇文章中,我想要分享自己总结的一些基本原则,希望对大家在UI字体设计有些许帮助。

 

早期GUI

虽然字体出现的历史已经长达五千多年了,但是GUI的出现还只是最近40年的事。字体设计发展的第一个转折点在1973年,当时Xeros引入了Alto,为当今GUI的发展打下了基础。Alto的出现比其他同类GUI产品要早10年,当时被认为是计算机技术未来的发展趋势。

1

 

早期的Alto在80年代逐渐融入Xerox Star,成为了第一款搭载GUI的商用操作系统。

 

2

 

尽管Alto和Star都没能大规模发展起来,但是他们却极大地影响了后来Apple和Micorsoft的鼠标操作GUI的发展。此后,1984年,乔布斯发布了第一款Mac OS。

 

3 (1)

 

搭载Mac OS的Macintosh的发布意味着消费大众能够第一次使用定制的设计字体。第一版发布的Mac已经预先装载了多种设计字体,在此后几年,越来越多设计厂商开始发布他们所设计字体的电子版。

 

4

 

如果我们仔细观察一下这些早期的设计字体,不难发现它们大多数还是手写版的形式。这些GUI还是纯字母的简单拼凑而不是单个单词的整体设计。

 

直到现在情况还是如此。交互界面还是以手写字体为主,因此字体的设计还占据着非常重要的地位。

 

字体就是交互

UI上显示的每一个单词每一个字母都非常重要。好的字体就是好的设计。字体的目的就是交互,因此我们作为设计师,也是UI的基层设计师。

 

观察以下的例子。如果把这两个界面中的各个元素分别提取出来,我们将会看到什么:一个个单词的组合,两张图片,还有几个图标。

5

 

我们的工作不是把这些元素随机摆放在屏幕上让他们看起来不错就行了,而是需要从最终的元素——字体和内容开始着手,其他的元素应该以此为中心延伸开来。这也是我们这项工作的核心所在。

 

字体的可读性也举足轻重。一开始他们可能看起来并不重要,因此要辨识出单个单词的时间非常简单,但是随着我们所用的单词和字母越来越多,单词的辨识度就变得重要起来。、

 

当然,在UI设计中还要许多东西需要考虑:各个元素之间的平衡、位置、对称性、结构等。但是好的字体设计能够让我们完成95%的工作。

 

好的设计师懂得字体不止是内容,他会把字体当做UI来设计。——Oliver Reichenstin

 

如何阅读

如果我们已经意识到文字设计的重要性,那么,我们就应该花时间研究用户的阅读习惯,以及字体设计对阅读体验的影响。

 

之前我曾经阅读过Billy Whited关于UI字体设计的文章,我发现用户的阅读效率和文本的作用有很大联系。这就意味着用户花费在在阅读一句少于20个单词的句子上的时间比阅读长句子的时间要长。

 

这是因为,当我们在阅读长句子时,人眼并不是顺着单词一个个看下去的,而是有选择性地跳着单词阅读,这就是“扫视”。

61

 

“扫视”是一项重要的阅读能力,它让我们能够跳过一些不关紧要的功能词,把注意力集中在包含实质意义的词语上。记住这个规律非常重要,因为UI中应用的大多数是独立的单词。所以“扫视”在UI设计中并不会起作用。

 

结果是,当我们终于意识到我们设计的每一个单词都会给用户的阅读产生极大影响时,我们就能明白对于字体的选择有多么重要。

71

 

以前,很多人认为我们是从文字的整体轮廓来辨识文字的。后来的研究发现并非如此,字体的可读性和辨识度并非与整体轮廓直接关联。因此,我们在设计时,应该把注意力放在每个字母的格式上。

 

如何做到字母可读?

一开始看到这个问题可能会觉得很难回答。因此阅读习惯因人而异,好的阅读习惯能够让我们在阅读中收获更多。我们怎么能够发现字体设计对于可读性的影响?为了回答这个问题,我们首先需要把句子中的单词一个个拆分开来,再把单词拆分成一个个字母,再把字母分成一个个不同的元素,以研究微观层面上的设计特点。

 

2008年,维多利亚大学的心理学院利用实证研究,揭示拉丁字母在什么大小范围最适合阅读。

8

 

这项研究在几个十分有趣的发现。首先,线条终止的方式是影响字母辨识的最重要的因素。上面图片显示的就是我们在辨认字母时最为关注的部分。在设计字体的这些部分时,应该要考虑到阅读的一般规律和特定规律,同时要考虑到每个字母的特殊性。

 

9

 

2010年,Sofie Beier和Kevin Larson发起另一项研究,关注那些容易被误认的单词的特点。研究发现虽然有一些字母有相似的大小和特点,但是它们却很少被认错。研究结果表明,细长的字母能够依靠宽度的增加提高辨识度,而X-height类的单词能够通过增加升部和降部的长度来提高辨识度。

 

10

 

最近我发起了一个项目,能够开发一个帮助我们更加了解如何提高特定字体的辨识度的工具。这个工具就是一款称作Legibility的APP,通过在文字上叠加模糊处理,它能够模拟有阻碍的阅读环境。这款APP现在还在测试阶段,未来将能够在Chrome、Opera和Safari上使用。

 

11

 

UI中的字体设计包含哪些方面?

在了解了人类阅读习惯和字母的可辨识度之后,我们能够更加了解UI设计中对于元素设计的取舍。以下是我总结的几点。

 

1、可辨识度

可辨识度是首要考虑的方面。字母的格式要清晰可辨。UI中使用的字母有足够的差异以提高辨识度。很多sans serif字体,包括Helvetica字体中,大写的字母I和小写的l字母看起来非常相似,因此对于UI设计来说是非常不好用的字体。

121

上图是Source Sans Pro字体和Helvetica字体对比。在Helvetica字体中,前面的三个字母几乎一模一样,难以辨认。而Source Sans Pro字体则更好辨认。有些人认为在UI界面的设计中应该彻底摒弃Helvetica字体,因此Helvetica本来就不是为了屏幕显示而设计的。

 

当苹果公司曾有一次“暂时”使用Helvetica作为他们的主要UI字体,这给一些用户的阅读带来了相当大的不便,不过这也促使苹果后来设计了新的字体,就是我们今天使用的San Francisco。这种字体是专为屏幕显示设计的,它们的X高度大于Helvetica,间距更宽,每个字母也更容易辨识。

13

 

2、舒适性

理想的UI字体不应该哗众取宠,而是给用户带来阅读的舒适体验。设计的字体应该方便用户的工作,而不应该给用户增加认知负担。

141

 

3、灵活性

UI字体要有一定的灵活性。我们设计的字体为多种不同形式新媒介所用,我们无法控制用户的阅读能力、文本内容、浏览器、屏幕大小、连接速度,甚至是输入方式。

 

因此设计的字体要适应这样的环境,能够在不同的显示大小和不同的设备中流畅阅读。Sans serif字体能够低分辨率的小屏幕上给用户带来更好的阅读体验。

20160626164650

 

4、增加X字高

“X字高”指小写字母X的高度。X字高越大,单词越容易阅读,特别是字体比较小的情况下。但是也不能太夸张,因为过大的X字高会使字母n和h变得难以辨认。

151

 

5、宽比例

字体的比例指单词的宽度和高度的比值。字体的比例越宽,字体就越容易辨认,在小屏幕上就越方便阅读。

161

 

6、宽松的单词间距

单词四周的空间大小和单词内部各个字母之间的间距同样重要。单词之间如果间距太宽会使阅读变得困难。一个好的UI字体应该要在单词间留有足够的空间,给用户带来舒适的阅读节奏。

171

7、平均平滑的笔画

好的UI字体应该保持平滑的线条。在字体尺寸比较大的情况下,不平滑的线条可能显示效果更好,但是在屏幕显示的笔画上,如果笔画不够平滑,那么纤细的笔画将会很难辨认。而另一个极端就是像Arial和Helvetica那样的字体,这些字体的笔画粗细几乎一模一样,因此也不便于用户阅读。

181

 

8、兼容OpenType Features

要确保你的字体支持OpenType Features,因为它能带来更好的灵活性。支持OpenType Features的字体也表明能够支持不同语言的特殊字体的显示。

 

对我而言,最好用的就是“表格数据”,它们是等宽的一串数字。在设计计时器或者计算器的显示,或者是设计IP数字时,它们是不错的选择。

20

 

9、回退字体

或许以下的情况你熟悉不过了。大家可以看到网页的字体在页面还未完全加载成功时不能完全显示。

 

通过用非阻碍的加载方式可以减少加载时间,避免这种情况的发生。不足的地方在于我们需要确定回退格式和默认系统格式,默认系统格式是我们在加载时能够看到的格式。

22

 

10、字体微调

字体微调是字体在调整以适应屏幕阅读的过程。这个过程使得字体的矢量线条能够适应像素网格的显示。低像素的屏幕的字体微调对于产生清晰可认的文本非常重要。

 

字体微调最先是由苹果公司发明的,但是在TrueType字体形式出现之后,字体微调”就开始慢慢消失。所以现在只有在需要支持IE8以下版本浏览器时需要使用TTF或者EOT字体。

23

 

发展趋势

UI字体设计的历史不长,但是我希望未来能够看到越来越多关于网页字体、字体设计工具、字体形式的进步,以及往后在字体应用中的进步。

 

我认为在未来,我们将会看到越来越多依靠“渐进增长技术”的体验,文本的内容比字体设计指导更加重要。网页上的字体显示设计非常重要,而我们现在才开始认真对待它。

 

为了设计出理想的字体,我们需要了解尽量多的阅读环境。这一点或许看起来很明显,但是事实上却不是这样。在未来,我希望字体能够智能辨认显示环境并对此作出调整,比如视点、分辨率、字体绘制技术、光线、亮度,甚至是阅读距离。

 

同时我也希望字体针对可读性的调整能够和操作系统的相关选项兼容,方便字体能够自动根据不同的用户需求做出调整。

 

整体来说,我认为UI字体设计的未来就在于如何应用传感器和字体格式对数据做出调整,并且开发新型的字体工具,能够识别文本语境,这就需要在我们的工作中加入更多的智能算法。

24

 

 

 

 

文章来源:粹客

========================================

不知不觉UXRen社区官网已经2岁了, 在这里小编要感谢那么一如既往支持本站的油茶人。UXRen.cn欢迎油茶人投稿,提供有价值的资讯、线索、点子及建议。 

邮箱:contact@13tech.com.cn 
注明:本站内容及数据部分来自互联网及公开渠道,如有侵权请及时联系我们。
========================================

发表评论

您的电子邮箱地址不会被公开。