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

語言: CN / TW / HK

當我們收集的靈感圖越多,越難回頭整理、檢視,趁著這段時間,我仔細研究了每天在社群釋出的“網頁設計”靈感部分。

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

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

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

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

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

01. 內容排版

先來看裡面的文字排版:

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

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

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

線條輔助視線引導:

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

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

02. 風格統一

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

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

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

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

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

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

除元素貼合主題外,裡面的圖片處理也值得一提:

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

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

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

03. 素材組合

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

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

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

當然,組合使用也可以剋制一些,比如只擷取素材的一部分:

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

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

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

04. 氛圍強烈

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

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

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

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

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

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

這些,我們統稱為:細節!

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

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

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

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

① 內容排版

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

② 風格統一

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

③ 素材組合

摳出圖片主體和其他素材組合使用,或新增容器與圖片組成新主體;

④ 氛圍強烈

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

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

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

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

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