前言
文字是設(shè)計中的重要組成部分，就像我們平時看到的海報，里面各種被精心設(shè)計過的字體經(jīng)常會成為視覺焦點，以醒目且個性化方式傳達(dá)出內(nèi)容的精髓，最后達(dá)到的效果事半功倍。
雖然在UI設(shè)計中不需要對文字過分設(shè)計，但圖文作為主要的傳播途徑，字體的使用是否規(guī)范合理將直接影響著信息傳播的優(yōu)先級、重要程度以及用戶的接收質(zhì)量和效率。所以不管是平面設(shè)計還是UI設(shè)計，字體都是不可忽視的核心元素，做好對文字信息層級的處理，對用戶的視覺體驗有著至關(guān)重要的作用。
互聯(lián)網(wǎng)經(jīng)過多年的發(fā)展，也積累的很多的專業(yè)字體知識，設(shè)計師應(yīng)該去了解字體的性格及特征并將其合理運用，才能將信息更清晰的傳達(dá)給用戶。本文將圍繞著字型、字號、字距、字重等幾個屬性，針對各方面深度解析，希望能夠幫到大家。
分享目錄
一、字體的基本特征
二、字體的基本屬性
三、不同場景下的屬性參考
四、字體使用基本原則
五、UI設(shè)計需注意的問題
六、結(jié)語
一、字體的基本特征
1、使用前的思考
文字是信息內(nèi)容的載體，能最直接的將信息清晰的表達(dá)出來，字體則表現(xiàn)了文字的外在特征，合理的使用這些屬性特征不僅能清晰準(zhǔn)確的傳遞信息、用于特定場景還能賦予情感表達(dá)，展現(xiàn)出獨特的魅力，例如：健身、器械類的產(chǎn)品使用的字體通常會給人一種力量、剛硬、壯實的感覺，而女性專用產(chǎn)品字體則顯的纖細(xì)、苗條。
2.為什么要使用黑體
不同類型的字體傳達(dá)出不同的氣質(zhì)，綜合來講，字體可分為黑體、宋體、圓體、書法體這四類，平時大家看到的各種形形色色的其他字體，基本是通過這幾類延伸而來。
在UI設(shè)計中，絕大多數(shù)的文字排版用的是黑體，諸如思源黑體、阿里巴巴普惠體、蘋方（ios）、微軟雅黑（PC web）等都是標(biāo)準(zhǔn)的黑體。另外，特定場景如瓷片區(qū)、卡片、banner、專題頭圖、引導(dǎo)頁、閃屏等，對于用什么字體不會有太大的限制，在避免商用侵權(quán)的前提下符合產(chǎn)品氣質(zhì)即可。
黑體字的筆畫橫平豎直、粗細(xì)均勻且字面呈正方形，一般來說，沒有襯線的字體都可以稱作黑體。黑體結(jié)構(gòu)清晰、簡潔有力，能讓界面顯得莊重還附有現(xiàn)代感，雖然氣質(zhì)上沒有太大的個性化、但可塑性很強(qiáng)，這也是在UI設(shè)計中、黑體一直很受青睞的原因，無論是標(biāo)題、正文、提示等使用場景都可以作為首選，對老設(shè)計師能多一個選擇、新手設(shè)計師也不易犯錯。
3.iOS與Android的區(qū)別
iOS與Android是移動設(shè)備的兩大系統(tǒng)，雖然很多設(shè)計師用一稿適配兩端、遇到特殊頁面也只是單獨拎出來微調(diào)即可，但對于中、大型的互聯(lián)網(wǎng)公司則很難滿足優(yōu)質(zhì)用戶體驗中的部分細(xì)微差別，例如：iOS的蘋方字體在Android設(shè)備中無法高度還原、預(yù)留的文字?jǐn)?shù)量上限位置無法顯示完整等，都會影響用戶體驗。
此外，iOS和Android都有自己獨立的設(shè)計規(guī)范，大家有時間的可自行查看，本文只對字體規(guī)范作基本了解。
iOS使用的是「蘋方」字體，提供了6個字重，英文字體為「San Francisco」；Android使用的是Google聯(lián)合Adobe發(fā)布的「思源黑體」，為充分滿足設(shè)計要求，提供了7個字重，英文字體為「Roboto」。
此外，如果界面中涉及的數(shù)據(jù)較多，數(shù)字使用DIN字體也是不錯的選擇，字體外形較長，易用且耐看，很適合數(shù)據(jù)統(tǒng)計展示，不過這款字體商用的話需要收費的。
二、字體的基本屬性
1.字體大小
字號的大小決定信息的層次和權(quán)重，不規(guī)律的使用字號會讓頁面信息雜亂，不利于用戶閱讀。在設(shè)定字號規(guī)范時，需特別注意最小值和遞增值。
最小值決定信息的可讀性，以2倍圖為例，iOS11系統(tǒng)將最小字號規(guī)范為11pt（22px），但很多產(chǎn)品依然將最小字號設(shè)定為20px，甚至部分產(chǎn)品將18px的數(shù)字加粗運用在標(biāo)簽中，所以最小字號的設(shè)定并沒有固定數(shù)值，原則上不影響用戶的瀏覽就行。筆者建議最小字號不要低于20px，在設(shè)計過程中，可以通過設(shè)備實時預(yù)覽，因為同樣的字號在不同的環(huán)境、色值、背景下，其視覺效果都有所區(qū)別。
其次，遞增值決定著信息層級區(qū)分的明顯程度，遵循字號越大、遞增值越大的原則，常用字號數(shù)量控制在6種左右。iOS和Android都是采用的2倍數(shù)柵格系統(tǒng)，為了讓字號的層級區(qū)分更明顯，字號設(shè)定要避開奇數(shù)且最小遞增值不要低于4px，下面舉幾個常見的例子：
①：20、24、28、32、40、48、64...
②：20、24、30、36、42、48、64...
③：22、26、30、34、40、48、60...
...
規(guī)范好的字號該如何使用，還得根據(jù)界面中的實際場景來決定，如下圖：
2.字符間距
字間距是指兩個字符之間的橫向間隔距離，在界面排版中，除了西文的字間距調(diào)整需求較大外，中文通常只保持默認(rèn)，只有少數(shù)場景才會手動調(diào)整，且沒有固定的規(guī)律，保持視覺舒適狀態(tài)即可。例如：banner、界面大標(biāo)題、重要數(shù)字（取件碼）顯示等。
3.行高
行高是指包圍在字體之外的隱形邊框，一個字體元素的的行高等于文字上邊框+下邊框+字號的高度之和。
西文字體因高度的參差不齊，本身就能制造出視覺上的上下空間，通常行高為字號的1.2倍，而中文字體沒有上下間隙的延伸，行高則較大，一般在1.5倍左右，如果字號較小且折行較多，行高甚至能達(dá)到字號的2倍。
4.字重
字重指的是字體的粗細(xì)，不同的字重能體現(xiàn)出不同的層級關(guān)系，給用戶的視覺感受也截然不同。
像蘋方、思源、阿里巴巴普惠這些家族字體一般都會有極細(xì)體、細(xì)體、常規(guī)體、黑體、粗體等多個字重，在UI設(shè)計中，實用的就常規(guī)體、加粗兩個字重，再通過色彩、字號使其成為對立關(guān)系，明顯的拉開文字內(nèi)容層級后，方能保持良好的瀏覽體驗。
5.全角與半角
這種主要針對標(biāo)點符號，以英文字母為標(biāo)準(zhǔn)，半角是指一個符號占用一個標(biāo)準(zhǔn)字符（英文）的位置，全角則是占用兩個字符位置。
眾所周知，中文使用都是全角、英文使用半角，并且會隨著中/英文的切換而自動改變，但有時候難免會操作失誤讓頁面中的某處信息看著怪怪的卻不明所以、另外中文信息中的時間/日期也大多會使用半角符號，所以設(shè)計師對此有一定的了解時候、，在處理這些細(xì)枝末節(jié)就能做到收放自如。
三、不同場景下的屬性參考
在色彩規(guī)范中，除主/輔助色之外，設(shè)計師還會提供3~4個等級的配色，如通用的#333（標(biāo)題）、#666（正文）、#999（提示）、#ccc（占位符），這也是UI通用的文字色用色規(guī)范，不同的字號需用色規(guī)律。
如果想進(jìn)一步延展，可以增加一點品牌色，也可以使用#000（純黑）調(diào)整不透明度來體現(xiàn)文字色彩層級，深色模式中很常見，下面我們一起來了解幾個常見的使用場景。
1.標(biāo)題
標(biāo)題的主要作用是讓用戶以最快的速度了解界面主要信息，需要時刻吸引用戶的注意力，例如APP中的導(dǎo)航欄、模塊標(biāo)題、內(nèi)容標(biāo)題、數(shù)據(jù)統(tǒng)計等。需要簡單明了且有沖擊力，字號一般會控制在30px以上并加粗顯示，直接使用一級色值（#333）即可。
在特殊場景下，標(biāo)題也可以使用主體色值，但一定要注意容器背景與其他信息色彩的協(xié)調(diào)，不然花里胡哨的還不如用回一級色值。
2.正文
正文并不需要吸引用戶注意力，它主要是提供標(biāo)題的注釋或內(nèi)容的詳細(xì)說明。
當(dāng)白色背景文本內(nèi)容過多、在需要用戶仔細(xì)閱讀的情況下，一定要注意顏色不能太深，不然顯的主次不分，還有些刺眼，這里推薦26~30px字號使用二級文字（#666）色值。
3.提示語
提示類文字使用場景就相對較多，它除了給用戶展示當(dāng)前狀態(tài)，還能給予合理的引導(dǎo)，促進(jìn)用戶進(jìn)行下一步操作。常見使用色值為三級（#999）、四級色值（#ccc），例如界面中的操作注意事項、表單占位符等。字號一般為24px，因使用場景不同，也會有特殊的存在，例如表單中占位符的字號會跟隨輸入后的字號統(tǒng)一。
4.超鏈接
超鏈接在字號、色值上沒有一定的限制，但需要一個特定的輔助元素/屬性來提示用戶這是可點擊的。
例如APP登錄頁面，找回密碼、注冊、獲取驗證碼等，大部分都是用主體色、圖標(biāo)（右箭頭）等方式強(qiáng)化可操作入口，而PC端網(wǎng)頁中超鏈接的表現(xiàn)方式，下劃線、藍(lán)色字體、>>這三種方式幾乎能涵蓋所有。
5.其他
規(guī)范并非不可更改，它只能幫助設(shè)計師在大部分使用場景中減少設(shè)計出入并提高產(chǎn)出效率，但總有一些使用場景需特殊對待，字體也不例外，如以下場景：
◇ APP金剛區(qū)入口字體大多使用24px，一級色值（#333）；
◇ 底部Tab欄字體未激活使用淺色，激活后切換為一級色值（#333）或主體色；
◇ 重量級的提示語用紅色色值；
◇ 按鈕中的文字跟隨按鈕的等級權(quán)重變化；
◇ 深色容器標(biāo)簽的文字反白；
◇ ......
四、字體使用基本原則
1.符合產(chǎn)品氣質(zhì)
雖說黑體（蘋方、思源、阿里巴巴普惠）是UI設(shè)計中的首選字體，但這也僅僅只是建立在不出錯的的情況下、滿足基本條件而選擇，如果想表達(dá)出產(chǎn)品的類型、情感、氣質(zhì)等品牌屬性，在不影響用戶識別的前提下，可選擇一款符合產(chǎn)品氣質(zhì)的字體，打造出差異化的瀏覽體驗，對于追求完美的APP來時是一個不錯的解決方案。
例如，部分藝術(shù)、女性類的APP會選擇使用宋體，整體看起來有一種高端、時尚且優(yōu)雅的感覺。
整體界面使用特殊字體還是相對較少，為了更好的體現(xiàn)出產(chǎn)品屬性/風(fēng)格，將其融入不同的模塊及使用場景，會讓產(chǎn)品更有特色，例如banner、瓷片區(qū)、大標(biāo)題、頭圖等，對用戶的視覺吸引力能得到很大提升。
2.使用同一家族字體
在一個APP中，堅持使用同一個家族的字體，對標(biāo)題、正文等文字信息有一個統(tǒng)一的視覺規(guī)劃，這樣有助于建立起體系化的設(shè)計思路，避免在開發(fā)落地時存在一致性問題，減少開發(fā)與設(shè)計的出入。
筆者曾見過這樣的設(shè)計師，界面中原本用了「蘋方」字體，在一個特殊場景下，「蘋方」的粗體字重?zé)o法滿足大標(biāo)題的使用需求，于是將大標(biāo)題單獨改為「阿里巴巴普惠體」的最大字重。
從表面上看，上述的設(shè)計需求是滿足了，但稍有不慎就會成為沒有價值的藝術(shù)品，首先，單獨一處使用不同家族的字體，會影響整體視覺的一致性；其次，若程序沒有嵌入另外的字體，產(chǎn)品落地后其視覺效果毫無改觀，且更沒有必要為了某個場景的使用要單獨嵌入幾十到幾百兆的家族字體，讓應(yīng)用安裝包無故加大。在設(shè)計中，有時候在解決某個問題時，解決方案并非無可替代，加粗字體亦是如此。
另外，在可用性、實用性強(qiáng)且必要的情況下，并非不能再增加一個家族字體，例如所有標(biāo)題系列使用「阿里巴巴普惠體」、數(shù)字系列都使用「DIN」，前提是一定要形成體系化，并非某一處的使用。
3.明確的信息層級
在同一個界面中，字體色值、字號、字重等，都是用于區(qū)分信息層級，盡量不要使用過多的層級，避免層級混亂影響信息瀏覽。
在信息層級處理方式的四個基本原則中，「對比」就是將復(fù)雜的信息通過元素的各種屬性以不同的視覺效果呈現(xiàn)，來體現(xiàn)信息節(jié)奏感，并非是為了好看而隨意給文字賦予各種屬性及樣式效果。
五、UI設(shè)計需注意的問題
1.避頭尾的使用
避頭尾使用在文字內(nèi)容較多的折行場景中，主要處理標(biāo)點符號剛好出現(xiàn)在一行文字的開頭或結(jié)尾時，通過自動調(diào)整單行的字符間距、在視覺上將標(biāo)點符號前移或后移。
在新聞資訊類應(yīng)用的詳情頁中，避頭尾使用的較多，用以避免頭/尾存在標(biāo)點符號造成視覺重量不一、信息參差不齊的問題出現(xiàn)。
2.反差體現(xiàn)層級
很多時候，為了區(qū)分信息層級，首先想到的是利用不同的字號、字重來體現(xiàn)，這當(dāng)然沒有問題，但如果結(jié)合字體的明暗關(guān)系（灰度色值等級）則效果更佳。
如下圖：標(biāo)題一級色值（#333）、正文二級色值（#666）、時間日期三級色值（#999）。
3.備用字體
備用字體只會運用在web頁面中，如果網(wǎng)站需要一款特殊的字體才能彰顯其獨特的氣質(zhì)、同時又擔(dān)心用戶在某些設(shè)備中因為沒有這個字體而無法瀏覽其效果，則會另外再選擇一款相近的通用字體作為備選，以彌補視覺體驗上的損失。
如果字體包不大，也可以讓開發(fā)將其放在服務(wù)器端，這樣能讓所有用戶都能看到相同的效果，省去了不少麻煩。
4.確保可讀性
可讀性應(yīng)該是選擇字體的首要元素，雖說很多文字我們都可以從前后字義、聯(lián)想詞等角度將自己的理解補充完整，但完全沒有必要。
UI設(shè)計不像海報那樣融入較多的藝術(shù)成分，更需要的是內(nèi)容清晰、表意明確、高效率的傳達(dá)，任何增加用戶閱讀、理解成本的做法都應(yīng)該規(guī)避掉，例如過于變形的可愛風(fēng)格、書法手寫體等都盡量少用。
六、結(jié)語
文本內(nèi)容是UI界面中占比較多的元素之一，設(shè)計師需要對其基本屬性及使用場景有一個清晰的了解，使用的是否恰當(dāng)取決于我們對字體的選擇。雖說在UI領(lǐng)域，字體模塊類的文章比較少（更多是文字、字庫的設(shè)計），但它在設(shè)計規(guī)范中的地位是舉足輕重，選好一款字體對設(shè)計來說是錦上添花。
關(guān)于UI界面中的字體，其實沒有太多的講究，也沒必要整得花里胡哨，重點在于排版過重中注意信息層級的劃分以及有足夠的視覺舒適度即可。
作者：大漠飛鷹CYSJ 來源：站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
字體不僅僅是一個字體，同時還是一個溝通工具。三星這款字體不僅用在數(shù)字廣告，還包括印刷上，這個字體承載了三星對于未來的突破。三星不再是只有產(chǎn)品線，而是成為時尚生活品牌。
▲清晰可擴(kuò)展：各種場景的拓展性這塊需要能適用。
這樣的版式結(jié)構(gòu)在全球官網(wǎng)設(shè)計都是類似，和蘋果的上下排版不同。版式字體上也是通過字重來凸顯視覺層級。
三星的產(chǎn)品圖片，色調(diào)都是以生活化，貼近生活為主，無論手機(jī)還是電器。
