2020-8-21 資深UI設計者
今天的這篇文章也將圍繞著「文字」展開，相信大家看完后會對「文字」有一個全新的了解，也將明白文字對于版面的意義是巨大的，處理好它，基本上你的版面也就編排的差不多了。好了，下面我們開始今天的內(nèi)容吧。
首先來看幾張不同類型的海報，第一張文字占比較高，第二張圖片占比較高，第三張文字與圖片占比是五五開。
然而不管是屬于哪種類型的，它們的核心目的都是在傳達信息。因為對于一張海報來說，我們不光會看還會去閱讀它們。
平面設計就是通過文字來「說話」的。
而在廣告設計中，圖片的占比會非常高，因為廣告多以圖片為主，通過圖片我們能大致的猜測出設計師想要表達的東西是什么。
總結(jié)一下：廣告設計多以圖片為主，意在通過圖片傳達概念；而平面設計則多以文字或圖片為主，意在通過文字傳達信息。
那么作為信息傳達的載體，字體就顯得格外重要了。下面我會從字體的分類、字體的搭配、字體的氣質(zhì)與設置細節(jié)著手，慢慢帶領大家去認識字體，首先我們來看看字體的分類都有哪些。
中文字體大致可分為：黑體、宋體、圓體、書法體與卡通體等。
其中書法體又細分為：楷書、行書、草書與隸書等。
在列舉的這些字體中，最常用就是：黑體、宋體和圓體，而在書法體中，最常用的是楷書與行書。為什么說這些字體常用呢？因為在許多優(yōu)秀的設計作品中，這些字體的出現(xiàn)概率都非常高，尤其是黑體與宋體。
下面說一下英文字體，大致可以分為：襯線體、無襯線體、手寫體與展示字型等。
其中最常用的就是：襯線體與無襯線體。理由與中文一樣，它們也是使用率很高的字體，其次還有一個原因就是在以中文為主的設計中，它們與中文字體搭配起來比較契合。
拿黑體來說，與之搭配的英文字體就是無襯線體，因為它們的筆畫特征相似度很高。
宋體搭配的就是襯線體，因為宋體的筆畫特征是有粗細變化且有裝飾線，而英文的襯線體也剛好有與之相似的地方。
而圓體則是搭配擁有相似特征的無襯線體。
因為常用的書法體通常使用毛筆書寫，所以在筆畫特征上沒有與之相匹配的英文字體，大多數(shù)時候我們會選擇用襯線體來搭配，具體原因我會在后面的字體氣質(zhì)環(huán)節(jié)為大家講解。
雖然也有別的搭配方式存在，但我給大家提供的這些都是最常用和最安全的。說完字體搭配問題后，下面我們來看看這些字體，所包含的氣質(zhì)又有哪些。
首先是黑體，它具有科技感與現(xiàn)代感，這是由它簡潔干練的筆畫特征決定的。
其次黑體也能表現(xiàn)出運動與時尚的感覺，因為運動與時尚本就是偏現(xiàn)代的詞匯。
接著是宋體，它具有文化與歷史的氣質(zhì)，這個比較好理解。
而除了能表現(xiàn)出歷史與文化感之外，宋體還能表現(xiàn)出清新與雅致的感覺，這是由宋體的筆畫特征決定的，橫細豎粗且末端帶有裝飾，與優(yōu)雅精致的感覺十分契合。
圓體的特點也是非常明顯的，在看到它時腦海中的第一印象就是可愛與卡通。
除了刻板印象外，圓體那種圓滾滾的筆畫給我們的感覺還有安全和易親近，所以圓體也能用來表現(xiàn)兒童與溫暖感覺的題材。
一說到書法體，能直接聯(lián)想到的關鍵詞就是傳統(tǒng)與歷史，因為書法的演變就是我們漢字發(fā)展的軌跡。然后我們回過頭來講一下，為什么書法體可以和西文中的襯線體搭配。
原因就在于襯線體也具備書法體的某些氣質(zhì)，比如傳統(tǒng)、文化、歷史等。與書法體在早期的東方一樣，襯線體在早期的西方也是主要的字體之一。
溫暖、人情味兒，說到書法體可能很難聯(lián)想到這兩個詞，但是書法體確實具備這種氣質(zhì)。跟黑體這種棱角分明的字體相比，書法體是手寫出來的，它的筆畫特征給我們的感覺就是有「溫度」的。
在字符面板中，除了選擇字體與改變字號以外，這兩個區(qū)域相信大家用的還是比較多的，它們分別是：行距設置與字距設置。
拿行距來說，在使用時有幾個比較常用的設置方法，比如用當前文字的字號乘以1.2、1.732或是2。不過，通過這個方法所算出來的數(shù)值只是一個參考，也就是說你可以在這個基礎上做些調(diào)整。
比如：在計算出的數(shù)值的基礎上進行遞增或是遞減，這時你要做的就是用眼睛去觀察，覺得大了就減少一些，覺得小了就增大一些。
其中，用字號乘以1.2適用于標題。
比如上方那個標題的字號是40pt，那么行距的數(shù)值就是用40乘以1.2等于48。下方這個是在此基礎上做的一個調(diào)整，稍微增大了一些行距。
字號乘以1.2適用于標題，而用字號乘以1.732或2則更適用于小字號的文字，比如內(nèi)文。
上方是用字號乘以1.732的例子，字號是9pt，用它乘以1.732得出來的數(shù)值是15.588，四舍五入取個整數(shù)得到的行距就是16，下方這個是用字號乘以2得到的效果。
大多數(shù)情況下我建議大家用字號乘以1.732的行距，大小比較適中。
跟行距不同的是，基本上來說字距是無需調(diào)整的。當然還是那句話，要靠自己的眼睛來衡量，如果你覺得字與字之間離的很近的話，那么可以增大一些字距，反之，則可以減小一些。
其次就是，當你遇到一些偏輕松慢節(jié)奏的設計，比如典雅清新類的文學小說時，就可以適當?shù)脑黾右恍┳志鄟頎I造這個感覺。
比如這兩張海報，左邊的是經(jīng)典的居中結(jié)構(gòu)，右邊的是包圍結(jié)構(gòu)，構(gòu)圖都是可以的沒有任何問題，但為什么看起來還是怪怪的呢？因為文字組沒有刻畫好。
為了讓大家能更深刻地體會到文字組對于版面的意義，修改了這兩張海報，其中構(gòu)圖不變只改文字組。
這個修改前后的對比還是非常直觀的，可見文字組對版面的影響有多大。如果說構(gòu)圖是版面的骨架的話，那么文字組就是版面的五官，骨架再好五官不行結(jié)果也是可想而之的。
文字組分為：左對齊、居中對齊、頂對齊以及兩端對齊。
其中與左對齊與頂對齊對應的有：右對齊與底對齊。
給大家找了一些各種對齊方式的案例。這是左對齊的形式。
這是右對齊的形式，與左對齊相比右對齊屬于不常用的對齊方式，主要是出于易讀性的考慮，但并不是說不能用。
這是居中對齊的形式，最經(jīng)典的對齊方式之一。
這是頂對齊的形式，是文字豎排時最常用的對齊方式。
這是底對齊的形式，跟頂對齊相比也是屬于不常用的對齊方式。
最后是兩端對齊的形式，橫排與豎排都可以使用這種對齊方式。
如果作品看得足夠多，應該見過這種形式的組合，它同時包含了多種不同對齊方式，我們稱其為「對齊組合」。
比如我們可以借鑒結(jié)構(gòu)，以這個文字組為例，它的結(jié)構(gòu)是這樣的：兩端對齊、中間的文字字號大，上下的文字字號小，按照這個套路我們來試著做一個組合。
在編排前，我們先閱讀一下文案，通過文字可以得知，這是一個與籃球明星有關的內(nèi)容，氣質(zhì)上來說會偏現(xiàn)代一些。
所以字體可以選擇一款黑體，英文部分則搭配一款無襯線體。
根據(jù)之前總結(jié)到的這些特征，下面就可以開始編排文字了。
按照那個組合的套路，我們先將兩端對齊中較大字號的文字給編排出來，而標題信息無疑是非常適合用來放大的。
接著再將上方和下方的小字號文字給編排出來。
其中要注意的就是這段文字的行距，我參考了logo的高度來進行設置。而整個組合中，字距是基本沒有進行調(diào)整的。
值得一提的是，在兩端對齊的文字組中，這種小大小的形式非常好用。因為它的節(jié)奏變化豐富，所以大家在做兩端對齊的文字組時不妨試試。
這就是借鑒結(jié)構(gòu)的效果了，精髓在于要多去分析別人的形式與套路，并從中獲取做組合的靈感。除了能借鑒結(jié)構(gòu)之外，我們還可以借鑒標題字數(shù)+結(jié)構(gòu)，是什么意思呢？
以這個組合為例，它的標題有7個字，整個組合是由頂對齊與兩端對齊構(gòu)成的一個對齊組合。
它的組合結(jié)構(gòu)為小中大，按照這些特點我們來嘗試借鑒。
這是要用到的文案信息，通過閱讀文案可以得知，這是一個關于炸雞套餐的內(nèi)容。
通過去看kfc的各種物料，發(fā)現(xiàn)運用黑體的場景還是比較多的。
所以，在字體搭配上選擇用黑體與無襯線體。
根據(jù)之前總結(jié)到的這些特征，下面就可以開始編排文字了。
按照小中大的特點，依次將信息給編排出來。
完成后可以在組與組之間，添加一根小線段用于連接，以起到過度的作用，如果大家現(xiàn)在回過頭去看原圖的話，也能發(fā)現(xiàn)這一特征。
其中，標題的行距就是用標題的字號乘以1.2算出來的。
字距我也做了調(diào)整，因為默認0的字距看上去有些擁擠。
可以看出跟原圖相比，在不破壞組合結(jié)構(gòu)的情況下，針對文字信息的編排是做了些調(diào)整的，比如：原稿最左側(cè)是兩行頂對齊的小文字，在借鑒時將它換成了logo，因為我們是要借鑒它的結(jié)構(gòu)，而不是為了跟原稿做的一模一樣，具體還是要根據(jù)我們的內(nèi)容來合理編排。
首先我們來看這張圖，一個標準的兩端對齊、組合結(jié)構(gòu)與之前那個是一樣的，中間的字號大，上下的字號小。
除去這些外還有一個小特征就是，在大字號中間還有一層小字號的文字。
接著我們再來看這張圖，它的特點就是圖片疊壓在了文字的上方。至于它的結(jié)構(gòu)我們可以不用考慮，因為結(jié)構(gòu)已經(jīng)找好借鑒了。
這是要用到的文案與圖片。通過文字可以得知，這是一個關于介紹昆蟲的圖書，且配有一張插圖。這個插圖的風格是手繪形的，偏寫實一些沒有那么的卡通。
結(jié)合這些特點我選擇的字體搭配方式是，宋體配襯線體。
因為字體搭配這部分我又借鑒了一些相關風格的書，發(fā)現(xiàn)它們的字體搭配方式用宋體比較多。
分析完文案找到字體搭配方式后，在結(jié)合之前總結(jié)的一些組合特征，我們就可以開始編排了。
先將中間比較大的那層文字給編排出來，然后在它中間處置入一個小字號的文字。
中間層編排完成后再來編排上下層的文字，字號不用太大，整體注意好兩端對齊。
調(diào)整字距的地方有兩處，首先是標題，調(diào)整的原因在于默認值我覺得有些小了，其次是標題中間的那行文字，調(diào)整它的原因在于不想字號放太大。
因為是兩端對齊的結(jié)構(gòu)，不調(diào)整字距的話。標題中間那行文字只能通過放大字號來達到目，然而這個效果并不是我想要的。
綜合考慮，選擇了這個，最后，把圖片置入進去疊壓在文字的上方。
圖疊壓在文字上有一個無法避免的問題就是，被壓住的文字會出現(xiàn)無法識別的情況，英文還好但是中文卻不行，因為在這個組合中，中文是用來閱讀的文字，英文僅充當裝飾用。
既然中文是重要的信息，那為什么還要去遮擋它呢？因為有提示，通過這兩個字你也能猜出來被壓住的文字是什么。
這就是借鑒結(jié)構(gòu)+表現(xiàn)手法的例子，多一張圖片的加入，混合借鑒后的效果與原稿的相似度就會降低。
下面我們來看這張圖，它既有頂對齊又有兩端對齊的感覺，像這種組合我將它稱為頂部兩端對齊。
它的組合結(jié)構(gòu)也是一個小大小的形式。
分析完上一個組合后，再來看看這個組合，值得借鑒的地方有兩處，首先就是整體的結(jié)構(gòu)，其次就是字體搭配。由于已經(jīng)借鑒了上一個組合的結(jié)構(gòu)，所以這個組合要借鑒的就是字體搭配。
在原圖的這個字體搭配中，英文是最好判斷的，這個字體是襯線體，中文則比較陌生了，既不像黑體也不像宋體。
感覺是被設計過的，不像是字庫里的字體，我通過觀察發(fā)現(xiàn)，它既有宋體橫細豎粗的筆畫感覺，又有黑體干凈利落的特征。
所以，我在字庫字體中找到了一款具有類似感覺的字體：姚體。
在字體搭配上選擇用姚體搭配襯線體。這里需要強調(diào)的一點是，在挑選字體借鑒的過程中已經(jīng)考慮到了與文案的氣質(zhì)相匹配的問題，下面我們就來看看文案。
標題叫「遇見你之前」，給人的感覺比較文藝，而姚體我們前面也分析過了，它是具有宋體特征的，而且筆畫細長，整體給人的感覺就是比較文藝的。
分析完成后，結(jié)合之前總結(jié)的組合特點就可以開始編排了。
第一步，還是按照小大小的感覺將組合給編排出來，注意好頂部兩端對齊。
接著在組與組的縫隙處加入線條就完成了。
在這個組合中標題的行距與字距，默認狀態(tài)下是左邊這樣的，字距還好，行距卻非常大，這個時候你就不能套用之前講到的倍數(shù)去算行距了。那樣行距只會越來越大，所以這里我們要根據(jù)視覺效果來調(diào)整。
這樣，一個借鑒結(jié)構(gòu)+字體搭配的例子就完成了。
這是要用到的文案與圖片素材，首先，老規(guī)矩分析一下文案，選擇與之契合字體。書名叫《流星之絆》，還是比較文藝的。
根據(jù)這個書名，搜索了一下原書的樣子，在這三個不同的版本中，所感受到的氣質(zhì)有：溫情和雅致，在字體的選擇上與之較為契合的有：書法體與宋體，這兩個字體的選擇在這三個不同的原版本中也都有體現(xiàn)。
打算用宋體，與其搭配的英文首選就是襯線體了。
這是第一個要借鑒的對象，可能有人會說這不像文字組，這確實不是文字組，但并不代表它不能被聯(lián)想成文字組。
比如它的結(jié)構(gòu)是由一個頂對齊與一個左對齊構(gòu)成的對齊組合，而且下方的那個左對齊文字是放在了頂對齊的負空間處的。
其次，頂對齊的文字字號較大，下方左對齊的文字字號較小。
這就是根據(jù)那張圖所總結(jié)出的一些組合特征，下面我們就根據(jù)這些特征來編排文字。
先排出頂對齊的文字，然后在其負空間處置入左對齊的文字信息。
排到這發(fā)現(xiàn)右下角還有塊小缺口，既然是要做一個對齊組合的話，那么就要把它填滿。
關于頂對齊的中間部分為什么要這么做，是因為標題的字數(shù)不足以作出頂對齊的感覺，為了解決這個問題，選擇重復了一次標題并且將它的筆畫打散了，而打散的靈感來源于「流星」，它們就像流星一樣散布在天空中，不知道什么時候就會掉落下來。到這為止是書封的上半部分，下面我們來編排下半部分。
這是要用到的借鑒圖，它也是一個由頂對齊與左對齊構(gòu)成的對齊組合。
除了這個外它頂對齊部分的文字跟左對齊的比，也是屬于較大的。
這是從那個組合中，總結(jié)出的組合特征，與上一個幾乎一樣。
按照總結(jié)出的組合特征，將文字給編排出來。
其中頂對齊與這段左對齊的文字，它們的行距是用字號乘以1.732算出來的，字距則是做了些微調(diào)整，因為當文字縮小后，它的字距在視覺上看著也會變小，所以我在默認0的基礎上將字距增加到了50。
這就是根據(jù)那兩張圖片所借鑒出來的文字組了，下面把它們置入進版面中。
整體是一個上下結(jié)構(gòu)的，這種類型在構(gòu)圖中屬于上下構(gòu)圖。這也是為什么會找那兩張圖來當參考的原因，因為提前已經(jīng)考慮好了構(gòu)圖。
接下來做烘托氛圍的工作，先把底色換成夜空的黑色，然后配上圖片。
接著更換字體的色彩恢復識別性，其中黃色的部分是為了與白色部分做區(qū)分。
然后給腰封換上色彩以恢復下方的文字的識別性，再挑選一些信息，在它們的下方配上黃色，目的是為了與上方的色彩做呼應。
最后，將書脊編排出來，這個案例就編排完成了。
以上就是版式三部曲之文字篇的所有內(nèi)容了，回顧一下，由兩個部分組成。第一部分是：字體的分類、字體的搭配、字體的氣質(zhì)與設置細節(jié)。具體包括：字體有哪些不同的類型、在選中字體的類型后，要如何選擇與之搭配的英文字體。字體氣質(zhì)主要講的是，不同類型的字體都有哪些味道，它的意義在于當你確定好項目的風格后，可以根據(jù)不同字體的氣質(zhì)，快速的找到與項目定位契合的字體。
文章來源：優(yōu)設 作者：研習設
藍藍設計( tweetduck.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務