昨天，有位讀者問了我一個(gè)問題，他說像這樣的 PPT 頁面，有大量的圖片，而且，尺寸還不統(tǒng)一，該怎么去排版呢？
坦白講，這是一個(gè)很好的問題，因?yàn)閷τ趫D片較多的頁面，我們一般能想到的做法，就是整齊地把它們并列擺放。
就像這樣：
但其實(shí)，你知道嗎？還有一種非常簡單的方法，卻可以讓圖片的排版，更有創(chuàng)意。那就是『瀑布流布局法』：
這是網(wǎng)頁設(shè)計(jì)中，經(jīng)常會用到的一種布局形式，這種方法的特點(diǎn)呢，有兩個(gè)，我總結(jié)了一下：
- 非常適合用在多圖片排版中；
- 能夠呈現(xiàn)出數(shù)量龐大的感覺；
啥意思呢？比如說像在蘋果的官網(wǎng)設(shè)計(jì)中，我們經(jīng)常會看到這種布局方法的使用：
既能夠在較少的頁面區(qū)域，展示大量圖片信息，而且會給人一種海量的視覺效果。
最關(guān)鍵的一點(diǎn)在于，這種方法使用起來超級簡單，因?yàn)槲覀冎恍枰殉叽绮灰坏膱D片，均勻地?cái)[放整齊即可。
就像這樣：
我在之前的一期文章中，也使用過這個(gè)方法：
當(dāng)然，如果你不想要讓它縱向排列，你還可以更換其他形式。
比如傾斜式的瀑布流布局：
再比如像三維式的瀑布流布局：
都是可以的。
但是，在使用這個(gè)方法的時(shí)候，有一點(diǎn)需要注意，那就是一定要保證圖片的間距相等：
否則，頁面的排版，看起來會很亂。
怎么樣？是不是足夠簡單？而且，最氣人的是，幾乎所有的多圖片排版，都可以使用這種方法。
比如你可以來排版企業(yè)榮譽(yù)證書：
你也可以來排版會議照片：
……
接下來，為了讓各位能夠加深理解，咱們通過兩個(gè)實(shí)際的案例，來實(shí)際應(yīng)用一下。
一、多證書排版
就是頁面上有很多的證書，那我們該如何利用瀑布流，進(jìn)行布局呢？
別著急，老規(guī)矩，咱們先來處理頁面上的內(nèi)容。這里的文字信息很簡單：
在排版之前呢，可以先來劃分內(nèi)容的層級關(guān)系：
然后呢，基于這層關(guān)系，來對內(nèi)容進(jìn)行排版，我做的是這樣：
我們把文字信息放到頁面上，會發(fā)現(xiàn)，頁面左下角區(qū)域被占據(jù)了，只留下右上角的空間：
所以，我們在進(jìn)行瀑布流布局時(shí)，可能需要用到傾斜的版式：
在這里呢，咱們可以對圖片進(jìn)行旋轉(zhuǎn)，從而，讓圖片的布局變成這樣：
把處理好的圖片，放到頁面上，來看一下效果：
還不錯(cuò)，對嗎？但這時(shí)候頁面稍微有一些單調(diào)，怎么解決呢？
我們可以沿著圖片傾斜的角度，插入兩個(gè)斜邊四邊形，用作背景的裝飾：
顏色是取自企業(yè)的logo
這樣一來，我們的頁面排版就算完成了，非常簡單：
來看下最終的頁面效果：
二、運(yùn)動(dòng)APP介紹
主要呢，就是在講 App 能提供多種健身方案。因?yàn)闆]有文字，因此，直接對圖片進(jìn)行排版即可。
我們可以按照縱向的瀑布流布局，完成圖片的排版：
但這時(shí)候，頁面看起來有一些單調(diào)，咋解決呢？很簡單，找一張運(yùn)動(dòng)相關(guān)的背景圖：
然后，我們把排版好的圖片，放在背景圖上：
但如果只是這樣的話，下方的3張圖片，與頁面底部邊緣融合感較差，會讓人感覺出現(xiàn)的很突兀。
怎么解決呢？我們可以在下方，插入一條漸變蒙版，來讓底部邊緣融合度更強(qiáng)：
效果還不錯(cuò)，對嗎？
以上呢，就是今天要跟大家分享的，一種非常好用且簡單的圖片排版方式。
最后，額外補(bǔ)充一個(gè)點(diǎn)。
這種瀑布流布局適合多圖片排版，因此，當(dāng)使用時(shí)，我們希望觀眾感受到的，是數(shù)量豐富，而不是讓他們看清每一張圖片的具體內(nèi)容。
這一點(diǎn)一定要知道。
原標(biāo)題：我從蘋果官網(wǎng)，學(xué)到了一個(gè)萬能PPT圖片排版技巧，太贊了！
]]>