2016-11-5 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
字體作為界面設(shè)計(jì)的一個(gè)元素，對(duì)用戶(hù)的閱讀體驗(yàn)起著至關(guān)重要的作用。本文是 UI 設(shè)計(jì)師 Viljami Salminen 分享的用戶(hù)界面字體設(shè)計(jì)的基本規(guī)則和技巧。早在 2004 年，我才剛開(kāi)始工作的時(shí)候，sIFR 非?；稹IFR 是由 Shaun Inman 開(kāi)發(fā)、可以電影短片中嵌入定制字體的一種技術(shù)，它能被 JavaScript 和 CSS 調(diào)用。當(dāng)時(shí)，sIFR 基本上是唯一一種能在 Firefox 或 Safari 瀏覽器中使用定制字體的技術(shù)。隨著 2007 年 iPhone（不需要 flash）的推出，基于 Flash 格式的這種技術(shù)很快就過(guò)時(shí)了。
2008 年，瀏覽器終于開(kāi)始支持新的 CSS3 字體設(shè)計(jì)規(guī)則了。早在 1998 年，這種字體設(shè)計(jì)規(guī)則就被寫(xiě)入 CSS 標(biāo)準(zhǔn)中了，但后來(lái)被移除了。我還記得，當(dāng)我說(shuō)服我的一個(gè)客戶(hù)使用這種新的字型規(guī)則時(shí)候的興奮心情，當(dāng)時(shí)，瀏覽器已經(jīng)開(kāi)始支持能夠提升用戶(hù)體驗(yàn)的「漸進(jìn)增強(qiáng)(Progressive Enhancement）」技術(shù)了。
自從涉足這個(gè)行業(yè)，我開(kāi)始越來(lái)越喜歡研究字體，以及與字體設(shè)置中相關(guān)的微小細(xì)節(jié)。在這篇文章中，我打算分享一些我了解到的基礎(chǔ)知識(shí)，希望能為用戶(hù)界面的字體設(shè)置提供幫助。
雖然字體的歷史可以追溯到大約 5000 年前，但是圖形用戶(hù)界面的出現(xiàn)還不到 40 年。一個(gè)重要轉(zhuǎn)折點(diǎn)發(fā)生在 1973 年，Xerox 推出了計(jì)算機(jī) Alto，大體上奠定了今天圖形用戶(hù)界面的雛形。當(dāng)時(shí) Alto 被視作是計(jì)算機(jī)的未來(lái)，在 10 年之后，同類(lèi) GUI 產(chǎn)品才進(jìn)入大眾市場(chǎng)。
80 年代，Xerox 推出了以 Alto 為基礎(chǔ)的升級(jí)版 Xerox Star ，是世界上第一個(gè)商用的 GUI 操作系統(tǒng)。
無(wú)論是 Alto 還是 Xerox Star 最終都沒(méi)有大肆流行，不過(guò)，二者對(duì)蘋(píng)果和微軟在鼠標(biāo)驅(qū)動(dòng) GUI 的革命性創(chuàng)新產(chǎn)生了極大地影響。幾十年之后，也就是 1984 年，喬布斯推出了第一代 Mac OS。
Macintosh 的推出意味著，大眾第一次可以使用定制字體了。第一代 Mac 預(yù)裝了多款經(jīng)典字體，在接下來(lái)的幾年中，越來(lái)越多的字體廠(chǎng)商除了發(fā)布傳統(tǒng)字體之外，還會(huì)推出相應(yīng)的數(shù)字版本。
當(dāng)我們檢視這些早期的圖像用戶(hù)界面的時(shí)候，我們發(fā)現(xiàn)，其中大部分元素都是用手寫(xiě)的。這些 GUI 都是純文本，即一個(gè)個(gè)字母的純文本集合體。
我們?cè)僖酝瑯拥姆绞接^(guān)測(cè)現(xiàn)代的用戶(hù)界面。在現(xiàn)代的交互界面中，文本即界面，字體設(shè)計(jì)則成為主要的設(shè)計(jì)規(guī)范。
在用戶(hù)界面中，每一個(gè)單詞和字母都至關(guān)重要。好的字體等于好的設(shè)計(jì)。字體成了界面設(shè)計(jì)的基石，而我們?cè)O(shè)計(jì)師，則是這些這類(lèi)「信息基石」的修造者。
觀(guān)察下面這個(gè)例子，想象一下，把以下圖片中的元素拆解開(kāi)來(lái)，看看會(huì)是什么樣子——一個(gè)個(gè)單詞、兩張圖片、幾個(gè)圖標(biāo)。
作為設(shè)計(jì)師，我們的工作并不是在屏幕上隨機(jī)擺弄幾個(gè)元素，讓他們看起來(lái)美觀(guān)漂亮就行了，而應(yīng)從最重要的部分著手，即字體和內(nèi)容，以及由此產(chǎn)生的相關(guān)細(xì)節(jié)。這才是我們作為設(shè)計(jì)師的核心技藝。
字體的可辨識(shí)性也十分重要。關(guān)于這一點(diǎn)，一開(kāi)始看起來(lái)似乎不重要，特別當(dāng)辨認(rèn)單詞是如此容易的時(shí)候——人類(lèi)大腦辨識(shí)出某一個(gè)單詞所需的時(shí)間還不到一秒鐘。但是，當(dāng)需要辨認(rèn)的單詞和字母組合變多，字體的重要性就顯而易見(jiàn)了。
雖然在界面設(shè)計(jì)上，有很有多微小的細(xì)節(jié)需要考慮：比如平衡、定位、層級(jí)和結(jié)構(gòu)，但是有了好的文案和字體，就成功了 95% 。
一個(gè)優(yōu)秀的設(shè)計(jì)師懂得：網(wǎng)頁(yè)上的文字不僅僅作為內(nèi)容而存在，它還是用來(lái)交互的界面。
– Oliver Reichenstein
既然字體設(shè)計(jì)如此重要，那么我們就應(yīng)該花點(diǎn)時(shí)間學(xué)習(xí)「我們?nèi)祟?lèi)是如何閱讀的」，以及「字體設(shè)計(jì)是如何影響設(shè)計(jì)策略的」。
在閱讀 Billy Whited 的文章「Setting Type for User Interfaces」時(shí)， 我有一個(gè)重要發(fā)現(xiàn)，即閱讀效率和文本的數(shù)量有很大關(guān)系。這意味著，在閱讀少于 20 個(gè)字母的單詞時(shí)，單獨(dú)提出來(lái)閱讀相比于放在長(zhǎng)句中閱讀速度會(huì)更慢。這是因?yàn)椋?dāng)我們閱讀長(zhǎng)句時(shí)，眼睛并不是順著句子中單詞一個(gè)一個(gè)看的，而是有選擇性跳讀的，這個(gè)動(dòng)作被稱(chēng)作「掃視」。
跳讀提升了閱讀效率，使閱讀時(shí)可以忽略掉一些功能性單詞成為可能。這點(diǎn)要深記于心，因?yàn)橛脩?hù)界面上大都是一個(gè)個(gè)獨(dú)立的單詞，也就意味著「掃視」在 UI 設(shè)計(jì)中不起作用了。
因此，當(dāng)我們明白細(xì)微到每一個(gè)字母都會(huì)對(duì)閱讀體驗(yàn)產(chǎn)生重要影響時(shí)，我們也就明白為什么字體的選擇那么重要了。
過(guò)去，我們認(rèn)為我們是以單詞的外形輪廓來(lái)辨識(shí)單詞的，這個(gè)理論被稱(chēng)為「Bouma shape 伯馬形」，后來(lái)研究發(fā)現(xiàn)，這個(gè)觀(guān)點(diǎn)并非完全正確，字體的可讀性和辨識(shí)度并不單單由字體的整體輪廓決定。我們更應(yīng)該重視字形本身。
首先，回答這個(gè)問(wèn)題似乎有點(diǎn)難。閱讀是一種習(xí)慣，有良好閱讀習(xí)慣的人肯定讀得越順暢。我們?cè)趺纯赡苤烙绊懽帜缚勺x性的因素是什么？為了便于理解，我們需要首先把句子分解成單詞，單詞分解成字母，字母分解成更小的元素，然后解剖出更多細(xì)微層面的細(xì)節(jié)。
2008 年， 維多利亞大學(xué)心理學(xué)院進(jìn)行了一次實(shí)證研究，顯示了大小寫(xiě)拉丁字母適合閱讀的最佳范圍。
從這個(gè)研究中，得出了一些有趣的結(jié)論。首先，線(xiàn)條終止的方式對(duì)于字母辨識(shí)起著至關(guān)重要的作用。
上圖顯示了辨識(shí)單詞時(shí)最受人眼關(guān)注的區(qū)域范圍。在設(shè)計(jì)字體的這個(gè)區(qū)域時(shí)，不僅應(yīng)該考慮閱讀的一般性和習(xí)慣性，而且需要把每個(gè)字母的差異性也考慮進(jìn)來(lái)。
2010 年， Sofie Beier 和 Kevin Larson 發(fā)起了另一個(gè)研究：對(duì)一些容易被誤讀的單詞變體進(jìn)行了測(cè)試。
這個(gè)研究發(fā)現(xiàn)，雖然有些字母在尺寸、字重和特性上相同，但是他們?cè)诒孀R(shí)度上卻各不相同。結(jié)果顯示，細(xì)長(zhǎng)的字母拉寬一些，就會(huì)變得更具辨識(shí)度，而 X 字高的字符，如果增加升部和降部的長(zhǎng)度則更具辨識(shí)度。
我為最近一個(gè)項(xiàng)目開(kāi)發(fā)了一款名叫 Legibility 的 App ，這款工具可以對(duì)字體設(shè)計(jì)進(jìn)行辨識(shí)度的模擬測(cè)試。通過(guò)對(duì)文字加上不同的濾鏡效果（比如模糊、微亮和像素化效果），模擬出不同的閱讀環(huán)境。目前還是 beta 版，支持Chrome, Opera 和 Safari。
在了解人類(lèi)閱讀原理和字母可辨識(shí)度的概念之后，對(duì)于 UI 設(shè)計(jì)我們有了一個(gè)更好的全局觀(guān)。以下是我總結(jié)的幾點(diǎn)：
辨識(shí)度是需要考慮的首要因素。字母的格式要清晰、可辨認(rèn)。在 UI 設(shè)計(jì)中，清晰可見(jiàn)的字母更具辨識(shí)度。很多無(wú)襯線(xiàn)字體(San Serif)，包括 Helvetica ，大寫(xiě)的字母 I 和小寫(xiě)的 l 字母難以區(qū)分，對(duì)于 UI 設(shè)計(jì)來(lái)說(shuō)是非常不好的體驗(yàn)。
比較左邊的 Source Sans Pro 字體和右邊的 Helvetica 字體。右邊的 Helvetica 字體中，前三個(gè)字母幾乎是一模一樣。而左邊的 Source Sans Pro 字體表現(xiàn)更佳。甚至有人認(rèn)為，Helvetica 不適用于任何 UI 設(shè)計(jì)，不過(guò)它本來(lái)就不是為屏幕顯示而生的。
Helvetica 真的弱爆了。它不是為小屏顯示而設(shè)計(jì)的。像「milliliter」這樣的單詞顯示效果就很差。
– Erik Spiekermann
當(dāng)年蘋(píng)果曾經(jīng)暫時(shí)使用過(guò) Helvetica 作為其主要的 UI 設(shè)計(jì)字體，不過(guò)這一舉動(dòng)曾給一些用戶(hù)帶來(lái)了閱讀上的問(wèn)題。不過(guò)，正是因?yàn)檫@次事件才導(dǎo)致了蘋(píng)果后來(lái)設(shè)計(jì)了 San Francisco 字體。 San Francisco 字體是為屏幕而生， [2] x-height 比 Helvetica 字體更高，有著更寬的字距，單個(gè)字母更容易辨認(rèn)。
一個(gè)完美的 UI 字體讓人意識(shí)不到它的存在，絕不會(huì)喧賓奪主。字體應(yīng)該是方便用戶(hù)完成任務(wù)的，而不應(yīng)為用戶(hù)添加認(rèn)知上的負(fù)擔(dān)。
UI 字體應(yīng)該具有一定的靈活度。記住，我們是在為各種不同的媒介設(shè)計(jì)用戶(hù)體驗(yàn)，我們無(wú)法掌握的是——用戶(hù)的能力、應(yīng)用場(chǎng)景、所用的瀏覽器、屏幕大小、連接速度，甚至使用的輸入方式。
我們選擇使用的設(shè)計(jì)字體應(yīng)該支持盡可能多的使用場(chǎng)景，能在不同大小、各種不同的設(shè)備、以及特定的小屏設(shè)備上運(yùn)行良好。比如 Sans serifs 字體能在低分辨率的小屏上運(yùn)行良好。
X 字高是指小寫(xiě)字母「x」的高度。x-height 越高，小屏閱讀體驗(yàn)就越好。但字高也不能過(guò)大，要不然 n 和 h 難以區(qū)分。
比例是指一個(gè)字符的高和寬的比值。寬度的比值越大，字體辨識(shí)度越好，小屏閱讀體驗(yàn)也越好。
一個(gè)重要的原則是，字母之間的間距要比 [3]「字柜」（counter）要小。
字母周?chē)目臻g和字母的內(nèi)部空間同樣重要。字母如果相距太近讀起來(lái)很費(fèi)勁。一個(gè)好的 UI 字體應(yīng)該要給字母之間留有充分的呼吸空間，留有一些空間，建立起穩(wěn)定的節(jié)奏。
另一方面，如果間距太大，則會(huì)打破單詞的整體性。一個(gè)重要的原則是，字母之間的間距要比「字柜」（counter）小。
好的 UI 字體應(yīng)該是筆畫(huà)平順。不夠平順的字體在大屏上看起來(lái)可能還好，一旦在小屏上顯示，細(xì)長(zhǎng)的筆畫(huà)就難以辨認(rèn)。另一方面，像 Arial 和 Helvetica 這樣的字體，由于字母筆畫(huà)粗細(xì)幾乎一樣，因此讓閱讀變得尤其困難。
所以，需要在這兩者之間達(dá)到平衡。下面兩個(gè)案例，你覺(jué)得哪個(gè)更好？
確保你選擇的字體支持 OpenType 功能這一點(diǎn)很重要，因?yàn)樗転槲覀兲峁└嗟淖杂啥?。支?OpenType 功能也表明可以很好地支持不同的語(yǔ)言和特殊字符。
對(duì)于我來(lái)說(shuō)， OpenType 功能最有用的一點(diǎn)是「表格數(shù)據(jù)」，它是指相同寬度的一連串?dāng)?shù)字。計(jì)時(shí)器、計(jì)算器或者 IP 數(shù)字的設(shè)計(jì)中，可以用到這個(gè)功能。
下面這個(gè)案例你可能非常熟悉。在加載未完成時(shí)，網(wǎng)頁(yè)字體不能完全顯示出來(lái)。
要解決這個(gè)問(wèn)題，只需要以非阻礙的方式來(lái)加載字體，這樣可以大大減少內(nèi)容加載的時(shí)間。這樣做的缺點(diǎn)是，需要在默認(rèn)系統(tǒng)字體中設(shè)置回退字體，默認(rèn)系統(tǒng)字體是在頁(yè)面加載時(shí)屏幕顯示的字體。
微調(diào)是一個(gè)過(guò)程，是指字體的調(diào)整以獲得最佳閱讀體驗(yàn)。微調(diào)能讓字體矢量線(xiàn)條更好適應(yīng)像素網(wǎng)格的顯示。在低分辨率屏幕上對(duì)字體進(jìn)行微調(diào)對(duì)獲得清晰、可辨識(shí)的文本十分重要。
微調(diào)最早是由蘋(píng)果發(fā)明的，但自從推出 TrueType 字體格式后，微調(diào)就逐漸消失了?，F(xiàn)在，只有在需要支持 IE8 或者基于 TTF or EOT 格式的瀏覽器時(shí)才會(huì)考慮使用微調(diào)。
以上是我?guī)ьI(lǐng)大家展開(kāi)的一次短暫的字體漫游之旅，未來(lái)，我期待看到更多關(guān)于網(wǎng)頁(yè)字體、字體設(shè)計(jì)工具、字體格式的演化和進(jìn)步，以及在（不遠(yuǎn)）的將來(lái)，字體能更好地為我們所用。
我認(rèn)為，未來(lái)我們將能看到越來(lái)越多的「漸進(jìn)增長(zhǎng)技術(shù)」體驗(yàn)，文本內(nèi)容比字體排版更加重要。雖然一直以來(lái)網(wǎng)頁(yè)字體設(shè)計(jì)就很重要，但是直到現(xiàn)在我們才開(kāi)始正視這個(gè)問(wèn)題。
為了設(shè)計(jì)出理想的字體，我們必須盡可能多地了解用戶(hù)閱讀環(huán)境狀況。雖然這點(diǎn)顯而易見(jiàn)，但是事實(shí)并非如此。但是在未來(lái)，我認(rèn)為，字體將對(duì)顯示環(huán)境變得更加「敏銳」，并能針對(duì)一系列元素（視點(diǎn)、分辨率、字體渲染引擎、環(huán)境光線(xiàn)、屏幕亮度和閱讀距離）做出調(diào)整。
整體來(lái)說(shuō)，我認(rèn)為，UI 字體的未來(lái)將與傳感器有關(guān)，以及字體將能根據(jù)傳感器搜集到的數(shù)據(jù)進(jìn)行格式的調(diào)整。未來(lái)，新的字體設(shè)計(jì)工具會(huì)在工作流中整合智能算法，能對(duì)不同場(chǎng)景進(jìn)行自動(dòng)識(shí)別。
作者：Viljami Salminen，是來(lái)自芬蘭的一名設(shè)計(jì)師，現(xiàn)居灣區(qū)，目前在 Idean 擔(dān)任高級(jí)交互設(shè)計(jì)師，同時(shí)也是知名設(shè)計(jì)網(wǎng)站 Smashing Magazine 的撰稿人，還是赫爾辛基 [1]開(kāi)放設(shè)備實(shí)驗(yàn)室 (Open Device Lab)創(chuàng)始人。Viljami Salminen 浸淫互聯(lián)網(wǎng)設(shè)計(jì)行業(yè)多年，為各種大大小小的企業(yè)和創(chuàng)業(yè)公司設(shè)計(jì)多個(gè)網(wǎng)站和瀏覽器工具。音樂(lè)，特別是上個(gè)世紀(jì) 50、60 年代的爵士黑膠唱片對(duì) Viljami Salminen 啟發(fā)特別大，給他的工作和生活帶來(lái)很多靈感。
原文鏈接： Typography for User Interfaces
藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.820esy.cn