字體作為基本語言，是設(shè)計(jì)師需要掌握的基本技能之一。這篇文章里面的案例花了作者大量時(shí)間進(jìn)行繪制&收集，希望能對(duì)各位讀者有所幫助。

一、 漢字使用的前世今生

在人類發(fā)展歷史過程中，文字作為信息傳播的載體，有著承上啟下的重要意義。而漢字，是世界上使用時(shí)間最久、空間最廣、人數(shù)最多的文字。從距今大約六千年前，就開始誕生了具有整齊規(guī)范、初步具有文字特征的圖形符號(hào)。

而到了后期，漢字分別經(jīng)歷了篆體、隸書、楷書等多元化的發(fā)展，百花齊放。而自從雕版印刷術(shù)的盛行之后，刻字用的雕刻刀所雕出來的字體因?yàn)闄M細(xì)豎粗，醒目易讀，得到了廣泛的運(yùn)用，由于活字印刷的時(shí)候首尾會(huì)有墨殘留，所以故意會(huì)留一部分裝飾來溢墨。

而到了后期，這個(gè)裝飾也得以保留下來，對(duì)這個(gè)字體進(jìn)行優(yōu)化過后，就是至今我們?nèi)栽趶V泛使用的宋體。在當(dāng)今，特別是在Windows系統(tǒng)中，宋體仍占有很大的一席之地。

后來人們又通過模仿宋體字體結(jié)構(gòu)，對(duì)字體進(jìn)行了調(diào)整，改成了筆畫粗細(xì)一致，纖細(xì)狹長(zhǎng)的印刷字體，也就是今天我們稱之為“仿宋體”的字體。

與此同時(shí)，“黑體”誕生了，因?yàn)樽煮w醒目大方，粗細(xì)一致，結(jié)構(gòu)醒目嚴(yán)密，字形端正，容易閱讀，所以也就是我們今天，在界面設(shè)計(jì)中，所用到的最多的字體?，F(xiàn)代漢字的黑體是在現(xiàn)代印刷術(shù)傳入東方后依據(jù)西文無襯線體中的黑體所創(chuàng)造的，所以按照西文的說法，也可以把黑體稱作為無襯線體，把宋體叫做為有襯線體。

到了現(xiàn)代，隨著互聯(lián)網(wǎng)的興起，LED屏幕中的字體也得到了較大的發(fā)展。

在早期時(shí)代中，顯示屏效果較差，分辨率低，屏幕顏色較少，而漢字筆畫較多，黑體小字體的清晰度較差，所以一般主要用于文章重要標(biāo)題。而宋體在為了匹配低分辨率下的像素柵格，對(duì)字體進(jìn)行了調(diào)整，調(diào)整后的字體能在低分辨率下的小點(diǎn)陣中得以良好的顯示，辨識(shí)度較高，在開啟了ClearType之后，字體的被識(shí)別性能得到良好的保證，所以在互聯(lián)網(wǎng)初期階段中，有襯線體在互聯(lián)網(wǎng)中一直處于霸主地位。

直到后面屏幕顯示效果的進(jìn)步，黑體才慢慢得以盛行，在屏幕分辨率較高的情況下，黑體已經(jīng)能得到較好的識(shí)別效果，因此已經(jīng)不需要原襯線體的功能，襯線體反而由于裝飾性元素過多，閱讀起來容易造成視覺疲勞。因此在屏幕密度較高的移動(dòng)端載體中，無襯線黑體成功替代有襯線體成為霸主地位。

修改后的黑體中宮更為開放，布白更為勻稱，顯示效果更為舒適，醒目利于閱讀，更利于視覺信息的傳達(dá)，從而在屏幕中起著主導(dǎo)地位。幾大互聯(lián)網(wǎng)巨頭微軟雅黑及蘋果在此之后分別花重金打造了微軟雅黑及蘋方，用于自身的OS系統(tǒng)中。所以通過分析，可以看來，在將來界面設(shè)計(jì)中，字體樣式還是會(huì)以無襯線體為主，甚至可能會(huì)更進(jìn)一步簡(jiǎn)化字體的形狀。

?二、Android與iOS系統(tǒng)字體詳解

1.Android默認(rèn)字體-思源黑體/Robot

在Android設(shè)備中，Android始祖Google為了更好的追求視覺效果，提高用戶體驗(yàn)，所以聯(lián)合了Adobe設(shè)計(jì)發(fā)布了思源黑體(Noto)來作為中文字體。

該字體字形較為平穩(wěn)，利于閱讀，且有個(gè)7個(gè)不同的字重，充分滿足了不同場(chǎng)景下的設(shè)計(jì)需求，7個(gè)字重分別為：Thin、 Light、DemiLight、Regular、Medium、Bold 和 Black。而英文，則使用Robot來作為基礎(chǔ)字體，只有6個(gè)字重：分別為Thin、Light、Regular、Medium、Bold 和 Black，視覺語言與思源黑體Noto保持一致。

另外在Google的Material Design手冊(cè)中，官方還給出了標(biāo)準(zhǔn)的字號(hào)大小。在安卓的字體單位中，不再以px，pt作為單位而是統(tǒng)一的使用了sp，換算方式：

px = sp*ppi/160? ，sp = px / (ppi / 160)?

按照iPhone7的尺寸1334×750.密度326ppi 來換算，那么Android的1dp = 1 * 326/160 ≈ 2px

2.iOS默認(rèn)字體-蘋方/San Francisco

在iOS系統(tǒng)中，中文方面蘋果則加入了全新的蘋方字體，字形纖細(xì)中宮飽滿，利于閱讀，并且還提供6個(gè)字重供設(shè)計(jì)開發(fā)者使用。所以后面的設(shè)計(jì)趨勢(shì)中，字重的使用變的開始多元化了起來，使用Semibold中粗體、大字號(hào)作為界面的標(biāo)題變的更為流行起來，較為明顯的有 iOS 11 中的一些原生界面及一些知名APP。

而在英文方面，則使用了San Francisco 的字體，除了在iOS和Mac OS上，還單獨(dú)為Watch OS單獨(dú)對(duì)字體進(jìn)行了調(diào)整，命名為 San Francisco Compact。而每套字體下面又分為Text與Display兩種屬性，Text只有6個(gè)字重，而Display則有9個(gè)字重。

3.總結(jié)&結(jié)論

通過對(duì)比，我們可以發(fā)現(xiàn)：其實(shí)Android與iOS字體字形方面差異化明顯不大，不用特意下載所有字體進(jìn)行單獨(dú)配置。那么在平常工作中，我們只需要按照一套標(biāo)準(zhǔn)的iOS設(shè)計(jì)稿輸出即可，在Android方面進(jìn)行自動(dòng)延展，最后走查確認(rèn)一下效果即可。

如果涉及到使用除Regular標(biāo)準(zhǔn)體之外的字體，那么除了顏色，還應(yīng)當(dāng)標(biāo)注相應(yīng)的字重字高等信息(如Font：Pingfang SC-Semibold，line:52px) ，而不應(yīng)當(dāng)只標(biāo)注一個(gè)加粗或者加細(xì)。當(dāng)然如果人力允許的情況下，我們也可以單獨(dú)為Android做一套界面及字體適配，提高Android端的視覺顯示效果。

三 、字體的基本屬性詳解

在平時(shí)項(xiàng)目中，為了讓頁面中的字體更加貼合業(yè)務(wù)場(chǎng)景，需要對(duì)字體的字距字高進(jìn)行調(diào)整。但很多同學(xué)在最后輸出標(biāo)注的時(shí)候，往往只標(biāo)注了字號(hào)及顏色，而其它參數(shù)都沒有進(jìn)行標(biāo)注或者標(biāo)注的不正確，在最后視覺還原審核的時(shí)候，字體往往偏差較大，花費(fèi)很多不必要的工作量去浪費(fèi)在了視覺走查上。

那么這里就給大家詳細(xì)介紹一些字體屬性及標(biāo)注方法，節(jié)約開發(fā)走查工作量，更好的還原視覺稿。

1.字體基礎(chǔ)結(jié)構(gòu)詳解

一般來說，為了保持字體的完整展示，字體設(shè)計(jì)師都會(huì)給字體預(yù)留一定的安全距離，設(shè)定合適的升部線及降部線距離，讓字體展示的更為平衡。這里我標(biāo)注了一個(gè)相應(yīng)的線稿：

所以由此圖可以看出：平時(shí)我們?cè)谠O(shè)計(jì)的時(shí)候，可能字體使用的28px，在使用工具量的時(shí)候，也確實(shí)是28px，但其實(shí)字體本身占用的距離是包含了升部及降部區(qū)域的，這樣就導(dǎo)致其占用空間大于28px，而變成了40px。所以我們?cè)跇?biāo)注的時(shí)候，應(yīng)當(dāng)按照包含升部降部的實(shí)際大小進(jìn)行標(biāo)注，這樣所還原的視覺效果，也是極為接近設(shè)計(jì)稿的。

所以我們?cè)谠O(shè)計(jì)輸出的時(shí)候，如果沒有調(diào)整line值，是可以直接借助sketch的標(biāo)注插件sketch measure，來實(shí)時(shí)導(dǎo)出相應(yīng)的參數(shù)，這樣的參數(shù)是最接近開發(fā)效果的。如果沒有Mac的同學(xué)，可以利用PS選中文字，那么選中的深色底就是字體本身的間距了。

下圖我做了兩個(gè)示例，來闡述正確的標(biāo)注方法，雖然標(biāo)注的時(shí)候會(huì)麻煩些，但往往在視覺還原的時(shí)候，往往能達(dá)到事半功倍的效果。

2.字體的行高行距參數(shù)詳解

那么在一些文字較多的頁面，為了讓閱讀更為順暢，我們往往需要對(duì)文字的字高字距進(jìn)行調(diào)整，那么我們先來看一下sketch及動(dòng)效編程軟件Origami中的可配置參數(shù)。

我們可以發(fā)現(xiàn)，對(duì)于更改字距、字寬及端高，那么我沒只需要配置好Charater、line、paragraph三個(gè)值即可，那么我們先來理解一下這三個(gè)值的含義：

（1）Character：字間距

所謂的字間距，則是在兩個(gè)文字中間的距離，一般加在一個(gè)字符的后段。如字符『AK』，默認(rèn)Character為0，那么兩個(gè)字符中間的間距，則是為字體默認(rèn)所設(shè)定的安全距離。如果給Character設(shè)定一個(gè)值50，那么會(huì)自動(dòng)在A的后段加上50px，那么顯示效果則變成了『A K』

（2）line：行高

即UI Lable 中字段所占用的高度實(shí)際大小，剛剛有提到默認(rèn)字體會(huì)設(shè)定一個(gè)安全距離，那么在設(shè)備中字段所占用的line高度 = 字體像素大小+升降安全距離+擴(kuò)高值。每個(gè)字體都有相應(yīng)設(shè)定的line Auto比例，可以通過sketch選中字體后聽過line值來進(jìn)行查看。

另外剛剛提到，標(biāo)注間距的時(shí)候，務(wù)必得把line值包含在內(nèi)，否則實(shí)現(xiàn)出來容易出現(xiàn)字體偏移位置不對(duì)等情況。

（3）Paragraph：行距

很多同學(xué)在調(diào)完這個(gè)參數(shù)，發(fā)現(xiàn)跟調(diào)整line值差不多。但其實(shí) Paragraph 調(diào)整的是兩行中間的間距，不單獨(dú)調(diào)整單行字段的占用空間。

通過以上我們能了解字體在于實(shí)際設(shè)備中，是怎么樣的布局方式，所以我們標(biāo)注的時(shí)候，一定需要標(biāo)注的較為仔細(xì)。如果發(fā)現(xiàn)開發(fā)出來的字體樣式與設(shè)計(jì)稿不一致，那么我們只需要提供以上這幾個(gè)參數(shù)值即可。

如果在團(tuán)隊(duì)中還是靠手動(dòng)標(biāo)注的同學(xué)，那么完整的標(biāo)注應(yīng)該為：Font-name；Font-size ；Font-color ；Font-line ；Font-character ；Font- Paragraph 。

如果沒有設(shè)定，不填即可，如：

• Font-name：Pingfang SC -Semibold
• Font-size ：32px
• Font-color ：#333333
• Font-line：Auto
• Font-character：5
• Font- Paragraph :0

四、科學(xué)的字號(hào)大小如何設(shè)定

現(xiàn)在目前市場(chǎng)中手機(jī)屏幕越來越大，分辨率也越來越高。那么我們?cè)谧鲈O(shè)計(jì)的時(shí)候，在字號(hào)運(yùn)用方面，難免會(huì)感到迷茫，文字是不是又點(diǎn)小了？或者大了顯得不精致？標(biāo)題跟正文沒啥區(qū)別？像這種問題可能經(jīng)常困擾著一些年輕的設(shè)計(jì)師。

其實(shí)在字號(hào)大小方面，確確實(shí)實(shí)有著一套計(jì)算法則及公式在內(nèi)，今天這里給大家進(jìn)行一下科普。

當(dāng)我們?cè)诓榭匆恍┪矬w時(shí)，測(cè)量視覺角度的方法為先量一下物體的的長(zhǎng)寬以及眼睛距離物體的距離，得出相應(yīng)的數(shù)學(xué)計(jì)算公式，其中：

θ=(arctan·h/2d)2，通過換算h=2d·tan(θ/2)

• θ即視角度數(shù)
• d為眼睛離物體的距離
• h為物體高度

1.設(shè)計(jì)稿中最小的字號(hào)怎么來的？

關(guān)于人眼感光系統(tǒng)，人眼上的一個(gè)像素相當(dāng)于0.3個(gè)角分。為何人的肉眼看不清遠(yuǎn)處的物體細(xì)節(jié)？或者看不清月亮上的環(huán)形山，那么是因?yàn)樵谀愕囊暰W(wǎng)膜上，月亮形成的圖像其實(shí)不過就是一個(gè)100個(gè)像素左右的圖片而已，所以環(huán)形山無法被肉眼觀察得清。

而根據(jù)科學(xué)研究發(fā)現(xiàn)：

人眼對(duì)于信息物體的識(shí)別，在眼睛內(nèi)視角度數(shù)＞0.3°，才能保文字信息體投射到視網(wǎng)膜中的分辨率足夠大，能夠被大腦所識(shí)別。

那么我們將數(shù)據(jù)可以套入進(jìn)公式計(jì)算，人眼距離手機(jī)的具體通常是30cm左右，那么也就是說，正常情況下，在手機(jī)距離眼睛30cm左右，使用視角計(jì)算公式，我們能識(shí)別到的最低的文字大小為h= 2*30·tan(0.3/2) ≈ 0.157cm ，因?yàn)槲覀兘?jīng)常使用iPhone8的尺寸1334×750作為設(shè)計(jì)稿。iPhone8的dpi為324，也就是一英寸上顯示324個(gè)像素，1英寸為2.54cm，那么0.157cm=324*(0.157/2.54cm)= 20px

所以也就是正常情況下我們?cè)谠O(shè)計(jì)稿中使用最小號(hào)的字號(hào)時(shí)，一定不能低于20px。

2.字號(hào)使用原子理論

而我們?cè)谧鲈O(shè)計(jì)時(shí)，字號(hào)的單位需遵循原子理論，也就是使用一個(gè)基數(shù)作為倍增，如2、4、6、8、10? 或者3、6、9、12。但其實(shí)我們?cè)谧鲆苿?dòng)端設(shè)計(jì)時(shí)，單位需要遵循偶數(shù)原則，因?yàn)殚_發(fā)中的單位是以一倍圖的基數(shù)來進(jìn)行計(jì)算。那么其實(shí)在制定字體規(guī)范中，使用2為單位會(huì)導(dǎo)致字號(hào)過多，不易管理，且2號(hào)字體的差異化不大。

所以在字號(hào)方面我們使用4作為單位是比較合適的：一是適配后在@2x跟@3x不會(huì)出現(xiàn)半像素，二是使用4為單位，能滿足字體大小的均衡。那么我們則可以制定相應(yīng)的字體單位：

3.使用大字號(hào)作為標(biāo)題

隨著設(shè)計(jì)行業(yè)的發(fā)展，對(duì)于視覺的理解進(jìn)步，現(xiàn)在更多設(shè)計(jì)師更愿意使用大號(hào)字體，大間距，來區(qū)分頁面層級(jí)的信息。因?yàn)榇筇?hào)的字體閱讀起來更為舒適，能精準(zhǔn)快速的傳達(dá)信息，提升閱讀效率，降低視覺疲勞。

所以大家在平時(shí)項(xiàng)目中，也不妨大膽的使用一下大字號(hào)字體來作為主標(biāo)題，拉大頁面不同信息的層級(jí)關(guān)系。

五、合理配置字體拉開層級(jí)關(guān)系

在移動(dòng)端的界面設(shè)計(jì)中，除了前幾篇文章講的使用間距網(wǎng)格來拉開不同內(nèi)容的層級(jí)外，對(duì)字體樣式進(jìn)行適當(dāng)?shù)恼{(diào)整也是個(gè)很不錯(cuò)的選擇。通過調(diào)整字重、字色，能讓頁面的視覺邏輯變?yōu)楦拥那逦髁?，主次分明，降低因視覺給用戶帶來的干擾，提升頁面的可操作性。

那么我們?nèi)绾蝸碓O(shè)定這兩塊呢？

1.盡量減少頁面中的不同色相的顏色數(shù)量

在日常界面設(shè)計(jì)的需求中，有些較為重要的字段，可能業(yè)務(wù)方為了突出，第一時(shí)間，想到的就是把字體標(biāo)紅處理，或者添加各類各樣，五花八門的顏色。但其實(shí)往往這樣的設(shè)計(jì)，在最后上線后的效果，反而容易適得其反，因?yàn)轭伾^多，而導(dǎo)致頁面缺乏重點(diǎn)，視覺疲勞，反而增加了頁面的跳出率，難以取得想要的效果。

經(jīng)過調(diào)研顯示：頁面越干凈，越整潔，頁面的跳出率越低，而這套規(guī)則幾乎適用于所有的界面設(shè)計(jì)。

所以字體顏色這塊，顏色種類不宜過多。可以考慮通過使用同色系中的不同明度，來對(duì)不同層級(jí)字段進(jìn)行差異化處理。我們可以通過先確認(rèn)主色，再對(duì)主色進(jìn)行名都延展，來適配多場(chǎng)景的文字顏色。配置好相應(yīng)的色板之后，可以再根據(jù)頁面層級(jí)關(guān)系對(duì)文字顏色進(jìn)行合適的填充。

2.使用不同的字重來區(qū)分內(nèi)容

為了更好的拉開不同信息之間的層級(jí)關(guān)系，除了配置顏色外，通過配合，使用不同字重的字體來對(duì)內(nèi)容進(jìn)行區(qū)分也是個(gè)很好的選擇。

使用較粗的字重來作為主標(biāo)題使用，細(xì)字重作為輔助信息，能更好的在單色環(huán)境中增加內(nèi)容的呼應(yīng)及對(duì)比，減少頁面中字體過度色的使用，從而能夠讓頁面更加的整潔，內(nèi)容清晰明了，降低頁面的跳出率。

例如我們較重要的信息，可使用較粗的字重，弱信息則細(xì)字重。比如以下的余額寶及京東小金庫界面，雖然兩個(gè)界面在留白方面都留有較大余地，但京東金融在于對(duì)字重的設(shè)定更為嚴(yán)謹(jǐn)，所以在于對(duì)層級(jí)關(guān)系的處理上京東要更勝一籌。

而不同的字重，給予用戶的感受也是截然不同的：較粗的字重往往傳達(dá)的感受比細(xì)體要更為莊重、踏實(shí)嚴(yán)謹(jǐn)，而細(xì)體則顯的更為活潑、有趣，給人愉快的感覺。

剛剛提到了字重的使用必要性，那么我們?nèi)绾味x字重呢？

如果字重沒有進(jìn)行規(guī)范使用，那么整個(gè)頁面的視覺邏輯則會(huì)變的更為混亂，所以往往這個(gè)時(shí)候，我們需要設(shè)計(jì)一個(gè)文字規(guī)范，例如主標(biāo)題使用什么樣的字重，正文字重樣式。仔細(xì)敲定整個(gè)文字的使用規(guī)則，并將規(guī)范延展到整個(gè)產(chǎn)品的頁面設(shè)計(jì)中來，也是統(tǒng)一產(chǎn)品視覺語言的重要部分。

比如京東在價(jià)格字體方面，使用了獨(dú)立設(shè)計(jì)的一套品牌專有字體，而價(jià)格在電商中是一個(gè)極為重要的信息，通過統(tǒng)一字體，能很好的提升品牌歸屬感。

3.Sketch-Text Style提高協(xié)作效率

sketch在于對(duì)文字管理這塊，做了一個(gè) Text Style 樣式，通過Text Style，能很好的提高效率，規(guī)范頁面字號(hào)的大小。如果設(shè)計(jì)團(tuán)隊(duì)成員均使用Sketch作為主力使用工具，那么不妨嘗試配置一下這塊，提高團(tuán)隊(duì)協(xié)作效率。一方面可以統(tǒng)一規(guī)范頁面的字體樣式，另一方面免去了調(diào)整字體的時(shí)間，減少不必要的工作量。

六、字體運(yùn)用發(fā)展趨勢(shì)&總結(jié)

從iOS 11 更新就不難看出，目前界面風(fēng)格的趨勢(shì)都是偏向于更為簡(jiǎn)潔化，在一屏的內(nèi)容里做減法，這樣有利于降低閱讀負(fù)擔(dān)，將重要的信息更好的展示。在這里，我分別對(duì)字體進(jìn)行了梳理，分析下來，近期的字體使用特征主要有如下三點(diǎn)：

1.更大、更粗的標(biāo)題

大標(biāo)題能很好的吸引視線，第一時(shí)間抓住眼球，傳遞信息。拉大頁面空間的張力，降低視覺閱讀疲勞。

2.字重層級(jí)更為明顯

通過字重的差異化顯示，能更好的在單色環(huán)境中增加內(nèi)容的呼應(yīng)及對(duì)比，減少頁面中字體過度色的使用，從而能夠讓頁面更加的整潔，內(nèi)容清晰明了，降低頁面跳出率。

3.用字體明度做內(nèi)容上的信息區(qū)分

使用單一色相的不同明度作為字體及圖標(biāo)的顏色，能夠在區(qū)分信息層級(jí)的基礎(chǔ)上，能讓頁面顯得更為整潔，降低視覺干擾。

七、字體使用總結(jié)

互聯(lián)網(wǎng)在進(jìn)步，所以設(shè)計(jì)趨勢(shì)也是有著各種各樣不同的形式，而字體作為基本語言，是設(shè)計(jì)師需要掌握的基本技能之一。這篇文章里面的案例花了作者大量時(shí)間進(jìn)行繪制&收集，希望能對(duì)各位讀者有所幫助。

另外其實(shí)在工作中，也建議大家對(duì)自己的經(jīng)驗(yàn)進(jìn)行總結(jié)，對(duì)關(guān)鍵信息進(jìn)行提煉加以沉淀，一方面能讓自己的知識(shí)更加牢固，另一方面也可以幫助后來者進(jìn)行成長(zhǎng)。

————–

第一次嘗試在人人都是產(chǎn)品經(jīng)理上發(fā)表專欄，內(nèi)心表示很忐忑。

閱文雖易，寫作不易！文章較長(zhǎng)，非常感謝您的耐心閱讀。如果對(duì)文章感興趣，也可以在這里通過留下一個(gè)小贊或者留言來支持作者！后面會(huì)經(jīng)常給大家?guī)硪黄恼?，也可以通過訂閱作者的專欄，來獲得知識(shí)的傳遞，謝謝大家！

本文由 @A.kun阿坤 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 pexels，基于CCO協(xié)議