瀑布流排版——PPT多圖片排版的神技！

昨天，有位讀者問了我一個問題，他說像這樣的 PPT 頁面，有大量的圖片，而且，尺寸還不統一，該怎么去排版呢？

坦白講，這是一個很好的問題，因為對于圖片較多的頁面，我們一般能想到的做法，就是整齊地把它們并列擺放。

就像這樣：

但其實，你知道嗎？還有一種非常簡單的方法，卻可以讓圖片的排版，更有創意。那就是『瀑布流布局法』：

這是網頁設計中，經常會用到的一種布局形式，這種方法的特點呢，有兩個，我總結了一下：

• 非常適合用在多圖片排版中；
• 能夠呈現出數量龐大的感覺；

啥意思呢？比如說像在蘋果的官網設計中，我們經常會看到這種布局方法的使用：

既能夠在較少的頁面區域，展示大量圖片信息，而且會給人一種海量的視覺效果。

最關鍵的一點在于，這種方法使用起來超級簡單，因為我們只需要把尺寸不一的圖片，均勻地擺放整齊即可。

就像這樣：

我在之前的一期文章中，也使用過這個方法：

當然，如果你不想要讓它縱向排列，你還可以更換其他形式。

比如傾斜式的瀑布流布局：

再比如像三維式的瀑布流布局：

都是可以的。

但是，在使用這個方法的時候，有一點需要注意，那就是一定要保證圖片的間距相等：

否則，頁面的排版，看起來會很亂。

怎么樣？是不是足夠簡單？而且，最氣人的是，幾乎所有的多圖片排版，都可以使用這種方法。

比如你可以來排版企業榮譽證書：

你也可以來排版會議照片：

……

接下來，為了讓各位能夠加深理解，咱們通過兩個實際的案例，來實際應用一下。

一、多證書排版

就是頁面上有很多的證書，那我們該如何利用瀑布流，進行布局呢？

別著急，老規矩，咱們先來處理頁面上的內容。這里的文字信息很簡單：

在排版之前呢，可以先來劃分內容的層級關系：

然后呢，基于這層關系，來對內容進行排版，我做的是這樣：

我們把文字信息放到頁面上，會發現，頁面左下角區域被占據了，只留下右上角的空間：

所以，我們在進行瀑布流布局時，可能需要用到傾斜的版式：

在這里呢，咱們可以對圖片進行旋轉，從而，讓圖片的布局變成這樣：

把處理好的圖片，放到頁面上，來看一下效果：

還不錯，對嗎？但這時候頁面稍微有一些單調，怎么解決呢？

我們可以沿著圖片傾斜的角度，插入兩個斜邊四邊形，用作背景的裝飾：

顏色是取自企業的logo

這樣一來，我們的頁面排版就算完成了，非常簡單：

來看下最終的頁面效果：

二、運動APP介紹

主要呢，就是在講 App 能提供多種健身方案。因為沒有文字，因此，直接對圖片進行排版即可。

我們可以按照縱向的瀑布流布局，完成圖片的排版：

但這時候，頁面看起來有一些單調，咋解決呢？很簡單，找一張運動相關的背景圖：

然后，我們把排版好的圖片，放在背景圖上：

但如果只是這樣的話，下方的3張圖片，與頁面底部邊緣融合感較差，會讓人感覺出現的很突兀。

怎么解決呢？我們可以在下方，插入一條漸變蒙版，來讓底部邊緣融合度更強：

效果還不錯，對嗎？

以上呢，就是今天要跟大家分享的，一種非常好用且簡單的圖片排版方式。

最后，額外補充一個點。

這種瀑布流布局適合多圖片排版，因此，當使用時，我們希望觀眾感受到的，是數量豐富，而不是讓他們看清每一張圖片的具體內容。

這一點一定要知道。