當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >字體排版需要掌握的10條原則

字體排版需要掌握的10條原則

發(fā)布時(shí)間：2024-01-24 16:50:20 瀏覽量：235次

選擇合適的字體是排版開(kāi)始的第一步。當(dāng)然排版中除了改變字體大小，其實(shí)還有很多內(nèi)容可以調(diào)節(jié)。

這里分享UI設(shè)計(jì)中字體排版需要掌握的技巧和標(biāo)準(zhǔn)原則～

行高/行間距

▼

首先介紹兩個(gè)容易混淆的概念——行高和行間距，兩者在中英文的用法也有差異。

中文行高：上一行文字的最底部與下一行文字的最底部之間的距離。

中文行間距：上一行文字的最底部與下一行文字的最頂部之間的距離(行與行之間的距離)。

基線是英文字體結(jié)構(gòu)中的概念，英文的行高由基線決定。

英文行高:上一行的基線到下一行基線之間的距離(藍(lán)線標(biāo)注)；

英文行間距:兩行字體之間的距離，即上一行的下限線與下一行的上限線之間的距離(橙線標(biāo)注)。

字重/襯線

▼

字重(weight)是指字體的粗細(xì)程度。字重的粗細(xì)變化為我們?cè)诓煌瑘?chǎng)景使用提供了更多選擇。

襯線體(serif)是指字形筆畫(huà)在首尾的裝飾和筆畫(huà)的粗細(xì)不同；無(wú)襯線體(sans-serif)沒(méi)有筆畫(huà)首尾的裝飾，筆畫(huà)粗細(xì)相同。

在同等字號(hào)下，無(wú)襯線字體看上去要比襯線更大，結(jié)構(gòu)也更清晰，所以無(wú)襯線字體更適合在屏幕上使用。

層級(jí)結(jié)構(gòu)

▼

絕大多數(shù)UI界面是由一些標(biāo)準(zhǔn)元素組成——文本、矩形/框、按鈕和圖標(biāo)。

字體大小對(duì)比明顯的層級(jí)結(jié)構(gòu)讓用戶更容易地找到重要信息，提升界面的可讀性。

最佳行長(zhǎng)

▼

合適的行長(zhǎng)能確保文本在不同的設(shè)備上都能易于閱讀。這里有行長(zhǎng)的基本用法：

限制字體數(shù)量

▼

混合太多不同的字體會(huì)讓界面設(shè)計(jì)變得混亂。

選擇字體時(shí)盡量使用帶有多種字重的同一款字體，通過(guò)靈活調(diào)節(jié)字重達(dá)到界面統(tǒng)一的效果。

定義字體比例

▼

頁(yè)面中不同的位置(標(biāo)題、正文、備注)要使用不同比例的字體，從而產(chǎn)生連貫的排版體驗(yàn)。

使用可識(shí)別的提示

▼

通過(guò)上面的原則可以提升界面的可讀性和美觀性。但是如何提高界面中信息的可理解性呢？只有真正把設(shè)計(jì)與信息結(jié)合在一起，才能使傳達(dá)的效率最優(yōu)化：

避免使用專(zhuān)業(yè)術(shù)語(yǔ)。除非是為特定人群設(shè)計(jì)產(chǎn)品，否則應(yīng)避免使用行業(yè)術(shù)語(yǔ)。
保持提示簡(jiǎn)潔明了。例如在訪問(wèn)網(wǎng)站時(shí)，將“只有會(huì)員才可以訪問(wèn)此功能”修改成“加入會(huì)員即可訪問(wèn)”，這樣的提示更能切中要點(diǎn)。

強(qiáng)調(diào)重要信息

▼