重量干貨丨8個(gè)技巧助你排出好看的網(wǎng)頁(yè)版式

8個(gè)有助于排出好看版式的技巧，僅供參考。

一、使用長(zhǎng)線

利用長(zhǎng)線排版這個(gè)技巧應(yīng)該很多人都用過(guò)，但是它并沒(méi)有想象的那么簡(jiǎn)單，如果運(yùn)用得不恰當(dāng)，不但不會(huì)好看，還會(huì)顯得很死板。長(zhǎng)線在排版中的使用一般是為了滿(mǎn)足以下幾個(gè)需求。

1.區(qū)隔信息
即利用長(zhǎng)線條把版面里不同類(lèi)型的信息區(qū)分開(kāi)，你可以根據(jù)實(shí)際情況來(lái)選擇使用虛線還是實(shí)線，覺(jué)得黑白線單調(diào)的話(huà)也可以給它點(diǎn)顏色瞧瞧，使用長(zhǎng)線區(qū)隔信息可以使其看起來(lái)更清晰，更方便受眾閱讀，同時(shí)還可以起到規(guī)整的作用，使版面不至于太凌亂。

▲如果一個(gè)版面內(nèi)的信息層級(jí)關(guān)系很多，我們可以同時(shí)使用細(xì)線和粗線來(lái)進(jìn)行劃分。

▲上圖使用的是紅色虛線，使用虛線會(huì)顯得沒(méi)那么生硬。

2.裝飾
我們?cè)谂虐鏁r(shí)經(jīng)常會(huì)遇到這樣的情況，信息并不是很多，也不適合加圖片，所以整個(gè)版面容易顯得單調(diào)和平淡，這時(shí)我們可以利用長(zhǎng)線來(lái)豐富版面，在增加美感的同時(shí)還能增加設(shè)計(jì)感。

▲斜線經(jīng)常被當(dāng)做剪刀用，俗稱(chēng)“一剪沒(méi)”。

▲上圖文字頂部增加的直線使該排版看起來(lái)更專(zhuān)業(yè)。

3.建立固定版式
在畫(huà)冊(cè)或報(bào)紙的排版中，一般會(huì)有一些固定不變的信息放在頂部或底部，作為模板出現(xiàn)，利用長(zhǎng)線來(lái)輔助建立這種固定版式也是屢試不爽的技巧。

▲在畫(huà)冊(cè)排版時(shí)設(shè)計(jì)一個(gè)固定版式，可以讓版面看上去更精致。

▲用長(zhǎng)線建立版式的同時(shí)也能起到分隔信息的作用。

4.強(qiáng)調(diào)
在文字下面加直線還能起到強(qiáng)調(diào)信息的作用，就像我們以前看書(shū)的時(shí)候劃重點(diǎn)一樣，引導(dǎo)到受眾把目光聚焦在此。

▲線條是直還是彎應(yīng)該跟設(shè)計(jì)師的性取向沒(méi)毛關(guān)系。

二、使用短線

短線的功能和長(zhǎng)線大同小異，雖然沒(méi)有長(zhǎng)線用得那么普遍，但有時(shí)候更好用，特別是在網(wǎng)頁(yè)設(shè)計(jì)、UI設(shè)計(jì)、名片設(shè)計(jì)中，我們能經(jīng)?？吹蕉叹€的身影。短線的用法有如下幾種：

1.區(qū)隔信息
利用短線區(qū)隔信息比長(zhǎng)線要更靈活一點(diǎn)，不會(huì)造成太規(guī)矩的效果，而且雖然是短線，但是受眾經(jīng)常會(huì)腦補(bǔ)把它延長(zhǎng)。

▲當(dāng)然，有時(shí)候是因?yàn)樾畔⒈容^短，所以用短線更合適。

▲上圖的短線除了分隔信息外還起到了點(diǎn)綴的作用。

2.裝飾
短線也是可以用來(lái)裝飾的，把短線放在文字信息的前面、或者相對(duì)應(yīng)的留白區(qū)域，再選擇合適的顏色，可以有效豐富版面。

▲在文字的下一行位置加短線

▲在文字對(duì)應(yīng)的空白區(qū)域加短線

3.歸類(lèi)
就是用一條短線把一部分信息歸為一類(lèi)，一般采用豎線。把文字左對(duì)齊或右對(duì)齊，然后在對(duì)齊的一面加一條長(zhǎng)于或等于這段文字的直線，跟大括號(hào)的用法差不多，但是要更好看一些，在信息類(lèi)別比較多的版面中很實(shí)用，如下圖：

▲在目錄中使用短線是最合適不過(guò)的了。

▲上面的這些短線都有點(diǎn)長(zhǎng)？那我們就叫它長(zhǎng)長(zhǎng)的短線吧。

三、使用色塊

使用色塊進(jìn)行排版也很是實(shí)用的一項(xiàng)技巧，而且容易營(yíng)造時(shí)尚的感覺(jué)，經(jīng)常被用在畫(huà)冊(cè)和網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中，色塊在版式中的主要用途有以下幾個(gè)：

1.劃分區(qū)域
在畫(huà)冊(cè)或網(wǎng)頁(yè)設(shè)計(jì)中，可以用色塊來(lái)劃分區(qū)域，一個(gè)色塊承載一塊信息，使該色塊內(nèi)的內(nèi)容與其他信息區(qū)別開(kāi)來(lái)，如果色塊較多時(shí)最好讓它們形成一定的節(jié)奏感，比如呈統(tǒng)一或漸變效果。

▲色塊在劃分區(qū)域的同時(shí)還能把一些看起來(lái)比較零散的信息組合起來(lái)。

▲上圖的三個(gè)色塊各使用了不同的顏色，且有意上下錯(cuò)開(kāi)創(chuàng)造節(jié)奏感。

2.突出重點(diǎn)
突出重點(diǎn)信息的方式有很多，把它放在色塊中也是一種不錯(cuò)的方法，文字和色塊要使用對(duì)比色。

▲上圖的色塊是為了突出折扣信息。

▲上圖的色塊是為了凸現(xiàn)標(biāo)題。

3.分離背景

當(dāng)我們?cè)趫D片上排文字的時(shí)候，由于圖片的明暗關(guān)系不是太平均，所以會(huì)影響文字的閱讀性，這時(shí)在文字底部增加色塊是一個(gè)不錯(cuò)的方法，如果把背景圖調(diào)成黑白，再使用顏色鮮艷的色塊效果會(huì)更好。

▲如果想保留背景圖片的完整性，也可以適當(dāng)降低色塊的透明度，或者使用正片疊底效果。

4.豐富設(shè)計(jì)形式（裝飾）

色塊本身就是具有強(qiáng)烈設(shè)計(jì)感的元素，所以我們可以用色塊來(lái)進(jìn)行構(gòu)圖，比如用幾個(gè)色塊組合成一個(gè)圖形，或者通過(guò)色彩搭配制造對(duì)比，都可以做出很漂亮且有特色的設(shè)計(jì)。

▲上圖的色塊其實(shí)是左上角品牌標(biāo)志的延展，構(gòu)圖很特別。

▲上面這款包裝頂部的橙色在大面積的白色對(duì)比下顯得十分顯眼，成為了該包裝的最大亮點(diǎn)。

四、使用線框

線框和色塊的用法有很多相同的地方，但區(qū)別也不小，首先線框沒(méi)有色塊那么有視覺(jué)沖擊力，其次，因?yàn)榫€框的框內(nèi)是沒(méi)有顏色的，所以更適合把圖片也一同框起來(lái)了，而色塊主要用來(lái)承載文字信息。線框主要的用法有以下3種：

1.信息分組
用線框來(lái)把版面內(nèi)的信息進(jìn)行分組，跟色塊的用法是同樣的意思，這里就不多說(shuō)了，直接看例子吧。

▲上圖右側(cè)用線框把信息分為三組，粗一點(diǎn)的彩色線框還很時(shí)尚。

▲線框的風(fēng)格應(yīng)該與設(shè)計(jì)的整體風(fēng)格一致。

2.信息組織
零散的信息可能會(huì)造成版面混亂，用線框把臨近的信息框在一起是一個(gè)有效的解決辦法。

▲在這密集恐懼癥的版面中，還好設(shè)計(jì)師用線框守住了信息區(qū)域附近的一片“凈土”。

3.裝飾
根據(jù)版面尺寸、設(shè)計(jì)元素，合理的使用線框可以使作品更有設(shè)計(jì)感和美感，如：用圖片貫穿線框，塑造一種突破束縛的感覺(jué)，或者把線框直接作為版面邊緣的裝飾線條花邊等。

▲在卡片的設(shè)計(jì)中用細(xì)線框裝飾在邊緣，有點(diǎn)小小的文藝氣息。

▲利用規(guī)則的線框與圖片錯(cuò)開(kāi)制造沖突。

五、把文字排成一個(gè)特別的形狀

正常情況下我們都會(huì)把段落文字排成小方塊，但是對(duì)于那些要求不是太規(guī)矩的設(shè)計(jì)，我們也可以嘗試把段落文字排成一些有意思的形狀，例如把表達(dá)愛(ài)情的文字排成心形，把闡述環(huán)保的內(nèi)容排成樹(shù)的形狀等。這些特別的形狀會(huì)比方方正正的文字更具視覺(jué)沖擊，看上去也會(huì)更靈活更有趣，不過(guò)太花哨的形狀會(huì)降低文字的閱讀性，要慎用。

▲上圖的文字被排成平行四邊形，雖然算不上太特別，但是也造成了一種不穩(wěn)定的感覺(jué)，在周邊文字的搭配下顯得個(gè)性十足。

六、文本繞排

即把文字繞著圖片的外輪廓進(jìn)行排版，這種手法在畫(huà)冊(cè)、雜志或報(bào)紙的排版中比較多見(jiàn)，因?yàn)槲淖忠銐蚨嗖拍苓_(dá)到效果，使用文本繞排時(shí)，圖片要用異形效果才會(huì)比較好，而且圖片要盡量大一點(diǎn)，此方法最適合創(chuàng)造視覺(jué)沖擊。

▲上圖的版面中不僅運(yùn)用了文字繞排，同時(shí)還用了大小對(duì)比、稀疏對(duì)比、留白等技巧，有點(diǎn)叼。

▲上圖報(bào)紙中的圖片選得非常好，既有空間感又有動(dòng)感，文字與圖片也結(jié)合得很緊密，營(yíng)造出了一種車(chē)從報(bào)紙里沖出來(lái)了的感覺(jué)。

關(guān)于文本繞排，我順便說(shuō)一下操作方法，如果是用AI排版，你需要先把圖片在PS里去底，存為PSD格式的文件，然后把該文件直接拖入AI，嵌入文件后選擇可編輯選項(xiàng)，再點(diǎn)擊右鍵選擇釋放剪切蒙板，接著把圖片放入文本中，同時(shí)選中文本與圖片，點(diǎn)擊在菜單欄對(duì)象-文本繞排-建立就可以了。

而在CDR中的操作方法則要復(fù)雜一點(diǎn)點(diǎn)，你需要用貝塞爾工具再把圖片的外輪廓勾出來(lái)，然后再單機(jī)右鍵選擇段落文本換行-輪廓圖-跨式文本即可。

七、對(duì)齊

因?yàn)閷?duì)齊排版能夠制造一種穩(wěn)定、整潔、統(tǒng)一的感覺(jué)，最重要的是便于閱讀，所以，幾乎是在任何版式中都要用到該技巧?？此坪芎?jiǎn)單的技巧，其實(shí)里面也大有學(xué)問(wèn)，有很多優(yōu)秀的設(shè)計(jì)作品中都暗藏了很多對(duì)齊的玄機(jī)，但是過(guò)份的強(qiáng)調(diào)對(duì)齊也會(huì)讓版面顯得很死板，于是有些設(shè)計(jì)師就喜歡故意制造凌亂，結(jié)果總是弄巧成拙。

▲跟我一起唱：左對(duì)齊、右對(duì)齊、上對(duì)其、下對(duì)齊、左右對(duì)齊、居中對(duì)齊。

▲上圖的設(shè)計(jì)師肯定有對(duì)齊強(qiáng)迫癥，不過(guò)效果確實(shí)不錯(cuò)。

八、文疊圖

跟使用色塊不同的是，文疊圖不需要其他元素的輔助，而是直接把文字疊在圖片上，所以必須要保持文字的可識(shí)別性。而且不要把所有文字都放在圖片內(nèi)，而是只放一部分，與圖片形成交叉的關(guān)系。這種排版的優(yōu)勢(shì)在于對(duì)比效果強(qiáng)烈，且讓文字與圖片形成了緊密的互動(dòng)，不會(huì)有各自孤立的感覺(jué)。

▲采用不規(guī)則的異性圖片來(lái)處理效果也不錯(cuò)，圖片的顏色最好不要太多太艷。

▲整齊的文字與矩形的圖片交叉疊加，既平穩(wěn)協(xié)調(diào)又有種沖破束縛的感覺(jué)。

每一個(gè)技巧的使用都是有目的的，要么為了美觀，要么為了方便閱讀，而不是為了炫技，所以在分析每個(gè)技巧時(shí)，我都說(shuō)明了之所以這么做的好處，這是需要大家真正去理解的。