設(shè)計的版式布局一般分為初步編排、信息分層、放置背景找到問題、版式編排、解決配色以及圖像處理等六個步驟，其中最為關(guān)鍵的是第一步，需要認真仔細梳理最基本的文案內(nèi)容，將文案放置到畫面中簡化做另一個初步框架的編排，這樣才能為后面的步驟打好基礎(chǔ)。

1、初步編排

首先文檔中梳理最基本的文案內(nèi)容，將文案放置到畫面中簡化做另一個初步框架的編排。

2、信息分層

閱讀文案并分類出主題、副標題、內(nèi)容、時間信息以及小部分弱化文字的關(guān)系，這樣就可在之后的排版中做出字體、大小、位置、比例等信息的分層。

3、放置背景找到問題

嘗試置入背景找尋問題的所在，例如填充底色，再放入跟主題相關(guān)的素材融入看看大概的感覺，當發(fā)現(xiàn)色系和風格不與主題相符時，可嘗試換成與主題相似的色系和素材找出影響版式美感的問題所在。

4、版式編排

（1）通常情況下可以利用色塊先將文字層次劃分出來，比如主題可以放大，小標題縮小，內(nèi)容層進行拆分。

（2）再結(jié)合一開始提到的布局比例關(guān)系，當圖像的面占比越大時，版式上的構(gòu)造就會相對簡單的原理，解決初學者或者想快速排出好版式的首選。

5、解決配色

最簡單的辦法就是吸取你想要放置的主視覺圖像或素材上的主顏色，以此得到一個主色調(diào)與輔助色，有人說另外一個顏色如何配的，正常利用相鄰色、間隔色、互補色等等來找尋之間的配比關(guān)系。

6、圖像處理

比如可以利用漸變映射對其圖像置換新的顏色，扁平和手繪風改變其原有紋理和色彩質(zhì)感。

二、網(wǎng)頁設(shè)計如何排版

1、大小反差

（1）在PC端我們可能會采用字號差異較大的文字組合，移動端屏幕較小，容納的文字也較少。

（2）同樣的字號差異在小屏幕上的感受也會被放大，我們在使用這兩種設(shè)備的時候觀看距離不同，PC端我們的眼睛距離較遠，而在移動端則是相反的，因此我們應該在移動端使用較小的字號反差。

2、字重

不要使用PS中的文本加粗，它不僅破壞字體本身的美感，還改變了文字原本的字寬而影響段落文字的對齊，合理的方法是使用字體本身的字重來控制，比如蘋方、Neue等字體本身就提供幾種字重選擇。

3、可讀性

移動設(shè)備使用環(huán)境復雜而多變，不局限在室內(nèi)，可能在室外甚至暴露在強烈的陽光下會影響閱讀，所以我們在這一個方面也是要注意且要去思考的。

4、對齊方式

在英文的段落排版中，一般是左側(cè)對齊。左對齊更具有可讀性，對中文排版與閱讀習慣而言則相反，段落的頭尾對齊尤為重要。

5、層次結(jié)構(gòu)

在排版中，層次這個詞是區(qū)分文本和不同元素的重要性區(qū)別的學術(shù)性說法，我們要將層次結(jié)構(gòu)弄明白，哪個重要哪個其次。