信息网_www.520link.cc

信息网 > 湖南信息 > 正文

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

网络整理 2019-05-15 01:14

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

zitishejishige

早在 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 产品才进入大众市场。

1

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

2

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

3

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

4

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

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

字体即界面设计的基石

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

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

5

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

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

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

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

– Oliver Reichenstein

我们人类是如何阅读的?

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

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

Tags:译文(2)界面设计(1)字体设计(1)微博(72)蟹战(1)阳澄湖大闸蟹(1)蟹战对赌(1)太湖蟹(1)吃货俱乐部(1)

转载请标注:信息网——译文|界面设计中,关于字体设计的10 个锦囊

搜索
网站分类
标签列表