2022-3-8 純純
文字和排版可以追溯到五千年前，而圖形化界面僅僅只有40年的歷史。最關(guān)鍵的轉(zhuǎn)折點(diǎn)出現(xiàn)在1973年的施樂(lè)，最早的圖形化界面出現(xiàn)在了他們的Alto電腦上，而這個(gè)設(shè)計(jì)就是現(xiàn)如今圖形化界面設(shè)計(jì)的基礎(chǔ)。在Alto 的界面誕生后的10年里，幾乎是它一家獨(dú)大，并且它也被大家視作為數(shù)字技術(shù)的未來(lái)。
早期的Alto 在80年代進(jìn)化為著名的施樂(lè)之星，而施樂(lè)的這個(gè)設(shè)計(jì)方案也成為了第一個(gè)商用的操作系統(tǒng)圖形化界面。
不過(guò)不論是Alto 還是施樂(lè)之星，都沒(méi)能真正意義上崛起。不過(guò)施樂(lè)的圖形化界面最終深深的影響了蘋果和微軟的道路，比爾蓋茨和喬布斯先后在施樂(lè)的研發(fā)中心觀摩了施樂(lè)之星的運(yùn)作，而喬布斯更是在1984年先人一步發(fā)布了著名的Macintosh 系統(tǒng)，也就是后來(lái)我們所熟知的Mac OS。
Macintosh 的發(fā)布不僅僅意味著相對(duì)成熟的GUI的出現(xiàn)，而且它為大眾帶來(lái)了真正意義上的自定義字體的功能。這款系統(tǒng)內(nèi)置了許多以著名城市命名的字體，也正是在此之后才有越來(lái)越多的著名字體的數(shù)字版本在數(shù)字平臺(tái)上發(fā)布并應(yīng)用。
仔細(xì)觀察這些早期的字體，我們能夠發(fā)現(xiàn)，雖然已經(jīng)是圖形化的界面，但是其中絕大多數(shù)的界面元素都還是以純文本的形式而存在，它們以一種奇妙的方式被整合到一個(gè)界面當(dāng)中。循著界面的發(fā)展歷程沿路看過(guò)來(lái)，不難發(fā)現(xiàn)，文本和排版幾乎是貫穿始終的主線，它是一個(gè)不容忽視的核心類別。
界面中的每一個(gè)文字、每一個(gè)字符都很重要。好的文本是好的設(shè)計(jì)。文本是最根本的界面，是我們?cè)O(shè)計(jì)師來(lái)塑造和打磨這些信息。
看看下面的天氣界面的設(shè)計(jì)，想象一下將所有界面元素都擺在桌上會(huì)是什么樣的效果：無(wú)非就是兩張圖，幾個(gè)圖標(biāo)和一大堆文本。
作為設(shè)計(jì)師，工作并不是將一堆隨機(jī)的內(nèi)容和元素排布在屏幕上，讓它們看起來(lái)夠漂亮就行了。真實(shí)的情況是，我們要從最核心的內(nèi)容和文本開(kāi)始著手，然后從這里著手細(xì)化，并完善出其他的部分。這就是我們工作的核心。
文本的清晰度同樣扮演著關(guān)鍵性的角色。如果我們的大腦花費(fèi)一兩秒鐘單純只是分辨一個(gè)字形，那么清晰度上的微小差異是無(wú)傷大雅的?？墒钱?dāng)它們組合成為大段的文本，不同的字母組合構(gòu)成不同的詞匯、段落的時(shí)候，清晰度的影響就更大了，排版的重要性也顯得更加明顯了。
當(dāng)然，影響界面設(shè)計(jì)的文本屬性還有很多，比如平衡性，定位和層次結(jié)構(gòu)，但是好的文案和排版的影響至少占據(jù)整體影響的95%。
在偉大的設(shè)計(jì)師眼里，文本不僅承載內(nèi)容，而且可以構(gòu)成界面。
– Oliver Reichenstein
既然屏幕上的文本顯示是如此的重要，那么我們應(yīng)當(dāng)先了解人們是如何閱讀的，而文本顯示又是如何影響我們?cè)O(shè)計(jì)決策的。
讀過(guò)Billy Whited 的文章《Setting Type for User Interface》之后，讓我對(duì)于文本閱讀的效率有了更深的認(rèn)知。一個(gè)少于20個(gè)字母的獨(dú)立單詞放在句子中會(huì)更快被理解，而單獨(dú)放置的時(shí)候我們需要耗費(fèi)更長(zhǎng)的時(shí)間來(lái)識(shí)別。
其實(shí)這個(gè)研究結(jié)果也表明我們閱讀較長(zhǎng)句子的時(shí)候，并非是逐個(gè)單詞地閱讀，而是跳躍著閱讀功能性的詞匯，我們將這種閱讀方式稱為離散跳躍式閱讀，俗稱掃視。
掃視讓我們的閱讀能力更強(qiáng)，我們甚至?xí)^(guò)短的功能性詞匯。
我們應(yīng)當(dāng)記住這一關(guān)鍵特征，因?yàn)槲覀兊慕缑嬷兴休d的詞匯大多是孤立的單詞。簡(jiǎn)單說(shuō)來(lái)，界面是無(wú)法利用掃視這種方式來(lái)獲取信息的。
總的來(lái)說(shuō)，單詞在閱讀中發(fā)揮著無(wú)比重要的作用，無(wú)論是作為內(nèi)容還是作為界面元素，均是如此。無(wú)疑，選擇合適的字體就相當(dāng)重要了。
過(guò)去，人們常常認(rèn)為眼睛和大腦是通過(guò)單詞的外輪廓（Bouma Shape）來(lái)識(shí)別單詞，當(dāng)然，后來(lái)的研究證明這個(gè)想法是錯(cuò)的，單詞的可讀性和易讀性的影響因素不止是外輪廓，字母本身的形態(tài)、細(xì)節(jié)和清晰度同樣深入的影響著它的識(shí)別度。
其實(shí)這個(gè)問(wèn)題一開(kāi)始并不是那么好回答。閱讀很大程度上依賴于我們的習(xí)慣，越常見(jiàn)的內(nèi)容對(duì)我們而言越容易識(shí)別。這樣一來(lái)，我們就不那么容易判斷讓字母清晰易讀的影響因素了。為了了解這一點(diǎn)，我們需要將句子分割為單詞，分解單詞為字母，在字母中查看細(xì)節(jié)。
早在2008年，維多利亞大學(xué)心理學(xué)系根據(jù)測(cè)試結(jié)果得出結(jié)論，大寫和小寫的拉丁文字母是最容易識(shí)別的，也最易于閱讀。
這項(xiàng)研究有趣的地方在于，它揭示了一個(gè)事實(shí)：每個(gè)字母延伸出來(lái)的線性端點(diǎn)是最易于識(shí)別的地方，也是每個(gè)字母的特點(diǎn)所在。
上面的圖片標(biāo)識(shí)出了這些最易于識(shí)別的部分。每一款字體在這些部分應(yīng)當(dāng)設(shè)計(jì)為最通用、最為人所熟悉的樣式，同樣的，它們也應(yīng)該強(qiáng)調(diào)每個(gè)字母的差異。
在2010年的時(shí)候，另一項(xiàng)由 Sofie Beier 和 Kevin Larson 開(kāi)啟了一個(gè)新的研究項(xiàng)目，這項(xiàng)研究專注于測(cè)試經(jīng)常被誤讀的字母和字符的識(shí)別度。
這項(xiàng)研究表明，在相同的字體和相同的尺寸、相同字重的情況下，有些字體或者變體的細(xì)節(jié)確實(shí)比其他的更加清晰、更易于識(shí)別。這項(xiàng)研究的結(jié)果說(shuō)明，纖細(xì)的字體加粗之后識(shí)別度效果會(huì)明顯會(huì)增強(qiáng)，而字母的X高度如果能夠占據(jù)上伸區(qū)或者下探區(qū)的空間，識(shí)別度會(huì)更好。
為了更好的理解字體的清晰度的概念，你可以下載我所開(kāi)發(fā)的這款工具 Legibility APP 來(lái)測(cè)試不同字體在模糊、炫光等多種不同情況下的清晰度和辨識(shí)度。這是一款處于測(cè)試階段的工具，可以在Chrmoe、Opera和Safari 中運(yùn)行。
理解了用戶閱讀的方式和字體可讀性的影響因素之后，我們應(yīng)當(dāng)開(kāi)始了解UI中的字體的幾個(gè)關(guān)鍵因素。下面是UI中字體使用的10個(gè)關(guān)鍵因素。
可讀性是UI中字體所需考慮的首要因素。字母字形必須清晰可辨，作為UI元素，其中不同的字母必須可以被用戶輕松辨別出差異。許多經(jīng)典的字體，甚至包括 Helvetica ，都沒(méi)辦法清晰分辨 字母 i 的大寫形態(tài) I，和大寫字母 L的小寫形態(tài) l，這在界面設(shè)計(jì)中無(wú)疑是有影響的。
上圖中，左邊的字體為 Source Sans Pro , 右邊為 Helvetica，無(wú)疑對(duì)于 Illiterate 這個(gè)詞Helvetica 字體下前三個(gè)字母完全無(wú)法分辨。有部分用戶也同意Helvetica 并不適合作為UI界面的顯示字體而存在，因?yàn)檫@款字體終究是為平面印刷顯示而設(shè)計(jì)的，并非為屏幕而生。
在iOS 7 時(shí)代，蘋果短暫地將 Helvetica 作為系統(tǒng)的主要顯示字體的時(shí)候，曾對(duì)特定的用戶群體造成過(guò)信息識(shí)別的困擾。這也最終催生了我們現(xiàn)在所看到的蘋果官方字體 San Francisco。舊金山是為UI界面而生的字體，它的x高度比Helvetica 更高，字母間距更寬，字母間的識(shí)別度更高。
一款理想的UI界面所用的字體，不應(yīng)當(dāng)過(guò)于“顯眼”，而該是悄無(wú)聲息，“隱型”的。當(dāng)用戶在試圖完成某項(xiàng)任務(wù)的時(shí)候，字體不應(yīng)當(dāng)給用戶以“出戲”或者“顯眼”的感覺(jué)，也就是說(shuō)，字體不應(yīng)當(dāng)超出用戶的認(rèn)知負(fù)荷，而內(nèi)容和信息才應(yīng)該成為真正的關(guān)注點(diǎn)。
給UI界面使用的字體應(yīng)當(dāng)具有靈活性。我們?cè)?jīng)為 Medium 做過(guò)用戶體驗(yàn)設(shè)計(jì)，作為一個(gè)網(wǎng)頁(yè)博客平臺(tái)，我們很難去控制用戶的能力、內(nèi)容、瀏覽器、屏幕尺寸、網(wǎng)絡(luò)帶寬和連接速度，包括輸入法。
所以我們最終為它所選取的字體應(yīng)當(dāng)支持大量不同的內(nèi)容，在不同的尺寸下?lián)碛辛己玫淖R(shí)別度，能夠兼容不同的設(shè)備，尤其是在小屏幕上。Sans serifs 字體就是專門為小尺寸低分辨率屏幕而定制的。
x高度的參考標(biāo)準(zhǔn)是小寫字母x的高度，同等尺寸下，x高度更大的字體更易于識(shí)別。不過(guò)x高度也不是越大越好，當(dāng)x高度超過(guò)一定限度的時(shí)候，小寫字母n和小寫字母h就很難分辨了，這一點(diǎn)應(yīng)當(dāng)注意。
字母的寬度和高度的比例也是相當(dāng)重要的一個(gè)屬性。寬度和高度比例越高，字母在小屏幕上的識(shí)別度就越高。
字母之間的間距和字母內(nèi)部的空間同樣是影響字母可讀的因素。字母間距太小同樣會(huì)影響整體的可讀性，而好的顯示字體會(huì)更好的控制字母間距，確保單詞在視覺(jué)上的“透氣性”，甚至可以營(yíng)造出一種韻律感。
不過(guò)字間距不是越寬松越好，太過(guò)寬松會(huì)讓整個(gè)單詞看起來(lái)過(guò)于松散。有一個(gè)值得參考的標(biāo)準(zhǔn)，就是字母之間的間距應(yīng)當(dāng)比字母內(nèi)的開(kāi)口縫隙略小一點(diǎn)。
許多字體不同的筆畫(huà)粗細(xì)不同，而對(duì)于UI界面而言，筆觸間的對(duì)比度越小識(shí)別度越好。較大的筆觸對(duì)比度下，字體在小尺寸屏幕上，較細(xì)的筆畫(huà)會(huì)難于分辨。
OpenType 功能對(duì)于字體而言是相當(dāng)重要的。支持OpenType的字體擁有更大的靈活性，對(duì)于不同的語(yǔ)言和特殊的字符有著更為優(yōu)良的兼容性。
接下來(lái)要說(shuō)的情況可能大家多少都碰到過(guò)。網(wǎng)頁(yè)在完全加載出來(lái)之前，部分內(nèi)容因?yàn)樽煮w沒(méi)有加載而無(wú)法顯示。
其實(shí)這可以通過(guò)先加載本地字體，顯示內(nèi)容，等網(wǎng)頁(yè)字體加載好了之后再行替換，以達(dá)到無(wú)阻塞顯示。這種方法的缺陷是需要預(yù)先設(shè)定一個(gè)可調(diào)用的本地備用字體。
Hinting 指的是為了字體為了保證最大的可讀性而針對(duì)顯示器狀況進(jìn)行調(diào)整的過(guò)程。Hinting 可以通過(guò)匹配顯示器的像素柵格讓字體顯示更加清晰，降低誤讀的可能性。
這項(xiàng)技術(shù)最初是由蘋果公司所提出的，不過(guò)因?yàn)門rueType 字體技術(shù)的出現(xiàn)，Hinting 正在消失。
隨著新的UI標(biāo)準(zhǔn)、排版技術(shù)的提升，字體技術(shù)也在不斷的進(jìn)步，在不遠(yuǎn)的未來(lái)，字體會(huì)從傳感器獲得信息，更好的兼容不同的環(huán)境、隨著亮度、設(shè)備、距離而進(jìn)行智能化的調(diào)整，甚至復(fù)雜而龐大的中文字體，也可能作為靈活的網(wǎng)頁(yè)字體而存在。
字體會(huì)讓我們的工作更加便捷
讓界面交互更快，更加觸手可及
讓UI更加易用
更加便捷
也更加清晰而高效
文章來(lái)源：優(yōu)設(shè) 作者:陳子木
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com