人們是如何閱讀的

設(shè)計中，好的排版能讓用戶愉快地閱讀，而不好的排版則會給用戶帶來糟糕的閱讀體驗。因此排版的潛在重要性不容忽視。

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

文字排版中的常見元素

1. 字間距與字偶間距

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

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

在大段落文字排版時，我們一般不需要更改字間距和字偶間距，因為字體設(shè)計師已經(jīng)對他們做過了最優(yōu)處理。在對一組字符單獨設(shè)計時，就需要考慮字偶間距，以達(dá)到更協(xié)調(diào)的視覺效果。總的來說，字號越小，字距應(yīng)當(dāng)相對越大，行高也應(yīng)該相對越大。反之亦然。

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

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

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

2. 字間距的三種形式

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

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

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

知識點：

提示：字間距雖然有以上三種形式，但是在實際工作中也要具體問題具體分析，例如有些中文字體本身「外邊框」的距離就比較大，如果再加大字間距，就會顯得過于分散。

3. 西文詞距

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

4. 標(biāo)點避頭尾

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

5. 文本框

在設(shè)計軟件中，我們在添加文本時，就會創(chuàng)建一個文本區(qū)域，例如Sketch中文本區(qū)域有三種類型，自動寬度、自動高度、固定尺寸，而「固定尺寸」可配合「設(shè)置文字層垂直對齊方式」使用。

6. 對齊方式

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

7. 行高

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

8. 英文行高

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

9. 中文行高

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

知識點：

提示：不管是標(biāo)題、正文還是注釋文字，行高都不易過大或過小，會導(dǎo)致閱讀困難。總的來說，字號越大行高應(yīng)該越小，字號越小行高應(yīng)該越大。

10. 行長

在《中文排版需求》里，明確寫明了這項基本要求：

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

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

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

11. 行間距

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

12. 英文行間距

英文的行間距指的是一行英文的底部線與下一行英文的頂部線之間的距離。可以簡單的理解為「行與行之間的距離」。另外英文文字底部和頂部都有對應(yīng)的專有名詞，英文頂部的那條叫「升部線」，底部那條叫「降部線」。

13. 中文行間距

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

14. 段間距

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

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

排版的CRAP原則

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

1. 對比 Contrast （增強效果、組織信息）

對比的基本作用是突出重點，增加可讀性。附加作用是有效增強視覺效果，打破平淡，吸引讀者注意。

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

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

大小對比

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

顏色對比

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

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

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

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

知識點：

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

3. 對齊 Alignment （統(tǒng)一而有條理）

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

對齊包括左對齊、居中對齊、右對齊 3 種方式。

• 左對齊：頁面中的元素以左基線對齊。左對齊是最常見的對齊方式，簡潔大方，利于閱讀；
• 居中對齊：頁面中的元素以中基線對齊。居中對齊給人一種嚴(yán)肅與正式感，不過也會有呆板的感覺；
• 右對齊：頁面中的元素以右基線對齊。相對少見的對齊方式，給人一種人為干預(yù)的感覺，加強了形式感，降低了閱讀效率；

4. 親密性 Proximity （實現(xiàn)組織性）

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

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

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

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

分割：簡單來說就是分組，建立組合關(guān)系。常見的形式有線條分割，卡片分割等；

色相：通過顏色的對比，不同顏色的信息會暗示這是同一類。常見的日歷行程就是通過不同顏色來區(qū)分時間和具體事項。

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

什么是信噪比及在設(shè)計中的作用

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

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

知識點：

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

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

還有蝦米音樂的駕駛模式

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

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

圖版率的高低對設(shè)計的影響

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

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

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

• 通過填充頁面底色，取得與提高圖版率相似的效果，從而改變頁面所呈現(xiàn)出來的視覺效果；
• 如果素材圖像尺寸小，可以通過色塊的延伸或是圖像的重復(fù)來組織頁面結(jié)構(gòu)，同樣可以提高圖版率；
• 利用排版的節(jié)奏感以及跳躍率（文字和圖片的跳躍率，是指版面中最大標(biāo)題和最大的圖與最小正文字體和圖片大小之間的比率）讓無趣的版面充滿活力，富有節(jié)奏的設(shè)計也能間接優(yōu)化頁面的圖版率；
• 增加頁面中的圖形也可以改善圖版率低的問題。無論是數(shù)字、序號、圖標(biāo)，甚至是視覺處理后的標(biāo)題文字，都能提高頁面的視覺度，并給用戶留下活躍生動的印象；
• 如果頁面中沒有圖片和插圖，那么通過對文字及其顏色的處理，也可以起到提高圖版率的作用；

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

文字在代碼中的實現(xiàn)及標(biāo)注

1. 文字在代碼中的實現(xiàn)

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

2. 字體字重對應(yīng)的font-weight值

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

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

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

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

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

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

3. 文本框行高的問題

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

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

4. Leading-Trim：數(shù)字排版的未來

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

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

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

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

Leading-Trim新規(guī)范

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

代碼示例：

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

使用后再來對比一下：

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

Leading-Trim修復(fù)對齊問題

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

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

知識點：

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

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

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

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

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

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

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

5. 設(shè)計中修改文字行高的方法

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

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

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

△在Sketch中修改文字高度

6. 什么是彈性適配

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

7. 標(biāo)注工具

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

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

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

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

設(shè)計驗收環(huán)節(jié)

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

因本文主講字體與排版，就拿這部分來說，需要檢視的就有：

• 字體：是否用的平臺默認(rèn)字體，如果是內(nèi)置字體檢查字體顯示有沒問題；
• 字號：導(dǎo)航欄、欄目名稱、分類頁簽、tab等字號大小是否符合規(guī)范；
• 字重：標(biāo)題和正文字重是否正確，粗體用的是哪一種，是Medium，還是SemiBold；
• 字色：標(biāo)題、正文、注釋、提示等文字顏色；
• 字間距：檢查中文間距和英文間距，段落文字標(biāo)點有無避頭尾；
• 行間距：段落文字行間距，有沒有出現(xiàn)多余的行高 ；
• ……

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

△ 視覺檢視表示例

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

寫在最后

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

參考文獻(xiàn)：

• 《W3C-CSS字體規(guī)范標(biāo)準(zhǔn)》
• 《從「行長為字號的整數(shù)倍」說起》
• 《Leading-Trim: The Future of Digital Typesetting》
• 《關(guān)于UI設(shè)計中字體應(yīng)用的干貨》
• 《字體與排版》
• 《深度剖析Baseline設(shè)計原理》

 

 

作者：印跡時光