1. 漢字使用的歷史與現(xiàn)狀

在人類發(fā)展歷程中，文字作為信息傳播的載體，具有承上啟下的重要作用。漢字是世界上使用時(shí)間最長、使用范圍最廣、使用范圍最廣的文字。大約在6000年前，開始出現(xiàn)齊整、規(guī)范的具有文字初步特征的圖形符號。

后期，漢字經(jīng)歷了篆、隸、楷等多元化發(fā)展，百花齊放。自從木版印刷流行以來，雕刀刻出的字因?yàn)闄M細(xì)豎粗，醒目易讀，得到了廣泛的應(yīng)用。因?yàn)榛钭钟∷r(shí)，首尾會有墨渣，所以會刻意留下一些裝飾，讓墨汁溢出。

后來這種裝飾也被保留了下來，經(jīng)過字體的優(yōu)化，就成了我們今天仍然廣泛使用的宋體。時(shí)至今日，特別是在體制內(nèi)，宋體仍然占有很大的地位。

后來人們模仿宋體的結(jié)構(gòu)對字體進(jìn)行調(diào)整，變成了筆畫粗細(xì)一致、細(xì)而長的印刷字體，也就是我們今天所說的“仿宋”。

與此同時(shí)，“黑體”也誕生了。由于該字體醒目大方，粗細(xì)一致，結(jié)構(gòu)醒目嚴(yán)密，字形規(guī)整，閱讀方便，所以是現(xiàn)今界面設(shè)計(jì)中最常用的字體?，F(xiàn)代漢字黑體是現(xiàn)代印刷技術(shù)傳入東方后，以西方無襯線字體黑體為基礎(chǔ)而創(chuàng)制的。因此，按照西方的說法，黑體也可以稱為無襯線字體，宋體可以稱為襯線字體。

近代以來，隨著互聯(lián)網(wǎng)的興起，LED顯示屏中的字體也有了很大的發(fā)展。

早期顯示屏差，分辨率低sketch標(biāo)注插件，屏幕色彩少，漢字筆畫多，小黑體清晰度差，所以一般用于文章的重要標(biāo)題。為了匹配低分辨率下的像素網(wǎng)格，對宋體字體進(jìn)行了調(diào)整。調(diào)整后的字體在低分辨率下，在小點(diǎn)陣中也能很好的顯示，識別度高。開啟后，字體的識別性能得到了很好的保證。所以在互聯(lián)網(wǎng)早期，襯線字體一直占據(jù)互聯(lián)網(wǎng)的主導(dǎo)地位。

直到屏幕顯示效果的提升，粗體才逐漸流行起來。在屏幕分辨率較高的情況下，粗體已經(jīng)可以達(dá)到更好的識別效果，因此原有的襯線功能就不再需要了。相反，襯線字體在閱讀時(shí)容易因裝飾元素過多而產(chǎn)生視覺疲勞。因此在屏幕密度較高的移動(dòng)載體上，無襯線粗體成功取代襯線字體占據(jù)了主導(dǎo)地位。

修改后的黑色字體中心更加開闊，間距更加均勻，顯示更加舒適，醒目易讀，更利于視覺信息的傳遞，在屏幕上占據(jù)主導(dǎo)地位。幾大互聯(lián)網(wǎng)巨頭微軟雅黑、蘋果此后分別斥巨資為自家的OS系統(tǒng)打造了微軟雅黑和蘋果方正。因此通過分析可以看出，在未來的界面設(shè)計(jì)中，字體風(fēng)格仍將以無襯線字體為主，字體形狀甚至可能進(jìn)一步簡化。

二、iOS系統(tǒng)字體詳解 1、默認(rèn)字體- Han Sans/Robot

為了更好地追求視覺效果，提升設(shè)備端的用戶體驗(yàn)，靜雄與Adobe 合作推出了 Han Sans（Noto）作為中文字體。

字體的字形比較穩(wěn)定，閱讀起來比較輕松，并且有7種不同的粗細(xì)，完全滿足不同場景下的設(shè)計(jì)需求。7種粗細(xì)分別是：Thin、Light、Bold和Black。對于英文，Robot作為基礎(chǔ)字體，只有6種粗細(xì)：Thin、Light、Bold和Black。視覺語言與 Han Sans Noto保持一致。

另外官方手冊也給出了標(biāo)準(zhǔn)字體大小，字體單位中不再使用px、pt作為單位，而是統(tǒng)一使用sp，換算方法為：

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

按照1334×750的尺寸密度，1dp = 1 * 326/160 ≈ 2px

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

在 iOS 中，蘋果為中文添加了新字體，該字體居中纖細(xì)飽滿，易于閱讀，并提供了 6 種字重供設(shè)計(jì)師和開發(fā)者使用。因此在隨后的設(shè)計(jì)趨勢中，字重的使用更加多樣化，使用中等粗體大號字體作為界面標(biāo)題變得更加流行，這在 iOS 11 中的一些原生界面和一些知名應(yīng)用中更為明顯。

英文部分采用 San 字體，除了 iOS 和 Mac OS 之外，該字體也針對 Watch OS 進(jìn)行了單獨(dú)調(diào)整，并命名為 San。每款字體分為 Text 和 Apple Watch 兩個(gè)屬性，Text 只有 6 種粗細(xì)，而 Apple Watch 則有 9 種粗細(xì)。

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

通過對比我們可以發(fā)現(xiàn)：其實(shí)字體形態(tài)和iOS并沒有太大區(qū)別，所以沒必要下載所有字體進(jìn)行單獨(dú)配置。所以在日常工作中我們只需要按照一套標(biāo)準(zhǔn)的iOS設(shè)計(jì)稿進(jìn)行輸出，自動(dòng)進(jìn)行延展，最后檢查確認(rèn)效果即可。

如果使用了標(biāo)準(zhǔn)字體以外的字體，除了顏色之外，還應(yīng)該標(biāo)注相應(yīng)的字體粗細(xì)和高度（如 Font:SC-，line:52px），而不是單純的標(biāo)注為粗體或者細(xì)體。當(dāng)然，如果人力允許，我們也可以單獨(dú)做界面和字體的適配，以提升終端的視覺顯示效果。

3.字體基本屬性詳解

在正常項(xiàng)目中，為了讓頁面上的字體更加貼合業(yè)務(wù)場景，需要調(diào)整字體間距和高度。但很多同學(xué)在輸出批注時(shí)，往往只標(biāo)注了字體大小和顏色，而其他參數(shù)沒有標(biāo)注或者標(biāo)注錯(cuò)誤。在最終進(jìn)行視覺還原審核時(shí)，字體往往出現(xiàn)較大偏差，在視覺檢測上浪費(fèi)了大量不必要的工作。

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

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

一般來說，為了保持字體的完整顯示，字體設(shè)計(jì)師都會給字體預(yù)留一定的安全距離，設(shè)置合適的上升部和下降部之間的距離，讓字體的顯示更加均衡。這里我標(biāo)注了對應(yīng)的線圖：

所以從這個(gè)圖我們可以看出，我們在設(shè)計(jì)的時(shí)候，可能對字體使用了28px，而我們用測量工具測量的時(shí)候，確實(shí)是28px，但是實(shí)際上字體本身占用的距離包含了上行和下行區(qū)域，導(dǎo)致占用的空間大于28px，變成了40px。所以我們標(biāo)注的時(shí)候，要按照實(shí)際的尺寸包括上行和下行，這樣還原出來的視覺效果也是非常接近設(shè)計(jì)稿的。

因此我們在設(shè)計(jì)輸出的時(shí)候，如果不調(diào)整行值，可以直接使用注解插件實(shí)時(shí)導(dǎo)出相應(yīng)的參數(shù)，這樣的參數(shù)最接近開發(fā)效果。如果沒有Mac，可以用PS選中文字，選中的深色背景就是字體本身的間距。

下圖中我做了兩個(gè)例子來說明正確的標(biāo)注方法，雖然標(biāo)注起來可能比較麻煩，但在視覺還原的時(shí)候往往能達(dá)到事半功倍的效果。

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

所以在一些文字比較多的頁面上，為了讓閱讀更加流暢，我們經(jīng)常需要調(diào)整文字的高度和間距。那么我們先來看一下動(dòng)效編程軟件中可以配置的參數(shù)。

我們可以發(fā)現(xiàn)，改變字符間距、字符寬度和結(jié)束高度只需要配置、行數(shù)、這三個(gè)值即可，所以我們先來了解一下這三個(gè)值的含義：

（1）：字間距

所謂字符間距就是兩個(gè)字符之間的距離，一般會加在字符的末尾。比如字符“AK”，其默認(rèn)值是0，所以兩個(gè)字符之間的間距就是字體默認(rèn)設(shè)置的安全距離。如果你設(shè)置了50的值，那么就會自動(dòng)在A的末尾加上50px，顯示效果就變成“AK”。

（2）行：行高

即字段在UI Lable中實(shí)際占用的高度大小。前面說了默認(rèn)字體會設(shè)置安全距離，所以設(shè)備中字段占用的行高=字體像素大小+升降安全距離+擴(kuò)展值。每種字體都有對應(yīng)設(shè)置的行高比例，可以通過選中字體監(jiān)聽行高值來查看。

另外，前面說過，標(biāo)注間距的時(shí)候一定要包含行值，否則實(shí)現(xiàn)的時(shí)候可能會出現(xiàn)字體偏移位置不等的情況。

（3）：行距

很多同學(xué)發(fā)現(xiàn)，調(diào)整這個(gè)參數(shù)跟調(diào)整行值類似，但其實(shí)調(diào)整的是兩行之間的間距，而不是單行字段所占的空間。

從上面我們可以了解到字體在實(shí)際設(shè)備中是如何排版的，所以一定要仔細(xì)標(biāo)記，如果發(fā)現(xiàn)開發(fā)出來的字體樣式和設(shè)計(jì)稿不一致，只需要提供上面的參數(shù)值即可。

如果你在一個(gè)團(tuán)隊(duì)中，仍然依賴手工注釋，那么完整的注釋應(yīng)該是：Font-name；Font-size；Font-color；Font-line；Font-；Font-。

若沒有設(shè)置的話，則留空即可，如：

4. 如何設(shè)置科學(xué)計(jì)數(shù)法字體大小

如今手機(jī)屏幕越來越大，分辨率越來越高，所以我們在設(shè)計(jì)的時(shí)候難免會為字體大小而感到困惑，文字是不是太小了？還是太大了不精致？標(biāo)題和正文是不是沒有區(qū)別？這樣的問題可能經(jīng)常困擾著一些年輕的設(shè)計(jì)師。

其實(shí)字體大小確實(shí)是有一套計(jì)算規(guī)則和公式的，今天我就給大家科普一下。

當(dāng)我們注視某些物體時(shí)，測量視角的方法是先測量物體的長寬以及眼睛與物體之間的距離，然后得出相應(yīng)的數(shù)學(xué)計(jì)算公式，其中：

θ=(·h/2d)2，換算一下h=2d·tan(θ/2)

1. 設(shè)計(jì)中最小的字體尺寸來自哪里？

就人眼的感光系統(tǒng)而言，一個(gè)像素相當(dāng)于0.3角分。為什么人眼看不清遠(yuǎn)處物體的細(xì)節(jié)？或者看不清月球上的隕石坑？那是因?yàn)樵虑蛟谀阋暰W(wǎng)膜上的影像，其實(shí)只是一張100像素左右的圖片，所以肉眼無法清晰地觀察到隕石坑。

據(jù)科學(xué)研究：

人眼要識別信息物體，眼睛的視角必須大于0.3°，才能保證投射到視網(wǎng)膜上的文字信息分辨率足夠大，才能被大腦識別。

那么我們就可以把數(shù)據(jù)代入公式進(jìn)行計(jì)算了，人眼與手機(jī)的距離一般在30cm左右，也就是說正常情況下，當(dāng)手機(jī)距離眼睛30cm左右時(shí)，利用可視角度計(jì)算公式，我們能識別的最低文字尺寸為h= 2*30·tan(0.3/2) ≈ 0.157cm，因?yàn)槲覀兘?jīng)常用1334×750的尺寸來做設(shè)計(jì)稿，dpi為324，也就是一英寸顯示324個(gè)像素，1英寸為2.54cm，所以0.157cm=324*(0.157/2.54cm)= 20px

所以正常情況下我們在設(shè)計(jì)稿中使用最小字體大小的時(shí)候，肯定不小于20px。

2. 使用原子理論來決定字體大小

我們在設(shè)計(jì)的時(shí)候，字號單位必須遵循原子理論，即使用一個(gè)基數(shù)作為倍數(shù)，比如 2、4、6、8、10 或者 3、6、9、12。但實(shí)際上我們在為移動(dòng)端設(shè)計(jì)的時(shí)候，單位必須遵循偶數(shù)原則，因?yàn)殚_發(fā)中的單位都是以一次性圖片的基數(shù)為基準(zhǔn)來計(jì)算的。所以實(shí)際上在制定字體規(guī)范的時(shí)候，以 2 為單位會導(dǎo)致字號過多，難以管理，而且 2 號字體的分化度本來就不大。

因此字體大小以 4 為單位是比較合適的：一來適配后不會出現(xiàn)@2x、@3x 處半個(gè)像素的情況，二來以 4 為單位可以滿足字體大小的均衡性。那么我們可以制定相應(yīng)的字體單位：

3. 使用大字體作為標(biāo)題

隨著設(shè)計(jì)行業(yè)的發(fā)展和視覺理解能力的提高，現(xiàn)在更多的設(shè)計(jì)師愿意使用大字體、大間距來在頁面層面區(qū)分信息。這是因?yàn)榇笞煮w閱讀起來更加舒適，能夠準(zhǔn)確、快速地傳達(dá)信息，提高閱讀效率，減少視覺疲勞。

因此，在日常的項(xiàng)目中，不妨大膽地使用大字體作為主標(biāo)題，以擴(kuò)大頁面不同信息之間的層級關(guān)系。

5.合理配置字體，打通層級關(guān)系

在移動(dòng)端界面設(shè)計(jì)中，除了之前文章中提到的利用間距網(wǎng)格來分隔不同的內(nèi)容層級之外，適當(dāng)調(diào)整字體樣式也是不錯(cuò)的選擇。通過調(diào)整字體粗細(xì)和顏色，可以讓頁面的視覺邏輯更加清晰，主次分明，減少對用戶的視覺干擾，提高頁面的可操作性。

那么我們該如何設(shè)置這兩者呢？

1. 盡量減少頁面上不同色調(diào)的數(shù)量

在日常的界面設(shè)計(jì)需求中，一些重要的字段可能會被業(yè)務(wù)方重點(diǎn)突出，他們首先想到的是用紅色標(biāo)注字體，或者加入各種顏色。但事實(shí)上這樣的設(shè)計(jì)在最終上線后往往適得其反，因?yàn)檫^多的顏色導(dǎo)致頁面缺乏焦點(diǎn)，視覺疲勞，頁面跳出率增加，難以達(dá)到預(yù)期的效果。

研究表明，頁面越干凈整潔，跳出率就越低。這個(gè)規(guī)律幾乎適用于所有的界面設(shè)計(jì)。

因此字體顏色不宜過多，可以考慮在同一個(gè)色系下使用不同的明度來區(qū)分不同層級的字段。通過先確定主色再擴(kuò)展主色的方式，可以適配多種場景的文字顏色，配置好對應(yīng)的色板后，再根據(jù)頁面層級適當(dāng)填充文字顏色即可。

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

為了更好地區(qū)分不同信息之間的層級關(guān)系，除了配置顏色外，使用不同粗細(xì)的字體來區(qū)分內(nèi)容也是不錯(cuò)的選擇。

使用較粗的字體作為主標(biāo)題，較淺的字體作為輔助信息，可以更好地增加單色環(huán)境下內(nèi)容的響應(yīng)和對比度，減少頁面上過多字體顏色的使用，從而使頁面更加整潔，內(nèi)容更加清晰，降低頁面跳出率。

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

不同的字體粗細(xì)給用戶的感受完全不同：較粗的字體往往比細(xì)的字體傳達(dá)出更莊重、實(shí)用和嚴(yán)謹(jǐn)?shù)母杏X，而細(xì)的字體則顯得更活潑、有趣，給人一種愉悅的感覺。

剛才我們提到了使用字體粗細(xì)的必要性，那么我們?nèi)绾味x字體粗細(xì)呢？

如果字體粗細(xì)使用不規(guī)范，整個(gè)頁面的視覺邏輯就會比較混亂，所以往往這個(gè)時(shí)候，我們需要設(shè)計(jì)一個(gè)文字標(biāo)準(zhǔn)，比如主標(biāo)題用什么字體粗細(xì)，正文用什么字體粗細(xì)樣式。認(rèn)真敲定整個(gè)文字的使用規(guī)則，并將標(biāo)準(zhǔn)延伸到整個(gè)產(chǎn)品頁面設(shè)計(jì)，也是統(tǒng)一產(chǎn)品視覺語言的重要一環(huán)。

例如京東在價(jià)格字體上采用了自主設(shè)計(jì)的一套品牌專屬字體，價(jià)格是電商中極其重要的信息，使用統(tǒng)一的字體可以大大增強(qiáng)品牌歸屬感。

3.-文本樣式提高協(xié)作效率

對于文本管理，創(chuàng)建了 Text Style。通過 Text Style，可以大大提高效率，規(guī)范頁面的字體大小。如果設(shè)計(jì)團(tuán)隊(duì)所有成員都使用它作為主要工具，那么不妨嘗試配置它，提高團(tuán)隊(duì)協(xié)作的效率。一方面可以規(guī)范頁面的字體樣式，另一方面節(jié)省調(diào)整字體的時(shí)間，減少不必要的工作量。

6. 字體應(yīng)用發(fā)展趨勢及總結(jié)

從 iOS 11 的更新不難看出，目前界面風(fēng)格的趨勢是更加簡潔，減少一屏內(nèi)容，有利于減輕閱讀負(fù)擔(dān)，更好地展示重要信息。這里我對字體進(jìn)行了單獨(dú)梳理，經(jīng)過分析，近期字體使用特點(diǎn)主要有以下三點(diǎn)：

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

大標(biāo)題可以吸引注意力，抓取眼球并傳達(dá)信息，增加頁面空間的張力，減少視覺閱讀疲勞。

2. 字體粗細(xì)層次更加明顯

通過顯示差異化的字體粗細(xì)，可以更好地增加單色環(huán)境下內(nèi)容的響應(yīng)和對比度，減少頁面上過多字體顏色的使用，使得頁面更加整潔，內(nèi)容更加清晰，降低頁面跳出率。

3. 使用字體亮度來區(qū)分內(nèi)容中的信息

使用單一色調(diào)的不同亮度作為字體和圖標(biāo)的顏色，可以使頁面顯得更加整潔，并在區(qū)分信息層次的同時(shí)減少視覺噪音。

7.字體使用總結(jié)

互聯(lián)網(wǎng)在進(jìn)步，設(shè)計(jì)潮流也有各種表現(xiàn)形式，而字體作為基礎(chǔ)語言sketch標(biāo)注插件，是設(shè)計(jì)師需要掌握的基本技能之一。本文中的案例是作者花費(fèi)大量時(shí)間繪制和收集的，希望對各位讀者有所幫助。

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

————–

這是我第一次嘗試發(fā)表《人人都是產(chǎn)品經(jīng)理》的專欄，心里非常緊張。

讀起來容易，寫起來不容易！文章很長，非常感謝大家的耐心閱讀。如果大家對文章感興趣，也可以在這里點(diǎn)個(gè)小贊或者留言支持作者！以后我會經(jīng)常給大家?guī)砦恼?，也可以訂閱作者的專欄，獲取知識的傳遞。謝謝！

如有侵權(quán)請聯(lián)系刪除！