在互動設計中，字型的呈現方式是提升資訊傳遞效率的重要一環，文字資訊層級的處理是否得當，一定程度上會對使用者的視覺體驗有着重要影響。那麼在字型設計上，設計師或者相應的業務人員應該如何做好處理，以提升資訊傳播的效率和品質？不如來看看作者的總結吧。
文字是設計中的重要組成部分，就像我們平時看到的海報，裡面各種被精心設計過的字型經常會成為視覺焦點，以醒目且個性化方式傳達出内容的精髓，最後達到的效果事半功倍。
雖然在UI設計中不需要對文字過分設計，但圖文作為主要的傳播途徑，字型的使用是否規範合理将直接影響着資訊傳播的優先級、重要程度以及使用者的接收品質和效率。是以不管是平面設計還是UI設計，字型都是不可忽視的核心元素，做好對文字資訊層級的處理，對使用者的視覺體驗有着至關重要的作用。
網際網路經過多年的發展，也積累的很多的專業字型知識，設計師應該去了解字型的性格及特征并将其合理運用，才能将資訊更清晰地傳達給使用者。本文将圍繞着字型、字号、字距、字重等幾個屬性，針對各方面深度解析，希望能夠幫到大家。
一、字型的基本特征
1. 使用前的思考
文字是資訊内容的載體，能最直接的将資訊清晰地表達出來，字型則表現了文字的外在特征，合理地使用這些屬性特征不僅能清晰準确地傳遞資訊、用于特定場景還能賦予情感表達，展現出獨特的魅力，例如：健身、器械類的産品使用的字型通常會給人一種力量、剛硬、壯實的感覺，而女性專用産品字型則顯的纖細、苗條。
2. 為什麼要使用黑體
不同類型的字型傳達出不同的氣質，綜合來講，字型可分為黑體、宋體、圓體、書法體這四類，平時大家看到的各種形形色色的其他字型，基本是通過這幾類延伸而來。
在UI設計中，絕大多數的文字排版用的是黑體，諸如思源黑體、阿裡巴巴普惠體、蘋方（ios）、微軟雅黑（PC web）等都是标準的黑體。另外，特定場景如瓷片區、卡片、banner、專題頭圖、引導頁、閃屏等，對于用什麼字型不會有太大的限制，在避免商用侵權的前提下符合産品氣質即可。
黑體字的筆畫橫平豎直、粗細均勻且字面呈正方形，一般來說，沒有襯線的字型都可以稱作黑體。黑體結構清晰、簡潔有力，能讓界面顯得莊重還附有現代感，雖然氣質上沒有太大的個性化、但可塑性很強，這也是在UI設計中、黑體一直很受青睐的原因，無論是标題、正文、提示等使用場景都可以作為首選，對老設計師能多一個選擇、新手設計師也不易犯錯。
3. iOS與Android的差別
iOS與Android是移動裝置的兩大系統，雖然很多設計師用一稿适配兩端、遇到特殊頁面也隻是單獨拎出來微調即可，但對于中、大型的網際網路公司則很難滿足優質使用者體驗中的部分細微差别，例如：iOS的蘋方字型在Android裝置中無法高度還原、預留的文字數量上限位置無法顯示完整等，都會影響使用者體驗。
此外，iOS和Android都有自己獨立的設計規範，大家有時間的可自行檢視，本文隻對字型規範作基本了解。
iOS使用的是「蘋方」字型，提供了6個字重，英文字型為「San Francisco」；Android使用的是Google聯合Adobe釋出的「思源黑體」，為充分滿足設計要求，提供了7個字重，英文字型為「Roboto」。
此外，如果界面中涉及的資料較多，數字使用DIN字型也是不錯的選擇，字型外形較長，易用且耐看，很适合資料統計展示，不過這款字型商用的話需要收費的。
二、字型的基本屬性
1. 字型大小
字号的大小決定資訊的層次和權重，不規律的使用字号會讓頁面資訊雜亂，不利于使用者閱讀。在設定字号規範時，需特别注意最小值和遞增值。
最小值決定資訊的可讀性，以2倍圖為例，iOS11系統将最小字号規範為11pt（22px），但很多産品依然将最小字号設定為20px，甚至部分産品将18px的數字加粗運用在标簽中，是以最小字号的設定并沒有固定數值，原則上不影響使用者的浏覽就行。筆者建議最小字号不要低于20px，在設計過程中，可以通過裝置實時預覽，因為同樣的字号在不同的環境、色值、背景下，其視覺效果都有所差別。
其次，遞增值決定着資訊層級區分的明顯程度，遵循字号越大、遞增值越大的原則，常用字号數量控制在6種左右。iOS和Android都是采用的2倍數栅格系統，為了讓字号的層級區分更明顯，字号設定要避開奇數且最小遞增值不要低于4px，下面舉幾個常見的例子：
- 20、24、28、32、40、48、64…
- 20、24、30、36、42、48、64…
- 22、26、30、34、40、48、60…
- ……
規範好的字号該如何使用，還得根據界面中的實際場景來決定，如下圖：
2. 字元間距
字間距是指兩個字元之間的橫向間隔距離，在界面排版中，除了西文的字間距調整需求較大外，中文通常隻保持預設，隻有少數場景才會手動調整，且沒有固定的規律，保持視覺舒适狀态即可。例如：banner、界面大标題、重要數字（取件碼）顯示等。
3. 行高
行高是指包圍在字型之外的隐形邊框，一個字型元素的的行高等于文字上邊框+下邊框+字号的高度之和。
西文字型因高度的參差不齊，本身就能制造出視覺上的上下空間，通常行高為字号的1.2倍，而中文字型沒有上下間隙的延伸，行高則較大，一般在1.5倍左右，如果字号較小且折行較多，行高甚至能達到字号的2倍。
4. 字重
字重指的是字型的粗細，不同的字重能展現出不同的層級關系，給使用者的視覺感受也截然不同。
像蘋方、思源、阿裡巴巴普惠這些家族字型一般都會有極細體、細體、正常體、黑體、粗體等多個字重，在UI設計中，實用的就正常體、加粗兩個字重，再通過色彩、字号使其成為對立關系，明顯的拉開文字内容層級後，方能保持良好的浏覽體驗。
5. 全角與半角
這種主要針對标點符号，以英文字母為标準，半角是指一個符号占用一個标準字元（英文）的位置，全角則是占用兩個字元位置。
衆所周知，中文使用都是全角、英文使用半角，并且會随着中/英文的切換而自動改變，但有時候難免會操作失誤讓頁面中的某處資訊看着怪怪的卻不明是以、另外中文資訊中的時間/日期也大多會使用半角符号，是以設計師對此有一定了解的時候，在處理這些細枝末節就能做到收放自如。
三、不同場景下的屬性參考
在色彩規範中，除主/輔助色之外，設計師還會提供3~4個等級的配色，如通用的#333（标題）、#666（正文）、#999（提示）、#ccc（占位符），這也是UI通用的文字色用色規範，不同的字号需用色規律。
如果想進一步延展，可以增加一點品牌色，也可以使用#000（純黑）調整不透明度來展現文字色彩層級，深色模式中很常見，下面我們一起來了解幾個常見的使用場景。
1. 标題
标題的主要作用是讓使用者以最快的速度了解界面主要資訊，需要時刻吸引使用者的注意力，例如APP中的導航欄、子產品标題、内容标題、資料統計等。需要簡單明了且有沖擊力，字号一般會控制在30px以上并加粗顯示，直接使用一級色值（#333）即可。
在特殊場景下，标題也可以使用主體色值，但一定要注意容器背景與其他資訊色彩的協調，不然花裡胡哨的還不如用回一級色值。
2. 正文
正文并不需要吸引使用者注意力，它主要是提供标題的注釋或内容的詳細說明。
當白色背景文本内容過多、在需要使用者仔細閱讀的情況下，一定要注意顔色不能太深，不然顯的主次不分，還有些刺眼，這裡推薦26~30px字号使用二級文字（#666）色值。
3. 提示語
提示類文字使用場景就相對較多，它除了給使用者展示目前狀态，還能給予合理的引導，促進使用者進行下一步操作。常見使用色值為三級（#999）、四級色值（#ccc），例如界面中的操作注意事項、表單占位符等。字号一般為24px，因使用場景不同，也會有特殊的存在，例如表單中占位符的字号會跟随輸入後的字号統一。
4. 超連結
超連結在字号、色值上沒有一定的限制，但需要一個特定的輔助元素/屬性來提示使用者這是可點選的。
例如APP登入頁面，找回密碼、注冊、擷取驗證碼等，大部分都是用主體色、圖示（右箭頭）等方式強化可操作入口，而PC端網頁中超連結的表現方式，下劃線、藍色字型、>>這三種方式幾乎能涵蓋所有。
5. 其他
規範并非不可更改，它隻能幫助設計師在大部分使用場景中減少設計出入并提高産出效率，但總有一些使用場景需特殊對待，字型也不例外，如以下場景：
- APP金剛區入口字型大多使用24px，一級色值（#333）；
- 底部Tab欄字型未激活使用淺色，激活後切換為一級色值（#333）或主體色；
- 重量級的提示語用紅色色值；
- 按鈕中的文字跟随按鈕的等級權重變化；
- 深色容器标簽的文字反白；
- ……
四、字型使用基本原則
1. 符合産品氣質
雖說黑體（蘋方、思源、阿裡巴巴普惠）是UI設計中的首選字型，但這也僅僅隻是建立在不出錯的的情況下、滿足基本條件而選擇，如果想表達出産品的類型、情感、氣質等品牌屬性，在不影響使用者識别的前提下，可選擇一款符合産品氣質的字型，打造出差異化的浏覽體驗，對于追求完美的APP來時是一個不錯的解決方案。
例如，部分藝術、女性類的APP會選擇使用宋體，整體看起來有一種高端、時尚且優雅的感覺。
整體界面使用特殊字型還是相對較少，為了更好的展現出産品屬性/風格，将其融入不同的子產品及使用場景，會讓産品更有特色，例如banner、瓷片區、大标題、頭圖等，對使用者的視覺吸引力能得到很大提升。
2. 使用同一家族字型
在一個APP中，堅持使用同一個家族的字型，對标題、正文等文字資訊有一個統一的視覺規劃，這樣有助于建立起體系化的設計思路，避免在開發落地時存在一緻性問題，減少開發與設計的出入。
筆者曾見過這樣的設計師，界面中原本用了「蘋方」字型，在一個特殊場景下，「蘋方」的粗體字重無法滿足大标題的使用需求，于是将大标題單獨改為「阿裡巴巴普惠體」的最大字重。
從表面上看，上述的設計需求是滿足了，但稍有不慎就會成為沒有價值的藝術品，首先，單獨一處使用不同家族的字型，會影響整體視覺的一緻性；其次，若程式沒有嵌入另外的字型，産品落地後其視覺效果毫無改觀，且更沒有必要為了某個場景的使用要單獨嵌入幾十到幾百兆的家族字型，讓應用安裝包無故加大。在設計中，有時候在解決某個問題時，解決方案并非無可替代，加粗字型亦是如此。
另外，在可用性、實用性強且必要的情況下，并非不能再增加一個家族字型，例如所有标題系列使用「阿裡巴巴普惠體」、數字系列都使用「DIN」，前提是一定要形成體系化，并非某一處的使用。
3. 明确的資訊層級
在同一個界面中，字型色值、字号、字重等，都是用于區分資訊層級，盡量不要使用過多的層級，避免層級混亂影響資訊浏覽。
在資訊層級處理方式的四個基本原則中，「對比」就是将複雜的資訊通過元素的各種屬性以不同的視覺效果呈現，來展現資訊節奏感，并非是為了好看而随意給文字賦予各種屬性及樣式效果。
五、UI設計需注意的問題
1. 避頭尾的使用
避頭尾使用在文字内容較多的折行場景中，主要處理标點符号剛好出現在一行文字的開頭或結尾時，通過自動調整單行的字元間距、在視覺上将标點符号前移或後移。
在新聞資訊類應用的詳情頁中，避頭尾使用的較多，用以避免頭/尾存在标點符号造成視覺重量不一、資訊參差不齊的問題出現。
2. 反差展現層級
很多時候，為了區分資訊層級，首先想到的是利用不同的字号、字重來展現，這當然沒有問題，但如果結合字型的明暗關系（灰階色值等級）則效果更佳。
如下圖：标題一級色值（#333）、正文二級色值（#666）、時間日期三級色值（#999）。
3. 備用字型
備用字型隻會運用在web頁面中，如果網站需要一款特殊的字型才能彰顯其獨特的氣質、同時又擔心使用者在某些裝置中因為沒有這個字型而無法浏覽其效果，則會另外再選擇一款相近的通用字型作為備選，以彌補視覺體驗上的損失。
如果字型包不大，也可以讓開發将其放在伺服器端，這樣能讓所有使用者都能看到相同的效果，省去了不少麻煩。
4. 確定可讀性
可讀性應該是選擇字型的首要元素，雖說很多文字我們都可以從前後字義、聯想詞等角度将自己的了解補充完整，但完全沒有必要。
UI設計不像海報那樣融入較多的藝術成分，更需要的是内容清晰、表意明确、高效率的傳達，任何增加使用者閱讀、了解成本的做法都應該規避掉，例如過于變形的可愛風格、書法手寫體等都盡量少用。
六、結語
文本内容是UI界面中占比較多的元素之一，設計師需要對其基本屬性及使用場景有一個清晰的了解，使用的是否恰當取決于我們對字型的選擇。雖說在UI領域，字型子產品類的文章比較少（更多是文字、字庫的設計），但它在設計規範中的地位是舉足輕重，選好一款字型對設計來說是錦上添花。
關于UI界面中的字型，其實沒有太多的講究，也沒必要整得花裡胡哨，重點在于排版過重中注意資訊層級的劃分以及有足夠的視覺舒适度即可。
專欄作家
大漠飛鷹；公衆号：能量眼球，人人都是産品經理專欄作家。緻力于産品需求的驅動、産品體驗的挖掘，利用設計的手段為閱聽人使用者帶來更好的體驗，即好看、好用。
本文原創釋出于人人都是産品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協定。
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。