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

 

 

 

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

字體是排版中最重要的元素，對(duì)用戶(hù)的閱讀體驗(yàn)有著至關(guān)重要的作用。一般來(lái)說(shuō)，設(shè)計(jì)師需要了解的字體通常有中文字體和西文字體兩種。西文字體由來(lái)已久，從最早的羅馬字體到現(xiàn)在蘋(píng)果手機(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ì)是一門(mén)非常嚴(yán)謹(jǐn)?shù)膶W(xué)科，里面蘊(yùn)含了很多道理，就連最基礎(chǔ)的字體選擇和排版，都經(jīng)過(guò)了將近千年的發(fā)展和演變，有非常多的專(zhuān)業(yè)知識(shí)。像平面設(shè)計(jì)一樣，在UI設(shè)計(jì)中字體的使用也有相應(yīng)的規(guī)范，設(shè)計(jì)師應(yīng)懂得這些基礎(chǔ)知識(shí)，才能將字體為自己所用。

本篇就從我們常用的設(shè)計(jì)軟件（sketch、Figma、P hotoshop）字符面板開(kāi)始，來(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.1  族類(lèi) GenericFamily

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

 

 

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

 

 

 

1.1.1  襯線(xiàn)體

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

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

 

 

   

1.1.2 黑體

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

 

 

 

1.2  字族 FontFamily

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

 

 

 

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

例如：“若我們能以滿(mǎn)懷新鮮的眼神去觀照日常，“設(shè)計(jì)”的意義定會(huì)超越技術(shù)的層面，為我們的生活觀和人生觀注入力量。”（引自原研哉的《設(shè)計(jì)中的設(shè)計(jì)》）

 

 

1.3  X-height（X字高）

在西文字體中，x高度是指字母的基本高度，就是基線(xiàn)和主線(xiàn)之間的距離。它指一個(gè)字體中小寫(xiě)字母的x高度，在現(xiàn)代字體設(shè)計(jì)領(lǐng)域，x高度代表了一個(gè)字體的設(shè)計(jì)因素，因此在一些場(chǎng)合字母x本身并不完全等于x字高。

 

 

除了字母a、c、e、m、n、o等高度一樣，還有一些小寫(xiě)字母的字高都比x字高要大，并分為兩類(lèi)：一是含有升部的字母，字母筆畫(huà)含有向上部分，如字母b、d、h；另一類(lèi)是含有降部的字母，字母的筆畫(huà)向下超過(guò)了基線(xiàn)，如字母g、p、q。

 

 

1.4  字號(hào) Font-size

字號(hào)就是字體大小，通常在網(wǎng)頁(yè)端使用px作為字號(hào)的單位。移動(dòng)端興起后，ios字體單位是pt，Android是sp。

以ios為例，正文字號(hào)不應(yīng)小于11pt，這樣才能被正常閱讀，建議在14-18pt之間。在使用較大的字體來(lái)獲得更好的易讀性的同時(shí)，我們也應(yīng)相應(yīng)地減小字體的字重，考慮Light、Thin，因?yàn)檫^(guò)重的字體會(huì)太過(guò)醒目，影響其他內(nèi)容的顯示效果。

 

 

當(dāng)字體大小為12-18pt時(shí)，建議使用Regular，18-24pt時(shí)，使用Light，24-32pt,使用Thin，當(dāng)字體大小超過(guò)32pt時(shí)，建議使用Ultralight。

字號(hào)大小決定了信息的層級(jí)和主次關(guān)系，合理有序的字號(hào)設(shè)置能讓界面信息清晰易讀、層次分明；相反，糟糕無(wú)序的字號(hào)使用會(huì)讓界面混亂不堪，影響閱讀體驗(yàn)。

 

 

 

1.4.1 設(shè)計(jì)中的最小字號(hào)

我們都知道在界面設(shè)計(jì)中最小字號(hào)不能低于20px，那是因?yàn)?，正常情況下，在手機(jī)距離眼睛30cm左右，使用視角計(jì)算公式，我們能識(shí)別到的最低的文字大小為h= 2*30·tan(0.3/2) ≈ 0.157cm ，拿我們經(jīng)常使用iPhone7的尺寸1334×750為例。iPhone7的dpi為324，也就是一英寸上顯示324個(gè)像素，1英寸為2.54cm，那么0.157cm=324*(0.157/2.54cm)= 20px。

 

 

1.4.2 字號(hào)的基數(shù)關(guān)系

我們?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為單位，能滿(mǎn)足字體大小的均衡。

 

 

1.5  字重 FontWeight

Weight，中文翻譯為“字重”，是指字體筆畫(huà)的粗細(xì)，字體中很重要一個(gè)概念，不同字重傳遞出來(lái)視覺(jué)感受完全不一樣。一般在字體家族名后面注名Thin、Light、Regular、Blod、Black、Heavy等。不同的字體廠(chǎng)商劃分字重各有不同，例如「蘋(píng)方」字體就有6種不同的字重。

 

 

一般都有細(xì)體、正常、粗體三種基本字族。在應(yīng)用場(chǎng)景上，通?！讣?xì)體」多用于超大號(hào)字體；「正常」用于正文內(nèi)容；「粗體」表示強(qiáng)調(diào)，多用于標(biāo)題；

 

 

1.5.1  兩種字重屬性

輕字重：傳遞出輕盈放松的視覺(jué)感受，常配合粗的字重使用，在一些輔助信息，說(shuō)明文案時(shí)候使用；

重字重：視覺(jué)感受莊重，很重要，常用在重點(diǎn)強(qiáng)調(diào)的文字，頁(yè)面大標(biāo)題，數(shù)字，引導(dǎo)行動(dòng)操作點(diǎn)上等；

例如百度網(wǎng)盤(pán)「發(fā)現(xiàn)」頁(yè)就用了Regular、Medium、Semibold三種字重以拉開(kāi)信息層次對(duì)比；

 

 

 

需要注意的是：在進(jìn)行界面設(shè)計(jì)時(shí)，不要用軟件自帶的文本加粗，它不僅破壞了字體本身的美感，還改變了文字原本的字寬，小字體下會(huì)模糊不清，合理的方式是使用字體本身的字重來(lái)控制粗細(xì)。

 

 

 

1.5.2  注意超細(xì)體的字體

字重超細(xì)的字體要謹(jǐn)慎使用。如果你設(shè)計(jì)的文本是裝飾性倒還好，如果是需要用戶(hù)能清晰閱讀的，就要特別慎重，能不用就不用，否則在部分低分辨率的手機(jī)屏幕上看起來(lái)會(huì)非常糟糕。

 

 

 

1.6  字色 FontColor

字色即文字對(duì)應(yīng)的顏色，不做過(guò)多解釋。需要大家注意的是 遠(yuǎn)離純黑色和純灰色！

純黑色就像沒(méi)有生命力的深淵，能吞噬所有細(xì)節(jié)，使用戶(hù)陷入冷冰冰的極端情緒中。純黑色還會(huì)與白色產(chǎn)生強(qiáng)烈的對(duì)比度，看久了就會(huì)感覺(jué)疲勞，讓用戶(hù)產(chǎn)生焦慮情緒。

 

 

還有就是真實(shí)世界中是不存在純黑色的。嘗試在色彩中加入一些色相，這樣就不會(huì)讓頁(yè)面看上去死氣沉沉的。例如ios系統(tǒng)「設(shè)置」頁(yè)面背景色就是加入了白色的低飽和度藍(lán)色，看上去柔和自然。

 

 

 

1.7  字符樣式 FontStyle

除了以上幾個(gè)最常用的文字屬性外，還有幾個(gè)使用頻率比較低的字體設(shè)置。例如帶下劃線(xiàn)的、刪除線(xiàn)的文本?！赶聞澗€(xiàn)文本」一般出現(xiàn)在「文字按鈕」或帶鏈接的網(wǎng)址，而「刪除線(xiàn)文本」一般會(huì)出現(xiàn)在商品櫥窗的現(xiàn)價(jià)、原價(jià)

 

 

例如「CCtalk」的課程現(xiàn)價(jià)和原價(jià)的區(qū)分，原價(jià)用刪除文本，「微信讀書(shū)」文章底部“加入書(shū)架 隨時(shí)閱讀”就是帶鏈接的下劃線(xiàn)文本。

 

 

 

1.8  字符選項(xiàng) Text options

Ps和Sketch都有文字（字符）選項(xiàng)一欄，主要針對(duì)西文字母大小寫(xiě)格式變換的設(shè)置。最常見(jiàn)有默認(rèn)大小寫(xiě)、全部大寫(xiě)、全部小寫(xiě)和小型大寫(xiě)字母，Ps里面還有「上標(biāo)」和「下標(biāo)」。

 

 

默認(rèn)大小寫(xiě)：即正常大小寫(xiě)格式，軟件不做干預(yù)；

全部大寫(xiě)：如果輸入的是小寫(xiě)字母，選擇這個(gè)選項(xiàng)，軟件會(huì)強(qiáng)制把小寫(xiě)改為大寫(xiě)；

全部小寫(xiě)：如果輸入的是大寫(xiě)字母，或者只是首字母大寫(xiě)，選擇這個(gè)選項(xiàng)，軟件會(huì)強(qiáng)制把所大寫(xiě)改為小寫(xiě)；

小型大寫(xiě)字母：這個(gè)選項(xiàng)比較特殊，所謂“小型大寫(xiě)”就是，在字號(hào)一樣的情況下，與小寫(xiě)字母一樣高，外形與大寫(xiě)字母保持一致。

 

 

1.8.1  注意英文大寫(xiě)

純大寫(xiě)的字母文本本身不太適合大篇幅閱讀，會(huì)加大閱讀障礙，用的時(shí)候注意要額外拉開(kāi)字母之間的字間距，提升可讀性。

 

 

 

1.9  全角與半角 Full-width and half-width

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

通常情況下，英文字母、數(shù)字、符號(hào)等都是半角字符。半角和全角主要是針對(duì)標(biāo)點(diǎn)符號(hào)來(lái)說(shuō)的，因?yàn)檎Ｇ闆r下沒(méi)有打全角英文的需求。

 

 

 

在設(shè)計(jì)作品時(shí)也一定要記得中文搭配全角符號(hào)，英文使用半角符號(hào)。否則會(huì)出現(xiàn)諸如“你好.”或者“t h a n k s。”這樣的錯(cuò)誤?？砂存I盤(pán)“capslock”鍵切換全角和半角。這個(gè)小知識(shí)點(diǎn)雖然非?；A(chǔ)，卻也是設(shè)計(jì)中經(jīng)常出錯(cuò)的地方。

 

 

 

 

 

眾所周知，iOS和Android兩大陣營(yíng)都有各自的設(shè)計(jì)系統(tǒng)，要作出符合平臺(tái)規(guī)范的設(shè)計(jì)，設(shè)計(jì)師應(yīng)熟讀各平臺(tái)的設(shè)計(jì)規(guī)則。因?yàn)楸酒灾v字體為主，我們就來(lái)看看iOS和Android各自字體的規(guī)范是什么樣的。

 

 

 

2.1  ios字體規(guī)范

 

2.1.1 可用字體

在iOS系統(tǒng)規(guī)范中，中文字體是「蘋(píng)方」字體。英文字體是「San Francisco」也簡(jiǎn)稱(chēng)「SF-UI」，英文還有另外一個(gè)襯線(xiàn)體「NewYork」。除了在iOS和Mac OS上，還單獨(dú)為Watch OS單獨(dú)對(duì)字體進(jìn)行了調(diào)整，命名為 San Francisco Compact。

 

 

 

2.1.2  字體設(shè)置

因?yàn)樵谟⑽淖煮w下，字體環(huán)境比較復(fù)雜，為了讓字體在任何地方看起來(lái)都最佳，蘋(píng)果官方針對(duì)不同字號(hào)開(kāi)發(fā)了兩套「SF-UI Text」和「SF-UI Pro」字體，而每套字體下面又分為T(mén)ext（文本模式）與Display（展示模式）兩種屬性，Text只有6個(gè)字重，而Display則有9個(gè)字重。

 

 

這么多類(lèi)型的字體我們?cè)撛趺从媚?？ios的建議是，在字號(hào)小于20pt時(shí)，使用SF-UI Text，大于或等于20pt時(shí)，則使用SF-UI Display。這需要我們?cè)诮缑嬖O(shè)計(jì)時(shí)手動(dòng)切換。

 

 

對(duì)于「NewYork」，小于20點(diǎn)的文本使用小號(hào)，20到35點(diǎn)之間的文本使用中號(hào)，36到53點(diǎn)之間的文本使用大號(hào)，54點(diǎn)或更大的文本使用特大號(hào)。

蘋(píng)方字體提供了6個(gè)字重供設(shè)計(jì)開(kāi)發(fā)者使用。所以從iOS11開(kāi)始，ios使用Semibold中粗體、大字號(hào)作為界面的標(biāo)題變的更為流行起來(lái)，較為明顯的有 iOS 中的一些原生APP，比如App Store、Apple Music...

 

 

 

在ios中，默認(rèn)字體單位是「pt」，正文字號(hào)不應(yīng)小于11pt，建議在15-18pt之間。在使用較大的字體來(lái)獲得更好的易讀性同時(shí)，也應(yīng)該相應(yīng)地減小字體的字重，因?yàn)檫^(guò)重的字體會(huì)太過(guò)醒目厚重，影響其他內(nèi)容的顯示效果。

 

iOS更全面的文字設(shè)置

動(dòng)態(tài)類(lèi)型可以通過(guò)讓讀者選擇他們喜歡的文本大小來(lái)提供額外的靈活性，除了標(biāo)準(zhǔn)的動(dòng)態(tài)類(lèi)型大小之外，iOS系統(tǒng)還為有閱讀大字體的需求的用戶(hù)提供了許多字號(hào)上的調(diào)整（可在系統(tǒng)字體顯示大小設(shè)置）

 

 

 iOS“顯示與亮度”下設(shè)置「文字大小」模式

 

 

  

「蘋(píng)方」和「SF-UI」字體可在iOS規(guī)范網(wǎng)站免費(fèi)下載

 

  網(wǎng)址：https://developer.apple.com/fonts/

 

 

 

 

 

2.2  android字體規(guī)范

 

2.2.1  可用字體

在Android設(shè)備中，Android始祖Google為了更好的追求視覺(jué)效果，聯(lián)合了Adobe設(shè)計(jì)發(fā)布了「思源黑體」(Noto)來(lái)作為中文默認(rèn)字體，「Roboto」為英文字體。

 

 

2.2.2  字體類(lèi)型

思源黑體，英文名為「NotoSans CJK」。該字體不僅僅在字形上更易于在屏幕閱讀，并且擁有7種字重，充分滿(mǎn)足了設(shè)計(jì)的要求。

 

 

英文「Roboto」字體，只有6個(gè)字重，視覺(jué)語(yǔ)言與思源黑體Noto保持一致。該字體具有“現(xiàn)代的”和“平易近人”的氣質(zhì)，是「Material Design」設(shè)計(jì)風(fēng)格下的推薦字體。

 

 

 

2.2.3  字體設(shè)置

Material Design字體規(guī)范，字體類(lèi)型比例支持的十三種樣式的組合。它包含可重用的文本類(lèi)別，每種類(lèi)別都有預(yù)期的應(yīng)用程序和含義。

 

 

注：Web瀏覽器根據(jù)根元素大小計(jì)算REM（根em大?。?。 現(xiàn)代網(wǎng)絡(luò)瀏覽器的默認(rèn)值為16px，因此轉(zhuǎn)換為SP_SIZE / 16 = rem。

 

△Material Design設(shè)計(jì)類(lèi)型比例。（字母間距值與Sketch兼容。）

 

 

值得注意的是，在安卓的字體單位中，不再以px，pt作為單位而是統(tǒng)一的使用了sp，換算方式是：

px = sp*ppi/160  ，sp = px / (ppi / 160) 

 

 

以iPhone7為例，尺寸是750x1334，密度326ppi 來(lái)?yè)Q算，那么Android的1dp = 1 * 326/160 ≈ 2px

「思源黑體」和「Roboto」字體可在GoogleFonts免費(fèi)下載，并且可以商用。

 

 

網(wǎng)址：http://www.googlefonts.cn/

 

 

2.3  話(huà)題擴(kuò)展

值得一提的是，越來(lái)越多的手機(jī)廠(chǎng)商，為了能夠強(qiáng)化自身的品牌形象，推出了定制款的字體。

 

比如小米的「小米蘭亭」：

 

 

 

 

OPPO的「OPPO Sans」：

 

 

 

三星的「SamsungOne」：

 

 

 

03  字體基礎(chǔ)知識(shí)小結(jié)

正如開(kāi)頭所說(shuō)，文字是界面中最核心的元素，字體作為基本語(yǔ)言，是設(shè)計(jì)中體現(xiàn)品牌很重要一點(diǎn)，字體選擇非常重要，字體也是設(shè)計(jì)中占比（約 80%）最大的內(nèi)容，所以我們一定要熟練掌握，接下來(lái)將從文字行高、字間距、行間距等說(shuō)起，圍繞字體排版繼續(xù)聊。

 

 

 

 

 

 

 

設(shè)計(jì)中，好的排版能讓用戶(hù)愉快地閱讀，而不好的排版則會(huì)給用戶(hù)帶來(lái)糟糕的閱讀體驗(yàn)。因此排版的潛在重要性不容忽視。

 

 

無(wú)論是在西方國(guó)家還是亞洲國(guó)家，大部分人們的閱讀習(xí)慣都是從左到右。這種閱讀模式已經(jīng)延續(xù)了幾百年，因此如無(wú)特殊需求，你應(yīng)該使你的文本左對(duì)齊，這樣符合人們一貫的閱讀習(xí)慣（阿拉伯地區(qū)除外）。人缺乏耐性，在閱讀過(guò)程中更似是一種遠(yuǎn)近不定的跳躍「掃視」?？菰锏奈淖秩绻麤](méi)有經(jīng)過(guò)任何排版處理，會(huì)讓讀者瞬間失去閱讀的興趣，除非非讀不可。所以通過(guò)改進(jìn)文字內(nèi)容的結(jié)構(gòu)和排版來(lái)提高閱讀性乃至「誘讀性」，是一件十分必要的事情。

 

 

 

 

 

 

 

4.1  字間距與字偶間距

字間距，英文名為“spacing”，即字符間的距離，事實(shí)上他是字符圖形外邊界框的尺寸和字符在方框中的位置的距離。

 

 

字偶間距，英文名為“Kerning”，也叫做“字距調(diào)整”，是在字間距的基礎(chǔ)上，為實(shí)現(xiàn)不同字偶（一對(duì)字符）可以有不同字間距的調(diào)整值。我們都知道，不同的字母外形不同，所以只有同樣的字間距是不協(xié)調(diào)的。例如，“NA”間是標(biāo)準(zhǔn)的字間距，而“WA”由于W和A的形狀可以重疊，所以需要負(fù)字偶間距才能達(dá)到協(xié)調(diào)一致的外觀。

 

 

在大段落文字排版時(shí)，我們一般不需要更改字間距和字偶間距，因?yàn)樽煮w設(shè)計(jì)師已經(jīng)對(duì)他們做過(guò)了最優(yōu)處理。在對(duì)一組字符單獨(dú)設(shè)計(jì)時(shí)，就需要考慮字偶間距，以達(dá)到更協(xié)調(diào)的視覺(jué)效果?？偟膩?lái)說(shuō)，字號(hào)越小，字距應(yīng)當(dāng)相對(duì)越大，行高也應(yīng)該相對(duì)越大。反之亦然。

 

西文字間距還分為：比例字體和等寬字體

比例字體：根據(jù)字符外形特點(diǎn)設(shè)置不同字寬的字體，使得字體外形協(xié)調(diào)，可讀性更好；

等寬字體：每個(gè)字符設(shè)置相同字寬的字體，字符間距較大，它們經(jīng)常被用于顯示計(jì)算機(jī)代碼示例；

 

 

 

 

 

4.2  字間距的三種形式

標(biāo)準(zhǔn)間距：即默認(rèn)的字間距，字與字之間的距離不大也不小，在設(shè)計(jì)中要根據(jù)不同的字號(hào)設(shè)置不同的字間距來(lái)排版，往往需要我們根據(jù)字號(hào)、字重的不同動(dòng)態(tài)調(diào)節(jié)間距參數(shù)，避免千篇一律使用軟件默認(rèn)間距。

 

 

緊湊間距：字與字之間的距離向里縮進(jìn)，在字符工具里的“字間距”數(shù)值為負(fù)數(shù)，一般在-5%~-30%不等，通常用在標(biāo)題中。

 

 

寬松間距：與緊湊型間距相反，字與字之間間距向外擴(kuò)大，在字符工具里的“字間距”數(shù)值為正數(shù)，一般在5%~30%不等，通常用在正文中。

 

提示：字間距雖然有以上三種形式，但是在實(shí)際工作中也要具體問(wèn)題具體分析，例如有些中文字體本身“外邊框”的距離就比較大，如果再加大字間距，就會(huì)顯得過(guò)于分散。

 

 

4.3  西文詞距

在西文閱讀時(shí)，視覺(jué)上的自然界限是「詞距」而不是「字距」。如果排版時(shí)需要進(jìn)行例如「兩端對(duì)齊」的行內(nèi)間距調(diào)整，中文直接可以動(dòng)「字距」，把調(diào)整量均勻地放到每個(gè)字間里；而西文卻是動(dòng)「詞距」，只能把調(diào)整量加到詞距里，而單詞內(nèi)部的字距依然是保持字體設(shè)計(jì)師預(yù)設(shè)的原始字距，這是保證西文易讀性的關(guān)鍵所在。

 

 

 

4.4  標(biāo)點(diǎn)避頭尾

在古代，書(shū)籍排版可以做到字間距恒定，原因是古代不存在「標(biāo)點(diǎn)」，也就沒(méi)有「標(biāo)點(diǎn)避頭尾」導(dǎo)致的種種問(wèn)題。而現(xiàn)代漢語(yǔ)存在標(biāo)點(diǎn)符號(hào)，有的標(biāo)點(diǎn)不能放在行首(如逗號(hào)、頓號(hào)、句號(hào)等)，有的不能放在行尾(引號(hào)、前括號(hào)等)。處理方式叫做「優(yōu)先推出式」標(biāo)點(diǎn)避頭尾，通過(guò)將本行內(nèi)的標(biāo)點(diǎn)寬度進(jìn)行擠壓后，騰出了空間給本來(lái)排不到的逗號(hào)，確保了字間距的恒定（篇幅限制，本文暫不談文字編排具體調(diào)整方法）。更詳細(xì)的介紹可移步字體設(shè)計(jì)與排印網(wǎng)站 Type is Beautiful 了解。

 

 

 

4.5  文本框

在設(shè)計(jì)軟件中，我們?cè)谔砑游谋緯r(shí)，就會(huì)創(chuàng)建一個(gè)文本區(qū)域，例如Sketch中文本區(qū)域有三種類(lèi)型，自動(dòng)寬度、自動(dòng)高度、固定尺寸，而「固定尺寸」可配合「設(shè)置文字層垂直對(duì)齊方式」使用。

 

 

4.6  對(duì)齊方式

文本的對(duì)齊方向有左、中、右三種對(duì)齊方式。文本對(duì)齊的標(biāo)準(zhǔn)是基于文本區(qū)域的邊界決定的，只有設(shè)置固定的文本區(qū)域?qū)R才有意義。

 

 

 

4.7  行高

行高或行距是文字排版的基礎(chǔ)參數(shù)，也是排版品質(zhì)的先決要素之一。行高是一行文本垂直方向的高度，這個(gè)高度和字高無(wú)關(guān)，文字內(nèi)容水平居中，如下圖所示：

 

 

 

4.8  英文行高

英文的行高指的是一行英文的基線(xiàn)與下一行英文的基線(xiàn)之間的距離，基線(xiàn)（baseline）是英文字體結(jié)構(gòu)中的概念，在css里文字的元素都是按基線(xiàn)來(lái)對(duì)齊的。西文基本行高是字號(hào)的1.2倍左右，字體有上伸部（ascender）和下延部（descender）可來(lái)創(chuàng)造行間空隙。

 

 

  

4.9  中文行高

中文的結(jié)構(gòu)屬于方塊字沒(méi)有基線(xiàn)，所以中文的行高指的是一行中文的最底部與下一行中文最底部之間的距離。中文因?yàn)樽址軐?shí)且高度一致，所以一般行高需要更大，根據(jù)不同用戶(hù)人群（兒童、年輕人、老年人）以及使用環(huán)境，可達(dá)到1.5~2倍甚至更大。

 

提示：不管是標(biāo)題、正文還是注釋文字，行高都不易過(guò)大或過(guò)小，會(huì)導(dǎo)致閱讀困難?？偟膩?lái)說(shuō)，字號(hào)越大行高應(yīng)該越小，字號(hào)越小行高應(yīng)該越大。

 

 

4.10  行長(zhǎng)

在《中文排版需求》里，明確寫(xiě)明了這項(xiàng)基本要求：

2.3.5 版心設(shè)計(jì)的注意事項(xiàng)：「一行的行長(zhǎng)應(yīng)為文字尺寸的整數(shù)倍，各行的位置盡可能頭尾對(duì)齊。」

「一行的行長(zhǎng)應(yīng)為文字尺寸的整數(shù)倍」，這一基本的、理所應(yīng)當(dāng)?shù)男枨罂此坪?jiǎn)單，但是在實(shí)際操作中，卻往往由于單位換算等各個(gè)原因沒(méi)有得到實(shí)現(xiàn)。對(duì)于后半句提到的「頭尾對(duì)齊」，將另文討論，但顯然也和本文相關(guān)。正因?yàn)樵O(shè)計(jì)師想實(shí)現(xiàn)「頭尾對(duì)齊」才會(huì)盲目地用軟件的「兩端對(duì)齊」功能，大家可以看看身邊的印刷品，注意看一下每段的最后一行間距是不是統(tǒng)一，就可以知道設(shè)計(jì)師有沒(méi)有按照這個(gè)原則排版。

 

 

中文的一個(gè)字占兩個(gè)字符，英文一個(gè)字占一個(gè)字符。正文的行長(zhǎng)通常在40到60個(gè)字符之間。在行長(zhǎng)較寬的區(qū)域（例如桌面）中，包含最多120個(gè)字符的較長(zhǎng)行將需要將行高增大。行長(zhǎng)過(guò)長(zhǎng)易讀性就會(huì)變差，讀者閱讀時(shí)容易串行，造成閱讀困難。合理的行長(zhǎng)使用戶(hù)在行間跳轉(zhuǎn)時(shí)感到輕快和愉悅，反之則會(huì)使閱讀成為一種負(fù)擔(dān)。

 

 

 

4.11  行間距

行距是指臨近兩行之間的距離。合適的行距讓用戶(hù)閱讀舒服，閱讀效率也高，行距太緊湊會(huì)讓內(nèi)容擠成一團(tuán)，實(shí)現(xiàn)無(wú)法正常閱讀；行距太寬松會(huì)讓內(nèi)容松散，產(chǎn)生了我們通常意義上的“河流”，阻斷了行的視線(xiàn)，Photoshop中默認(rèn)行距是1.2倍的字號(hào)，例如字號(hào)是30px，那么將行距設(shè)為36px和默認(rèn)“自動(dòng)”的效果一致。1.2倍的行距對(duì)中文排版來(lái)說(shuō)通常過(guò)小，合適的行間距通常為1.5～2倍之間。文本字體越小，兩行之間的行間距應(yīng)該越大，確保字與行呼吸的空間。

 

 

4.12  英文行間距

英文的行間距指的是一行英文的底部線(xiàn)與下一行英文的頂部線(xiàn)之間的距離?？梢院?jiǎn)單的理解為“行與行之間的距離”。另外英文文字底部和頂部都有對(duì)應(yīng)的專(zhuān)有名詞，英文頂部的那條叫“升部線(xiàn)”，底部那條叫“降部線(xiàn)”。

 

 

 

4.13中文行間距

中文的行間距就比較好理解了，是指一行文字的最底部與下一行文字的最頂部之間的距離。即行與行之間的距離。

 

 

 

4.14  段間距

段間距：段落與段落之間的距離，可保持頁(yè)面節(jié)奏，與字體、行高相互關(guān)聯(lián)。

為保證文章易讀性，正文段間距，可以簡(jiǎn)單地取一個(gè)空行（也就是一個(gè)行高），這是比較常規(guī)也比較合適的做法。舉個(gè)例子：字號(hào)12，行高設(shè)定20，段間距 = 行高 + 行間距。行間距越大，段間距就越大；行間距越小，段間距就越小，行距與段間距成正比。段落之間首尾的行之間間距應(yīng)該大于段內(nèi)的間距，這時(shí)候就應(yīng)該增加段間距，使得文本的閱讀體驗(yàn)得到進(jìn)一步的提升。

 

 

 

 

 

 

在任何一個(gè)設(shè)計(jì)中都需要把各個(gè)元素進(jìn)行分級(jí)，分清主次，這樣才能更好地抓住重點(diǎn)。為了能分清各元素的主次，就需要用到CRAP原則。這四個(gè)原則分別是對(duì)比、重復(fù)、對(duì)齊、親密性。

 

 

 

5.1  對(duì)比  Contrast  （增強(qiáng)效果、組織信息）

對(duì)比的基本作用是突出重點(diǎn)，增加可讀性。附加作用是有效增強(qiáng)視覺(jué)效果，打破平淡，吸引讀者注意。

一些界面排版混亂，可讀性非常差，用戶(hù)的視線(xiàn)不知道集中在哪，導(dǎo)致這種情況的發(fā)生都是因?yàn)榻缑鎯?nèi)容對(duì)比不明顯造成。在同一個(gè)視覺(jué)區(qū)域內(nèi)的邏輯不同的元素應(yīng)該有所區(qū)別，以避免視覺(jué)上的相似，這樣就可以有效的分清主次，為了使主要元素更突出，次要元素更弱化，可以盡量使它們的顏色，字體、大小，留白不同。如果兩個(gè)元素不盡相同，那就讓他們截然不同。比如，使用「14 號(hào)字」和「15 號(hào)字」進(jìn)行對(duì)比，差異就很不明顯，而使用「14號(hào)字」和「24 號(hào)字」，差異就明顯得多，一眼就能看到大號(hào)的字體。

 

 

在這點(diǎn)上，“微信讀書(shū)”的列表頁(yè)就做得非常好，它通過(guò)標(biāo)題與描述的字體粗細(xì)、大小、顏色進(jìn)行對(duì)比，把最有用的信息直觀地呈現(xiàn)在用戶(hù)面前標(biāo)題是吸引用戶(hù)關(guān)注的關(guān)鍵，作者和評(píng)分只是給用戶(hù)一種參考，不起決定性作用。因此，如果沒(méi)有對(duì)比原則，標(biāo)題和描述的字體同樣粗細(xì)、大小，你就會(huì)發(fā)現(xiàn)視線(xiàn)總是會(huì)情不自禁的被評(píng)分所干擾。

 

 

 

5.1.1  大小對(duì)比

為了區(qū)分文字、圖片、圖標(biāo)等元素的重要性，通常采用尺寸的大小來(lái)做對(duì)比。例如文章的正副標(biāo)題，副標(biāo)題一般用來(lái)解釋主標(biāo)題的內(nèi)容，因此副標(biāo)題的文字應(yīng)該通過(guò)大小和顏色調(diào)整變成次級(jí)，讓用戶(hù)閱讀時(shí)分清主次。

 

 

 

5.1.2  顏色對(duì)比

在排版中，首先要產(chǎn)生對(duì)比效果的就是背景和文字。文字與背景如果在顏色上很接近，那么就不容易區(qū)分開(kāi)來(lái)吸引用戶(hù)注意力，一般來(lái)說(shuō)，人們習(xí)慣白紙黑字（也是因?yàn)槿祟?lèi)有書(shū)寫(xiě)需求以來(lái)形成的），即白色背景和黑色文字。也有黑紙白字，例如現(xiàn)在APP都在做的DarkMode暗色模式，但其實(shí)暗色背景搭配淺色文字并不適合大量閱讀。當(dāng)然這也是為了配合用戶(hù)使用場(chǎng)景，在夜晚光線(xiàn)較暗的環(huán)境下，深色模式或許更利于閱讀。「冷知識(shí)：暗色模式其實(shí)就是廠(chǎng)商為了解決電池耗電量而出的計(jì)策，只是換了個(gè)噱頭而已」總之，不管設(shè)計(jì)中使用黑白、紅綠、藍(lán)黃哪一種配色，一定要注意文字和背景的對(duì)比是否清晰便于閱讀。

 

 

 

 

5.2  重復(fù) Repeated  （統(tǒng)一有秩序）

重復(fù)是保持整齊的重要準(zhǔn)則。既包括字體、字號(hào)的重復(fù)，也包括顏色、風(fēng)格的重復(fù)。對(duì)于新人來(lái)說(shuō)，要時(shí)刻牢記，盡量統(tǒng)一字體、字號(hào)、顏色等一系列元素，在統(tǒng)一的基礎(chǔ)上，找出需要強(qiáng)調(diào)的部分，進(jìn)行更改，通過(guò)對(duì)比原則進(jìn)行強(qiáng)化。

 

如果相同內(nèi)容（如標(biāo)題）屬于同一種邏輯關(guān)系，則應(yīng)該使他們的字體、顏色、留白盡量保持一致。這樣可以增加內(nèi)容的條理性，并加強(qiáng)設(shè)計(jì)的統(tǒng)一性。在重復(fù)原則下，用戶(hù)會(huì)因?yàn)橐曈X(jué)慣性繼續(xù)選招設(shè)計(jì)線(xiàn)索，根據(jù)重復(fù)性設(shè)計(jì)線(xiàn)索順場(chǎng)地瀏覽下去。

 

 

 

重復(fù)不是單一的機(jī)械式的元素重復(fù)，我們可以理解為用統(tǒng)一的重復(fù)元素塑造一個(gè)新的元素。當(dāng)然這是在保留基本的元素時(shí)所塑造出來(lái)的高度統(tǒng)一性的畫(huà)面，從而增強(qiáng)我們所想要的設(shè)計(jì)效果。

 

5.3  對(duì)齊  Alignment   （統(tǒng)一而有條理）   

 

在頁(yè)面設(shè)計(jì)上每一元素都應(yīng)該與頁(yè)面上的另一個(gè)元素存在某種視覺(jué)聯(lián)系，這樣才能建立清晰的結(jié)構(gòu)。任何元素內(nèi)容在在版面上都應(yīng)該盡量上下左右對(duì)齊，對(duì)于設(shè)計(jì)新人來(lái)說(shuō)，最好嚴(yán)格遵循一種對(duì)齊方式，不然就會(huì)導(dǎo)致混亂，實(shí)在不行，至少保證在同一內(nèi)容版塊中遵循一種對(duì)齊方式。方法也很簡(jiǎn)單，就是找到一條明確的對(duì)齊線(xiàn)，并用它來(lái)對(duì)齊。

 

 

                                                                                                                     

對(duì)齊包括左對(duì)齊、居中對(duì)齊、右對(duì)齊 3 種方式。

左對(duì)齊：頁(yè)面中的元素以左基線(xiàn)對(duì)齊。左對(duì)齊是最常見(jiàn)的對(duì)齊方式，簡(jiǎn)潔大方，利于閱讀；

居中對(duì)齊：頁(yè)面中的元素以中基線(xiàn)對(duì)齊。居中對(duì)齊給人一種嚴(yán)肅與正式感，不過(guò)也會(huì)有呆板的感覺(jué)；

右對(duì)齊：頁(yè)面中的元素以右基線(xiàn)對(duì)齊。相對(duì)少見(jiàn)的對(duì)齊方式，給人一種人為干預(yù)的感覺(jué)，加強(qiáng)了形式感，降低了閱讀效率；

 

 

 

5.4  親密性  Proximity  （實(shí)現(xiàn)組織性）

親密性是實(shí)現(xiàn)視覺(jué)邏輯化的第一步，它是指關(guān)系越近的內(nèi)容，在視覺(jué)上應(yīng)該靠得越近，反之，關(guān)系越疏遠(yuǎn)的內(nèi)容，在視覺(jué)上應(yīng)該越遠(yuǎn)。簡(jiǎn)單的來(lái)講就是要把畫(huà)面中的元素分類(lèi)，把每一個(gè)分類(lèi)做成一個(gè)視覺(jué)單位，而不是眾多的孤立的元素。這有助于組織信息，減少混亂，為讀者提供清晰的結(jié)構(gòu)。

 

那做好親密性有哪些方法呢，私以為有以下幾點(diǎn)：

 

留白：留白是設(shè)計(jì)中通用的萬(wàn)金油原則，通過(guò)留白建立距離關(guān)系進(jìn)行內(nèi)容區(qū)分；

左圖歌曲封面和歌曲名信息間隔比每首歌曲上下間距還大，導(dǎo)致用戶(hù)的視線(xiàn)流呈垂直方向。

 

 

 

分割：簡(jiǎn)單來(lái)說(shuō)就是分組，建立組合關(guān)系。常見(jiàn)的形式有線(xiàn)條分割，卡片分割等；

 

 

 

色相：通過(guò)顏色的對(duì)比，不同顏色的信息會(huì)暗示這是同一類(lèi)。常見(jiàn)的日歷行程就是通過(guò)不同顏色來(lái)區(qū)分時(shí)間和具體事項(xiàng)。

 

 

 

方向：不同的排版方式也可以很好的區(qū)分信息；

 

 

 

 

 

 

 

 “信噪比”（Signal-to-Noise Ratio）原本是用在聲音和圖像領(lǐng)域的概念。在互聯(lián)網(wǎng)產(chǎn)品中把 “信噪比”概念借用到了用戶(hù)體驗(yàn)。合理的信噪比可改善與用戶(hù)的交流。加大信號(hào)可以將有用的信息快速準(zhǔn)確的傳達(dá)給用戶(hù)，減少噪音并使信號(hào)脫穎而出。

 

從人機(jī)交互角度，我們應(yīng)該刪除與任務(wù)不相關(guān)的內(nèi)容或設(shè)計(jì)元素。你甚至可以將高信噪比的目標(biāo)與極簡(jiǎn)主義聯(lián)系起來(lái)。但是“信號(hào)”和“噪音”的確切含義會(huì)有所不同，一個(gè)人的信號(hào)可能是對(duì)另一個(gè)人的干擾，因此，用戶(hù)界面的信噪比有低有高，取決于具體的用戶(hù)和具體的任務(wù)。在用戶(hù)界面中，信噪比所涉及的“信息”可以是任何內(nèi)容，包括文本內(nèi)容，視覺(jué)元素或動(dòng)畫(huà)等。為了提高設(shè)計(jì)傳達(dá)信息的效率并幫助用戶(hù)完成任務(wù)，需要提高信噪比。

 

 

用戶(hù)始終喜歡清晰、簡(jiǎn)單、自然、好用的設(shè)計(jì)和產(chǎn)品。但需要注意的是，除了交流必要信息之外，我們還希望界面在視覺(jué)上具備吸引力，以喚起用戶(hù)的某些情感。有了額外的目標(biāo)（比如品牌宣傳、業(yè)務(wù)目標(biāo)等），應(yīng)該以合理的信噪比為目標(biāo)，而不是以絕對(duì)的方式排除所有“無(wú)關(guān)”的信息。

例如iOS6到iOS7圖標(biāo)擬物到扁平到改變，讓用戶(hù)可以更快速準(zhǔn)確的獲取到有效信息。而這一過(guò)程，就是典型的放大“信號(hào)”。

 

還有蝦米音樂(lè)的駕駛模式

我們都知道，在開(kāi)車(chē)的時(shí)候操作手機(jī)是非常危險(xiǎn)的。在40km/h的速度下，看手機(jī)3秒，相當(dāng)于盲駛了35米。但有些情況下又不得不操作手機(jī)，比如緊急來(lái)電或者導(dǎo)航出錯(cuò)……這時(shí)，駕駛模式的界面就顯得尤為重要了，讓用戶(hù)能夠快速準(zhǔn)確的識(shí)別信息并進(jìn)行操作，可以大大提高行車(chē)的安全性。

 

 

在界面中無(wú)論是何種分割方式(分割線(xiàn)、卡片陰影、分割色塊)，過(guò)于濃重的表現(xiàn)都會(huì)影響有效信息的獲取，成為界面中的“噪音”，因此我們應(yīng)該讓它們細(xì)一點(diǎn)、淡一點(diǎn)來(lái)降低表現(xiàn)，或者干脆不要(留白分割)。

 

 

 

 

 

 

圖版率就是頁(yè)面中圖片面積的所占比。在頁(yè)面設(shè)計(jì)中，除了文字之外，通常都會(huì)加入圖片或是插圖等視覺(jué)直觀性的內(nèi)容。這種文字和圖片所占的比率，對(duì)于頁(yè)面的整體效果和其內(nèi)容的易讀性會(huì)產(chǎn)生巨大的影響。當(dāng)然，除圖片本身外，我們也可以通過(guò)填充底色，圖形疊底等方式來(lái)提高界面中的圖版率。

 

圖版率高低的區(qū)別：同樣的設(shè)計(jì)風(fēng)格下，圖版率高的頁(yè)面會(huì)給人以熱鬧而活躍的感覺(jué)，反之圖版率低的頁(yè)面則會(huì)傳達(dá)出沉穩(wěn)、安靜的效果。提高圖版率可以活躍版面，優(yōu)化版面的視覺(jué)度。但完全沒(méi)有文字的版面也會(huì)顯得空洞，反而會(huì)削弱版面的視覺(jué)度。

 

 

在沒(méi)有圖像素材的情況下想要呈現(xiàn)出高圖版率，可以通過(guò)以下幾種方式來(lái)實(shí)現(xiàn)：

1、通過(guò)填充頁(yè)面底色，取得與提高圖版率相似的效果，從而改變頁(yè)面所呈現(xiàn)出來(lái)的視覺(jué)效果；

2、如果素材圖像尺寸小，可以通過(guò)色塊的延伸或是圖像的重復(fù)來(lái)組織頁(yè)面結(jié)構(gòu)，同樣可以提高圖版率；

3、利用排版的節(jié)奏感以及跳躍率（文字和圖片的跳躍率，是指版面中最大標(biāo)題和最大的圖與最小正文字體和圖片大小之間的比率）讓無(wú)趣的版面充滿(mǎn)活力，富有節(jié)奏的設(shè)計(jì)也能間接優(yōu)化頁(yè)面的圖版率；

4、增加頁(yè)面中的圖形也可以改善圖版率低的問(wèn)題。無(wú)論是數(shù)字、序號(hào)、圖標(biāo)，甚至是視覺(jué)處理后的標(biāo)題文字，都能提高頁(yè)面的視覺(jué)度，并給用戶(hù)留下活躍生動(dòng)的印象；

5、如果頁(yè)面中沒(méi)有圖片和插圖，那么通過(guò)對(duì)文字及其顏色的處理，也可以起到提高圖版率的作用；

 

 

上面的例子中，對(duì)于標(biāo)題文字都進(jìn)行了視覺(jué)加工，起到了整體頁(yè)面的裝飾效果。借助對(duì)這種文字大小、顏色、形狀的靈活運(yùn)用，來(lái)突出頁(yè)面的重點(diǎn)，避免視覺(jué)上的單調(diào)感。 

 

 

 

 

 

 

 

 

 

8.1  文字在代碼中的實(shí)現(xiàn)

 

在開(kāi)發(fā)落地的過(guò)程中，文字排版的開(kāi)發(fā)實(shí)現(xiàn)是很重要的一個(gè)環(huán)節(jié)，也是經(jīng)常讓設(shè)計(jì)師和開(kāi)發(fā)小哥哥頭疼不已的地方。字體和排版在實(shí)現(xiàn)上經(jīng)常會(huì)出現(xiàn)偏差，主要原因在于開(kāi)發(fā)的標(biāo)注方式和設(shè)計(jì)軟件不一致。因此理解文字開(kāi)發(fā)的實(shí)現(xiàn)方式，細(xì)節(jié)問(wèn)題的解決方法至關(guān)重要。在Android中，文字開(kāi)發(fā)工作是通過(guò)一個(gè)叫TextView控件來(lái)實(shí)現(xiàn)的，主要承擔(dān)文本顯示的任務(wù)，任何APP都不可避免的會(huì)用到它。TextView常用屬性如下圖：

 

 

 

 

8.2  字體字重對(duì)應(yīng)的font-weight值

在前文聊過(guò)，每種字體都對(duì)應(yīng)有好幾種字重（Regular、Normal、Medium、Light ），在給開(kāi)發(fā)的 UI 設(shè)計(jì)稿中，我們給的字體標(biāo)注通常有 PingFangSC-Regular、PingFangSC-Medium、PingFangSC-Bold，并不會(huì)直接給開(kāi)發(fā) font-weight 的值。雖然這需要開(kāi)發(fā)去熟記，但作為設(shè)計(jì)師了解它們的對(duì)應(yīng)關(guān)系，可以更順暢的和開(kāi)發(fā)溝通。

 

在W3C Fonts節(jié)章的規(guī)范標(biāo)準(zhǔn)中有給具體數(shù)值（100至900）：

這些有序排列中的每個(gè)值，對(duì)應(yīng)字體的字重。其大致符合下列通用重量名稱(chēng)：

• 100 - Thin

• 200 - Extra Light (Ultra Light)

• 300 - Light

• 400 - Normal

• 500 - Medium

• 600 - Semi Bold (Demi Bold)

• 700 - Bold

• 800 - Extra Bold (Ultra Bold)

• 900 - Black (Heavy)

   

當(dāng)然，并不是每一種字體都有這么多字重，那遇到有些字體只有2、3種字重，該怎么對(duì)應(yīng)font-weight 值呢？W3C Fonts也給出了解決方案，例如字重和400大致符合將會(huì)歸為Regular、Book、Roman；和700大致符合將會(huì)歸為Bold。若一個(gè)重量所指定的字形不存在，則應(yīng)當(dāng)使用相近重量的字形。通常，較重的重量會(huì)映射到更重的字形、較輕的重量會(huì)映射到更輕的字形。下圖所示：灰色表示該重量的字形不存在、使用的是相近重量的字形。

 

△ 只包含400、700和900重量字形的字體家族的對(duì)應(yīng)字重

 

△ 只包含300和600重量字形的字體家族的對(duì)應(yīng)字重

 

 

8.3  文本框行高的問(wèn)題

我們都知道在設(shè)計(jì)的時(shí)候，可能字體使用的24pt，但其實(shí)字體本身占用的距離是包含了升部及降部區(qū)域的，這樣就導(dǎo)致其占用空間大于24pt，而變成了33pt。每個(gè)字體都有相應(yīng)設(shè)定的「字高」比例，可以通過(guò)sketch選中字體后的height值來(lái)進(jìn)行查看。線(xiàn)高越大，問(wèn)題就越大。下面的示例顯示文本框之間的距離設(shè)置為32px。如你所見(jiàn)，即使你將所有垂直間距都設(shè)置為相同的值，它們?cè)谝曈X(jué)上也遠(yuǎn)大于32px。

 

△ 雖然標(biāo)注出來(lái)的參數(shù)都是一樣大，但視覺(jué)上間距卻是不一樣的

 

 

 

 

8.4  Leading-Trim：數(shù)字排版的未來(lái)

去年六月，Microsoft Design贊助了一個(gè)新的css規(guī)范，稱(chēng)為「Leading-Trim」。這個(gè)css方案能很好的解決上面這個(gè)問(wèn)題。

 

 

 

 

我們常用的UI設(shè)計(jì)工具，例如Figma和Sketch，似乎已經(jīng)采用了「half-leading」模式并以此方式渲染文本。因此，我們?cè)谠O(shè)計(jì)工具和瀏覽器中都遇到了這個(gè)問(wèn)題。

 

設(shè)計(jì)方面的解決方法相對(duì)容易：你可以忽略邊界框，而直接根據(jù)文本的大寫(xiě)高度和基線(xiàn)來(lái)測(cè)量空間。這是一個(gè)手動(dòng)過(guò)程，因?yàn)榇蠖鄶?shù)設(shè)計(jì)工具沒(méi)有上限高度和基線(xiàn)的參照目標(biāo)，盡管設(shè)計(jì)師將盡一切努力使我們的設(shè)計(jì)看起來(lái)更好！但是，如果采用這種方法，開(kāi)發(fā)人員仍將僅在CSS中實(shí)現(xiàn)邊界框間距。因此，它們會(huì)出現(xiàn)隨機(jī)的間距值。

 

為了緩解此隨機(jī)性問(wèn)題，開(kāi)發(fā)人員可以在CSS中以負(fù)邊距“裁剪”文本框。但是負(fù)邊距將需要手動(dòng)確定，并且是特定于字體的，因此是“隨機(jī)的”。任何字體，瀏覽器，操作系統(tǒng)或語(yǔ)言環(huán)境的更改都將不可避免地導(dǎo)致你不小心設(shè)置邊距。此外，該技術(shù)通常不是良好的編碼實(shí)踐，并且可能導(dǎo)致意外的副作用。

 

 

8.4.1  Leading-Trim新規(guī)范

Leading-trim是CSS工作組正在引入的新CSS屬性。顧名思義，它就像文本框剪刀一樣工作。你只需使用兩行CSS，就可以從你選擇的參考點(diǎn)中修剪掉所有多余的空間。

 

 

代碼示例：

h1 {

text-edge: cap alphabetic;

leading-trim: both;

}

 

上面的示例首先使用text-edge（也是新屬性）來(lái)告訴瀏覽器，所需的文本邊緣是大寫(xiě)高度和字母基線(xiàn)。然后，從兩側(cè)修剪多余部分。請(qǐng)注意，采用修剪僅會(huì)影響文本框。它不會(huì)切斷其中的文本。這兩行簡(jiǎn)單的CSS創(chuàng)建了一個(gè)干凈的文本框。這可以幫助你獲得更準(zhǔn)確的間距并創(chuàng)建更好的視覺(jué)層次。

 

 

使用后再來(lái)對(duì)比一下：

 

△使用新規(guī)范對(duì)比發(fā)現(xiàn)，右圖文字上下間距舒服多了，也更合理。

 

 

8.4.2  Leading-Trim修復(fù)對(duì)齊問(wèn)題

借助Leading-Trim，可以解決在APP上看到的所有奇怪的對(duì)齊問(wèn)題。例如，即使文字位于文本框內(nèi)，你的文本也不總是在容器中垂直居中。

 

 

默認(rèn)行高中保留的多余空間會(huì)導(dǎo)致文本不總是在文本框中居中。使用Leading-Trim修剪，就可以很省心的使文本垂直居中。

 

 

 

原因是每種字體的設(shè)計(jì)也不同。它具有自己的默認(rèn)行高，并且其中的文本可以具有不同的大小和基線(xiàn)位置，并不都是水平居中對(duì)齊的。因此，有時(shí)即使字體大小，行高和文本框位置保持不變，更改字體也會(huì)改變文本的對(duì)齊方式，如下例所示，文字很明顯沒(méi)有對(duì)齊。

 

 

在第二個(gè)示例中，你可以看到Leading-Trim如何防止這種情況并使文本完美對(duì)齊。

 

 

 

 

8.4.3  一致性和工作流程的改進(jìn)

Leading-trim修整超出了使間距和對(duì)齊更準(zhǔn)確的范圍。它在建立精確的間距系統(tǒng)，為設(shè)計(jì)準(zhǔn)確性和一致性以及高效的設(shè)計(jì)到開(kāi)發(fā)交接鋪平道路方面發(fā)揮著關(guān)鍵作用。

 

擁有間距系統(tǒng)有很多好處。設(shè)計(jì)師可以更快地確定間距，開(kāi)發(fā)人員可以設(shè)置相應(yīng)的間距變量以消除代碼中的隨機(jī)間距值。但是目前，即使我們?cè)O(shè)置了間距系統(tǒng)，由于文本框中的額外空間，對(duì)于文本元素來(lái)說(shuō)也不是很準(zhǔn)確。如果我們嘗試忽略設(shè)計(jì)中的邊界框并在代碼中“裁剪”文本框，則會(huì)遇到那些棘手的解決方法問(wèn)題。

 

△應(yīng)用于文本元素且沒(méi)有Leading-trim修剪的間距系統(tǒng)

 

借助領(lǐng)先的文字間隔系統(tǒng)，從設(shè)計(jì)到開(kāi)發(fā)的交接過(guò)程也將更加順暢，因?yàn)殚_(kāi)發(fā)人員將能夠建立完全相同的系統(tǒng)，并且避免在布局錯(cuò)誤上花費(fèi)大量時(shí)間。最重要的是，領(lǐng)先的微調(diào)間距系統(tǒng)將幫助我們提供用戶(hù)信賴(lài)和喜歡的外觀更美觀的產(chǎn)品。

 

 

8.5  設(shè)計(jì)中修改文字行高的方法

上面我們介紹了利用Leading-trim修剪字高的先進(jìn)方法，但是這個(gè)新CSS的規(guī)范還在編寫(xiě)中，還未世界范圍的推進(jìn)，不過(guò)有「微軟」團(tuán)隊(duì)的扶持相信國(guó)際化也不會(huì)太遠(yuǎn)了。

 

在這之前，我們想要盡可能的解決字符多出的間距問(wèn)題，就需要在設(shè)計(jì)軟件里手動(dòng)修改了，手動(dòng)把文字行高與客戶(hù)端系統(tǒng)默認(rèn)行高保持一致，從而給出準(zhǔn)確的文字間距。開(kāi)發(fā)在實(shí)現(xiàn)的時(shí)候iOS使用系統(tǒng)默認(rèn)行高，Android系統(tǒng)去掉文字上下padding。

這種方式雖會(huì)花費(fèi)不少時(shí)間，但也最精確，你可以據(jù)此設(shè)置出最美觀合理的間距，而不用擔(dān)心上線(xiàn)稿的還原度問(wèn)題，也便于我們后期的頁(yè)面校對(duì)和調(diào)整。

 

△在Sketch中修改文字高度

 

8.6  什么是彈性適配

文字彈性適配一般涉及的是寬度適配，寬度適配普遍使用的是間距適配，即定好左右頁(yè)邊距，中間彈性拉伸。這種方式可以做到較好的適配，也是做快速常用的適配方法。

 

8.7  標(biāo)注工具

設(shè)計(jì)師將設(shè)計(jì)文件交付開(kāi)發(fā)之前，應(yīng)站在程序員的角度著想，做好前期溝通，提供他們開(kāi)發(fā)所需要的資源。設(shè)計(jì)文件的標(biāo)注可以使用Sketch插件或直接上傳「藍(lán)湖」，拿Sketch插件「Sketch Measure」為例，它是一款十分智能的標(biāo)注插件，主要功能包含兩大塊：標(biāo)注和規(guī)范。

 

 

工具欄匯合了Measure所有功能的快捷工具，永遠(yuǎn)置于畫(huà)布頂層，有了它就不用再頻繁通過(guò)菜單欄去使用功能。

 

 

做好規(guī)范后，點(diǎn)擊「導(dǎo)出規(guī)范」一鍵自動(dòng)生成Html頁(yè)面，瀏覽器打開(kāi)頁(yè)面點(diǎn)擊其中任何元素都可以查看其屬性和間距，還包括代碼樣式，交給開(kāi)發(fā)開(kāi)發(fā)工程師后，不用溝通都能看明白。

 

△Sketch Measure導(dǎo)出標(biāo)注的網(wǎng)頁(yè)界面

 

 

 

 

產(chǎn)品功能開(kāi)發(fā)完成后，對(duì)產(chǎn)品對(duì)功能，視覺(jué)和交互操作進(jìn)行測(cè)試和驗(yàn)收，確保產(chǎn)品的可用性。一般在功能模塊驗(yàn)收完成后，就可以開(kāi)始具體的視覺(jué)設(shè)計(jì)驗(yàn)收，這也是由主要設(shè)計(jì)師負(fù)責(zé)的模塊，主要驗(yàn)收顏色、字體、圖形、間距、控件和空狀態(tài)等。

 

因本文主講字體與排版，就拿這部分來(lái)說(shuō)，需要檢視的就有：

字體：是否用的平臺(tái)默認(rèn)字體，如果是內(nèi)置字體檢查字體顯示有沒(méi)問(wèn)題；

字號(hào)：導(dǎo)航欄、欄目名稱(chēng)、分類(lèi)頁(yè)簽、tab等字號(hào)大小是否符合規(guī)范；

字重：標(biāo)題和正文字重是否正確，粗體用的是哪一種，是Medium，還是SemiBold；

字色：標(biāo)題、正文、注釋、提示等文字顏色；

字間距：檢查中文間距和英文間距，段落文字標(biāo)點(diǎn)有無(wú)避頭尾；

行間距：段落文字行間距，有沒(méi)有出現(xiàn)多余的行高 ；

......

在檢視過(guò)程中如發(fā)現(xiàn)問(wèn)題，截圖標(biāo)示問(wèn)題所在，并出具檢視報(bào)告。

 

△ 視覺(jué)檢視表示例

 

視覺(jué)設(shè)計(jì)的驗(yàn)收要追求細(xì)節(jié)上的完美，因?yàn)樵O(shè)計(jì)上的細(xì)節(jié)是很容易被挑錯(cuò)的，同時(shí)需要耐性和細(xì)心，要有像素級(jí)的視角，只有這樣才能完美的還原設(shè)計(jì)稿。

 

 

 

寫(xiě)在最后

原本只是想結(jié)合工作積累，寫(xiě)一篇字體應(yīng)用知識(shí)總結(jié)，沒(méi)成想給自己挖了一坑，涉及的知識(shí)點(diǎn)真是超級(jí)多，很多地方都可以單獨(dú)拿出來(lái)再另寫(xiě)一篇。另外其實(shí)在工作中，也建議大家對(duì)自己的經(jīng)驗(yàn)進(jìn)行總結(jié)，對(duì)關(guān)鍵信息進(jìn)行提煉加以沉淀，一方面能讓自己的知識(shí)更加牢固，另一方面也可以幫助后來(lái)者學(xué)習(xí)成長(zhǎng)。字體與排版基礎(chǔ)就分享到這里，希望對(duì)大家有所幫助。因?yàn)槠^長(zhǎng)，幾經(jīng)修改，有細(xì)節(jié)不正確的地方，歡迎留言矯正，感謝閱讀。

 

 

參考文獻(xiàn)：

《W3C-CSS字體規(guī)范標(biāo)準(zhǔn)》

《從「行長(zhǎng)為字號(hào)的整數(shù)倍」說(shuō)起》

《Leading-Trim: The Future of Digital Typesetting》

《關(guān)于UI設(shè)計(jì)中字體應(yīng)用的干貨》

《字體與排版》

《深度剖析Baseline設(shè)計(jì)原理》

 

 

作者：印跡_
鏈接：https://www.zcool.com.cn/article/ZMTE3MjI3Ng==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

 

 

 

藍(lán)藍(lán)設(shè)計(jì)(bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。

關(guān)鍵詞：UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)