UI設(shè)計(jì)基礎(chǔ)字體知識(shí)講解【傳智教育】

在UI設(shè)計(jì)中，字體可以很直觀地彰顯設(shè)計(jì)風(fēng)格，是UI設(shè)計(jì)中的重要元素。因此理解字體設(shè)計(jì)方式對(duì)UI設(shè)計(jì)師來(lái)說(shuō)非常關(guān)鍵。下面將對(duì)字體的基礎(chǔ)知識(shí)做具體講解。

1.字體基本術(shù)語(yǔ)

在排列字體時(shí)，有一些描述字體之間距離、大小的標(biāo)準(zhǔn)術(shù)語(yǔ)。例如“基線”“行距”等，這些術(shù)語(yǔ)分別表示字體排列的位置和距離，具體如圖所示。

字體基本術(shù)語(yǔ)

注意：

“X字高”在排印學(xué)中是指字母的基本高度，但是在設(shè)計(jì)領(lǐng)域中代表一個(gè)字體的設(shè)計(jì)因素，因此在一些場(chǎng)合字母X本身并不完全等于X字高。

2.襯線字與非襯線字

字體分為兩大類，即襯線字（Serif）和非襯線字（Sans-Serif），具體介紹如下。

1）襯線字

襯線字是指在字的筆畫(huà)開(kāi)始及結(jié)束的地方有額外的裝飾，而且筆畫(huà)的粗細(xì)會(huì)因直橫的不同而有所不同，如圖1-58所示。襯線字較易辨識(shí)，因此具有較高的易讀性，通常用在界面內(nèi)容較多頁(yè)面中。

襯線字

2）非襯線字

非襯線字沒(méi)有這些額外裝飾，而且筆畫(huà)粗細(xì)大致差不多，如圖1-59所示。非襯線字則較醒目。通常需要強(qiáng)調(diào)、突出的小篇幅文字一般使用非襯線字。

非襯線字

3.字體排版

在UI設(shè)計(jì)中，優(yōu)秀的文字排版可以使文字內(nèi)容能夠簡(jiǎn)單且清晰地展現(xiàn)出來(lái)，使讀者更容易閱讀。在進(jìn)行字體排版時(shí)，往往要注意以下幾個(gè)方面。

1）字重

字重是指字體筆畫(huà)的粗細(xì)。在UI設(shè)計(jì)中，當(dāng)設(shè)計(jì)師設(shè)置更大的字體來(lái)獲得更好的可讀性的同時(shí)，也應(yīng)減輕字體的字重，使字體不會(huì)太過(guò)醒目，從而不影響其他內(nèi)容的顯示效果。
一般當(dāng)字體大小為12~18 px時(shí),使用Regular,18~24 px時(shí),使用Light,24～32 px時(shí),使用Thin,當(dāng)字體大小超過(guò)32 px時(shí)，建議使用Ultralight。當(dāng)然以上都是建議值，在實(shí)際運(yùn)用中，設(shè)計(jì)者應(yīng)該根據(jù)不同字體的顯示效果進(jìn)行設(shè)定，使讀者保持良好閱讀體驗(yàn)。

2）行距

行距是指從一行文字的底部到另一行文字底部的間距。在Word中行距是指設(shè)置文本行與行之間的距離。合理的行距，能給文字留下更多的呼吸空間，給讀者更好的閱讀體驗(yàn)。一般行距應(yīng)該設(shè)置為字體大小的120%~145%。

3）行長(zhǎng)

‍

行長(zhǎng)指單行文字的長(zhǎng)度，如果一行中包含的字?jǐn)?shù)太多，文本內(nèi)容將會(huì)很難閱讀。通常英文字符一般在45~90字比較適宜，而中文在35~60字為宜。合理的行長(zhǎng)使用戶在行間跳轉(zhuǎn)時(shí)感到非常輕快和愉悅，反之則會(huì)使閱讀成為一種負(fù)擔(dān)。

4）字體樣式

字體樣式是指對(duì)字體進(jìn)行一些改變，包括顏色、大小、下畫(huà)線、斜體、粗體等。一般在文字內(nèi)容中，字體樣式主要用于強(qiáng)調(diào)標(biāo)注的文本，因此被修飾的文本不應(yīng)超過(guò)整個(gè)文本的10%，并且同一界面中使用的字體樣式不應(yīng)該超過(guò)三種。