小編：Sketch視覺稿到了開發(fā)實(shí)現(xiàn)，字號(hào)和對(duì)應(yīng)行間距會(huì)出現(xiàn)不一致的情況，這樣會(huì)導(dǎo)致還原度出現(xiàn)問題。今天我們來講講如何避免這種問題以及有什么解決方法，文末有福利大贈(zèng)送哦，千萬(wàn)不要錯(cuò)過哈～一起來看看一篇文章搞定UI文字設(shè)計(jì)規(guī)范吧！
前言
UI設(shè)計(jì)中，文字設(shè)置是必不可少的一環(huán)。
文字設(shè)置過程中涉及到字體類型、字號(hào)、字重、行高、行寬以及顏色等。
本文講述的文字設(shè)計(jì)規(guī)范，包含以下部分：
1、類型
2、字號(hào)
3、字重
4、行高
5、行寬
6、顏色
1、類型
iOS設(shè)備的系統(tǒng)默認(rèn)字體，中文為蘋方，英文&數(shù)字為SF UI Text。
Android設(shè)備系統(tǒng)默認(rèn)字體，中文為思源黑體，英文&數(shù)字為Roboto。
2、字號(hào)
不同的使用場(chǎng)景，文字的字號(hào)也不相同。文字的主使用場(chǎng)景分為：一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題、正文和提示文字 。
文字最小字號(hào)一般為11。也有特殊情況，例如標(biāo)簽里面的文字，字號(hào)為10甚至可能更小。
3、字重
字重就是指字體筆畫的粗細(xì)。字重的等級(jí)是用來標(biāo)明同一字體家族中不同粗細(xì)筆畫的字型。
UI設(shè)計(jì)中，常用的字重有兩個(gè)，一個(gè)是常規(guī)（Regular），另一個(gè)是中黑體（ Medium）。
正常文字使用常規(guī)體（Regular）。當(dāng)需要突出層級(jí)展示，增加對(duì)比時(shí)使用中黑體（ Medium），中黑體（ Medium）常用于標(biāo)題。
4、行高
字號(hào)大小等于文字高度，如下圖所示，字號(hào)為16時(shí)，行高設(shè)置為16，那么其行高也是字體本身的高度（16pt）。
如下圖所示：行間距距離文字上方為3pt，行間距距離文字下方也為3pt。字體高度為16pt。
舉個(gè)例子，設(shè)計(jì)一個(gè)標(biāo)簽時(shí)，當(dāng)字號(hào)為14時(shí)，行高為20，那么為了保持視覺上字體到四周距離相同，那么上下間距為4，左右間距為8。
因?yàn)樾虚g距的存在，不能將上下間距和左右間距設(shè)置相同。
如果行高設(shè)置為14（文字本身大小），那么上下間距應(yīng)該也為8pt，而非4pt。
5、行寬
行寬=字體寬度+兩側(cè)距離字體的寬度
6、顏色
字體顏色有兩種規(guī)則定義做法，一種是直接使用色值，如圖所示：
綜合而言，使用不透明度的方法，使用場(chǎng)景更加廣泛一些。
原文地址：Echo的設(shè)計(jì)筆記（公眾號(hào)）
作者：Echo
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》一篇文章搞定UI文字設(shè)計(jì)規(guī)范
文章來源：站酷 作者：陳皮Celia
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)