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

文字設(shè)置過(guò)程中涉及到字體類(lèi)型、字號(hào)、字重、行高、行寬以及顏色等。

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

• 類(lèi)型
• 字號(hào)
• 字重
• 行高
• 行寬
• 顏色
• 類(lèi)型

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

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

字號(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甚至可能更小。

字重

字重就是指字體筆畫(huà)的粗細(xì)。字重的等級(jí)是用來(lái)標(biāo)明同一字體家族中不同粗細(xì)筆畫(huà)的字型。

UI設(shè)計(jì)中，常用的字重有兩個(gè)，一個(gè)是常規(guī)(Regular)，另一個(gè)是中黑體( Medium)。

正常文字使用常規(guī)體(Regular)。當(dāng)需要突出層級(jí)展示，增加對(duì)比時(shí)使用中黑體( Medium)，中黑體( Medium)常用于標(biāo)題。

行高

字號(hào)大小等于文字高度，如下圖所示，字號(hào)為16時(shí)，行高設(shè)置為16，那么其行高也是字體本身的高度(16pt)。

行高= 字號(hào) + 行間距。

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

行高(22)= 字號(hào)(16) + 行間距(3+3)。

在界面過(guò)程中，需要規(guī)范字號(hào)大小和對(duì)應(yīng)的行高。不然的話會(huì)存在設(shè)計(jì)布局問(wèn)題。

舉個(gè)例子，設(shè)計(jì)一個(gè)標(biāo)簽時(shí)，當(dāng)字號(hào)為14時(shí)，行高為20，那么為了保持視覺(jué)上字體到四周距離相同，那么上下間距為4，左右間距為8。

因?yàn)樾虚g距的存在，不能將上下間距和左右間距設(shè)置相同。

如果行高設(shè)置為14(文字本身大小)，那么上下間距應(yīng)該也為8pt，而非4pt。

如下表格為iOS設(shè)計(jì)指南建議字號(hào)和對(duì)應(yīng)的行高對(duì)照表。

下圖是Sketch默認(rèn)字號(hào)和行高對(duì)照表：

可以看出iOS建議字號(hào)行高的對(duì)照表和Sketch默認(rèn)的不一樣。

Sketch視覺(jué)稿到了開(kāi)發(fā)實(shí)現(xiàn)，字號(hào)和對(duì)應(yīng)行間距會(huì)出現(xiàn)不一致的情況，這樣會(huì)導(dǎo)致還原度出現(xiàn)問(wèn)題。

解決行高無(wú)法完美開(kāi)發(fā)還原的辦法有兩個(gè)：

• 將行高設(shè)置為字號(hào)大小，這樣的話，就不存在行間距的問(wèn)題，可以保證完美還原。但是由于一倍行高會(huì)導(dǎo)致有些機(jī)型的字被切掉。
• 使用字體插件，這樣它可以自動(dòng)修復(fù)Sketch文檔中的字體行高，做到Sketch中字體行高與開(kāi)發(fā)中字體行高100%還原。

行寬

行寬=字體寬度+兩側(cè)距離字體的寬度

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

將行寬拉長(zhǎng)，代表著設(shè)置了文本內(nèi)容范圍，文本距離右側(cè)語(yǔ)音圖標(biāo)為12pt，表示當(dāng)文字內(nèi)容距離語(yǔ)音圖標(biāo)12pt時(shí)，文字打點(diǎn)或截?cái)嗾故尽?/p>

顏色

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

另一種做法是通過(guò)不透明度實(shí)現(xiàn)，通常以#000000為基準(zhǔn)，設(shè)置不同的不透明度，如下圖所示：

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