關(guān)于排版，給你幾個(gè)甲方不懟你的理由?。ǘ?/h2>

設(shè)計(jì)師日記

2018-11-06

2 評(píng)論 5308 瀏覽 21 收藏 13 分鐘

在平面設(shè)計(jì)或者UI設(shè)計(jì)工作中，我們?cè)诟鶕?jù)設(shè)計(jì)主題和視覺(jué)需求，在預(yù)先設(shè)定的有限版面內(nèi)，有組織、有目的、有組合的進(jìn)行排列設(shè)計(jì)，版式設(shè)計(jì)沒(méi)有什么固定的路子。

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

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

概念

首先，我們先來(lái)了解兩個(gè)概念：

1. 版面率

在頁(yè)面上除去天地左右四周的余白，版面所占的面積的比率叫做“版面率”。

byサンチー

擴(kuò)大頁(yè)面四周余白，版面率降低，頁(yè)面所包含的信息減少。

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

byサンチー

縮小頁(yè)面四周余白，版面率提高，也看所包含的信息增加。

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

2. 圖版率

“圖版率“和”版面率“意思相近，”圖版率“表示在頁(yè)面中圖片所占的比率。

byhideto yagi

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

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

bypinterest

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

利用各種不同的模式進(jìn)行排版設(shè)計(jì)

在排版設(shè)計(jì)之前，通過(guò)設(shè)置輔助線來(lái)當(dāng)作排版的向?qū)?，使得排版工作進(jìn)展的順利。

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

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

bypinterest

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

bypinterest

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

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

bypinterest

左右對(duì)稱(chēng)：頁(yè)面左右完美重合，帶來(lái)一種安定的印象。

bypinterest

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

bypinterest

不規(guī)則對(duì)稱(chēng)構(gòu)圖：打破原來(lái)對(duì)稱(chēng)的刻意處理的感覺(jué)，也是比較受歡迎的手法。

下面展示幾個(gè)實(shí)例運(yùn)用：

by Filip Justi?

by Filip Justi?

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

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

byForbidden

通過(guò)圖片大小來(lái)區(qū)分內(nèi)容的先后順序，我們會(huì)擴(kuò)大主圖或者縮小其他圖片來(lái)提高“優(yōu)先率”，來(lái)達(dá)到對(duì)內(nèi)容的先后順序進(jìn)行區(qū)分的目的。

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

by piecojp

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

下面展示幾個(gè)實(shí)例運(yùn)用：

by mshults

by Kavita Khati

有目的的留白設(shè)計(jì)

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

by pinterest

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

by pinterest

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

by pinterest

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

下面展示幾個(gè)實(shí)例運(yùn)用：

by SELECTO

by Kavita Khati

小結(jié)

版式設(shè)計(jì)沒(méi)有什么固定的路子，也沒(méi)有說(shuō)“這樣是絕對(duì)不行的”之類(lèi)的。每一個(gè)設(shè)計(jì)師的風(fēng)格的形成，都是受到他所看過(guò)的書(shū)籍或者作品的影響，慢慢從模仿到自己嘗試不同的實(shí)驗(yàn)，逐漸形成自己的設(shè)計(jì)風(fēng)格。

相關(guān)閱讀

《關(guān)于排版，給你幾個(gè)甲方不懟你的理由?。ㄒ唬?/a>》

 

作者：設(shè)計(jì)師日記，公眾號(hào)：設(shè)計(jì)師的私人日記

本文由 @設(shè)計(jì)師日記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。

收藏已收藏{{ postmeta.bookmark }} 點(diǎn)贊已贊{{ postmeta.postlike }}

更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App

2年初級(jí)版式設(shè)計(jì)