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

字体作为界面设计的一个元素,对用户的阅读体验起着至关重要的作用。本文是 UI 设计师 Viljami Salminen 分享的用户界面字体设计的基本规则和技巧。一个优秀的设计师懂得:网页上的文字不仅仅作为内容而存在,它还是用来交互的界面。
– Oliver Reichenstein
Helvetica 真的弱爆了。它不是为小屏显示而设计的。像「milliliter」这样的单词显示效果就很差。
– Erik Spiekermann


字体作为界面设计的一个元素,对用户的阅读体验起着至关重要的作用。本文是 UI 设计师 Viljami Salminen 分享的用户界面字体设计的基本规则和技巧。

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

早在 2004 年,我才刚开始工作的时候,sIFR 非常火。sIFR 是由 Shaun Inman 开发、可以电影短片中嵌入定制字体的一种技术,它能被 JavaScript 和 CSS 调用。当时,sIFR 基本上是唯一一种能在 Firefox 或 Safari 浏览器中使用定制字体的技术。随着 2007 年 iPhone(不需要 flash)的推出,基于 Flash 格式的这种技术很快就过时了。

2008 年,浏览器终于开始支持新的 CSS3 字体设计规则了。早在 1998 年,这种字体设计规则就被写入 CSS 标准中了,但后来被移除了。我还记得,当我说服我的一个客户使用这种新的字型规则时候的兴奋心情,当时,浏览器已经开始支持能够提升用户体验的「渐进增强(Progressive Enhancement)」技术了。

自从涉足这个行业,我开始越来越喜欢研究字体,以及与字体设置中相关的微小细节。在这篇文章中,我打算分享一些我了解到的基础知识,希望能为用户界面的字体设置提供帮助。

第一代GUI

虽然字体的历史可以追溯到大约 5000 年前,但是图形用户界面的出现还不到 40 年。一个重要转折点发生在 1973 年,Xerox 推出了计算机 Alto,大体上奠定了今天图形用户界面的雏形。当时 Alto 被视作是计算机的未来,在 10 年之后,同类 GUI 产品才进入大众市场。

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

80 年代,Xerox 推出了以 Alto 为基础的升级版  Xerox Star ,是世界上第一个商用的 GUI 操作系统。

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

无论是 Alto 还是  Xerox Star 最终都没有大肆流行,不过,二者对苹果和微软在鼠标驱动 GUI 的革命性创新产生了极大地影响。几十年之后,也就是 1984 年,乔布斯推出了第一代 Mac OS。

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

Macintosh 的推出意味着,大众第一次可以使用定制字体了。第一代 Mac 预装了多款经典字体,在接下来的几年中,越来越多的字体厂商除了发布传统字体之外,还会推出相应的数字版本。

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

当我们检视这些早期的图像用户界面的时候,我们发现,其中大部分元素都是用手写的。这些 GUI 都是纯文本,即一个个字母的纯文本集合体。

我们再以同样的方式观测现代的用户界面。在现代的交互界面中,文本即界面,字体设计则成为主要的设计规范。

字体即界面设计的基石

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

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

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

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

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

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

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

– Oliver Reichenstein

我们人类是如何阅读的?

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

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

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

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

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

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

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

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

2008 年, 维多利亚大学心理学院进行了一次实证研究,显示了大小写拉丁字母适合阅读的最佳范围。

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

从这个研究中,得出了一些有趣的结论。首先,线条终止的方式对于字母辨识起着至关重要的作用。

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

上图显示了辨识单词时最受人眼关注的区域范围。在设计字体的这个区域时,不仅应该考虑阅读的一般性和习惯性,而且需要把每个字母的差异性也考虑进来。

2010 年, Sofie Beier 和 Kevin Larson 发起了另一个研究:对一些容易被误读的单词变体进行了测试。

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

这个研究发现,虽然有些字母在尺寸、字重和特性上相同,但是他们在辨识度上却各不相同。结果显示,细长的字母拉宽一些,就会变得更具辨识度,而 X 字高的字符,如果增加升部和降部的长度则更具辨识度。

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

我为最近一个项目开发了一款名叫 Legibility 的 App ,这款工具可以对字体设计进行辨识度的模拟测试。通过对文字加上不同的滤镜效果(比如模糊、微亮和像素化效果),模拟出不同的阅读环境。目前还是 beta 版,支持Chrome, Opera 和 Safari。

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

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

1. 辨识度

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

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

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

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

– Erik Spiekermann

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

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

2. 低调

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

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

3. 灵活度

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

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

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

4. 高的x-height

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

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

5. 宽比例

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

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

6. 宽松的字母间距

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

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

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

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

7. 平顺的笔画

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

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

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

8. 支持OpenType功能

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

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

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

9. 字体回退机制(Fallback)

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

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

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

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

10. 微调

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

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

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

未来的发展

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

以上是我带领大家展开的一次短暂的字体漫游之旅,未来,我期待看到更多关于网页字体、字体设计工具、字体格式的演化和进步,以及在(不远)的将来,字体能更好地为我们所用。

我认为,未来我们将能看到越来越多的「渐进增长技术」体验,文本内容比字体排版更加重要。虽然一直以来网页字体设计就很重要,但是直到现在我们才开始正视这个问题。

为了设计出理想的字体,我们必须尽可能多地了解用户阅读环境状况。虽然这点显而易见,但是事实并非如此。但是在未来,我认为,字体将对显示环境变得更加「敏锐」,并能针对一系列元素(视点、分辨率、字体渲染引擎、环境光线、屏幕亮度和阅读距离)做出调整。

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

同时,我预测,苹果 OS 系统中将会兼容字体微调功能,字体将能根据不同的用户需求自动调整。

整体来说,我认为,UI 字体的未来将与传感器有关,以及字体将能根据传感器搜集到的数据进行格式的调整。未来,新的字体设计工具会在工作流中整合智能算法,能对不同场景进行自动识别。

  1. 开放设备实验室 (Open Device Lab),旨在帮助网页设计师在各种不同的移动设备上测试作品的效能和表现。
  2. x-height: 小写字母的高度(尤其是小写x),不包括升部和降部。
  3. 「字柜」是指字符中的负空间。

 

作者:Viljami Salminen,是来自芬兰的一名设计师,现居湾区,目前在 Idean 担任高级交互设计师,同时也是知名设计网站 Smashing Magazine 的撰稿人,还是赫尔辛基 [1]开放设备实验室 (Open Device Lab)创始人。Viljami Salminen 浸淫互联网设计行业多年,为各种大大小小的企业和创业公司设计多个网站和浏览器工具。音乐,特别是上个世纪 50、60 年代的爵士黑胶唱片对 Viljami Salminen 启发特别大,给他的工作和生活带来很多灵感。

原文链接:Typography for User Interfaces 

翻译:周亚政(微信号modaoapp),墨刀运营。本文费尽千辛万苦找到原文作者 Viljami Salminen 获得授权进行编译,如需转载请联系。

本文由 @周亚政 翻译发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/28727/

(0)
CatherineCatherine
上一篇 2017-05-22 00:25
下一篇 2017-05-22 02:37

相关推荐

  • 为产品赋予人格 - 情感化设计的组成要素及实践案例

    Flickr为用户准备了很多有意思的登录欢迎语,这其实是一个容易被忽略的细节,但Flickr的整体设计风格与产品气质也正是由许许多多这样的细节构成的。也许,只有当这些细节从产品中消失的时候,我们才会发现并开始怀…

    2015-11-01
  • 一个案例告诉你如何用尼尔森10原则分析产品

    本文仅代表作者个人观点,仅供学习交流使用。

    2017-06-01
  • Axure RP 8 入门手册 – 第6章(三)

    第8节检视功能-元件属性Alice.:小楼大大好!小楼大大帅!我有些小困惑,想请你帮我指点下。可以吗?小楼:你诚实直白的我无法拒绝。Alice.:嘻嘻!我的问题有点多哦。小楼:来嘛!Alice.:我想做个密码输入框,就是输入文字时只能看到圆点那种。帅帅的小楼老师,这个怎么实现呢?小楼:这个是文本框的类型,看来你对这个元件的属性不太了解呀!我给你详细讲解吧!在检视功能的属性面板中有每个元件的属性设置,不同元件的属性会有差别。这里我对各类元...

    2018-04-22
  • 是不是该考虑加入动态交互了?

    本文转载自:阿西博客 原始链接:是不是该考虑加入动态交互了? 一个优秀的APP交互动画不仅仅是炫,而且要实用,有的还要考虑手机的性能等因素,所以想做一个好的交互不并容易,今天就带你来见识一下什么叫洋气范儿…

    2015-03-21
  • Axure RP 7.0软件安装 激活 教程 百度网盘

    点击上方蓝字关注免费领取百度网盘超级会员等部分软件没有贴详细教程和网盘链接,可以给公众号留言发信息,也可加微信:qihai-77当你需要的软件我们没有发布时,可以给我们留言或者加微信:qihai-77反馈哦链接:https://pan.baidu.com/s/1KZcsl-SaEcjPzwvdYQn1oA密码:ws5m有任何需要安装的软件或问题可咨询微信客服:qihai-77链接失效可在公众号留言某某链接失效 或联系微信客服:qihai...

    2018-03-30
  • 交互设计中的5项视觉指导原则

    【分类】经验分类:经验/观点/自译原作者: Jerry Cao翻译:@ifecIFEC团队译文UI中国旗下翻译团队,由热爱翻译热爱分享的设计师组成。IFEC译者翻译国外行业热文、规范文档。欢迎关注我们的官方微博 @ifec, 加入我们…

    2017-08-04
  • Sketch强大新技能: 支持多个设计师之间同步组件啦!

    ▵优设品牌号,旗下新品及内测邀请码资格均在此号,关注推送掌握动态,有机会第一时间获取。封面设计:Graphéine团队里多个设计师之间经常需要共用一些设计组件和元素,如果可以有一个包含这些组件的 Symbol 库,并且自动和所有人保持同步就好了。现在 Sketch47 就搞定了这个问题, 再也不用像过去一样通过发邮件、QQ 来同步了。如果你的团队需要多人共享一个 Sketch 组件库, 只需把这个包含公共 Symbol 的文件在你的 S...

    2018-03-02
  • 交互设计与空间展示的深度结合 | 通过交互科技扩展展览空间的体验维度

    本文分为两个主部分,第一部分为如何理解,通过交互科技扩展展览空间的体验维度,第二部分将结合若干具体案例,为大家分享怎样运用交互科技,扩展展览空间的体验维度。大理石是大型彩色模压形状,能够和人通过声音…

    2017-08-01
  • 【搞笑篇与交互无关】哈士奇究竟是怎样的“神犬”?

    哈士奇一辈子不认识主人,它们可能会觉得你有点特殊,但是它们也不会细琢磨,毕竟它们被智商局限的死死的。 养哈士奇永远不要撒手,它们也不是逃走,只是傻,要跑出去玩几个小时才会发现"矮马!我家呢? 求求你别再…

    2015-04-19
  • 译文 | 如何通过讲故事来简化用户体验设计

    原文来自UXPin Studio,原作者是Jessica Lowry,一位英国的用户体验设计顾问,笔者译来与大家共勉“用户乘坐飞机在一个茂密的森林上一边飞行一边寻找地面上的路径,他正在寻找的是一颗红色的种子。这颗红色的种子是被外人引入森林的,目的是用红色种子生长出来的植物来消灭其他植物。损失将会是无法接受的。但是红色种子有好几颗,用户需要在种子长成植物之前定位和移除它们。”

    2017-05-27