激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

不懂UI文字設(shè)計規(guī)范?這篇文章幫你搞定

發(fā)布時間：2024-01-24 17:06:29 瀏覽量：200次

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

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

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

1、類型

2、字號

3、字重

4、行高

5、行寬

6、顏色


1、類型

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

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

2、字號

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

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


3、字重

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

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

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

4、行高

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

行高= 字號 + 行間距。

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

行高（22）= 字號（16） + 行間距（3+3）。

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

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

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

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

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

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

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

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

解決行高無法完美開發(fā)還原的辦法有兩個：

1、將行高設(shè)置為字號大小，這樣的話，就不存在行間距的問題，可以保證完美還原。但是由于一倍行高會導(dǎo)致有些機(jī)型的字被切掉。

2、使用字體插件，這樣它可以自動修復(fù)Sketch文檔中的字體行高，做到Sketch中字體行高與開發(fā)中字體行高100%還原。


5、行寬

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

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

將行寬拉長，代表著設(shè)置了文本內(nèi)容范圍，文本距離右側(cè)語音圖標(biāo)為12pt，表示當(dāng)文字內(nèi)容距離語音圖標(biāo)12pt時，文字打點(diǎn)或截斷展示。


6、顏色

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

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

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


文章來源：「Echo的設(shè)計筆記」

點(diǎn)擊下方了解更多獲取UI設(shè)計資源

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定