來源：研習(xí)社（微信號：yanxishe2017）
本文已根據(jù)“轉(zhuǎn)載規(guī)范”進行了標注，如需轉(zhuǎn)載，請聯(lián)系原出處！

標題承載著內(nèi)容的主旨，使用簡短的文字讓讀者在短時間內(nèi)了解信息內(nèi)容，在版面中具有重要地位。與內(nèi)文的性質(zhì)不同，標題主要功能就是吸引讀者視線，在整個版面中脫穎而出。那么，如何設(shè)計出吸引視線的標題呢？標題文字的組合需要注意哪些細節(jié)？有哪些簡單實用的標題制作技巧呢？本期會為大家逐一解答。

文字是平面設(shè)計的重要組成部分，相對于圖片的暗示性，文字傳遞出的是明確并且具體的信息。通過組合的方式，將關(guān)聯(lián)性強的文字信息相互靠近，劃分成數(shù)個小組塊。小組內(nèi)部也會繼續(xù)按此規(guī)則劃分。組與組之間相互靠近，形成一個整體。從而達到進一步簡化和梳理內(nèi)容的作用。

上圖中以色塊充當文字信息，文字與文字之間的行距均相等， 無法分辨出元素之間的關(guān)聯(lián)性，使得信息呈現(xiàn)過于復(fù)雜， 讀者無法在短時間內(nèi)分辨出信息之間的聯(lián)系。并不是說不能使用相同行距，對于信息處于同一層級的文字來說，則需要統(tǒng)一元素與元素間的距離。應(yīng)該根據(jù)實際內(nèi)容進行相應(yīng)設(shè)置。

通過距離創(chuàng)建元素之間的關(guān)聯(lián)性，以遠、中、近的距離配置，形成一個整體組合，組內(nèi)繼續(xù)劃分小組，使得閱讀信息的層級更加清晰，達到簡化信息的作用。組與組之間的留白距離（安全空間）通常以組內(nèi)主要元素固定（ 量化 ），需要確保組與組之間的距離明顯大于元素與元素間的距離。

字庫中的字體默認設(shè)置大多是以文字在小字號下排版效果而專門調(diào)整的，默認間距較為透氣，當文字放大后，字體之間的距離會變得松散，為了提高閱讀性，需要縮小文字之間的距離，形成一個區(qū)域面積。

字距

字體的默認字距一般是為正文優(yōu)化的。當文字放大成為標題后，字距也會隨之一起放大，導(dǎo)致標題文字在大比例下觀看會顯得松散，解決辦法就是使用緊湊型字距，反復(fù)調(diào)整到視覺上看著舒適的距離。（ 對于中宮較大或筆畫較粗的字體而言需要適當增加字距，以使標題不會顯得過于擁擠 ）

默認狀態(tài)下的字間距在標題狀態(tài)下會顯得很松散。

將字間距壓縮，會顯得更整體，這里需要注意的是，避免因為文字壓縮過多而影響閱讀。

行距

在正文中適用的行距設(shè)置并不適用于標題。當標題文字出現(xiàn)換行的情況時，需要在不影響閱讀邏輯的情況下盡量貼近，使文字段形成一塊面積區(qū)域，給人力量和一體感。具體縮進距離需要根據(jù)實際畫面美感決定。

通常情況下，正文中的默認行距并不適合用在標題上需要減小行與行的距離，從而增強標題的一體感，提高辨識度。

行距也不能設(shè)置的過小，當行距小于或等于字距后閱讀邏輯會發(fā)生混亂，需要格外注意。

在保證閱讀邏輯不受影響的前提下，根據(jù)實際情況調(diào)整標題的行距，這里選用標題文字的1 / 4作為行距。

眼睛才是最好的測量工具，很多時候軟件明明已經(jīng)顯示對齊了，但是看上去卻并沒有對齊。這時我們需要進行視錯覺補正處理，使元素在視覺上是相互對齊。

質(zhì)量區(qū)域

電腦設(shè)計軟件的對齊方式都是以元素邊界為基準對齊的，對于邊緣規(guī)整的元素很有效，而對不規(guī)則形狀的元素來說就會有視覺誤差的情況出現(xiàn)，也就是從視覺上看并沒有對齊。出現(xiàn)這種情況時，我們就需要找出元素的質(zhì)量區(qū)域，忽略掉不規(guī)則的部分，以質(zhì)量區(qū)域的面積為基準對齊。

對于不規(guī)則元素，找到它們的質(zhì)量區(qū)域非常簡單，只需要瞇著眼睛去看，忽略掉那些微小的突出邊緣，剩下的面積就是支配我們感知物體的大小的質(zhì)量區(qū)域。（ 將組合縮小觀看，也是驗證對齊的有效方法 ） 

這里我們以“高斯模糊”的方式模擬瞇著眼睛看到的物體。

創(chuàng)建清晰的閱讀邏輯是信息傳達的基礎(chǔ)，通過大小的對比，讓文字之間產(chǎn)生差異變化，使文字組合邏輯清晰且更加醒目和美觀。

我們將一級文字置入版面中來，通過大小對比，為主標題添加一個裝飾信息，讓信息不會太過單調(diào)。根據(jù)視覺微調(diào)字距至舒適為止。文字的周圍留白具有最小不可入侵的范圍，目的是保證文字之間不會因為過于貼近而影響識別性。

接下來加入策展人信息，版面中出現(xiàn)了三個層級關(guān)系，文字之間相互靠近，形成一個文字組合，從長度來看兩個小層級文字與主標題的兩個字的寬度相等。

加入時間信息，通常時間是需要被強調(diào)的，將時間作為第二級信息出現(xiàn)。2017作為年份，在這個版面里優(yōu)先級并沒有日期高，弱化年份信息，將月/日以符號的形式替代，添加星期的英文縮寫作為裝飾。信息經(jīng)過整理后，視覺層級與美觀度會較之前更好。

依次將其他信息加入到版面中，作為居中對齊，將其余組合向下移動來平衡版面重心，并在組合中加入短線，起到連接作用和保證組合的節(jié)奏變化。

為組合添加點綴裝飾元素，會激活文字的圖形屬性，在文字中穿插圖形元素，使組合內(nèi)部變化更豐富。

標題為“夏季”和“新品”兩個詞的組合，在標題中添加表示“并列”的符號，同時也為標題文字帶來了裝飾效果。

添加二級文字信息，將字距拉大后，文字以點的形式出現(xiàn)在版面中，我們會將文字按照圖形去理解，標題得到進一步的裝飾效果，注意保證圖形化文字的閱讀性，間隔不要超過一個字的距離。

將文字與線框結(jié)合成組，也是文字信息圖形化的方法之一，組合中出現(xiàn)了三個層級，組內(nèi)文字間的距離遠近由內(nèi)容的關(guān)聯(lián)性決定。

將其余信息依次添加到組合中，畫面中一共有5個文字層級。重要的信息通常會編排在版面上方，不重要的信息會編排在版面下方。

將主標題置入版面，二級文字選擇英文信息。為了避免頭重腳輕，將英文向下移動以平衡上方大文字的視覺重量。添加短線連接，同時也為畫面帶來裝飾效果。

將組合中的“三大系統(tǒng)”與圓形結(jié)合，會激活文字的圖形屬性，讀者會把這組文字看做圖形理解，增強了組合的視覺效果。

在組合中圖形化文字與普通文字穿插排列，能給原本呆板無趣的版面注入活力。

我們使用圖形與文字結(jié)合作為主標題，這種情況下應(yīng)用注意圖形與筆畫粗細的匹配，讓整體的灰度達到統(tǒng)一，文字與圖形交疊的部位這里用裁切的方式處理。

在主標題下方，加入副標題并拉大字距，點元素的出現(xiàn)會讓版面變的更靈動。

上方有些空，加入裝飾信息“2017”讓主標題更飽滿，層級關(guān)系更清晰。雖然三角形已經(jīng)被我們裁切的只剩下三個角落，但我們依然能識別出它是一個三角形，這是因為人們會根據(jù)視覺經(jīng)驗自動腦補眼前看到的事物。

將其余信息依次編排到組合當中，時間使用引導(dǎo)線的方式編排，讓閱讀變的更具趣味性，“全場五折起”提取關(guān)鍵字“五”改為阿拉伯數(shù)字會更有利于傳播。

通過顏色的反差原理，實現(xiàn)文字與文字相互疊壓的一種處理手法。除簡單疊壓外，還可以運用字與字筆畫的穿插以及利用混合模式進行透疊處理來豐富版面效果。

將促銷文案七折轉(zhuǎn)化成30%OFF置入畫面中，用線框進一步強調(diào)信息，把%OFF鑲嵌到線框中，并統(tǒng)一線框與文字的筆劃粗細度。

添加信息“海量新品七折起”將文字編排到線框底部空白位置，讓文字在保證筆劃不會密死的前提下，盡量接近周圍的灰度。

添加一個奔放的英文書法字體，疊在底層位置，可以嘗試不同的色彩為文字之間添加反差，這里使用的是黑色與黃色。

將部分筆劃置于頂層，會給人筆劃之間相互穿插的視覺感受。

對于裁切文字而言，人們會根據(jù)視覺經(jīng)驗自動填補被裁切的部位，從而產(chǎn)生與讀者的互動。但需要注意的是，不是所有文字都適合裁切，要避免因裁切而造成文字無法識別的問題。

將以及文字放到版面中，并以一級文字為參考字號添加二級小文字，文字組合時，應(yīng)盡量匹配文字的灰度。

繼續(xù)添加文字信息，將舉辦方添加到組合下方。通過分欄，使得組合內(nèi)部得到更多的變化性，本例中劃分為中間大欄，兩遍為小欄。

將日期作圖形化處理，與活動內(nèi)容一同編排到畫面底部，根據(jù)文字的關(guān)聯(lián)性劃分文字組之間的距離。相關(guān)的信息靠近，不相關(guān)的遠離。

這里主標題信息過長，提取關(guān)鍵字“茶墨”并放大成為主標題。原來的主標題成為對“茶墨”的解釋說明。

經(jīng)過觀察發(fā)現(xiàn)，兩個漢字均為左右結(jié)構(gòu)，就算裁切掉一半，也依然可以識別出原文字的字意。嘗試將文字組合成為一組。

將文字處理成書法的墨水侵染在宣紙上的視覺效果，并添加肌理，來增強畫面表現(xiàn)力。

將日期與促銷信息放大，置入版面中，從基線以上裁切，注意并不是所有文字都適合裁切，文字的識別度始終是需要優(yōu)先考慮的。

添加小文字點綴主標題，為主標題帶來裝飾性。使主標題在視覺上更飽滿，注意小文字的高度幾乎與主標題筆畫粗細相等。

“全場七折起”通過圖形化處理追加到組合的下方，統(tǒng)一元素之間的距離。注意文字放大后的邊緣會變得不規(guī)則，對齊時需要以眼睛對齊而不是標尺。

將其余信息編排到組合當中，我們發(fā)現(xiàn)組合出現(xiàn)了左輕右重的情況，為了保證組合的視覺平衡，我們將底部信息向右移動。組合向右移動后，信息變的平衡，同時也在層級上起到了強調(diào)主標題的作用。

同構(gòu)的字體組合方式比較特殊，將文字與文字之間的相同特征巧妙結(jié)合，構(gòu)成一個完整的外形，以圖形的方式呈現(xiàn)。難點在于并不是所有標題文字都適合這種技法，需要根據(jù)實際情況構(gòu)思是否能夠?qū)崿F(xiàn)。

我們將標題置入畫面中，同時加入英文翻譯作為第二層級豐富版面效果，因為標題過長，使得讀者在閱讀時容易產(chǎn)生疲勞，通過段行處理的方法，讓視線得到休息空間，從文字長度上看，也不建議長短對比過大。

文案中出現(xiàn)數(shù)字的情況，通常有價格、周年、重要時間或倒計時等等可以通過放大數(shù)字的手法強調(diào)信息，阿拉伯數(shù)字本身也具有圖形化屬性。上圖中，人民幣替換成符號以上標的形式追加到數(shù)字右上角。

繼續(xù)添加剩余的其他文字信息，在編排文字組合時，需要把握好組合長度的強弱節(jié)奏，避免出現(xiàn)長短對比過于極端或長短對比過于微弱的情況出現(xiàn)。

主標題過長，這里提取關(guān)鍵字“得到”與英文翻譯“Get”作為主標題文字，窄體通常用于節(jié)省空間，這里使用窄體是為了配合英文的寬度，達成一種視覺風(fēng)格。窄體的使用需要格外謹慎，它并不適用于正文或常規(guī)場景。

通過觀察得出，英文中的小寫“e”和“t”可以與中文中的“日”和“土”結(jié)合再一起，并且對識別性影響不是特別大，這里使用同構(gòu)的手法替換中文字中的筆畫。

字形的選擇是需要重點注意的地方，這里選擇筆畫特征相似的字體來搭配，才不會給人違和感。

通過位置的錯落編排，使“e”“t”基線對齊，注意文字元素之間的繞排，作者的中英文名字作為裝飾性元素出現(xiàn)，組合整體給人橫平豎直的秩序感，為組合中添加斜線，會讓原本平靜呆板的組合帶來動感。

將處理好的主標題加入文字組合中，注意以視覺方式對齊版面，標題與文字組合間空出一個字的距離，在比例上注意保持文字組與主標題的視覺重量是均衡的，避免頭重腳輕或頭輕腳重的情況出現(xiàn)。

從標題文字中提取與之相關(guān)聯(lián)的圖形元素并與之組合，會讓標題更加引人注目，將圖形嵌入文字中或利用文字中正負形的空間都是不錯的組合技巧。

窮游網(wǎng)的十周年活動,舉行全國演唱會，這里選取北京搖滾演唱會的文字信息進行實例演示，吉他可以說是搖滾明星們的靈魂，這里選擇吉他作為圖形提取到畫面中與英文主題“Ready”結(jié)合。我們把圖形視為一個字母來編排，傾斜放置會給人更加自然的感覺。

圖形作為剪影，多少有些單調(diào)的感覺，為其添加線框和提取關(guān)鍵字“窮游十年”來刻畫圖形內(nèi)部，使圖形內(nèi)部細節(jié)變得更豐富。

將活動日期與其他文字元素以點綴的形式編排到組合中，吉他傾斜的琴頸部分代替了日期12 / 15中間的斜線符號，文字以大、中、小的比例劃分層級。同時注意文字之間的間距和聯(lián)系。

我們把剩余信息編排到組合中來，為了建立疏密對比，同事也為了調(diào)節(jié)版面的重心，將文字組向下移動與主標題拉開距離,為了保持組合間的關(guān)聯(lián)性，在組合中加入線條來連接兩組元素信息。

主標題是“秋季新品”我們將其與“50%OFF”做成一個組合，在保證筆畫不密死的情況下，盡量統(tǒng)一文字的灰度。以大中小的層次比例組合到畫面中。

類似字母“O”的負空間完整的文字是添加圖形的絕佳位置，將數(shù)字“0”填滿后，為了灰度的平衡，將數(shù)字“5”的筆劃粗細加粗。

從標題中提取具象的圖形信息，說到秋季，人們具有普遍共識的圖形中，常見的就是楓葉。我們將楓葉的圖形與秋季的英文加入到數(shù)字“0”的負形空間內(nèi)，讓“0”與“5”的灰度盡量相近。

以主標題作為參考字號，添加其余文字信息，這個組合就做好了。

以上案例講述了標題組合中常用的6種組合技巧，分別是：大小層級、添加裝飾、字疊字、文字裁切、同構(gòu)筆畫和提取圖形。同時也探討了距離的遠近在文字組合中起到的作用，以及文字的行距與字距在標題中的設(shè)置方法。我們還與大家分享了如何根據(jù)眼睛來對齊元素。方法并不是死的，希望大家能夠活學(xué)活用。

來源：研習(xí)設(shè)（微信公眾號：yanxishe2017）