初學(xué)者必備，UI設(shè)計(jì)中字體的相關(guān)屬性！

對(duì)于一名UI設(shè)計(jì)師來(lái)說(shuō)，字體是一門(mén)基本語(yǔ)言，更是設(shè)計(jì)師需要掌握的基本技能之一。目前常用的字體有很多種，比如黑體、宋體、楷體等。在平時(shí)的項(xiàng)目設(shè)計(jì)中，為了讓頁(yè)面中的字體更加貼合業(yè)務(wù)場(chǎng)景，設(shè)計(jì)師需要對(duì)字體的字距字高進(jìn)行調(diào)整。

1、字體基礎(chǔ)結(jié)構(gòu)詳解

一般來(lái)說(shuō)，為了保持字體的完整展示，字體設(shè)計(jì)師都會(huì)給字體預(yù)留一定的安全距離，設(shè)定合適的升部線及降部線距離，讓字體展示的更為平衡。

在設(shè)計(jì)輸出的時(shí)候，如果沒(méi)有調(diào)整line值，是可以直接借助sketch的標(biāo)注插件sketch measure，來(lái)實(shí)時(shí)導(dǎo)出相應(yīng)的參數(shù)，這樣的參數(shù)最接近開(kāi)發(fā)效果。如果沒(méi)有Mac的同學(xué)，可以利用PS選中文字，那么選中的深色底就是字體本身的間距。

2、字體的行高行距參數(shù)詳解

在一些文字較多的頁(yè)面，為了讓閱讀更為順暢，我們需要對(duì)文字的字高字距進(jìn)行調(diào)整。通過(guò)sketch及動(dòng)效編程軟件Origami中的可配置參數(shù)時(shí)只需要配置好Charater(字間距)、line(行高)、paragraph(行距)三個(gè)值即可。

3、字號(hào)大小如何設(shè)定

我們?cè)谧鲈O(shè)計(jì)時(shí)，字號(hào)的單位需遵循原子理論，也就是使用一個(gè)基數(shù)作為倍增，如2、4、6、8、10 或者3、6、9、12。但其實(shí)我們?cè)谧鲆苿?dòng)端設(shè)計(jì)時(shí)，單位需要遵循偶數(shù)原則，因?yàn)殚_(kāi)發(fā)中的單位是以一倍圖的基數(shù)來(lái)進(jìn)行計(jì)算。那么其實(shí)在制定字體規(guī)范中，使用2為單位會(huì)導(dǎo)致字號(hào)過(guò)多，不易管理，且2號(hào)字體的差異化不大。

所以在字號(hào)方面我們使用4作為單位是比較合適的：一是適配后在@2x跟@3x不會(huì)出現(xiàn)半像素，二是使用4為單位，能滿足字體大小的均衡。

4、合理配置字體拉開(kāi)層級(jí)關(guān)系

在移動(dòng)端的界面設(shè)計(jì)中，除了使用間距網(wǎng)格來(lái)拉開(kāi)不同內(nèi)容的層級(jí)外，對(duì)字體樣式進(jìn)行適當(dāng)?shù)恼{(diào)整也是個(gè)很不錯(cuò)的選擇。通過(guò)調(diào)整字重、字色，能讓頁(yè)面的視覺(jué)邏輯變?yōu)楦拥那逦髁?、主次分明，降低因視覺(jué)給用戶帶來(lái)的干擾，提升頁(yè)面的可操作性。如何來(lái)設(shè)定這兩塊呢?1)盡量減少頁(yè)面中的不同色相的顏色數(shù)量;2)使用不同的字重來(lái)區(qū)分內(nèi)容。

當(dāng)然，隨著用戶體驗(yàn)度的變化以及技術(shù)的革新，字體運(yùn)用也會(huì)出現(xiàn)新的趨勢(shì)，比如更大更粗的標(biāo)題、更明顯的字重層級(jí)、用字體明度做內(nèi)容上的信息區(qū)分等。

綜上所述，想要成為一個(gè)合格的UI設(shè)計(jì)師絕不是只會(huì)使用PS、AI軟件就可以，你還要注意各種細(xì)節(jié)。

標(biāo)簽：