本文簡單分享我在多年版式設(shè)計中的心得，無論是網(wǎng)頁設(shè)計，平面設(shè)計還是ui界面設(shè)計，這9招版式設(shè)計教程——留白／分量／尺寸/動勢／角版／退底/邊界／點(diǎn)綴／立體，都是通用的。

01

-

留白

首先我們需要理解“留白”與“空白”之間的差別，它們倆的差別也很容易理解。我們要把留白和空白比作“容器”，空白就是比較大的容器，而留白是空白中比較小的容器，但他倆都是空的，能理解么。或者客觀的理解為“留白”是局部的，而空白是整體的，從理論上來說空白 > 留白，但由于留白和空白的屬性都是無限的，有時候會存在留白>空白的情況，這時需要要素去界定邊際從而使它們分清界限。

所謂留白指的是在版面中沒有進(jìn)行任何布置的空白區(qū)域，其大小需要由版面中的要素來界定的。雖然說留白被認(rèn)為是沒有任何意義的空白區(qū)域，但在平面設(shè)計中，留白的造型和位置是設(shè)計中重要表現(xiàn)手法之一。

在版面中每個要素如果按照均等的方式進(jìn)行排列，那就會產(chǎn)生留白。這種排列產(chǎn)生的留白能使版面具有秩序和平和感，但卻給人一種很單調(diào)無趣的感覺。

如果把留白的大小或形狀調(diào)整得不均衡會使版面增添變化，使統(tǒng)一的留白部分和不統(tǒng)一的部分有了明確的對比。周圍留白較小的部分，要素之間增加了關(guān)聯(lián)性。周圍留白較大的部分，要素獨(dú)立突顯而引人注目。

留白的大小左右著讀者的視覺感受。面積大的留白，給人奢華感和高級感，但相對會顯得比較冷清。面積小的留白使人感到熱鬧和歡快，而同時顯得拘謹(jǐn)緊迫。因此，必須根據(jù)上述原理有目的性的選擇留白。

有關(guān)聯(lián)的要素貼近擺放，留白要小。相反內(nèi)容不同或想引人注意的部分則要相對遠(yuǎn)離擺放，留白也要大一些。因此在擺放要素之前，要正確理解留白并將其合理的擺放在不同的設(shè)計語境中。

留白作品欣賞，合適的留白給人一種很舒服的感覺。

02

-

分量

版面中的要素，文字、圖片或者顏色等，都有各自的“分量”。若想給版面帶來變化，方法之一就是改變這個分量，使分量輕和分量重的要素產(chǎn)生對比效果。輕重差越大，變化也隨之變大。

文字的筆畫越粗分量越重，筆畫越細(xì)分量越輕。因此，不同筆畫粗細(xì)度的文字搭配可以產(chǎn)生變化。大多數(shù)字體，同一個字形具有由細(xì)到粗很多種類型。這樣的一組字形叫做“字族”。使用相同字形不同粗細(xì)度的組合，在保持統(tǒng)一感的同時也加入了變化。

排版時若使用分割線，可以通過調(diào)整分割線的粗細(xì)度為版面帶來變化。粗線分量重，細(xì)線分量輕，靈活運(yùn)用這個原理可為版面做區(qū)分設(shè)計。

如果使用色彩或灰階，越深的顏色分量越重，越淺的顏色分量越輕。圖片也是一樣，越暗的圖片分量越重，越亮的圖片分量越輕。另外，如果圖片中的拍攝對象被突顯則可認(rèn)為它是重心，且該對象越大分量越重。如果圖片中只有天空或大海，沒有特定的拍攝對象作為重心，就很難找到重心。

03

-

尺寸

在平面中統(tǒng)一各要素的尺寸能使版面變得有條理，但同時也會給人一種很生硬呆板的感覺。如果要使版面增添變化，可以嘗試把版面中各要素的大小進(jìn)行對比的調(diào)整，這樣看起來大尺寸的要素會更容易吸引讀者的眼球，之后再引導(dǎo)讀者的視線去觀看那些小的要素。但此時要注意保持大尺寸要素與多個小尺寸要素之間的平衡。

文字的尺寸大小也很重要，以內(nèi)容為主的小說和論文希望讀者能仔細(xì)閱讀，這時統(tǒng)一版面中的文字大小就不會有什么問題。但針對于海報雜志等需要讀者注意的特定印刷品時，需要在文字尺寸上作適當(dāng)?shù)淖兓．?dāng)設(shè)計傳統(tǒng)作品時，可以根據(jù)要強(qiáng)調(diào)的順序來設(shè)定文字的大小。

另外不要忽視文章的可讀性與變化，要在合適的場景下做適合的設(shè)計。

另外，有時也不一定要將同一組字塊中的文字統(tǒng)一大小。同一組塊中添加尺寸變化能強(qiáng)調(diào)重要部分，增加版面的沖擊力。要設(shè)計豐富的具有沖擊力的作品，應(yīng)該立足于文章的意義，將文字添加不同尺寸來做對比使版面生動又活力。

對要素的尺寸進(jìn)行區(qū)分，差異越大對比越明顯，給人的感覺就越強(qiáng)烈。如果尺寸對比微小，別人看不出什么差別，則幾乎就沒有什么效果。另外，想為版面添加變化，比起把相似尺寸的要素放在一起，不如把差別大的要素排列在一起效果更明顯。

尺寸的大小對比也成為“跳躍率”，即版面的跳躍率。跳躍率小的版面平穩(wěn)而平和，跳躍率越大要素的尺寸對比就越強(qiáng)烈，版面越活潑就越有朝氣。

04

-

動勢

有穩(wěn)定感的版面，可以說是“沒有動感”的設(shè)計。而“有動感”的版面不但生動有活力，而且還能使版面具有趣味性和容易引人注目的情感。這里指的"動感"是一種動能，是要素所爆發(fā)的能量趨勢，稱為動勢。動勢并不是奔馳的汽車、運(yùn)動的人，飛行的鳥，而指的是動作進(jìn)行中的一種狀態(tài)。另外人的臉和視線也有方向性，可以用來營造動勢。

此外，若是把圖片和文字等要素完全對齊，就會失去動勢。因此如果要營造動勢，必須把版面的某部分平衡“打亂”。例如，排版時可以嘗試不把各要素的位置對齊，不作水平、垂直方向?qū)R，不統(tǒng)一尺寸大小等打破平衡的方法。但是如果調(diào)整過度可能使版面太過松散，所以設(shè)計時要盡量體現(xiàn)暢快的節(jié)奏感。

在頁面中通常文字和圖片都以水平線、垂直線為基準(zhǔn)來進(jìn)行排版的。由于水平線、垂直線規(guī)則性強(qiáng)，會給人一種穩(wěn)定的感覺。但想為版面添加動勢，則應(yīng)適當(dāng)變換角度，假如非水平、垂直的直線或曲線的要素。

還有，可以用線營造出一定方向的動勢，也可以配合箭頭之類帶有方向性或指向性的要素來表現(xiàn)動勢。

05

-

角版

角版指在一般的版面里，圖片被配置在四方形的線框中。使用圖片原本的四方形狀，增加了水平、垂直的方向感。這種配置圖片的方法叫做“角版”。若想為角版添加變化，可以將圖片傾斜擺放，或者變化圖片尺寸。

角版其實很好理解，就像PS里畫個矩形，再將圖片在這個矩形中創(chuàng)建剪貼蒙版一樣。那剛開始畫的這個四方形矩形，其實就是角版。

06

-

退底

退底是一種設(shè)計技法，就是將圖片裁剪成特定形狀，為版面帶來更歡快的氣氛。

根據(jù)圖片中物像的輪廓剪切處理的方法叫做“退底”。通常的退底方法，是沿物像的輪廓不留背景地剪切圖片。在垂直、水平要素較多的作品中，這種方法使圖片的輪廓不規(guī)則，增加了活潑歡快的感覺。

圖片的退底方法，不只是沿著物像的輪廓去除背景，也可以特意沿著物像的周圍做粗略的剪切。在規(guī)則有序的版面中加入隨意剪切的圖片，能產(chǎn)生粗獷的躍動感。

還有一種方法是將圖片做成與物像輪廓毫無關(guān)系的剪切。使用這種方法，讀者對圖片的印象將隨著剪切下的形狀而改變。若剪切成圓形或橢圓形，輪廓的曲線可以產(chǎn)生柔美的感覺；若剪切成多邊形，形成的直線清楚明朗，給人一種剛硬的感覺。

另外，也可以利用類似心形或星形這些有意義的圖案，來烘托版面的氣氛。在特殊的例子中，也有將圖片裁剪成文字形狀的方法。

07

-

邊界

配置要素多的情況下，如何設(shè)計要素之間的“邊界”是很重要的。

在設(shè)計復(fù)雜的版面或配置要素很多的作品時，很難采用留白或加入動態(tài)效果等添加變化的方法。遇到這種情況，可以考慮設(shè)法在要素之間的邊界下功夫，突顯重點(diǎn)部分，分隔非同類要素，為版面帶來變化。

最簡單的方法，就是用分隔線作區(qū)分。較細(xì)的分隔線感覺纖細(xì)，但有時也讓人感到冷酷。較粗的分割線給人感覺溫和，但作為分割線過于醒目，有時會讓人感到沉重的氛圍，因此使用時需要多加注意。

分隔線有單純的直線，手繪線、虛線或多層線條等等多種形態(tài)，不同形態(tài)給人的印象也不同。如果用虛線作為分隔線能為版面帶來變化。有時可以顯現(xiàn)出時尚流行的感覺。

除了使用分隔線做邊界，比分隔線粗很多的帶“形狀”的線，或帶有顏色的“面”的線也可以用來做分隔線。由于分隔線的線寬比較細(xì)，即便為分隔線改變邊框顏色也不會影響到整體效果。而為一整塊面添加顏色就可以顯現(xiàn)出具有明顯效果的變化。

08

-

點(diǎn)綴

點(diǎn)綴是指在版面中加入視覺元素，來添加細(xì)微的變化。

前面我講過，是為了消除版式整齊頁面的單調(diào)性，而用留白、線條粗細(xì)度、加入動感元素等方法為版面添加變化。這些都是為了“打亂”版面進(jìn)行的工作，但是往往較難把握“打亂”的這個尺度。

我們可以用一種方法來使版面在基本不改變的基礎(chǔ)上消除一些單調(diào)性，用到的這個方法就是增加點(diǎn)綴。通過追加一點(diǎn)新的視覺元素，使版面得到點(diǎn)綴，進(jìn)而產(chǎn)生節(jié)奏感、動感和視線引導(dǎo)上的變化。為作品添加點(diǎn)綴，可以在理解內(nèi)容后，設(shè)計符合內(nèi)容的象征性圖案，也可以利用類似幾何圖案那樣不帶有特定意義的圖形。

因為用做點(diǎn)綴的元素在分量上沒有那么沉重，所以單純的點(diǎn)綴不會造成版面大幅變化。因此可以重復(fù)使用點(diǎn)綴元素。利用重復(fù)的方法，即使再小的元素都能影響整體的氛圍。

另外，若重復(fù)使用點(diǎn)綴元素，不單要反復(fù)使用相同的元素，還要根據(jù)整個版面的氣氛做適當(dāng)?shù)恼{(diào)整。例如維持原來形狀但改變顏色，或者改變尺寸，又或者重復(fù)使用同樣的圖形，既能保持統(tǒng)一感，又能添加變化。

09

-

立體

之前在文章《番外篇 - 空間的概念》中講到了一些二維與三維的概念，會產(chǎn)生立體的感覺。那今天在應(yīng)用層講一下立體感的具體形式表現(xiàn)。通常在印刷品中，所有要素都在二維平面中。當(dāng)然文字和圖像也配置在平面內(nèi)，不過稍用點(diǎn)工夫就可以讓他們有縱深立體感。這種立體感，也使得版面產(chǎn)生了縱深的變化。

例如在要素的側(cè)面加上影子般的陰影效果，這個要素就有了浮在紙上的感覺。陰影的位置能表明光源的方向，陰影的模糊程度能表現(xiàn)要素浮起的高度。要注意的是，若為圖片加入陰影，必須保證原圖片的影子方向與追加的影子方向一致。如果兩者方向不同就會產(chǎn)生失調(diào)的感覺。

還有讓要素自身表現(xiàn)出立體感的方法。先設(shè)定某個特定光照方向，在做出高光、陰影部分，看起來就能具有立體感。先考慮立體化后將會變成什么樣的形狀，再決定光源的光照方向，做出明面和暗面部分。明暗變化的手法可以使突起的角度看起來光滑或者棱角分明。

小結(jié)

-

版式設(shè)計教程中的留白／分量／尺寸/動勢／角版／退底/邊界／點(diǎn)綴／立體共9招基本功，通過光龍設(shè)計分享頻道的詳細(xì)圖文解析，你都get到了嗎？