這套網頁設計，看你能偷走多少排版技巧

當我們收集的靈感圖越多，越難回頭整理、查看，趁着這段時間，我仔細研究了每天在社羣發佈的“網頁設計”靈感部分。

發現這些作品之所以受大家所喜愛，是因為它們都具有美觀、統一、真實等特性。

而在 PPT 中想要出街，則需要再加一個關鍵詞：邏輯。

下面，來看今天的主角，一套介紹油漆的網頁設計靈感圖：

以深藍色和灰白色為主，橙色作為點綴，整體非常舒適。

那麼，思考一下，我們可以從這套網頁中學到什麼內容呢？

01. 內容排版

先來看裏面的文字排版：

雖然和中文排版有些區別，但也有很多互通之處。

無論在視覺上還是實際對齊都是一致的，仔細觀察，行間距是小於段間距的。

另外，在文字的層級上，也做了大小、粗細區分。

線條輔助視線引導：

橙色虛線引導，逐漸消失變成灰色，引導閲讀視線和方向。

這也是 PPT 製作中，非常容易被忽略掉的細節。

02. 風格統一

在大家的打卡作業中，經常能看見一些不合場景的素材，比如圖文不符、圖標樣式不統一、裝飾元素混用等。

而在這份靈感圖中，可以看到所使用的素材都是貼合主題的：

添加了油漆素材作為頁面背景，既豐富了頁面又不會干擾上方的圖文內容。

此外，介紹每個小點的內容時，加上了墨跡素材，也剛好和油漆滴濺的狀態吻合。

配色上還利用人的“刻板印象”，大面積使用深色作為主色調，搭配淺灰色，再加以橙色點綴，使人可以快速知曉所在行業和產品。

同類的“刻板印象”還有商務藍、科技藍、黨政紅、地產黑金等，不過現在逐漸出現一些新的搭配，比如科技紅。

除元素貼合主題外，裏面的圖片處理也值得一提：

為了不使純色塊直接放在頁面上顯得單調，在色塊底部疊加了一層油漆圖，並將原圖顏色調成色塊同色調，最後調整透明度併疊加。

我們在做 PPT 的時候，也可以用這樣的思路，比如這一頁 PPT：

不僅背景上疊加了圖片，還在每個色塊之上分別做了蜂窩形狀進行疊加。

03. 素材組合

有時候客户提供的圖片少、質量不高，設計師拿到圖片後無法下手，經常會出現圖文不符、素材亂飛的情況。

這時候不妨試試將圖片中的主體拿出來，和其他素材組合使用：

如果是在 PPT 裏，可以這樣用：色塊與鞋子穿插，再使用雲朵裝飾，最後給色塊加上陰影即可。

當然，組合使用也可以剋制一些，比如只截取素材的一部分：

如果甲方不同意更換素材，那就加色塊將其裝進去，將圖片與容器組成一個新的整體：

根據這張靈感圖，可以做出這樣的 PPT 頁面：用半透明色塊作為圖片容器，只呈現關鍵點和圖片。

當然，也可以用樣機做個包裝，這樣不僅弱化了圖片，還提升了整體的層次效果：

04. 氛圍強烈

風格和素材講完了，接下來聊聊氛圍感。

這套網頁中有很多亮點，比如首屏的大圖：

背景使用藍灰漸變，對比純白色的背景，整體看起來很乾淨舒適。

人物左側添加了橙色光暈效果，同時標題的漸變方向也是根據光暈的照射角度來做的，而人物的陰影則是超右，整個頁面的光影、漸變非常統一。

產品介紹部分，則不遺餘力地突出優點，綠色環保：

對部分綠植進行虛化墊底，結合實景綠植素材，同時再加點淡淡的發光效果，數字的漸變方向也和光的照射方向一致。

這些，我們統稱為：細節！

另外整套網頁展示出來時，是被包裝過的。

包裝的長圖上，加了很多與裝修相關的物品，比如油漆滾、剷刀、美工刀等。

這樣處理，也是為了進一步強化氛圍感，使整體看起來更統一、美觀，大家在 包裝自己的 PPT 作品集時，也可以借鑑這個思路。

寫到這裏，這套網頁已經被分析得差不多了，咱們最後總結一下：

① 內容排版

注意排版細節，段落與行間距關係，以及容易被忽略的視線引導線；

② 風格統一

使用的素材貼合主題，儘可能將行業配色、圖片等要素融到頁面中；

③ 素材組合

摳出圖片主體和其他素材組合使用，或添加容器與圖片組成新主體；

④ 氛圍強烈

借用光影與虛化，結合主體素材增強頁面氛圍，同時調整文字的漸變。

以上，就是今天分享的全部內容，希望對大家有所啟發~

作者 | Junmeng
來源 | 自律的音律（id: yinlvPPT )

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com

交流：為設計新人提供的設計交流羣，請加入UI設計交流羣，分享經驗、接單、求職、聊設計。