起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識
關(guān)于排版，給你幾個甲方不懟你的理由?。ǘ?/h2>
在平面設(shè)計或者UI設(shè)計工作中，我們在根據(jù)設(shè)計主題和視覺需求，在預(yù)先設(shè)定的有限版面內(nèi)，有組織、有目的、有組合的進行排列設(shè)計，版式設(shè)計沒有什么固定的路子。
不管是平面設(shè)計或者UI設(shè)計等工作，我們在根據(jù)設(shè)計主題和視覺需求，在預(yù)先設(shè)定的有限版面內(nèi)，運用造型要素和形式原則，根據(jù)特定主題與內(nèi)容的需要，將文字、圖片（圖形）及色彩等視覺傳達信息要素，進行有組織、有目的、有組合排列的設(shè)計，都會直接影響頁面的用戶體驗及相關(guān)性。
這就是我們需要學(xué)習版式設(shè)計的目的。
概念
首先，我們先來了解兩個概念：
1. 版面率
在頁面上除去天地左右四周的余白，版面所占的面積的比率叫做“版面率”。
byサンチー
擴大頁面四周余白，版面率降低，頁面所包含的信息減少。
版面率降低，很容易給人造成一種典雅印象或者高級的感覺，適合于需要創(chuàng)造安靜和穩(wěn)重的頁面設(shè)計。
byサンチー
縮小頁面四周余白，版面率提高，也看所包含的信息增加。
版面率提高，會給人以充滿活力且非常熱鬧的印象，適合于需要給觀者傳遞大量信息且留下深刻印象的設(shè)計。
2. 圖版率
“圖版率“和”版面率“意思相近，”圖版率“表示在頁面中圖片所占的比率。
byhideto yagi
圖版率高的頁面會給人到來熱鬧活躍的印象；相反的，圖版率低的頁面則會產(chǎn)生一種非常沉穩(wěn)的效果，我們經(jīng)常通過調(diào)整頁面的圖版率來表現(xiàn)設(shè)計的意圖。
通過圖片的數(shù)量和尺寸來控制圖版率，在只有一張圖片的情況下，擴大圖片圖版率就會提高；在使用很多圖片的頁面中，縮小每張圖片的尺寸，圖版率就會降低。
bypinterest
頁面的底色也會改變對也頁面圖版率的印象。即使在設(shè)計中有大量的文字，我們通過頁面底色的調(diào)整，也可以取的和提高圖版率相似的效果，從而改變頁面所呈現(xiàn)出的視覺感受。
利用各種不同的模式進行排版設(shè)計
在排版設(shè)計之前，通過設(shè)置輔助線來當作排版的向?qū)?，使得排版工作進展的順利。
在建立輔助線之前，先要考慮好把頁面劃分為幾個部分；最基本的劃分頁面方式是水平劃分或者垂直劃分。
當然也可以增加對角線等斜線的方式。
bypinterest
可以將多個方框連起來作為某一個內(nèi)容的安排空間，也可以將它們作為頁面上的留白。
bypinterest
嚴格按照方框來安排內(nèi)容可能稍顯單調(diào)，可以考慮將某些部分有意的沖出框架的范圍，允許在一定程度上的不規(guī)則排版，也是非常必要的。
對稱型構(gòu)圖是很具代表性的版面設(shè)計方式；上下左右對稱、重復(fù)交替構(gòu)圖都可以靈活的運用到某些局部的構(gòu)圖之中。
bypinterest
左右對稱：頁面左右完美重合，帶來一種安定的印象。
bypinterest
反復(fù)型構(gòu)圖：讓人感受到一種秩序，適用于需要表現(xiàn)統(tǒng)一感的畫面。
bypinterest
不規(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é)奏的效果。
byForbidden
通過圖片大小來區(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)容較多的時候，容易給人一種狹窄的壓迫感，通過適當?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è)計師的風格的形成，都是受到他所看過的書籍或者作品的影響，慢慢從模仿到自己嘗試不同的實驗，逐漸形成自己的設(shè)計風格。
相關(guān)閱讀
作者：設(shè)計師日記，公眾號：設(shè)計師的私人日記
本文由 @設(shè)計師日記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
在平面設(shè)計或者UI設(shè)計工作中，我們在根據(jù)設(shè)計主題和視覺需求，在預(yù)先設(shè)定的有限版面內(nèi)，有組織、有目的、有組合的進行排列設(shè)計，版式設(shè)計沒有什么固定的路子。
不管是平面設(shè)計或者UI設(shè)計等工作，我們在根據(jù)設(shè)計主題和視覺需求，在預(yù)先設(shè)定的有限版面內(nèi)，運用造型要素和形式原則，根據(jù)特定主題與內(nèi)容的需要，將文字、圖片（圖形）及色彩等視覺傳達信息要素，進行有組織、有目的、有組合排列的設(shè)計，都會直接影響頁面的用戶體驗及相關(guān)性。
這就是我們需要學(xué)習版式設(shè)計的目的。
概念
首先，我們先來了解兩個概念：
1. 版面率
在頁面上除去天地左右四周的余白，版面所占的面積的比率叫做“版面率”。
byサンチー
擴大頁面四周余白，版面率降低，頁面所包含的信息減少。
版面率降低，很容易給人造成一種典雅印象或者高級的感覺，適合于需要創(chuàng)造安靜和穩(wěn)重的頁面設(shè)計。
byサンチー
縮小頁面四周余白，版面率提高，也看所包含的信息增加。
版面率提高，會給人以充滿活力且非常熱鬧的印象，適合于需要給觀者傳遞大量信息且留下深刻印象的設(shè)計。
2. 圖版率
“圖版率“和”版面率“意思相近，”圖版率“表示在頁面中圖片所占的比率。
byhideto yagi
圖版率高的頁面會給人到來熱鬧活躍的印象；相反的，圖版率低的頁面則會產(chǎn)生一種非常沉穩(wěn)的效果，我們經(jīng)常通過調(diào)整頁面的圖版率來表現(xiàn)設(shè)計的意圖。
通過圖片的數(shù)量和尺寸來控制圖版率，在只有一張圖片的情況下，擴大圖片圖版率就會提高；在使用很多圖片的頁面中，縮小每張圖片的尺寸，圖版率就會降低。
bypinterest
頁面的底色也會改變對也頁面圖版率的印象。即使在設(shè)計中有大量的文字，我們通過頁面底色的調(diào)整，也可以取的和提高圖版率相似的效果，從而改變頁面所呈現(xiàn)出的視覺感受。
利用各種不同的模式進行排版設(shè)計
在排版設(shè)計之前，通過設(shè)置輔助線來當作排版的向?qū)?，使得排版工作進展的順利。
在建立輔助線之前，先要考慮好把頁面劃分為幾個部分；最基本的劃分頁面方式是水平劃分或者垂直劃分。
當然也可以增加對角線等斜線的方式。
bypinterest
可以將多個方框連起來作為某一個內(nèi)容的安排空間，也可以將它們作為頁面上的留白。
bypinterest
嚴格按照方框來安排內(nèi)容可能稍顯單調(diào)，可以考慮將某些部分有意的沖出框架的范圍，允許在一定程度上的不規(guī)則排版，也是非常必要的。
對稱型構(gòu)圖是很具代表性的版面設(shè)計方式；上下左右對稱、重復(fù)交替構(gòu)圖都可以靈活的運用到某些局部的構(gòu)圖之中。
bypinterest
左右對稱：頁面左右完美重合，帶來一種安定的印象。
bypinterest
反復(fù)型構(gòu)圖：讓人感受到一種秩序，適用于需要表現(xiàn)統(tǒng)一感的畫面。
bypinterest
不規(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é)奏的效果。
byForbidden
通過圖片大小來區(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)容較多的時候，容易給人一種狹窄的壓迫感，通過適當?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è)計師的風格的形成，都是受到他所看過的書籍或者作品的影響，慢慢從模仿到自己嘗試不同的實驗，逐漸形成自己的設(shè)計風格。
相關(guān)閱讀
作者：設(shè)計師日記，公眾號：設(shè)計師的私人日記
本文由 @設(shè)計師日記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
講得太淺了