相信剛接觸設(shè)計(jì)或者工作時(shí)間不長(zhǎng)的設(shè)計(jì)師，多多少少都會(huì)遇到各種各樣的編排問題。今天這篇文章就是源于一位設(shè)計(jì)師提出的問題，他說：“當(dāng)文案信息較多時(shí)要如何編排，版面看上去才能美觀一些”。我相信大部分人都遇到過類似的情況，為此我收集了不少相關(guān)的設(shè)計(jì)作品，從中也總結(jié)出了一些編排的方法分享給大家。

不過編排方法部分我放在了文章的最后，因?yàn)樵诰幣徘斑€有不少細(xì)節(jié)要注意，下面我就帶著大家先從最基本的建立頁(yè)面開始逐步過渡到編排。

 

 

在我們訂閱號(hào)之前的文章中提到過這樣一個(gè)觀點(diǎn)：版面是承載信息的一個(gè)載體。而一個(gè)版面承載信息的數(shù)量，完全取決于版心的大小。想要放下大量的信息，版心一定要大。但到底要多大才合適呢？

 

 

除去天頭地腳、左右頁(yè)邊距以外，剩下的空間就是版心所在的區(qū)域。也就是說確定好天頭地腳，左右頁(yè)邊距后版心就被確定好了。

 

 

設(shè)定頁(yè)邊距的方式有兩種，第一種是：等距設(shè)置，也就是天頭地腳、左右頁(yè)邊距的大小都是相同的。第二種是：不等距設(shè)置，天頭有可能大于地腳，左頁(yè)邊距也可能大于右頁(yè)邊距。而在這兩種設(shè)置方法中，等距設(shè)置是最常用的。

 

 

不管是在海報(bào)、書籍、網(wǎng)頁(yè)還是包裝中，等距設(shè)置都會(huì)讓版面看起來非常穩(wěn)定。所以在設(shè)定頁(yè)邊距時(shí)，四邊的大小最好是一致的；尤其是左右頁(yè)邊距。因?yàn)椋绻笥翼?yè)邊距設(shè)定的不一樣，版面很有可能會(huì)出現(xiàn)重心不穩(wěn)的情況。

 

 

當(dāng)左頁(yè)邊距大于右頁(yè)邊距時(shí)，重心可能會(huì)偏向右邊。同理，當(dāng)右頁(yè)邊距大于左頁(yè)邊距時(shí)，重心就可能會(huì)偏向左邊。

 

 

不過存在即合理，雖然不等距設(shè)置會(huì)使版面重心變得不穩(wěn)。但利用這個(gè)特性故意將天頭地腳、左右頁(yè)邊距設(shè)置得不一樣時(shí)，也能給版面帶來動(dòng)感。

 

 

我們來看這組對(duì)比，左邊的兩幅海報(bào)明顯是不等距設(shè)置，跟右邊的等距設(shè)置相比，左邊的海報(bào)少了四四方方的平穩(wěn)感，卻多了一些隨意又輕松的活躍感。

 

 

但是也不能以偏概全，因?yàn)榧幢闶堑染嘣O(shè)置的版面也同樣可以做出動(dòng)感，比如現(xiàn)在我們看到的這些海報(bào)就是很好的例子。畫面給人帶來什么樣的印象，取決于版面的編排方式，而不等距設(shè)置只是眾多方法中的一種而已。

 

 

在實(shí)際操作中設(shè)定不等距的頁(yè)邊距時(shí)，可以用一個(gè)邊的大小做參考，然后其他三邊都與它呈一定的倍率關(guān)系。假設(shè)我們以天頭作為參考，將它的邊距設(shè)為為1，地腳可以是天頭的2倍，也就是2。左頁(yè)邊距也可以是天頭的2倍。右頁(yè)邊距可以是天頭的1倍，也就是等于天頭的大小。

雖然邊距的大小可以自由設(shè)置，但是如果沒有一個(gè)參考標(biāo)準(zhǔn)的話，一開始可能會(huì)無從下手，所以接下來我會(huì)根據(jù)不同尺寸的版面、文字?jǐn)?shù)量的多少，列舉出一些標(biāo)準(zhǔn)的頁(yè)邊距數(shù)值，供大家參考使用。當(dāng)然在實(shí)際操作中，如果發(fā)現(xiàn)有不合適的地方，可以根據(jù)具體的需求來做調(diào)整。

 

 

這是我們常用的紙張規(guī)格：A0-A4、B0-B4。有一點(diǎn)要跟大家說明的是，不管是從A0-A4還是B0-B4，它們只是紙張大小發(fā)生變化，而長(zhǎng)寬比例是不變的。

 

 

因?yàn)橐粡埻暾腁0尺寸的紙張，只要從長(zhǎng)邊的中點(diǎn)對(duì)開一次就可以得到兩張A1，如果A1能夠等比放大的話，還是一個(gè)A0的大小。后面的變化以此類推，我們常用的A4就是由A0對(duì)開四次得到的。

 

 

針對(duì)A0、B0尺寸的版面，信息量多時(shí)頁(yè)邊距可以設(shè)定在25~40mm之間；信息量少時(shí)頁(yè)邊距可以設(shè)定在40mm或40mm以上。

針對(duì)A1-A3、B1-B3尺寸的版面，信息量多時(shí)頁(yè)邊距可以設(shè)定在：7~12mm之間；信息量少時(shí)頁(yè)邊距可以設(shè)定在：12mm或12mm以上。

針對(duì)A4、B4尺寸的版面，信息量多時(shí)頁(yè)邊距可以設(shè)定在：7~10mm之間；信息量少時(shí)頁(yè)邊距可以設(shè)定在：10mm或10mm以上。

 

 

當(dāng)信息量較少時(shí)，頁(yè)邊距的設(shè)定有兩個(gè)選擇：可以大也可以小。而當(dāng)信息量較多時(shí)為了編排考慮，頁(yè)邊距只能設(shè)定的小一些，好為版心騰出空間來。

 

 

我們可以看上面這兩張對(duì)比圖，在同一個(gè)箱子里放置衣物時(shí)，左邊的箱子非常凌亂而且明顯裝不下，而右邊的箱子卻非常整潔東西全都裝進(jìn)去了，因?yàn)橛疫叺南渥邮钦磉^后的。這是我想說的另一件事，在確定好版心后想要在其內(nèi)部編排大量信息的話，首先要學(xué)會(huì)整理信息。

 

 

不知道大家在看我們之前的教程時(shí)，有沒有注意到一個(gè)詞叫「群組化」。我們?cè)谡硇畔r(shí)，最簡(jiǎn)單又有效的手段就是「群組化」，將不同的信息按照類別來進(jìn)行分組，這樣就可以完成即容易理解又不會(huì)造成誤會(huì)的設(shè)計(jì)。而且對(duì)文案信息進(jìn)行分組既能幫到設(shè)計(jì)師，也能幫到觀看版面的受眾群體，為什么這么說呢？下面我們來說一下「群組化」的優(yōu)點(diǎn)都有哪些。

 

 

 

在以上兩個(gè)版面中，哪個(gè)版面內(nèi)部的信息更易于理解呢？我相信很多人已經(jīng)有判斷了。跟左邊的版面比，右邊的版面元素分類明確，信息一目了然。

 

 

減少讀者的獲取信息的時(shí)間這一點(diǎn)這非常有意義。要知道一張招貼海報(bào)，它被閱讀的時(shí)間只有幾秒鐘，如果我們?cè)O(shè)計(jì)師還故意給讀者制造閱讀上的障礙，這只會(huì)影響信息的傳播效率。

 

 

還是之前那個(gè)例子啊，通過對(duì)比大家也可以看出，群組化后的版面閱讀起來更為輕松，讀者也能在最短的時(shí)間內(nèi)獲取更多的信息。因?yàn)槿航M化后信息是比較集中的，視線不用在版面上來回的跳躍，節(jié)省了這段時(shí)間閱讀版面的速度自然會(huì)得到提升。

 

 

處理好留白問題，版面就不會(huì)顯得凌亂，通過這個(gè)對(duì)比圖就能看出，右側(cè)版面經(jīng)過群組化之后的信息更加清晰易讀，留白部分也更加完整。

 

 

版面元素是彼此相關(guān)的，也是構(gòu)成頁(yè)面的主角。在編排時(shí)要刻意將存在關(guān)聯(lián)的信息放在一起，這是群組化的基本原則。而這個(gè)原則也有一個(gè)名稱叫做「親密性原則」。

 

 

親密性原則是由格式塔組織律中的鄰近性原則轉(zhuǎn)變而來的。說的是相互接近的元素比起相互遠(yuǎn)離的，更具有成組的傾向。利用親密性原則，我們可以做到讓頁(yè)面內(nèi)的信息排布疏密得當(dāng)；元素與元素之間的聯(lián)系即符合邏輯又滿足視覺認(rèn)知的要求，這大大的降低了讀者在瀏覽版面時(shí)的視覺負(fù)擔(dān)。可謂是版面編排設(shè)計(jì)的重中之重。

簡(jiǎn)單來說，親密性原則就是將存在關(guān)聯(lián)性的信息進(jìn)行群組。但是要如何判斷信息與信息之間，是否存在關(guān)聯(lián)性呢？這也是我接下來要講的重點(diǎn)了。我們就以一張展覽海報(bào)中一定會(huì)出現(xiàn)的文案信息來舉例子。

 

 

我將這些信息都擬人化了，目的也是為了讓大家更好的理解，什么是親密性原則。首先是小明的爺爺，他對(duì)應(yīng)著標(biāo)題，小明的奶奶對(duì)應(yīng)著的副標(biāo)題，小明的叔叔對(duì)應(yīng)著標(biāo)題或副標(biāo)題的英文翻譯，小明的爸爸對(duì)應(yīng)著時(shí)間，小明的媽媽對(duì)應(yīng)著地點(diǎn)，而小明自己對(duì)應(yīng)著主辦方、協(xié)辦方等說明信息。

 

 

我們可以看到，標(biāo)題和副標(biāo)題可以成為一組，因?yàn)樾∶鞯臓敔敽湍棠淌欠蚱揸P(guān)系，英文和時(shí)間信息可以成為一組，因?yàn)樾∶鞯氖迨搴桶职质切值荜P(guān)系，地點(diǎn)和主辦協(xié)辦信息可以成為一組，因?yàn)樾∶骱退膵寢屖悄缸雨P(guān)系。這是最基本的一個(gè)信息分組方式，關(guān)系也很明確。接下來看看在實(shí)際的海報(bào)中，分組的方式都有哪些變化。

 

 

首先看這張海報(bào)，它的的分組方式是：將標(biāo)題、副標(biāo)題以及英文翻譯歸為一組，時(shí)間地點(diǎn)主辦方等信息歸為另外一組。我們通過家族體系表來看看，他這么分組的依據(jù)在哪呢。

 

 

通過家族體系表我們發(fā)現(xiàn)，他的分組邏輯是這樣的：小明的爺爺奶奶本就是一組的，再加上叔叔也很合理，因?yàn)樗麄冎g是親子關(guān)系。而時(shí)間地點(diǎn)和主辦方成為一組，它們分別對(duì)應(yīng)著小明和他的爸爸媽媽，同樣也是親子關(guān)系。

 

 

再來看看這張海報(bào)的分組方式是什么。設(shè)計(jì)師將標(biāo)題和副標(biāo)題組合在了一起，而英文翻譯單獨(dú)存在，再接著就是時(shí)間地點(diǎn)主辦協(xié)辦方等信息。

 

 

通過家族體系表我們發(fā)現(xiàn)，這個(gè)分組方式和上一張海報(bào)的非常類似，唯一的區(qū)別在于英文翻譯獨(dú)立存在了。這就引出了分組時(shí)要注意的第一個(gè)要點(diǎn)：

 

 

接著看這張海報(bào)的分組方式：標(biāo)題獨(dú)立存在、副標(biāo)題也獨(dú)立存在，英文翻譯和時(shí)間地點(diǎn)等信息成為一組，沒有主辦協(xié)辦方等信息。

 

 

之前也說過了，存在關(guān)聯(lián)的信息既可以成組也可以分離；所以標(biāo)題、副標(biāo)題獨(dú)立存在沒有任何問題，那英文翻譯為什么可以和時(shí)間地點(diǎn)成組呢？因?yàn)椋∶鞯氖迨搴桶职质切值荜P(guān)系，小明的爸爸和媽媽是夫妻關(guān)系。但是這里我們要注意，即使是互相存在關(guān)聯(lián)的信息也存在著強(qiáng)弱之分。這就是在分組時(shí)要注意的第二個(gè)要點(diǎn)：

 

 

在看一下原海報(bào)，我們也可以發(fā)現(xiàn)這個(gè)特點(diǎn)，即便是在同一個(gè)組內(nèi)，英文翻譯與時(shí)間地點(diǎn)之間還是有一定距離的。

 

 

我們?cè)倏催@張海報(bào)，它的分組方式有點(diǎn)特殊了，設(shè)計(jì)師將標(biāo)題副標(biāo)題、時(shí)間地點(diǎn)、主辦方等信息分成了一組，英文翻譯獨(dú)立存在。

 

 

之所以這么分組，依據(jù)在于小明的爺爺和奶奶本就是一組的，而小明的爸爸和他們之間是親子關(guān)系，小明與他的爸媽之間也是親子關(guān)系的。所以可以將標(biāo)題副標(biāo)題、時(shí)間地點(diǎn)、主辦協(xié)辦等信息全部劃分在一個(gè)組合內(nèi)，但要注意好關(guān)系之間的強(qiáng)弱之分。英文翻譯單獨(dú)出現(xiàn)理由前面已經(jīng)說過了就不再贅述。

 

 

最后我們?cè)賮砜纯催@張海報(bào)，設(shè)計(jì)師將所有的信息都整合在了一起，這又是什么分法呢？

 

 

因?yàn)樗麄兌际且患胰耍舜酥g都存在關(guān)聯(lián)性，因此將所有的信息組合在一起也同樣是合理的。

 

 

說完分組的方法后，再來說說組合數(shù)量的問題吧。在這一組的海報(bào)中，從左至右，文字組的數(shù)量逐步遞增，隨著組合數(shù)量的增加版面的編排難度也在增加，組合的數(shù)量越多版面的編排難度也就越高，所以大家在分組時(shí)千萬不要貪多，那會(huì)給你的版面規(guī)劃帶來困擾。

 

 

通過距離我們能判斷出，一個(gè)版面中到底存在有多少個(gè)組合，因?yàn)殡x得越近越有成組的傾向。

值得一提的是組合也有大小之分，一般大組合中都會(huì)包含幾個(gè)小組合。因?yàn)椋^的大組合就是由這些小組合組成的。

 

 

我們單獨(dú)來看上面這張海報(bào)中的大組合，發(fā)現(xiàn)里面包含許多小組合，這些小組合之間也都存在距離，這個(gè)距離就是「組間距」。

 

 

組間距的大小由親密性原則控制，關(guān)系越親密組與組之間的距離也就越小。但這個(gè)距離是有個(gè)度的，離得近不代表就要挨在一起，離得遠(yuǎn)也不代表就要徹底拉開。

 

 

為了方便大家理解組間距的設(shè)定方式，我們看一下下面這個(gè)例子。

 

 

這個(gè)組合它的組間距是怎么設(shè)定的？是隨意擺弄的嗎？肯定不是。設(shè)定組間距是有方法的，比如關(guān)系較為親密的信息之間，間隔的距離可以參照小字號(hào)文字的字高。

 

 

在這個(gè)組合中小字號(hào)的文字有三組，我用藍(lán)色標(biāo)出。

 

 

我挑選了這組文字作為參考。因?yàn)樗拇笮∵m中，用它能避免信息與信息之間發(fā)生粘連。而關(guān)系較為疏遠(yuǎn)的信息之間，間隔的距離則可以參照大字號(hào)文字的字高。

 

在這個(gè)組合中最大的字號(hào)就是中文標(biāo)題了，我選擇用它作為參照，那些間隔較大的距離就是這么設(shè)定的。

 

 

仔細(xì)看大家能發(fā)現(xiàn)，我并沒有百分百嚴(yán)絲合縫的去卡字高，因?yàn)闆]有必要這么做，知道一個(gè)大致的距離就可以了。如果你就是想嚴(yán)絲合縫的對(duì)齊上也沒問題。

 

 

如果出現(xiàn)因信息量較多，導(dǎo)致像上圖這樣無法設(shè)置組間距時(shí)該怎么辦呢？這個(gè)時(shí)候我們可以使用「相似原則」或者「閉合原則」來解決這個(gè)問題。

 

 

相似原則，即彼此相似的元素容易被認(rèn)知為一個(gè)整體，如：色彩相似、形狀相似等等。

 

 

 

拿色彩相似來說，運(yùn)用的方式非常簡(jiǎn)單就是最基本的換色。通過給文字組換上不同的色彩來進(jìn)行區(qū)分。

 

 

色彩相似是換色，同理形狀相似就是換字體。各個(gè)字體的外形都不一樣，給文字組換上不同的字體，是可以起到區(qū)分作用的。不過，這需要設(shè)計(jì)師對(duì)字體有較深入的研究才能做好。

 

 

因?yàn)椴煌煮w混搭在一起，稍有不慎就會(huì)導(dǎo)致版面看起來非常凌亂，字與字之間仿佛在打架非常不和諧。總的來說我更推薦大家使用色彩相似，操作難度低且容易出效果。

 

 

閉合原則就是通過框選的方式來進(jìn)行分組的。被框在一起的元素容易被認(rèn)知成一個(gè)整體。

 

 

比如這張海報(bào)，就是通過框選的方式進(jìn)行分組的。

 

 

如果不想進(jìn)行多個(gè)框選的話，還可以像這樣單純使用線條來進(jìn)行分割，同樣能起到閉合的效果。

這是為什么呢？格式塔原理大家都不陌生吧，我們?cè)谥暗奈恼轮杏袑ｉT講過，用格式塔原理中的封閉原則就可以解釋這一現(xiàn)象。

 

 

我們看左邊的圖形時(shí)第一眼感受到的，除了三條線段以外還有一個(gè)圓形。因?yàn)槲覀兊囊曈X系統(tǒng)，強(qiáng)烈傾向于看到完整的物體，以至于大腦能將一塊空白的區(qū)域解析成一個(gè)圖形。

 

 

上面這張海報(bào)就是一個(gè)很好的例子，去除掉文字后我們能明顯的感受到，版面被線段裁切成了5份，而每一份都是一個(gè)獨(dú)立且封閉的圖形。

講到這大家還記得開篇處那位同學(xué)的問題嗎：“當(dāng)文案信息較多時(shí)要如何編排，版面看上去才能美觀一些”。其實(shí)之前講的所有理論部分，都是給編排部分做鋪墊用的。因?yàn)橹挥挟?dāng)確定好版心以及整理完信息后，我們才需考慮要編排問題。另外我還附帶了一個(gè)內(nèi)容，那就是圖片數(shù)量對(duì)版式的影響。

為什么要加這個(gè)內(nèi)容呢？因?yàn)椋覀冊(cè)诰幣虐婷娴臅r(shí)候不光要排文字還要排圖片，圖片數(shù)量不同對(duì)應(yīng)的編排方式也有所不同。下面就給大家介紹一下，針對(duì)信息量較多圖片數(shù)量又不同的版面，都有哪些編排的方式。

 

 

排法一：圖文穿插。信息量多，圖片數(shù)量在4張或是4張以上時(shí)，我們可以使用圖文穿插的手法。

 

 

它的表現(xiàn)形式就是圖片或是圖形，與文字信息相互穿插排列。用這種相對(duì)活潑的方式可以用來緩解閱讀大面積文字時(shí)所產(chǎn)生的壓力。

圖文穿插可以分為：規(guī)則型與不規(guī)則型兩種。

 

 

報(bào)紙我們都知道，它是用來承載大量信息與圖片素材的一個(gè)載體，它就是一個(gè)很好的規(guī)則型的例子。

 

 

其中最值得我們借鑒的，就是早期報(bào)紙的編排方式。將不同的文字組安排在劃分好的區(qū)域內(nèi)，然后用框或是用線來區(qū)分文字組。這是屬于有規(guī)則的圖文穿插形式，講究的是秩序美。

 

 

不規(guī)則型的圖文穿插，跟規(guī)則型比起來更為靈活多變。不過難點(diǎn)在于，需要設(shè)計(jì)師有較強(qiáng)的編排功底才能駕馭。

 

 

排法二：圖字疊壓。信息量多，圖片數(shù)量少時(shí)可以使用圖字疊壓的手法。因?yàn)槭墙袌D字疊壓，所以圖既可以疊在字上，字也可以疊在圖上。

 

 

首先，我們來看看圖疊字的表現(xiàn)形式。手法非常簡(jiǎn)單，就是圖片疊壓在文字在上方，而被疊壓的文字大多都是標(biāo)題或者標(biāo)題的英文翻譯。在實(shí)際操作時(shí)有一點(diǎn)要注意的是，我們要確保被壓住的文字能被識(shí)別出來，也就是說疊壓的幅度不能太大。

 

 

如果遇到因疊壓幅度太大，導(dǎo)致文字無法被識(shí)別出來時(shí)，大家可以試試在圖片的上方，再疊壓一層描邊后的文字；運(yùn)用這個(gè)方法能使被壓住的文字恢復(fù)一些識(shí)別性。

 

 

字疊圖和圖疊字一樣，就是位置轉(zhuǎn)換了一下而已。圖疊字要注意的是文字，而字疊圖要注意的就是圖片了；在運(yùn)用字疊圖時(shí)，要記住文字不能擋住圖片最吸引眼球的地方。

 

 

比如人物類圖片不能遮擋面部，因?yàn)槲覀兊囊曈X習(xí)慣已經(jīng)決定好了，第一眼看的就是臉；除了臉以外還有眼睛，這也是不能被遮擋的。

 

 

如果圖片沒有特別吸引眼球的地方，就可以不用考慮遮不遮擋的問題。像這種常見的物體類圖片；可以隨意疊壓，因?yàn)檫@類圖片并沒有非常突出的地方。

 

 

還有當(dāng)圖片充當(dāng)?shù)准y用的時(shí)候，也可以隨意的進(jìn)行疊壓。

 

 

最后一個(gè)排法：文字疊壓。文字信息量多且無配圖時(shí)，可以使用文字疊壓的手法，也就是文字與文字之間進(jìn)行疊壓。為什么沒有圖片時(shí)要使用這個(gè)手法呢？因?yàn)槊鎸?duì)空無一圖的版面時(shí)，受眾的閱讀欲望是非常低的。這時(shí)版面中就需要有一個(gè)亮點(diǎn)來吸引受眾的視線，而字疊字就是用來創(chuàng)造亮點(diǎn)的手段。

 

 

在使用字疊字時(shí)也分兩種形式：一、文字充當(dāng)?shù)准y；二、為了保證文字的識(shí)別性而使用的正片疊底。充當(dāng)?shù)准y大家都懂，那什么是正片疊底呢？

 

 

當(dāng)兩組相互疊壓的文字，填充了對(duì)比色或是互補(bǔ)色時(shí)，為了使雙方的識(shí)別性都不受到影響，就會(huì)使用圖層混合模式中的「正片疊底」選項(xiàng)。正片疊底后文字被遮擋的部分就會(huì)浮現(xiàn)出來，這就是正片疊底形。

 

 

 

文案信息包括：標(biāo)題信息、標(biāo)題翻譯信息、作者譯者信息、賣點(diǎn)信息、以及裝飾信息等5大部分。下面為大家拆解一下這些信息都有哪些合理的分組邏輯。

 

 

前三個(gè)部分描述的是：書名、書名的翻譯、以及這本書的作者和譯者，它們是可以成為一個(gè)組合的。

 

 

接下來賣點(diǎn)信息部分，它主要描述的就是這本書的概況，也是對(duì)書名的一個(gè)補(bǔ)充。總的來說所有賣點(diǎn)信息都和標(biāo)題有關(guān)系，但關(guān)系的強(qiáng)弱之分我已經(jīng)標(biāo)明出來了，從賣點(diǎn)1到賣點(diǎn)4。而在這四個(gè)賣點(diǎn)中與標(biāo)題關(guān)系最近的就是賣點(diǎn)1，也就是說能和標(biāo)題單獨(dú)成組的只有賣點(diǎn)1，因?yàn)樗詈?jiǎn)潔有力就像廣告語一樣。因此，如果其它三個(gè)賣點(diǎn)想要和標(biāo)題成組的話，那也一定要帶上賣點(diǎn)1，而不能脫離賣點(diǎn)1與標(biāo)題單獨(dú)成組。

 

 

最后就是裝飾信息部分，它就是作為裝飾存在的屬于「有用的無用信息」，說它有用是因?yàn)樗芙鉀Q一些版面中的負(fù)空間問題，比如說版面中有個(gè)地方顯的很空，需要有元素來填補(bǔ)一下，這時(shí)就可以用上它。而說它無用是因?yàn)檫@類信息在版面中的字號(hào)大多偏小，讀者基本都會(huì)忽略它們的存在。

 

 

我將所有的文字信息分成了9組，這個(gè)分組數(shù)量是屬于偏多的，依據(jù)就是「存在關(guān)聯(lián)的信息可以成組也可以分離」。

 

 

這是要用到的圖片素材，一共有6個(gè)。

 

 

這本書籍的開本接近于a4大小，當(dāng)信息量多時(shí)，頁(yè)邊距的寬度可以設(shè)定在：7~12mm之間，而我這次設(shè)置的是6mm，與參考值差了1mm。這也是之前說過的要根據(jù)實(shí)際情況調(diào)整，所謂的標(biāo)準(zhǔn)數(shù)值就是一個(gè)參考。

 

 

定好版心后，首先沿著頁(yè)邊距的中間處，也就是3mm的地方拉一個(gè)矩形出來，書脊處也要，這個(gè)矩形就是用來整合那9個(gè)組合用的。

 

 

先將第一個(gè)標(biāo)題組合編排出來，位置放在右上角。為什么要放在這里呢？因?yàn)楫?dāng)文字豎排時(shí)我們的閱讀順序是：從上至下從右至左的。標(biāo)題組合內(nèi)部的組間距大小我參考了英文翻譯的字寬。

 

 

接著在標(biāo)題文字組的左側(cè)，拉兩根輔助線寬度為6mm，然后在中間處添加一根與標(biāo)題組合一樣高的線條用于區(qū)分。

 

 

然后再根據(jù)標(biāo)題組合的高度，將組合2、組合3以及組合4一同編排出來，它們之間的間隔也都是6mm，同樣用線區(qū)分。到此上半部分就編排完成了。

 

 

緊接著在上方組合的底部拉兩根輔助線，寬度依然是6mm，然后添加一根線用于區(qū)分。之后將組合5編排出來整個(gè)橫跨版面，它的作用就是分割上下空間。

 

 

繼續(xù)添加一根線條用于區(qū)分，然后根據(jù)上半部分組合的結(jié)構(gòu)，將下半部分的組合編排出來。編排完成后版面中還留有一塊空白區(qū)域，這塊空白區(qū)域的作用，就是為了再放置一組與標(biāo)題組合做呼應(yīng)的信息。

 

 

這組信息我選擇了重復(fù)標(biāo)題的英文翻譯以及作者的英文名。因?yàn)槭呛蜆?biāo)題組合做呼應(yīng)用的，所以多少要和標(biāo)題掛鉤。同時(shí)為了削弱重復(fù)內(nèi)容的印象，我故意換了字體，將之前的襯線體換成了無襯線。組合呼應(yīng)上之后呢，色彩也要呼應(yīng)上。挑選些重要的信息填充上與素材相同的色彩就可以。

 

 

在下半部分的組合中間添加好線條用于區(qū)分，方式與之前一樣。最后將書脊編排出來第一個(gè)案例也就完成了。

 

 

 

第二個(gè)案例的組合數(shù)量比第一個(gè)少了兩組，其中最后一個(gè)組合，我?guī)缀鯇⑺械馁u點(diǎn)信息都匯聚在了一起。而這一大塊信息我會(huì)放在腰封處，最后大家會(huì)看到一個(gè)有疏密對(duì)比的版面。

 

圖字疊壓適合圖片少時(shí)使用，所以圖片素材我會(huì)用標(biāo)藍(lán)的這兩個(gè)。

 

頁(yè)邊距跟上一個(gè)案例一樣還是6mm，版心定下來后接著將網(wǎng)格繪制出來，腰封我選擇占橫向上的雙欄網(wǎng)格暫且用藍(lán)色塊代替。

 

 

第一步還是先將標(biāo)題編排出來，然后在對(duì)角處編排第二個(gè)組合，組合2與標(biāo)題做對(duì)角呼應(yīng)。組合2內(nèi)部的組間距參考的是英文翻譯的行距。這也是我之前沒有提到的，在沒有小字號(hào)的情況下可以試試用行距來作為參考。

 

 

右上與左下角編排完成后，接著將左上與右下角的信息給編排出來。基本上所有的組合，都是按照網(wǎng)格來進(jìn)行布局的，包括圖中標(biāo)藍(lán)的文字組，它對(duì)齊的是隱藏網(wǎng)格。

 

 

這個(gè)隱藏網(wǎng)格就在橫向第一欄的四分之三處，我用藍(lán)線標(biāo)出的位置。

 

 

接著把組合3編排在版面上方最吸引眼球的地方，因?yàn)榻M合3是一個(gè)很重要的賣點(diǎn)信息，我打算著重強(qiáng)調(diào)一下。它的位置關(guān)系是和賣點(diǎn)3作底部對(duì)齊的，到此整個(gè)書封的上方部分也就編排完成了。

 

 

剩下的就是將腰封處編排出來，也就是組合7整個(gè)賣點(diǎn)部分。這個(gè)大組合內(nèi)部的組間距設(shè)置，參考了賣點(diǎn)2信息的字高。文字信息編排的差不多了，接下來我們將作為底紋的圖片素材置入進(jìn)版面中。

 

 

現(xiàn)在看著發(fā)現(xiàn)文字的識(shí)別性有點(diǎn)差，而且整個(gè)圖片素材因面積和色彩的關(guān)系，顯得非常跳躍很是搶眼必須要削弱它。

 

 

解決的方法就是給背景填充一個(gè)與圖片色彩同屬于同色系的顏色。

 

 

再把腰封標(biāo)出來，恢復(fù)腰封處文字的識(shí)別性。最后在版面的上方挑選一些信息填充上白色，與腰封的色彩做一個(gè)呼應(yīng)，而腰封處也要挑選一些信息填充上橙紅色，與書封整體的顏色作一個(gè)呼應(yīng)。最后的最后將書脊編排出來第二個(gè)案例也就完成了。

 

 

 

最后一個(gè)分組的方式跟之前那兩個(gè)案例不同，只分了三組。

 

 

頁(yè)邊距以及網(wǎng)格依然沿用第二個(gè)案例，唯一不同的是我將腰封的位置往上提了半格，因?yàn)檠馓幬掖蛩憔幣鸥嗟膬?nèi)容。

 

 

第一步，先創(chuàng)造出視覺焦點(diǎn)，對(duì)標(biāo)題與標(biāo)題的翻譯使用正片疊底的手法。將組合3也就是裝飾信息編排在標(biāo)題組合的負(fù)空間處，右側(cè)再添加一個(gè)賣點(diǎn)信息用于完善標(biāo)題組合，使標(biāo)題組合更豐滿一些。

 

 

接著將剩余的賣點(diǎn)3以及作者譯者等信息，分別編排在標(biāo)題組合的上方與下方后，整個(gè)標(biāo)題組合才算是刻畫完成了。

 

 

我們來看看整個(gè)標(biāo)題組合內(nèi)部的組間距是怎么設(shè)定的：賣點(diǎn)3與作者譯者信息，跟標(biāo)題之間的間隔距離為一個(gè)字高的大小。

 

 

給腰封填充上橙紅色，讓暖色成為主色調(diào)。因?yàn)檫@是一本關(guān)于肉類的書籍，在沒有圖片素材的情況下，我想通過色彩來喚起讀者對(duì)肉類的想象。

 

換完色彩后，將腰封處的信息都給編排出來，而整個(gè)腰封組合內(nèi)部的組間距，則參考了賣點(diǎn)2信息的字高。

 

最后還是老套路，挑選一些重要的信息換上色彩作呼應(yīng)，再將書脊編排出來，最后一個(gè)案例也就編排完成了。

 

以上就是這篇教程的所有內(nèi)容了，希望大家能夠熟練掌握，并靈活運(yùn)用。好了，那本期的教程就到這里了，我們下期再見，拜拜～

 

原文作者：研習(xí)設(shè)