?設(shè)計(jì)師必看的字安裝體與排版應(yīng)用指南

2022-02-10 點(diǎn)擊量：

文字是界面中最核心的元素，是產(chǎn)品傳達(dá)給用戶的主要內(nèi)容，它的承載體即是字體。

前半部分從字體的最基本屬性（字族、字號(hào)、字重、大小寫等）說(shuō)起，熟悉字體的那些特征，了解字體在界面中的作用，以及iOS與Android系統(tǒng)字體的使用規(guī)范。

字體基礎(chǔ)知識(shí)

字體是界面設(shè)計(jì)的基石

字體是排版中最重要的元素，對(duì)用戶的閱讀體驗(yàn)有著至關(guān)重要的作用。一般來(lái)說(shuō)，設(shè)計(jì)師需要了解的字體通常有中文字體和西文字體兩種。西文字體由來(lái)已久，從最早的羅馬字體到現(xiàn)在蘋果手機(jī)中的SF-UI字體，經(jīng)歷了許多設(shè)計(jì)上的變革。而中文字體的發(fā)展并沒(méi)有西文字體那么順利，數(shù)量上也遠(yuǎn)遠(yuǎn)落后于其他字體。但中國(guó)設(shè)計(jì)正在崛起，我們也看到越來(lái)越多的設(shè)計(jì)團(tuán)隊(duì)和設(shè)計(jì)師加入字體設(shè)計(jì)的隊(duì)伍，數(shù)量上正在呈指數(shù)級(jí)別增加。

設(shè)計(jì)是一門非常嚴(yán)謹(jǐn)?shù)膶W(xué)科，里面蘊(yùn)含了很多道理，就連最基礎(chǔ)的字體選擇和排版，都經(jīng)過(guò)了將近千年的發(fā)展和演變，有非常多的專業(yè)知識(shí)。像平面設(shè)計(jì)一樣，在UI設(shè)計(jì)中字體的使用也有相應(yīng)的規(guī)范，設(shè)計(jì)師應(yīng)懂得這些基礎(chǔ)知識(shí)，才能將字體為自己所用。

本篇就從我們常用的設(shè)計(jì)軟件（sketch、Figma、P hotoshop）字符面板開始，來(lái)聊聊有關(guān)字體與排版應(yīng)用方面的知識(shí)。

字體的那些屬性

Font 中文翻譯為「字型」，是指字的粗細(xì)、寬度和樣式，是一套具有同樣風(fēng)格和尺寸的字形。例如「Regular_16pt_SF-UI」。

Typeface 中文翻譯為「字體」，是指一整套的字形，一個(gè)或多個(gè)字型的多尺寸的集合，例如「SF-UI」里有不同粗細(xì)（Regular、Blod、Light）和不同寬度（12pt、14pt、20pt）。

Glyph 中文翻譯為「字形」，是指單個(gè)字的形體或是字體的骨骼。 同一字可以有不同的字形，而不影響其表達(dá)的意思，例如漢字中的「令」字，第三筆可以是一點(diǎn)或一撇， 最末兩筆可以作「ㄗ」或「マ」。

Font和Typeface常常被混淆使用，其實(shí)可以這樣理解，前者指一種設(shè)計(jì)，后者指具體的產(chǎn)品。

1. 族類 GenericFamily

族類就是不同字體類型，例如阿里巴巴普惠體、方正新書宋、站酷酷黑體等。

而這些眾多字體又可分為「襯線體」和「無(wú)襯線體」。

襯線體

宋體就是襯線體，特點(diǎn)就是筆畫開始和末端的地方都有額外的裝飾，且筆畫的粗細(xì)有所不同。在傳統(tǒng)的正文印刷中，普遍認(rèn)為襯線字體能帶來(lái)更加的可讀性。常見(jiàn)的襯線體有宋體、Times New Roman、Georgia等。

襯線體一般在APP中比較少見(jiàn)，文字閱讀類偏愛(ài)這種襯線體，例如「單讀」，大標(biāo)題用的是「華康標(biāo)宋體」、正文內(nèi)容用的是「蘋方-纖細(xì)」而英文用的是「XCross Traditional Bold」

黑體

黑體是無(wú)襯線字體，特點(diǎn)是筆畫沒(méi)有額外的裝飾，且筆畫的粗細(xì)差不多。相比嚴(yán)肅的襯線體，簡(jiǎn)單干凈的無(wú)襯線體給人一種休閑輕松的感覺(jué)。因此大多數(shù)App都是使用黑體作為默認(rèn)字體。如冬青黑體、思源黑體、Myriad等。

2. 字族 FontFamily

一個(gè)族類包含不同的字體，然而一個(gè)字體又可能有好幾種字族。如果電腦安裝了Helvetica，在Sketch字體選擇器中會(huì)發(fā)現(xiàn)超過(guò)40多個(gè)前綴是Helvetica的字族。這是為了協(xié)助人們?cè)诓煌氖褂脠?chǎng)景下表達(dá)合適的意思。

知識(shí)點(diǎn)：

基本字族包括細(xì)體、標(biāo)準(zhǔn)、粗體、斜體，值得注意的是，斜體字常用在引用文本上，代表「本段文字引用的是另一個(gè)著作」的含義。