亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁(yè) > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

文字是人類文化的重要組成部分,經(jīng)歷了數(shù)千年的發(fā)展和演變,字體排版已經(jīng)積累了非常多的專業(yè)性知識(shí)。

無(wú)論是平面設(shè)計(jì)師還是 UI 設(shè)計(jì)師,都應(yīng)該了解和學(xué)習(xí)這些基礎(chǔ)設(shè)計(jì)知識(shí),從而幫助我們創(chuàng)造更優(yōu)秀的產(chǎn)品體驗(yàn)。

文字是界面設(shè)計(jì)中最重要的組成部分,也是最不可忽視的核心元素,文字排版的好壞,直接影響著產(chǎn)品的信息傳遞和視覺(jué)傳達(dá)效果,對(duì)閱讀體驗(yàn)更是有著至關(guān)重要的作用。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

在用戶與界面交互的過(guò)程中,字體的使用也能夠反映出品牌的性格與氣質(zhì),如果說(shuō)圖形和色彩是品牌的皮膚和血肉,那字體則是品牌的內(nèi)在骨骼。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

1. 字體 Typeface

再解釋字體前先來(lái)了解下「typeface」和「font」的區(qū)別是什么?在很多時(shí)候,當(dāng)人們?cè)谡f(shuō)"font"時(shí),他們實(shí)際上指的是"typeface"

Font 和 Typeface 這兩個(gè)概念,通常會(huì)被我們混淆,或者當(dāng)作近義詞。

當(dāng)然這是有一定歷史原因的,在西文印刷時(shí)代,typeface 是一個(gè)抽象的總體概念(它是一款"設(shè)計(jì)"),而 font 是這個(gè)概念受到幾個(gè)參數(shù)的制約而成的具象物體(它是一組具有確定大小和風(fēng)格的文字,是 typeface 的子集)

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

所以嚴(yán)格來(lái)說(shuō),typeface 要翻譯成字型,而 font 要翻譯成字體,前者是一種設(shè)計(jì),后者是具體的產(chǎn)品。例如 Helvetica 是一款 typeface,而 Helvetica Regular 就是一個(gè) font。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

我們回到字體,這里我們稱它 Font,當(dāng)然也可以稱它為 Typeface,這些概念我們只要了解就好了。

字體是同一種外觀樣式,但排版尺寸不同的字體的集合,例如「SF-UI」里有不同粗細(xì)(Regular、Blod、Light)。

在移動(dòng)端產(chǎn)品設(shè)計(jì)中,大多數(shù)手機(jī)廠商都會(huì)使用平臺(tái)默認(rèn)的字體,所以在 UI 設(shè)計(jì)中我們一般會(huì)使用系統(tǒng)默認(rèn)的字體。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

在一些產(chǎn)品設(shè)計(jì)中,為了體現(xiàn)產(chǎn)品屬性和品牌特征,往往會(huì)使用到特殊字體來(lái)作為主要文字,這種特殊字體通常需要在開(kāi)發(fā)的過(guò)程中把對(duì)應(yīng)字體嵌入到客戶端中。

2. 字體家族 FontFamily。

一個(gè)字體家族包含不同的字體,例如 Helvetica 就有超過(guò) 40 多個(gè)字體。這是為了在不同的場(chǎng)景中傳達(dá)信息而設(shè)計(jì)的人們?cè)诓煌氖褂脠?chǎng)景下表達(dá)合適的意思。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

3. 字號(hào) FontSize

字號(hào)是文字的大小數(shù)值,在 web 端使用 px 來(lái)做為字號(hào)的單位,移動(dòng)端 iOS 的字號(hào)單位 pt,安卓的字號(hào)單位是 sp。

字號(hào)大小決定了信息的層級(jí)和主次關(guān)系,合理的字號(hào)排版會(huì)使界面信息清晰有序,相反,糟糕無(wú)序的字號(hào)使用就會(huì)讓界面的信息變得混亂,影響閱讀體驗(yàn)。

字號(hào)的大小使用是有文字所處的場(chǎng)景來(lái)決定的,但在界面設(shè)計(jì)中有會(huì)有一定的基礎(chǔ)限制。

以中文為例,在界面中最小的文字不應(yīng)小于 10pt,否則就會(huì)因?yàn)樘《荒芎芎玫淖R(shí)別,而英文和數(shù)字的最小字號(hào)限制則為 9pt。

那我們是如何確定 10pt 這個(gè)數(shù)值的,我們手機(jī)距離眼睛的閱讀距離(30cm)左右以及最佳閱讀角度(0.3),使用視角計(jì)算公式,我們能識(shí)別到的最低的文字大小為 h= 2*30·tan(0.3/2) ≈ 0.157cm ,

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

拿 iPhone X 的 ppi 458 為例,公式中的距離和高度的單位都是厘米,字體的單位是 pixel。因此我們還需要將二者之間做一輪轉(zhuǎn)換,完成轉(zhuǎn)換數(shù)值是 2.45(cm 到 inch)0.157cm=458*(0.157/2.54cm)= 20px。

4. 字階 Typographic Scale

從字號(hào)的使用中可以延伸出字階的概念,在傳統(tǒng)的平面和印刷設(shè)計(jì)中字階被用來(lái)營(yíng)造版面平衡,經(jīng)典印刷字階中的字體尺寸是保持一定韻律變化的,和古典的音階十分相似。

我們知道在為樂(lè)曲選擇不同的音階可以讓聽(tīng)眾產(chǎn)生不同的感受,那么我們選擇不同的字階同樣也會(huì)影響我們的視覺(jué)感受。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

定義有規(guī)律的字階是構(gòu)建設(shè)計(jì)秩序感的基礎(chǔ),在 UI 設(shè)計(jì)中元素單位需要遵循偶數(shù)原則,因?yàn)殚_(kāi)發(fā)工程上是使用一倍圖進(jìn)行布局,在@2x 和@3x 的適配過(guò)程中不會(huì)出現(xiàn)半像素。

這樣下來(lái)我們可以使用偶數(shù)來(lái)作為基數(shù)進(jìn)行遞增,如 2、4、6、8、10。這種以 2pt 為字階的階梯關(guān)系也能很好的區(qū)分出字體層級(jí)。

對(duì)于最大字號(hào)就沒(méi)有過(guò)多限制,一般標(biāo)題使用最大能達(dá)到 32pt,這種大字號(hào)的標(biāo)題或文字設(shè)計(jì)需要根據(jù)具體場(chǎng)景來(lái)制定。

5. 行高 lineHeight

在字體設(shè)計(jì)中行距等同于行高,也就是文字外邊框整體的高度,字體距框的上下空隙為半行距,行高是這個(gè)高度通常會(huì)大于字本身的高度,例如 14 的文字行高為 22。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

在過(guò)往的 UI 字體設(shè)計(jì)中通常是用字體乘一個(gè)固定的倍數(shù)去定義行高。但在實(shí)際設(shè)計(jì)中,這樣的方式會(huì)有一個(gè)問(wèn)題,當(dāng)字體越大,行高也會(huì)越來(lái)越大。

Ant Design 嘗試從「自然律」的啟發(fā)定義了字體行高,并定義出行高的計(jì)算規(guī)律,也就是行高和字體之間都相差 8。感興趣的同學(xué)可以參考:https://zhuanlan.zhihu.com/p/32746810

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

有兩個(gè)關(guān)鍵點(diǎn)大家可以參考:

  1. 設(shè)計(jì)師希望字體高度和行高之間能從靜態(tài)黃金比出發(fā)。
  2. 但是基于設(shè)計(jì)經(jīng)驗(yàn),同時(shí)不給布局造成壓力,我們希望行高的增長(zhǎng)速度能夠隨著字體的增長(zhǎng)逐漸趨向于緩慢,并且最終不要超過(guò) 1 倍。

Ant 這套字體在實(shí)際落地應(yīng)用中更多是用于 web 端,在移動(dòng)端中還有一些是段落文字的排版設(shè)計(jì),這種場(chǎng)景中就需要單獨(dú)對(duì)字體進(jìn)行行高的設(shè)置。一般是根據(jù)場(chǎng)景文字的大小的 1.5-2.0 倍,這樣段落文本的閱讀就會(huì)比較舒適。

需要注意的是,英文的行高是基線與基線之間的距離,基線(baseline)是英文字體結(jié)構(gòu)中的概念,在 css 里文字的元素都是按基線來(lái)對(duì)齊的。西文基本行高是字號(hào)的 1.2 倍左右。

6. 行間距 spacing

說(shuō)到行高就不得不提行間距這件事,首先中英文行間距都是一行的最底部與另一行的最頂部的距離。但在字體排版中我們需要要拋棄掉行間距的使用。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

原因是在中文字體中行間距 = 行高 – 字號(hào),我們?cè)谠O(shè)計(jì)過(guò)程中需要盡量減少過(guò)多的屬性設(shè)置,僅通過(guò)行高來(lái)控制行間距,所以在文字行高的設(shè)定上我們就需要考慮多行顯示的效果。

7. 字重 FontWeight

字重是指文字筆畫的粗細(xì),常規(guī)的字重會(huì)包含 4-6 種,例如細(xì)體、常規(guī)、粗體、斜體等幾種類型。

在開(kāi)發(fā)框架中 font-weight 的屬性值還會(huì)有 100-900 的數(shù)值,這也代表了字體的粗細(xì)程度,font-weight 屬性值也與字體的字重描述詞一一對(duì)應(yīng)。例如 normal 等價(jià)于 400,bold 等價(jià)于 700。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

在 Figma 等設(shè)計(jì)軟件中我們一般遇到的字體都是使用一些通用的詞描述劃分其字重。

100 – Thin

200 – Extra Light (Ultra Light)

300 – Light

400 – Regular (Normal、Book、Roman)

500 – Medium

600 – Semi Bold (Demi Bold)

700 – Bold

800 – Extra Bold (Ultra Bold)

900 – Black (Heavy)

為了使文字在界面中更加穩(wěn)定,同時(shí)清晰有序。在多數(shù)情況下我們只使用 Regular、Medium 的兩種常規(guī)字重,在使用上需要和字號(hào)形成對(duì)應(yīng)關(guān)系,特殊情況下可以使用更粗或更細(xì)的字重來(lái)拉開(kāi)信息層級(jí)。

這里要著重說(shuō)明下安卓的字重使用,通常安卓使用的第一順位默認(rèn)字體字重僅 2 檔字重,如 Regular 和 Bold,所以在部分安卓機(jī)型上,字體會(huì)出現(xiàn)比較粗的情況。

所以在對(duì)接安卓開(kāi)發(fā)的過(guò)程中,可以調(diào)整 font-family 中的字體適配順位,優(yōu)先適配字重更全的字體,保證安卓端能夠展示 Medium 的字重 ,以優(yōu)化內(nèi)容可讀性。

8. x 高 x-height

在英文字體中,x 高是小寫字母 x 的高度,在 CSS 樣式中有一個(gè)單位叫 ex,就是基于 x 高的一種計(jì)量單位,1ex=小寫字母 x 的高度,也就是基線和主線之間的高度。

升部線、降部線:是英文字符的上限和下限。

基線 baseline:是西文字體設(shè)計(jì)與排版的概念,是既無(wú)升部也無(wú)降部的字符(如 x、e、z 等)坐落的一條線。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

9. 字間距 Tracking

顧名思義,字間距是指字符與字符之間的水平距離。在西文排版中字間距是十分重要的參數(shù),這是因?yàn)橛⑽淖帜傅膶挾仁遣煌模枰獎(jiǎng)討B(tài)調(diào)節(jié)字間距。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

這個(gè)屬性在中文的排版中很少會(huì)用到,因?yàn)橹形牡淖址麉^(qū)域是以正方形進(jìn)行設(shè)計(jì)的,且在設(shè)計(jì)時(shí)就以已經(jīng)考慮到了字符與字符之間的最佳距離,只有一些比較特殊的場(chǎng)景會(huì)用到。

10. 字偶間距 Kerning

字偶間距也叫做「字距調(diào)整」,是在字間距的基礎(chǔ)上,為實(shí)現(xiàn)不同字偶(一對(duì)字符)可以有不同字間距的調(diào)整值。我們都知道,不同的字母外形不同,所以只有同樣的字間距是不協(xié)調(diào)的。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

例如,「NA」間是標(biāo)準(zhǔn)的字間距,而「WA」由于 W 和 A 的形狀可以重疊,所以需要負(fù)字偶間距才能達(dá)到協(xié)調(diào)一致的外觀。

一般我們不需要更改字間距和字偶間距,因?yàn)樽煮w設(shè)計(jì)師已經(jīng)對(duì)他們做過(guò)了最優(yōu)處理。在單獨(dú)對(duì)字體設(shè)計(jì)時(shí)就需要考慮字偶間距,以達(dá)到更協(xié)調(diào)的視覺(jué)效果。

11. 比例字體和等寬字體

比例字體:一般是西文的字體會(huì)應(yīng)用到,比例字體根據(jù)字符外形設(shè)置不同字寬的字體,使得字體外形協(xié)調(diào),可讀性更好。

等寬字體:我們中文可以理解就是等寬字體,因?yàn)橹形亩际堑葘挼姆綁K字,而英文的等寬字體經(jīng)常被用于顯示計(jì)算機(jī)代碼示例。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

12. 全角與半角

全角是指一個(gè)字符占用兩個(gè)標(biāo)準(zhǔn)字符(英文)的位置。中文字符、全角的英文字符、國(guó)標(biāo) GB2312-1980 中的圖形符號(hào)、特殊符號(hào)都是全角字符。半角是指一個(gè)字符占用一個(gè)標(biāo)準(zhǔn)字符的位置。

通常情況下,英文字母、數(shù)字、符號(hào)等都是半角字符,而漢語(yǔ)、日語(yǔ)、及朝鮮文等文字都是全角。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

在排版設(shè)計(jì)中時(shí)也一定要記得中文搭配全角符號(hào),英文使用半角符號(hào)。否則會(huì)出現(xiàn)諸如「謝謝.」或者「t hanks?!惯@樣的錯(cuò)誤。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

1. 體系化設(shè)計(jì)

在同一個(gè)產(chǎn)品中需要建立起體系化設(shè)計(jì)的思路,對(duì)主標(biāo)題、副標(biāo)題、常規(guī)文字、輔助信息等字體做統(tǒng)一的規(guī)劃,落地到具體應(yīng)用場(chǎng)景中再進(jìn)行微調(diào)。

建立體系化設(shè)計(jì)的思路有助于強(qiáng)化字體在落地的一致性問(wèn)題,減少不必要的樣式出現(xiàn)。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

2. 少即是多

在視覺(jué)展現(xiàn)上用盡量少的樣式去達(dá)到設(shè)計(jì)目的。避免使用大量字階、顏色、字重去強(qiáng)調(diào)視覺(jué)重點(diǎn)或?qū)Ρ汝P(guān)系。減少字體類型的應(yīng)用,也能夠避免界面看起來(lái)零碎,使閱讀效率提高。

除字體外的其它元素設(shè)計(jì)也是同樣的道理,顏色、分割線、圖形,柵格等都需要遵循這個(gè)原則,避免樣式過(guò)多。

這樣做的好處是,在設(shè)計(jì)的過(guò)程中不同業(yè)務(wù)的設(shè)計(jì)師能夠很快的對(duì)齊,并且方便記憶,研發(fā)的效率也能夠提升。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

3. 信息節(jié)奏感

在需要拉開(kāi)信息層級(jí)的時(shí)候可以嘗試有節(jié)奏感的字階,參考 Ant 的字號(hào)設(shè)定就是從傳統(tǒng)音階的韻律中提取了字號(hào)的階梯,這種階梯關(guān)系能夠使字號(hào)的對(duì)比之間產(chǎn)生一種微妙的韻律感。

節(jié)奏感在文字布局中也常常被應(yīng)用到,比如通過(guò)左對(duì)齊的方式能夠減量減少視線的移動(dòng),從而使用戶專注于文本,減少閱讀的時(shí)間。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

1. iOS 系統(tǒng)字體規(guī)范

在 iOS 系統(tǒng)中,中文和英文分別是兩套字體,中文是字「蘋方」。英文字體有兩套,分別是無(wú)襯線體 San Francisco (SF) 和襯線字體「NewYork」。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

在中文字體環(huán)境中,我們使用蘋方就可以,蘋方中帶有英文字符,所以中英文混排不需要特意設(shè)置英文字體,統(tǒng)一使用蘋方就可以。

iOS 系統(tǒng)還為有閱讀大字體的需求的用戶提供了動(dòng)態(tài)調(diào)整的字體規(guī)范(系統(tǒng)字體顯示大小設(shè)置),蘋果官方字體可在 iOS 規(guī)范網(wǎng)站下載。

地址: https://developer.apple.com/fonts/

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

1. AndROId 系統(tǒng)字體規(guī)范

在 Android 系統(tǒng)中,為了更好的顯示效果,Goole 與 Adobe 聯(lián)合制作了「思源黑體」Noto 來(lái)作為中文默認(rèn)字體,英文字體則為「Roboto」。

Material Design 字體規(guī)范,包含了 5 種類型的字體使用范圍,包含展示性標(biāo)題、大標(biāo)題、標(biāo)題、正文、標(biāo)簽合。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

在安卓陣營(yíng)中不少手機(jī)廠商還為自家的系統(tǒng)定制了字體,以請(qǐng)強(qiáng)化自身品牌

比如小米的「MiSans」:

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

OPPO 的「OPPO Sans」:

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

錘子手機(jī)的「Smartisan T 黑」:

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

2. 文本定義框

在 UI 設(shè)計(jì)軟件中,我們通常會(huì)使用定寬模式進(jìn)行排版,也就是需要固定文本框的寬度,這樣做的目的是方便開(kāi)發(fā)在查看設(shè)計(jì)稿的時(shí)候能夠清楚的理解文字的顯示區(qū)域。

文本框的高度則由支持多少行文字或者文字顯示區(qū)的高度來(lái)決定,比如我們?cè)O(shè)置一個(gè)支持兩行文字的標(biāo)題,每行高 22,那么文本框的高就為 22*2 = 44。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

有一種情況在輸入框中,我們?cè)诒WC文字能夠被多露出半行時(shí),需要將文字框高度增加半行,這樣在超出輸入?yún)^(qū)域時(shí),用戶也能夠感知到可以滑動(dòng)。

3. 段間距

顧名思義,段間距就是段落與段落之間的距離。相信很多人在打字的時(shí)候是有這樣的習(xí)慣的,當(dāng)在輸入?yún)^(qū)域換段以后,會(huì)直接打一個(gè)回車增加段間距。

這是一種錯(cuò)誤的排版方式,我們?cè)陂L(zhǎng)文本排版的時(shí)候一定要進(jìn)行「段間距」 這個(gè)屬性設(shè)置,在開(kāi)發(fā)還原的時(shí)候也一定要對(duì)段間距進(jìn)行標(biāo)注。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

基于親密性原則,段間距在設(shè)置的時(shí)候盡可能的小于行高,且段間距需要隨字號(hào)大小而設(shè)定,避免出現(xiàn)小字應(yīng)用上段間距過(guò)大而大字模式段間距又過(guò)小的問(wèn)題。

4. 文字顏色的使用

首先需要避免使用純黑色來(lái)作為字體顏色,純黑色在白色背景上顯示時(shí)對(duì)比度過(guò)大,看久了就會(huì)感覺(jué)疲勞,讓用戶產(chǎn)生焦慮情緒。

字顏色如果和背景顏色太接近就會(huì)難以閱讀。在深色背景上對(duì)比度過(guò)大也會(huì)降低可讀性。考慮到無(wú)障礙設(shè)計(jì),參考 WCAG 2.0 的標(biāo)準(zhǔn),文字與背景應(yīng)該保持至少 4.5:1 ( AA 級(jí)別)的對(duì)比度,大文本的對(duì)比度應(yīng)至少為 3.0:1。

對(duì)比度定義為系統(tǒng)顯示器上最亮顏色和最暗顏色之間的亮度差異。它是顯示性能最重要的指標(biāo)之一。對(duì)比度越高,顏色區(qū)分越容易清晰。

參考:Web 內(nèi)容可訪問(wèn)性指南 2.0

對(duì)比度測(cè)試:contrast-ratio Contrast

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

我們還可以嘗試在色彩中加入一些品牌色彩傾向,這樣在突出品牌氛圍的同時(shí),還可以讓頁(yè)面看上去不那么死氣沉沉的。

使用不透明度:在彩色背景上盡量不要使用灰色文字,可以通過(guò)使用降低不透明度的白色或黑色文本來(lái)創(chuàng)建信息層級(jí)和對(duì)比度。

5. 標(biāo)點(diǎn)符號(hào)的設(shè)計(jì)

在中文排版規(guī)則中,為了保持閱讀順暢、體例一致,通常會(huì)有標(biāo)點(diǎn)避頭尾的規(guī)則。即有的標(biāo)點(diǎn)不能放在行首(如逗號(hào)、頓號(hào)、句號(hào)等),有的不能放在行尾(引號(hào)、前括號(hào)等)。

平面排版中處理遵守"先推入,后推出"原則,即不希望標(biāo)點(diǎn)符號(hào)出現(xiàn)在行首時(shí),應(yīng)在已經(jīng)標(biāo)點(diǎn)擠壓的基礎(chǔ)上再次檢查是否有機(jī)會(huì)將其擠到前一行,如沒(méi)有擠壓機(jī)會(huì)再?gòu)那耙恍腥∽詈笠粋€(gè)字至下一行。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

但"先推入,后推出"原則在 UI 場(chǎng)景中實(shí)現(xiàn)難度較大,意味著在判斷每個(gè)標(biāo)點(diǎn)位置的時(shí)候,還需要進(jìn)行多次邏輯判斷,技術(shù)成本太高。

因此我們以效率優(yōu)先,將"先推入,后推出"原則修改為「優(yōu)先推出式」標(biāo)點(diǎn)避頭尾,即從上一行推出一個(gè)字排在下行的行首,避免行首、行末出現(xiàn)禁排的標(biāo)點(diǎn)符號(hào)。

在標(biāo)題排版中還經(jīng)常會(huì)出現(xiàn)在最左側(cè)出現(xiàn)《書名號(hào)這樣的標(biāo)點(diǎn)符號(hào),在默認(rèn)的字體標(biāo)點(diǎn)符號(hào)通常會(huì)和字體等寬,這樣就會(huì)導(dǎo)致文字左側(cè)會(huì)有比較大的空隙,影響閱讀節(jié)奏感。

這種問(wèn)題的處理方式一般是,將標(biāo)題最左側(cè)的標(biāo)點(diǎn)符號(hào)擠壓為半角的寬度,以保證文字有比較好的視覺(jué)呈現(xiàn)。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

同樣如果在一行文字內(nèi)連續(xù)兩個(gè)標(biāo)點(diǎn)同時(shí)出現(xiàn)時(shí),會(huì)導(dǎo)致文字中垂岸一大段空白,使文字過(guò)于跳躍。

這種問(wèn)題的處理方式是,當(dāng)連續(xù)出現(xiàn)兩個(gè)及以上的標(biāo)點(diǎn)時(shí),擠壓第二位及以后的標(biāo)點(diǎn)為半角,縮減連續(xù)標(biāo)點(diǎn)的占位,減少文章中出現(xiàn)的"空洞"。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

需要注意的是標(biāo)點(diǎn)符號(hào)字面分為"可調(diào)整"和"不可調(diào)整"兩類,其中不可調(diào)整的標(biāo)點(diǎn)禁止擠壓。

"可調(diào)整"的標(biāo)點(diǎn)符號(hào)可擠壓掉標(biāo)點(diǎn)不占位部分的空間。"不可調(diào)整"的是因?yàn)楸旧順?biāo)點(diǎn)就是半個(gè)字寬所以就不需要擠壓。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

6. 信噪比理論

「信噪比」(Signal-to-Noise Ratio)原本是用在聲音和圖像領(lǐng)域的概念,比如,音響設(shè)備播放聲音時(shí),機(jī)器本身也會(huì)產(chǎn)生噪音,能不能原汁原味地播出聲音,同時(shí)最大限度地掩蓋噪音,是衡量設(shè)備好壞的重要指標(biāo)。

同樣在界面設(shè)計(jì)中,用戶所看的內(nèi)容可以分為"有用的信息"和"造成干擾的信息"。我們?cè)谠O(shè)計(jì)時(shí)應(yīng)該減弱或剔除無(wú)用的"噪音",使有用的"信號(hào)"突顯出來(lái)。

信噪比也跟人的視覺(jué)識(shí)別系統(tǒng)息息相關(guān),當(dāng)大量的信息同時(shí)呈現(xiàn)在我們面前的時(shí)候,有時(shí)候我們會(huì)覺(jué)得很容易,一下子就可以找到有用的信息。有時(shí)候我們又會(huì)覺(jué)得很困難,要花一些時(shí)間才能找到,比如在一堆類似圖標(biāo)中,就很難找到自己想用的。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

在關(guān)于視覺(jué)識(shí)別中有這樣一個(gè)實(shí)驗(yàn),讓受試者從許多個(gè)「Ⅹ」里面挑出一個(gè)「○」,然后再讓他們從「┸」里面挑出一個(gè)「┼」,挑選O的速度比挑選┼的速度就慢很多。

這是因?yàn)樵谝欢癣?,○的形狀與X的差異較大,所以能夠被更快的識(shí)別,在界面設(shè)計(jì)中,對(duì)于不同類型的功能,我們可以采取使用不同的色彩來(lái)區(qū)分不同的功能,或者將某一個(gè)類型的功能聚合,這種方式可以幫助用戶更快的找到目標(biāo)功。

回到字體排版,我們結(jié)合"信噪比"的理論,文字排版中需要盡可能的突出主要信息,減弱次要信息的展示使信息清晰干凈。

7. 字體與 icon 搭配

字體與圖標(biāo)在很多場(chǎng)景中會(huì)搭配使用,我們?cè)谠O(shè)計(jì)時(shí)可以定義字號(hào)與圖標(biāo)大小的變量搭配規(guī)律,使文字與圖形保持更好的協(xié)調(diào)關(guān)系。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

在標(biāo)準(zhǔn)文本框中,字體的高度與實(shí)際文字的上方和下方都有多余的空間,這個(gè)空間在實(shí)際開(kāi)發(fā)還原中經(jīng)常會(huì)遇到很多問(wèn)題。

為了解決這方面的煩惱,CSS Inline Layout Module Level 3 新增了一個(gè) leading-trim 和 text-edge 屬性。

可以讓我們刪除每一種字體中的額外間距,以便我們可以更好的計(jì)算相鄰塊元素之間的間距。請(qǐng)注意,采用修剪僅會(huì)影響文本框,它不會(huì)切斷其中的文本。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

在中文排版中,我們也會(huì)遇到字體上下間距不一致的問(wèn)題,包括當(dāng)遇到不同的字體時(shí),字體的行高也會(huì)不一致,當(dāng)我們?nèi)サ羯舷氯サ粑淖稚舷?padding 時(shí)就可以很省心的使文本垂直居中。

需要注意的是這個(gè)新 CSS 的規(guī)范還在編寫中,還未世界范圍的推進(jìn),不過(guò)有「微軟」團(tuán)隊(duì)的扶持相信國(guó)際化也不會(huì)太遠(yuǎn)了。

在這之前,我們想要盡可能的解決字符多出的間距問(wèn)題,就需要手動(dòng)把文字行高與客戶端系統(tǒng)默認(rèn)行高保持一致?;蛘呤窃诳蛻舳酥行薷淖煮w的行高,使顯示的字體能夠和我們?cè)O(shè)計(jì)的字體行高保持一致。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

Tokens 的意思是令牌,指令等,是一種計(jì)算機(jī)術(shù)語(yǔ)。在設(shè)計(jì)系統(tǒng)中,Design Token 則代表著設(shè)計(jì)變量,可以理解為封裝的視覺(jué)樣式參數(shù)。

Design Token 通過(guò)重新梳理歸納視覺(jué)樣式參數(shù),并通過(guò)一套符合設(shè)計(jì)師、工程師理解的統(tǒng)一的語(yǔ)義化命名規(guī)則,代替前端代碼中的復(fù)雜代碼。

這樣可以方便設(shè)計(jì)師進(jìn)行統(tǒng)一的管理和擴(kuò)展,保證產(chǎn)品的一致性,也大大提升開(kāi)發(fā)效率。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

Design Token 分為名稱和值兩部分。名稱一旦定下來(lái),便不可改變,值則可以根據(jù)需要進(jìn)行調(diào)整和配置。

譬如我們規(guī)定在設(shè)計(jì)系統(tǒng)中字體大小的層級(jí)有四種: caption, body, headline, large, 在用代碼來(lái)實(shí)現(xiàn)的組件庫(kù)中,字體的大小只能取這四個(gè)類型,每個(gè)類型對(duì)應(yīng)于一個(gè)或多個(gè)特定的值。值的可配置化是設(shè)計(jì)系統(tǒng)客制化的重要組成部分。

8000字干貨!超全面的 UI 字體排版設(shè)計(jì)指南

簡(jiǎn)單來(lái)說(shuō)就是,比如正文的字號(hào)在普通顯示模式下是 14、在大字顯示模式下是 16,引用語(yǔ)義化文字,命名為 Font Body,開(kāi)發(fā)在實(shí)現(xiàn)的時(shí)候不需要具體寫出文字的代碼,只需要使用 Font Body,那么在普通和大字兩種模式下匹配不同的字號(hào),這樣一套代碼就可以適配兩種模式了。

寫在最后

字體排版涉及的知識(shí)點(diǎn)真的非常多,很多點(diǎn)也只是簡(jiǎn)要的在這里說(shuō)了下,大家有想要探討的可以在評(píng)論區(qū)留言。

UI 字體與排版設(shè)計(jì)就分享到這里,希望對(duì)大家有所幫助,感謝閱讀。

作者:UX實(shí)驗(yàn)室

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)

本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/17861.html

免責(zé)聲明:部分文章信息來(lái)源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。