一份詳盡全面的UI設(shè)計(jì)字體與排指南

1、一份詳盡全面的UI設(shè)計(jì)字體與排版指南無(wú)論你是做網(wǎng)頁(yè)還是App設(shè)計(jì)，文字內(nèi)容總是能占到整個(gè)版面將近80%的區(qū)域。因此理解字體與排版對(duì)UI設(shè)計(jì)師來(lái)說(shuō)非常關(guān)鍵。你需要始終把內(nèi)容的可讀性放在首位去考慮和權(quán)衡你對(duì)字體與排版的選擇。字體的基礎(chǔ)術(shù)語(yǔ)了解字體設(shè)計(jì)的基礎(chǔ)術(shù)語(yǔ)非常重要，這些術(shù)語(yǔ)在介紹字體設(shè)計(jì)的相關(guān)文章中經(jīng)常出現(xiàn)。比如 x-height(X字高)指的是從字母的基準(zhǔn)線開(kāi)始往上到最矮字母的頂端的距離，當(dāng)X字高的比例相對(duì)大一些的話就能增加易讀性。漢字字形在大多數(shù)情況下我們都選擇使用系統(tǒng)自帶的字體，比如微軟雅黑、宋體、黑體等來(lái)定義標(biāo)題和內(nèi)容，但有時(shí)，我們?cè)谧鯨ogo，banner設(shè)計(jì)時(shí)也需要通過(guò)對(duì)字體進(jìn)行改

2、造，來(lái)達(dá)到更加理想的效果。這時(shí)我們就需要掌握漢字的字形結(jié)構(gòu)以及一些最基本的設(shè)計(jì)原則。襯線字與非襯線字在西方國(guó)家的字母體系，分成兩大字族：serif(襯線字體)及sans serif(無(wú)襯線字體)。襯線字(下圖中的宋體、Times New Roman)是指在字的筆畫(huà)開(kāi)始及結(jié)束的地方有額外的裝飾，而且筆畫(huà)的粗細(xì)會(huì)因直橫的不同而有所不同。 相反的，無(wú)襯線字(下圖中的思源黑體、Helvetica)就沒(méi)有這些額外裝飾，而且筆畫(huà)粗細(xì)大致上是差不多。襯線字的字體較易辨識(shí)，也因此具有較高的易讀性。 反之無(wú)襯線字則較醒目。通常來(lái)說(shuō)，需要強(qiáng)調(diào)、突出的小篇幅文字一般使用無(wú)襯線字,而在長(zhǎng)篇正文中，為了閱讀的便利，一般

3、使用襯線字。在實(shí)際應(yīng)用中，因?yàn)橹形牡乃误w和西文的襯線體，中文的黑體和西文的無(wú)襯線體，在風(fēng)格和應(yīng)用場(chǎng)景上相似，所以通常搭配使用。字體排版建議在你對(duì)字體排版技巧了如指掌之前，首先需要保證你的內(nèi)容能夠簡(jiǎn)單且清晰地展現(xiàn)出來(lái)。優(yōu)秀的文字與排版使我們更愿意去閱讀，所以最好先關(guān)注你所設(shè)定的字體和排版是否便于閱讀，然后再考慮為了美觀改進(jìn)行修飾。我們可以參考這篇英文指南：優(yōu)秀字體排版的5條原則 并且將文中的這些原則應(yīng)用到我們的App和Web設(shè)計(jì)中去。iOS中的系統(tǒng)字體隨著iOS 9系統(tǒng)以及EI Capitan系統(tǒng)的發(fā)布，現(xiàn)在的系統(tǒng)字體變?yōu)榱薃pple自己設(shè)計(jì)的 San Francisco。iOS仍然在其他地方使

4、用SF UI，而在Apple Watch中使用SF Compact。San Francisco 有兩類尺寸: 文本模式(SF UI Text)和展示模式(SF UI Display)。 文本模式適用于小于20 points的尺寸，展示模式則適用于大于20 points的尺寸。當(dāng)你在你的app中使用San Francisco時(shí)，iOS會(huì)自動(dòng)在適當(dāng)?shù)臅r(shí)機(jī)在文本模式和展示模式中切換。注：如果你使用諸如Sketch或Photoshop的工具來(lái)進(jìn)行設(shè)計(jì)，那么當(dāng)你設(shè)置的字體大于等于20 points的時(shí)候，你需要切換到展示模式。iOS會(huì)根據(jù)字體大小為San Francisco自動(dòng)調(diào)整字間距。選擇Body字

5、體為body text挑選合適的字體是最重要的。務(wù)必選擇那些可讀性強(qiáng)的，看上去干凈易讀的字體。我推薦的常用英文字體有：San Francisco, Helvetica Neue, Avenir Next, Open Sans, Museo Sans。中文字體則有，華文細(xì)黑，思源黑體。字體的大小在iPhone,iPad,iWatch 中設(shè)置的Body字體不應(yīng)該小于11pt，這樣才能被正常閱讀。我們推薦的Body文本大小應(yīng)該在15-18pt。字體的字重當(dāng)我們?cè)O(shè)置更大的字體來(lái)獲得更好的易讀性的同時(shí)，我們也應(yīng)相應(yīng)地減小字體的字重(粗細(xì))，考慮Light，Thin或者Ultra Thin。過(guò)重的字體會(huì)太

6、過(guò)醒目，從而影響其他內(nèi)容的顯示效果。當(dāng)字體大小為12-18pt時(shí)，使用Regular，18-24pt時(shí)，使用Light，24-32pt,使用Thin，當(dāng)字體大小超過(guò)32pt時(shí)，建議使用Ultralight。以上都是建議值，你應(yīng)該根據(jù)不同字體的顯示效果進(jìn)行設(shè)定使文字內(nèi)容看上去清晰和精致，從而保持良好閱讀體驗(yàn)?，F(xiàn)代字體都有多種字重設(shè)置：Regular，Light，Thin和Ultralight合理設(shè)置行高，讓文字也能夠呼吸行間距(leading)應(yīng)該設(shè)置為字體大小的120%到145%之間。在右邊的例子中，行高設(shè)為了與字體高度相同的100%，而在左邊的例子中，我將它設(shè)為145%。它們的顯示效果有著非

7、常明顯差異。當(dāng)字?jǐn)?shù)進(jìn)一步增加時(shí)，你更會(huì)發(fā)現(xiàn)閱讀行距設(shè)置過(guò)小的大段文字會(huì)非常累。合理設(shè)置行高，也是一種留白的技巧，能夠增強(qiáng)用戶的閱讀體驗(yàn)。每行45-90個(gè)字行長(zhǎng)指單行文字的長(zhǎng)度，如果一行中包含的字?jǐn)?shù)太多，文本內(nèi)容將會(huì)很難閱讀。英文字符一般在45-90字比較適宜，而中文35-60字為宜。合理的行長(zhǎng)使用戶在行間跳轉(zhuǎn)時(shí)非常感到輕快和愉悅，反之則會(huì)使閱讀成為一種負(fù)擔(dān)。字體樣式字體樣式對(duì)易讀性和快速瀏覽非常重要，一般的原則是，被修飾的文本不應(yīng)超過(guò)整個(gè)文本的10%，如果所有文本都都通過(guò)修飾被強(qiáng)調(diào)的話，那反而就不是強(qiáng)調(diào)了。當(dāng)然，一次不應(yīng)該同時(shí)使超過(guò)三種的強(qiáng)調(diào)樣式。換句話說(shuō)，不要在同一段文本中同時(shí)使用，顏色，字

8、體改變，大小，下劃線，斜體，粗體。尋找合適的字體大部分商用字體都很貴，但也有很多優(yōu)秀的字體是免費(fèi)的。你只需要從中挑選你最喜歡的字體，并應(yīng)用到你的設(shè)計(jì)中就可以了。下面就介紹幾個(gè)非常優(yōu)秀的字體網(wǎng)站。Google Fonts (需梯子)在Google Fonts，你可以免費(fèi)下載你喜歡的字體，并且按照你的需要在項(xiàng)目中使用。由于在iOS中使用其他字體的唯一方法就是將字體文件導(dǎo)入到系統(tǒng)中，因此Google Fonts的下載功能非常有用。Google Fonts包含超過(guò)1400種不同的字體，其中包含最著名的：Open Sans和Roboto字體，他們是Android系統(tǒng)使用的默認(rèn)字體。你可以使用Mac上的S

9、kyFonts來(lái)自動(dòng)同步字體到你的桌面。如果你需要在你的網(wǎng)站中直接使用Google Web Fonts，你可以選擇360的代理來(lái)訪問(wèn)Google的免費(fèi)字體庫(kù)。下面是使用說(shuō)明，非常簡(jiǎn)單。Typekit有非常多優(yōu)秀的字體。這對(duì)于那些剛剛起步的人來(lái)說(shuō)，非常有用。這其中就有我非常喜歡的Proxima Nova和Museo字體。它還將思源黑體等中文字體也收入其中了。有字庫(kù)對(duì)于在需要大量使用中文字體的用戶來(lái)說(shuō)，有字庫(kù)是一個(gè)不錯(cuò)的選擇。它是國(guó)內(nèi)目前比較優(yōu)秀的Web Font服務(wù)平臺(tái)，包含了大量?jī)?yōu)秀的中文字體。其他資源字體和排版是一門(mén)值得深入探索的藝術(shù)。每個(gè)字體的形成和發(fā)展過(guò)程都有著深遠(yuǎn)的歷史可以追溯。當(dāng)你設(shè)計(jì)的作品也能被稱作藝術(shù)品時(shí)，那就是對(duì)你最大的肯定。文字排版指南這是一篇英文文字排版指南，但提到的內(nèi)容和大部分意見(jiàn)對(duì)中文字體的選擇和排版同樣具有意義。非常值得閱讀。字體設(shè)計(jì)基礎(chǔ)：字由心生漢字怎么樣發(fā)展而來(lái)的?我們現(xiàn)在用到 字體是通過(guò)什么字體演變過(guò)來(lái)的?當(dāng)今字體又是沿用了先人的那些字體