不管是平面設(shè)計或者 UI設(shè)計等工作，在預(yù)先設(shè)定的有限版面內(nèi)，運用造型要素和形式原則，根據(jù)特定主題與內(nèi)容的需要，將文字、圖片及色彩等視覺傳達信息要素，進行有組織、有目的的組合排列的設(shè)計，都會直接影響頁面的用戶體驗及相關(guān)性。

這就是我們學(xué)習(xí)版式設(shè)計的目的。

往期回顧：

• 《關(guān)于排版，給你幾個甲方不懟你的理由！（一）》

首先，我們來了解兩個概念。

一、版面率

在頁面上除去天地左右四周的余白，版面所占的面積的比率叫做「版面率」。

△ by サンチー

擴大頁面四周余白，版面率降低，頁面所包含的信息減少；

版面率降低，很容易給人造成一種典雅印象或者高級的感覺，適合于需要創(chuàng)造安靜和穩(wěn)重的頁面設(shè)計。

△ by サンチー

縮小頁面四周余白，版面率提高，也看所包含的信息增加；

版面率提高，會給人以充滿活力且非常熱鬧的印象，適合于需要給觀者傳遞大量信息且留下深刻印象的設(shè)計。

二、圖版率

「圖版率」和「版面率」意思相近，「圖版率」表示在頁面中圖片所占的比率。

△ by hideto yagi

圖版率高的頁面會給人熱鬧活躍的印象；相反的，圖版率低的頁面則會產(chǎn)生一種非常沉穩(wěn)的效果。我們經(jīng)常通過調(diào)整頁面的圖版率來表現(xiàn)設(shè)計的意圖。

通過圖片的數(shù)量和尺寸來控制圖版率；在只有一張圖片的情況下，擴大圖片圖版率就會提高；在使用很多圖片的頁面中，縮小每張圖片的尺寸，圖版率就會降低。

△ by pinterest

頁面的底色也會改變對頁面圖版率的印象；即使在設(shè)計中有大量的文字，我們通過頁面底色的調(diào)整，也可以取的和提高圖版率相似的效果，從而改變頁面所呈現(xiàn)出的視覺感受。

三、利用各種不同的模式進行排版設(shè)計

在排版設(shè)計之前，通過設(shè)置輔助線來當(dāng)作排版的向?qū)В沟门虐婀ぷ鬟M展的順利。

在建立輔助線之前，先要考慮好把頁面劃分為幾個部分；最基本的劃分頁面方式是水平劃分或者垂直劃分。

當(dāng)然也可以增加對角線等斜線的方式。

△ by pinterest

可以將多個方框連起來作為某一個內(nèi)容的安排空間，也可以將它們作為頁面上的留白。

△ by pinterest

嚴格按照方框來安排內(nèi)容可能稍顯單調(diào)，可以考慮將某些部分有意的沖出框架的范圍，允許在一定程度上的不規(guī)則排版，也是非常必要的。

對稱型構(gòu)圖是很具代表性的版面設(shè)計方式；上下左右對稱、重復(fù)交替構(gòu)圖都可以靈活的運用到某些局部的構(gòu)圖之中。

△ by pinterest

左右對稱：頁面左右完美重合，帶來一種安定的印象。

△ by pinterest

反復(fù)型構(gòu)圖：讓人感受到一種秩序，適用于需要表現(xiàn)統(tǒng)一感的畫面。

△ by pinterest

不規(guī)則對稱構(gòu)圖：打破原來對稱的刻意處理的感覺，也是比較受歡迎的手法。

下面展示幾個實例運用：

△ by Filip Justi?

△ by Filip Justi?

四、根據(jù)版式設(shè)計來區(qū)分內(nèi)容的先后順序

在我們希望觀者注意到頁面內(nèi)容的先后順序時，我們就必須通過設(shè)計將順序明確的提示出來。也就是我們常提到的「優(yōu)先率」，「優(yōu)先率」較高的頁面內(nèi)容富于變化，產(chǎn)生動感和節(jié)奏的效果。

△ by Forbidden

通過圖片大小來區(qū)分內(nèi)容的先后順序，我們會擴大主圖或者縮小其他圖片來提高「優(yōu)先率」，來達到對內(nèi)容的先后順序進行區(qū)分的目的。

通過文字的大小來區(qū)分內(nèi)容的先后順序，將主要文字字號加大、加粗或者減小其他字體字號，來達到目的，需要注意的是，過度縮小的文字會造成閱讀的障礙。

△ by piecojp

通過顏色和形狀來區(qū)分內(nèi)容的先后順序，在相似的顏色或者形狀中加入不同的顏色和形狀，產(chǎn)生「差別化」的概念，來對該內(nèi)容進行強調(diào)。

下面展示幾個實例運用：

△ by mshults

△ by Kavita Khati

五、有目的的留白設(shè)計

除了文字和圖片，留白也是構(gòu)成頁面排版的必不可少的要素之一；靈活的運用頁面的留白，呈現(xiàn)出非常美觀的效果。

△ by pinterest

通過留白來減輕頁面的壓迫感，在頁面內(nèi)容較多的時候，容易給人一種狹窄的壓迫感，通過適當(dāng)?shù)臏p少內(nèi)容，或者提高圖片的色調(diào)，能讓觀者感受到一種寬松的氛圍。

△ by pinterest

通過留白使形式發(fā)生變化，在輔助線方框的形式下進行的排版，除了規(guī)矩也會帶來單調(diào)的感覺，可通過隨處添加的留白來使排版的形式發(fā)生一些變化。

△ by pinterest

通過留白來擴展頁面空間，頁面的四周沒有足夠的余白空間會造成一種封閉的感覺，在天地四周安排余白，會讓觀者感受到一種向外部的擴展的感覺，頁面產(chǎn)生一種寬松感。

下面展示幾個實例運用：

△ by SELECTO

△ by Kavita Khati

小結(jié)

版式設(shè)計沒有什么固定的路子，也沒有說「這樣是絕對不行的」之類的。每一個設(shè)計師的風(fēng)格的形成，都是受到他所看過的書籍或者作品的影響，慢慢從模仿到自己嘗試不同的實驗，逐漸形成自己的設(shè)計風(fēng)格。

歡迎關(guān)注作者的微信公眾號：「設(shè)計師的私人日記」

「平面設(shè)計課堂」

• 《平面基礎(chǔ)小課堂！聊聊排版中的版面率和留白率》
• 《高手的平面課堂！多張圖片在版面里的編排方法》
• 《高手的平面課堂！聊聊圖文疊加的四種常用技法》
• 《豪斯先生平面課堂！淺聊平面設(shè)計的留白技巧》