2019-6-20 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
排版的難處在于，我們不是根據(jù)已經(jīng)設(shè)計(jì)好的版面來(lái)填充內(nèi)容（套模板），而是要根據(jù)具體的內(nèi)容來(lái)布局版面。比如版面中的圖片有時(shí)候是一兩張，有時(shí)候是十張八張，由于構(gòu)成元素的不同，導(dǎo)致采用同樣的構(gòu)圖、版式、形式往往是行不通的，所以蔥爺今天的這篇文章就是要來(lái)分享，在不同情況下有哪些圖片排版技巧。1. 平鋪
即把圖片鋪滿整個(gè)版面，這種處理方式多用于封面設(shè)計(jì)。
或者在內(nèi)頁(yè)中把某一半版平鋪一張大圖，另一半則排列文字或者小圖。
平鋪的圖片比較有張力，有視覺重心的圖片適合這么處理。下圖平鋪的效果就一般般。
還有一種情況是把圖片當(dāng)做背景，也可以采用平鋪，如下圖：
2. 四周留白
即圖片要比版面小，并讓其四周都留出空白。這里也分兩種情況，一是圖片位于版面正中央，圖片周圍的留白是對(duì)稱的，這種效果類似于相框，常用于封面設(shè)計(jì)。
還有一種情況是圖片周圍的留白并不對(duì)稱，如下圖，留白較多的區(qū)域會(huì)用來(lái)排文字，常用于海報(bào)設(shè)計(jì)和畫冊(cè)內(nèi)頁(yè)設(shè)計(jì)。
3. 一條邊出血
即把圖片的一條邊對(duì)齊邊界，這么處理有點(diǎn)沖破束縛的意思，可以增加圖片的想象力和版面的設(shè)計(jì)感。
4. 三條邊出血
這么做會(huì)把版面分成兩部分，一部分為色塊，一部分為圖片，在排版時(shí)我們還可以通過(guò)文字、色塊或顏色把這兩個(gè)部分聯(lián)系起來(lái)。
5. 拆分
即把一張圖片拆分成幾份，然后隔開一些排列，這么做比單獨(dú)放一張圖片會(huì)更有設(shè)計(jì)感和趣味性，風(fēng)景類圖片適合這么處理。
6. 跨版
即在畫冊(cè)設(shè)計(jì)中，讓圖片同時(shí)占據(jù)兩個(gè)版面。當(dāng)在一個(gè)跨版中只有一張圖片時(shí)，如果只把圖片排在某一半版中，那么另一半版就容易單調(diào)，所以在這種情況下通常會(huì)使用跨版，而且圖片放大后會(huì)更有張力，還能把左右兩個(gè)版面關(guān)聯(lián)起來(lái)。
在畫冊(cè)的設(shè)計(jì)中，有時(shí)候我們應(yīng)該把一 P 當(dāng)成一個(gè)版面，而有時(shí)候則需要把一個(gè)跨版當(dāng)成一個(gè)版面，這取決于具體的內(nèi)容以及排版形式，所以圖片的排版也要分成這兩種情況來(lái)考慮。
1. 統(tǒng)一大小對(duì)齊排版
在一些作品集或產(chǎn)品畫冊(cè)中常用到此排法，視覺流程簡(jiǎn)單、清晰。
2. 統(tǒng)一大小錯(cuò)位排版
比對(duì)齊排版更有動(dòng)感，且由于圖片不多，所以也不會(huì)顯得混亂。
3. 一大一小排版
這種排版對(duì)比鮮明、更有張弛，可以在一個(gè)跨版中使用，也可以是在某一 P 中使用。
還可以把其中的一張圖片去底，這么組合起來(lái)更靈活，對(duì)比更強(qiáng)烈。
如果把整個(gè)跨版當(dāng)成一個(gè)版面，那么可以把大的那張圖進(jìn)行跨版，小的那張圖則不跨版。
或者把大圖鋪滿一個(gè) P，而小的圖片和文字則排在另一個(gè) P。
這兩種排法都很大氣且不失細(xì)膩。
有時(shí)候一個(gè)版面內(nèi)的圖片會(huì)有很多，這種版面排起來(lái)會(huì)更有難度，常用的排版方式有以下 8 種。
1. 大小統(tǒng)一對(duì)齊排版
這種排法比較整潔，但缺少變化，適合用于目錄頁(yè)或者產(chǎn)品和人物介紹。
2. 大小不統(tǒng)一對(duì)齊排版
這種排法會(huì)比前一種更靈活一點(diǎn)。適合利用網(wǎng)格工具來(lái)輔助排版。
這種排版雖然沒有統(tǒng)一圖片的大小，但由于保持了嚴(yán)格的對(duì)齊關(guān)系，所以依然顯得很整潔。
3. 圖片與色塊組合排版
圖片與色塊組合在一起排版既不會(huì)像只有圖片那么單調(diào)，還可以利用色塊排文字。不過(guò)注意色塊的顏色不要太多，且顏色最好來(lái)自圖片。
4. 錯(cuò)位排版
即把相連兩張圖片刻意錯(cuò)開，或者把圖片與文字的位置互換，這么做可以有效打破圖片完全對(duì)齊的單調(diào)，且由于有一定的規(guī)律，所以也不會(huì)對(duì)視覺流程造成太大影響。
5. 把圖片拼成特定的形狀
這種排法適合圖片比較多的情況，這么做可以避免圖片太多而顯得混亂，而且因?yàn)槠闯傻男螤钜c設(shè)計(jì)需求相關(guān)，所以會(huì)顯得更有創(chuàng)意。
6. 按照某一路徑排版
這種排法跟前一種一樣，適合數(shù)量較多的同類圖片使用，可以避免圖片排得太過(guò)分散，如果不統(tǒng)一圖片的大小和方向，效果會(huì)比較活潑但不規(guī)范，適用于照片墻和兒童畫冊(cè)的排版。
如果統(tǒng)一圖片的大小和方向，或者使它們呈漸變式的變化，這些圖片還可以形成一定的節(jié)奏感，不僅不會(huì)亂，還很美觀。
7. 一大多小排版
如果在版面中分開排列大小差不多的多張圖片，那么該版面就會(huì)缺乏重點(diǎn)且沒有張力，而如果把其中一張圖片放大，與其他圖片形成鮮明的大小對(duì)比，就可以有效解決這一問(wèn)題。
8. 自由排版
即大小不需要統(tǒng)一、圖片與圖片之間也不一定要嚴(yán)格對(duì)齊，效果比較靈活，設(shè)計(jì)感較強(qiáng)，常用于雜志排版中。
這種排法有兩點(diǎn)需要注意，一是圖片不要排的太分散；二是最好要有大小對(duì)比。
去底圖也很適合這么做，當(dāng)然，在排版的時(shí)候也要有大小的區(qū)分，同時(shí)要注意圖片與圖片、圖片與文字之間的輪廓要形成互補(bǔ)。
版面中的圖片數(shù)量有從一張到數(shù)十張不等，圖片的排版方式也非常多，所以我沒法一一列出，以上總結(jié)的 17 個(gè)技巧僅僅代表一些比較主流的方向，具體的變化還需要大家根據(jù)具體的內(nèi)容和設(shè)計(jì)需求去做嘗試和突破，希望這篇文章能給你一點(diǎn)幫助。
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com