小編：Sketch視覺稿到了開發(fā)實現(xiàn)，字號和對應行間距會出現(xiàn)不一致的情況，這樣會導致還原度出現(xiàn)問題。今天我們來講講如何避免這種問題以及有什么解決方法，文末有福利大贈送哦，千萬不要錯過哈～一起來看看一篇文章搞定UI文字設計規(guī)范吧！

前言

UI設計中，文字設置是必不可少的一環(huán)。

文字設置過程中涉及到字體類型、字號、字重、行高、行寬以及顏色等。

本文講述的文字設計規(guī)范，包含以下部分：

1、類型

2、字號

3、字重

4、行高

5、行寬

6、顏色

1、類型

iOS設備的系統(tǒng)默認字體，中文為蘋方，英文&數(shù)字為SF UI Text。

Android設備系統(tǒng)默認字體，中文為思源黑體，英文&數(shù)字為Roboto。

2、字號

不同的使用場景，文字的字號也不相同。文字的主使用場景分為：一級標題、二級標題、三級標題、正文和提示文字 。

文字最小字號一般為11。也有特殊情況，例如標簽里面的文字，字號為10甚至可能更小。

3、字重

字重就是指字體筆畫的粗細。字重的等級是用來標明同一字體家族中不同粗細筆畫的字型。

UI設計中，常用的字重有兩個，一個是常規(guī)（Regular），另一個是中黑體（ Medium）。

正常文字使用常規(guī)體（Regular）。當需要突出層級展示，增加對比時使用中黑體（ Medium），中黑體（ Medium）常用于標題。

4、行高

字號大小等于文字高度，如下圖所示，字號為16時，行高設置為16，那么其行高也是字體本身的高度（16pt）。

如下圖所示：行間距距離文字上方為3pt，行間距距離文字下方也為3pt。字體高度為16pt。

舉個例子，設計一個標簽時，當字號為14時，行高為20，那么為了保持視覺上字體到四周距離相同，那么上下間距為4，左右間距為8。

因為行間距的存在，不能將上下間距和左右間距設置相同。

如果行高設置為14（文字本身大小），那么上下間距應該也為8pt，而非4pt。

 

5、行寬

行寬=字體寬度+兩側距離字體的寬度

行寬作用于文本范圍，如下圖所示：

6、顏色

字體顏色有兩種規(guī)則定義做法，一種是直接使用色值，如圖所示：

綜合而言，使用不透明度的方法，使用場景更加廣泛一些。

原文地址：Echo的設計筆記（公眾號）

作者：Echo

轉載請注明：學UI網(wǎng)》一篇文章搞定UI文字設計規(guī)范

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

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

藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務