我總結(jié)了一種非常實(shí)用而且極易掌握的排版方法，給它起了一個還算通俗易懂名字，叫做卡片式排版法！
那么，什么是卡片式排版法呢？
理解起來很簡單。就是在頁面中畫幾個色塊，用來承載頁面中不同的內(nèi)容，色塊的大小取決于內(nèi)容的多少。
大概就是這個形式：
為了讓你更容易去理解什么是卡片式排版法，咱們一起來看幾個案例。
其實(shí)這種排版方法還挺常見的，比如網(wǎng)頁設(shè)計(jì)：
手機(jī)瀏覽器的界面設(shè)計(jì)：
手機(jī)系統(tǒng)的界面設(shè)計(jì)：
就連前段時(shí)間蘋果發(fā)布會中，也多次用到過這個排版方法：
緊接著，就被魅族給學(xué)了過去：
可見這個方法之經(jīng)典！
針對不同類型的頁面，卡片式排版有著不同的作用，一般分為這兩類：
1. 信息量較大的頁面
對于內(nèi)容較多的頁面，使用這個方法，能夠很好的規(guī)整頁面中雜亂的信息，讓頁面看起來十分的整齊。
比如下面這頁 PPT，有著多種樣式的圖表，以及一些重點(diǎn)數(shù)據(jù)：
雖然排版整齊，而且還有意識地通過距離，來劃分不同的信息區(qū)域，但看起來仍然很亂。
我們把頁面的中心放入到卡片中，再來看一下效果：
考慮到原稿和大數(shù)據(jù)相關(guān)，我又改了一版深色背景：
和最原稿相比，這兩版都要整齊很多，對嗎？
2. 信息量較少的頁面
對于頁面內(nèi)容較少的頁面，卡片式排版能夠讓頁面更加的飽滿，不至于讓頁面顯得單調(diào)。
同樣的，我們來看一個案例：
由于內(nèi)容太少，導(dǎo)致頁面兩側(cè)看起來很空，對嗎？
這時(shí)我們就可以考慮采用卡片式的布局，讓頁面更加的豐富。我使用色塊大概繪制了一個版式：
接著，我們將內(nèi)容添加的版式中：
效果看起來還不錯！
最后，為了營造空間感，我們還可以給卡片做一個三維旋轉(zhuǎn)，以及添加倒影：
1. 卡片之間的間距相等
這是使用這種排版方法，最基本的要求。
來看一個實(shí)例：
間距相等，不僅要求卡片的橫向間距相等，其縱向間距也要和橫向間距保持一致：
比如，剛才我們所修改的一個案例：
只有這樣才能保證頁面在視覺上的美觀。
2. 卡片內(nèi)要有合理的留白
可能有些朋友不明白是什么意思，簡單來說，就是內(nèi)部信息與卡片邊界保留一定的距離。
為了讓你更清晰的明確這一點(diǎn)，咱們再來看一張對比圖：
很明顯，左側(cè)的卡片看起來十分的擁擠，給人的感覺十分壓抑，沒有什么呼吸感，閱讀起來也有很障礙。而右側(cè)的卡片，給人的感覺卻十分的舒適。
1. 在卡片底部疊加色塊或圖片
通常情況下，如果只是簡單的將內(nèi)容置于卡片中，頁面難免會有些單調(diào)，而通過疊加色塊或者圖片，則可以讓頁面更具視覺層次。
比如下面這兩頁 PPT，都是通過在卡片底部添加圖片來增強(qiáng)頁面的層次感：
明確了這一點(diǎn)，咱們一起來看一個實(shí)際案例，就比如下面這張幻燈片：
首先，我們可以使用卡片劃分頁面中的 3 個圖表，并添加相應(yīng)的顏色。
接著，為了讓頁面更有層次，我們可以在卡片的底部，添加一層形狀：
或者是與頁面信息相關(guān)的圖片：
層次感立馬就出來了，對嗎？
另外，為了讓層次感更強(qiáng)，我們還可以給卡片添加陰影，就像這樣：
2. 卡片之間錯落擺放
先來看一張圖示對比：
很顯然，錯落擺放的頁面會顯得更有創(chuàng)意，對嗎？
當(dāng)然，除了創(chuàng)意，卡片的錯落擺放還可以合理的運(yùn)用頁面上的空間。內(nèi)容多的放在大卡片上，內(nèi)容少的放在小卡片上。
比如蘋果、魅族發(fā)布會的 PPT，就巧妙地利用了這一點(diǎn)：
咱們再來看一個具體的案例，這是一頁大會的 VI 展示，由于圖片大小不統(tǒng)一，頁面擺放的很亂。
針對這樣的頁面，我們可以更具圖片的大小，先畫出卡片的排版樣式：
接著，將圖片填充到相應(yīng)的卡片中：
到這，頁面已經(jīng)整齊多了！因?yàn)轫撁嬷械膱D片本身并不出彩，為了讓頁面顯得更有質(zhì)感，我又調(diào)整了一版深色背景：
最后，再加上動畫效果：
看起來，還不錯，對嗎？
好了，以上呢，就是有關(guān)卡片式排版法的全部內(nèi)容啦！你掌握了嗎？
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。