App文字層級細節及原則

我們平常在做APP界面時，經常會因為用什麼字型大小，字體顏色，字間距而感到困擾。當我們拿到設計需求後，開始進行設計，不知道怎麼去調整界面的字型大小和行間距等。最容易碰到的問題就是頁面和頁面的字型大小調著調著就大小或顏色不統一了，導致整個界面文字層級很亂，設計稿反覆調整修改。

這裡將和大家理一理APP界面中常用的字體，字型大小，字體顏色及間距對齊的一些小經驗，希望能對大家有所幫助。

以下是在72像素/英寸下的規範

一、移動端常規字體

iOS

中文字體：蘋方字體

英文字體：San Francisco

San Francisco為iOS和OSX設計的SF，以及為Watch OS 設計的SF Compact，而各自分為Text和Display，其中前者6個字重，後者9個（多了三個斜體），我們使用的時候主要使用SF字體系列，不適用斜體。Text 系列字體用於小文本顯示，而Display 系列字體用於較大的字體顯示。

Android

原生系統

英文字體：Roboto

中文字體：Noto(思源黑體)

第三方系統

MIUI的小米蘭亭字體

二、移動端常用的字型大小

iOS中為了視覺平衡可以對字重做一些調整，且系統會隨著字體尺寸的變化而自動切換Display/Text兩個子字體族，20pt以下為Text，20pt及以上為Display，Text的字體間距較大，使小的字體中更加易讀。

Android中Material Design給出了更加嚴格的規範

在實際界面設計中，文本通常使用偶數字型大小，因為在開發界面的時候，字型大小大小換算是要除以二的。

通常使用粗體，大號和深色文本突出最重要的信息，標準，小號和淺色文本輔助展示。

34-36px

用於導航欄標題，通常都使用粗體和黑色（可參考#222222）來突出信息的重要性。

30px

用於文本標題、正文。該字型大小大小適中，在移動界面設計中有著非常清晰的視覺呈現，在實際界面設計中根據不同的使用場景使用不同深淺的顏色。

28px

用於副標題、正文、段落文本，通常使用深灰色（可參考#666666），較30px字型大小更加精緻。

26px

用於副標題、輔助性或提示文本，通常使用淺灰色（可參考#999999），跟隨在黑色的標題之下，與之形成主次之分。

24px

在界面中顯示偏小，用於副標題、輔助性或提示文本，通常使用淺灰色（可參考#999999），跟隨在黑色的標題之下，與之形成主次之分。

20-22px

用於標籤欄欄位或輔助性文本，通常使用淺灰色（可參考#999999），跟隨在黑色的標題之下，與之形成主次之分。

常用字型大小的大小基本就這幾個，不同類型的App下同種功能的字體大小會有所區別。所以我們可以參考業界內用戶量比較大的產品，截圖下來放到設計軟體中去看看用的字型大小大小。

三、移動端常用字體顏色

基本色

在界面中的文字分為三個層級，主文、副文、提示文案等。

在白色的背景下，字體的顏色層次其實就是深黑、深灰、淺灰色。

常用的色值是#333333；#666666；#999999

一般避免使用純黑色，更多的情況下會使用#333333；#666666；#999999這樣的安全色來進行標題，正文，輔助性文字的層級區分。可稍帶點灰色旁邊的顏色使文字更具有活躍性（設計技巧：在灰色文字上加20%主題色）

背景色

在界面中還經常會用到背景色#eeeeee。

分割線則採用#e5e5e5或#cccccc的顏色值，一個深一些，一個淺一些。這個會更具不同的軟體風格採用不同的深淺，由設計自己把控。

四、文字排版規則

行高

行間距（leading）應該設置為字體大小的120%-145%之間

字距

SF字體會隨字型大小的變化自動調整字母之間的間距，以確保不同情況下的閱讀清晰。

12pt時系統默認字間距為0，一般設計稿字間距默認為0即可。

對齊方式

左對齊

右對齊

居中對齊

齊行對齊

行長

移動端頁面每行最佳為30-45個字。

PC端頁面每行55-75個字，包括空格；理想狀態是每行65個字元

字體樣式

一次不應該同時超過三種的強調樣式。

總結：

以上分享了一些APP界面中常用的字體，字型大小，字體顏色及間距對齊的一些小經驗。我們在界面設計初期時要建立好規範，遵循一定的文字層級細節和原則。這樣做出來的界面才會統一一致，

在變化的需求中找到定量，調整起來也相對輕鬆很多。規範化的設計對產品的對產品的延續性也非常有幫助，並且保證了產品的獨特性和一致性。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！