這套網頁設計,看你能偷走多少排版技巧
當我們收集的靈感圖越多,越難回頭整理、查看,趁着這段時間,我仔細研究了每天在社羣發佈的“網頁設計”靈感部分。
發現這些作品之所以受大家所喜愛,是因為它們都具有美觀、統一、真實等特性。
而在 PPT 中想要出街,則需要再加一個關鍵詞:邏輯。
下面,來看今天的主角,一套介紹油漆的網頁設計靈感圖:
以深藍色和灰白色為主,橙色作為點綴,整體非常舒適。
那麼,思考一下,我們可以從這套網頁中學到什麼內容呢?
01. 內容排版
先來看裏面的文字排版:
雖然和中文排版有些區別,但也有很多互通之處。
無論在視覺上還是實際對齊都是一致的,仔細觀察,行間距是小於段間距的。
另外,在文字的層級上,也做了大小、粗細區分。
線條輔助視線引導:
橙色虛線引導,逐漸消失變成灰色,引導閲讀視線和方向。
這也是 PPT 製作中,非常容易被忽略掉的細節。
02. 風格統一
在大家的打卡作業中,經常能看見一些不合場景的素材,比如圖文不符、圖標樣式不統一、裝飾元素混用等。
而在這份靈感圖中,可以看到所使用的素材都是貼合主題的:
添加了油漆素材作為頁面背景,既豐富了頁面又不會干擾上方的圖文內容。
此外,介紹每個小點的內容時,加上了墨跡素材,也剛好和油漆滴濺的狀態吻合。
配色上還利用人的“刻板印象”,大面積使用深色作為主色調,搭配淺灰色,再加以橙色點綴,使人可以快速知曉所在行業和產品。
同類的“刻板印象”還有商務藍、科技藍、黨政紅、地產黑金等,不過現在逐漸出現一些新的搭配,比如科技紅。
除元素貼合主題外,裏面的圖片處理也值得一提:
為了不使純色塊直接放在頁面上顯得單調,在色塊底部疊加了一層油漆圖,並將原圖顏色調成色塊同色調,最後調整透明度併疊加。
我們在做 PPT 的時候,也可以用這樣的思路,比如這一頁 PPT:
不僅背景上疊加了圖片,還在每個色塊之上分別做了蜂窩形狀進行疊加。
03. 素材組合
有時候客户提供的圖片少、質量不高,設計師拿到圖片後無法下手,經常會出現圖文不符、素材亂飛的情況。
這時候不妨試試將圖片中的主體拿出來,和其他素材組合使用:
如果是在 PPT 裏,可以這樣用:色塊與鞋子穿插,再使用雲朵裝飾,最後給色塊加上陰影即可。
當然,組合使用也可以剋制一些,比如只截取素材的一部分:
如果甲方不同意更換素材,那就加色塊將其裝進去,將圖片與容器組成一個新的整體:
根據這張靈感圖,可以做出這樣的 PPT 頁面:用半透明色塊作為圖片容器,只呈現關鍵點和圖片。
當然,也可以用樣機做個包裝,這樣不僅弱化了圖片,還提升了整體的層次效果:
04. 氛圍強烈
風格和素材講完了,接下來聊聊氛圍感。
這套網頁中有很多亮點,比如首屏的大圖:
背景使用藍灰漸變,對比純白色的背景,整體看起來很乾淨舒適。
人物左側添加了橙色光暈效果,同時標題的漸變方向也是根據光暈的照射角度來做的,而人物的陰影則是超右,整個頁面的光影、漸變非常統一。
產品介紹部分,則不遺餘力地突出優點,綠色環保:
對部分綠植進行虛化墊底,結合實景綠植素材,同時再加點淡淡的發光效果,數字的漸變方向也和光的照射方向一致。
這些,我們統稱為:細節!
另外整套網頁展示出來時,是被包裝過的。
包裝的長圖上,加了很多與裝修相關的物品,比如油漆滾、剷刀、美工刀等。
這樣處理,也是為了進一步強化氛圍感,使整體看起來更統一、美觀,大家在 包裝自己的 PPT 作品集時,也可以借鑑這個思路。
寫到這裏,這套網頁已經被分析得差不多了,咱們最後總結一下:
① 內容排版
注意排版細節,段落與行間距關係,以及容易被忽略的視線引導線;
② 風格統一
使用的素材貼合主題,儘可能將行業配色、圖片等要素融到頁面中;
③ 素材組合
摳出圖片主體和其他素材組合使用,或添加容器與圖片組成新主體;
④ 氛圍強烈
借用光影與虛化,結合主體素材增強頁面氛圍,同時調整文字的漸變。
以上,就是今天分享的全部內容,希望對大家有所啟發~
作者 | Junmeng
來源 | 自律的音律(id: yinlvPPT )
推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:為設計新人提供的設計交流羣,請加入UI設計交流羣,分享經驗、接單、求職、聊設計。
- 9種常用UI界面中的控件規範,UI設計師要學的哦!
- 好的UI設計,能提升用户體驗,也能為作品加分!
- 這套網頁設計,看你能偷走多少排版技巧
- 這11條交互界面設計原則,設計師都應該看看
- 數字加密貨幣應用程序UI套件
- 有了這套商用字體合集,再也不怕侵權了
- 設計師該如何做知識管理(上)
- 超級實用的3D天氣主題圖標合集
- 排版真的很簡單嗎?你只看到表象!
- 如何繪製彩鉛噪點人物插畫?(附筆刷下載)
- 功能完善的電子商務APP、網站UI套件
- 金山雲技術體免費商用,歷時4年匠心打造(附下載)
- 適用於心理健康、治療的插畫合集
- 做好LOGO排版,讓LOGO漲價10倍!
- 完全可編輯的網頁設計UI KIT
- 使用 css 代碼畫一隻玉兔,迎中秋佳節
- 156個用户界面核心圖標庫
- 經驗談:搭建設計知識體系
- 高質量的網頁、演示文稿矢量背景和模型
- 幾何風格字體設計教程