前言

文字是設計中的重要組成部分，就像我們平時看到的海報，里面各種被精心設計過的字體經常會成為視覺焦點，以醒目且個性化方式傳達出內容的精髓，最后達到的效果事半功倍。
雖然在UI設計中不需要對文字過分設計，但圖文作為主要的傳播途徑，字體的使用是否規范合理將直接影響著信息傳播的優先級、重要程度以及用戶的接收質量和效率。所以不管是平面設計還是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界面中的字體，其實沒有太多的講究，也沒必要整得花里胡哨，重點在于排版過重中注意信息層級的劃分以及有足夠的視覺舒適度即可。

作者：大漠飛鷹CYSJ      來源：站酷



藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

按鈕設計是我們經常會遇到的一個類型，一個好的按鈕其最重要的就是激起點擊欲，讓人忍不住去戳戳戳。

我們來看看下面這個按鈕：

很普通，處處都很常見的一種按鈕，沒有任何點擊欲。

那我們應該怎么做出她的點擊欲呢？

其實就是要讓按鈕更有立體感，話不多說直接上干貨！

1.層次

可以用不同的顏色，放大一圈，形成對比：

上下錯開一些讓按鈕的造型飽滿立體一些，從原來的單一一層變為兩層：

2.層次

為了讓按鈕更立體我們可以把這兩層個復制一層，往下移動幾個像素：

這樣按鈕是不是就已經立體多了？別急，還有呢！

3.光影

這里細節就比較多，想把按鈕做到晶瑩剔透可不容易，給大家好好講一下。

先給圖形加上一個內發光：

使用剪切蒙版，涂顏色或者再來一層內發光，加強這個效果：

復制一層，選用更深的顏色，向下移動，剪切蒙版到里面去，把按鈕有一個明顯的明暗分割線，形成這種光的層次和厚度：

沿著造型刻畫高光，和邊緣有些間隔：

在白色的底座上加入按鈕的投影：

這樣一個剔透，立體感強的按鈕造型就完成啦！

那還能不能讓點擊欲更強一些呢？

4.表像圖形

放上文案看看：

就還是有點單對吧。

這種時候我們就可以從按鈕的文案出發，加入一些圖案，讓它更生動！

比如這里的文案是“發射”，就聯想到了火箭，我們可以繪制一個火箭出來。

把它加入到按鈕上：

這樣一個豐富且有點擊欲的按鈕就完成了！

并可以用同樣的邏輯去延展別的按鈕，讓他們保持統一性：

總結

增強按鈕的點擊欲的方式，其實就是讓它變得立體且豐富。

1.層次：單獨的一個色塊，會很單薄，增加層次增加其在造型上的豐富度。

2.厚度：厚度可以讓按鈕變得更立體。

3.光影：讓按鈕富有變化，更立體和吸引人。

4.表像圖形：一個關聯文案信息的點綴圖案，可以讓人更有食欲。

作者：菜心輕量文      來源：站酷



藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司