漲知識啦—這些案例告訴你著陸頁設計趨勢

作為設計師每天都會看到各種圖，除了走馬觀花的看，你學會了分析了嗎？還是只是收藏進你雜亂的我的最愛，噓，也許你看了假圖。今天來學習下如何思考和分析你看到的優秀的圖們。

下面從排版佈局、色彩搭配、包裝展示等方面來分析這些優秀的作品。

1.排版上左右對稱的設計帶給我們很強的信賴感，幾何元素的加入使得頭部深色背景充滿活力，紅黃藍適中的飽和度也看起來很高級。

2.同色系配色加上淺灰色背景讓頭圖整體看起來簡約乾淨，配合柔和的大投影讓右邊的卡片得以突出，幾何元素也再一次得到運用。

3.上面這個例子就是典型的Instagram風，主要通過去除多餘顏色，使用超大留白，資訊流盡量使用大圖尺寸，通過降低資訊密度來突出內容，配圖也選擇的是性冷淡風，整體讓頁面看起來極簡高逼格。

4.黑色加金色耐看又安全，深色的頭圖讓文案一目了然，加上兩側的資料折線圖，不但豐富了畫面層次，同時也把公司可以快速提升客戶利潤的特點傳達出去。

5.自從Material Design發佈以來，扁平化+卡片式的設計越來越流行，甚至在網頁設計中，也被廣泛的運用。配色上選擇藍色來契合商業公司的性質，綠色按鈕既突出又不會刺眼，讓整體非常乾淨。

6.抽象的晶格化點線，設計感十足，頭部加粗的文案看起來也非常醒目，黑色加綠色對比強烈，只是我個人覺得這個綠色有點刺眼，可以再柔和一點看起來會更舒適。（右邊圖中也加入了幾何元素）

7.自從去年Instagram發佈新Logo以來，漸變再次回歸，上面的例子就運用了多色漸變，不規則的形狀加上精心搭配的多色漸變，使其具有液體的質感，設計感十足，配合視差交互，網頁體驗一定很棒。

8.視頻背景在網頁設計中也被運用的越來越廣泛，因為不僅能直觀的表達產品功能，動態的視頻會讓網頁看起來非常高端，上面的例子肯定就是運用的視頻做為背景，再加上深色遮罩，上面的白色文字也能很突出。

9.網頁全屏的資料折線圖，充分表達了產品功能，漸變的配色也擺脫了資料的枯燥，同時從Mac螢幕延伸出來的折線豐富了白色背景。下面的雙色圖示也增加了設計感。

10.我們常說設計上好的配圖就成功了一半，上面的例子就充分說明了這點，選的配圖品質都非常高，再搭配富有設計感的字體，逼格馬上就出來了。同時排版上也打破常規，圖片文字左右交錯，配合蒙版和圖片視差動畫，效果出眾！

11.上面的網頁作品讓我想到最近流行的3D元素，簡單的背景加上擺拍的玩具，看起來很隨意但卻很好的增加了頁面活力，仿佛帶我們回到童年時光。同時這些小玩具也表達了該公司收集玩具的產品屬性。

12.最近火爆的2.5D也被頻繁的運用到網頁設計中去，比如上面的例子就是兩層帶透視的代碼介面。配色上都是偏高級灰的顏色，非常耐看。

13.虛擬實境也是接下來網頁設計的一大趨勢，如何在虛擬實境裡交互目前還少有成熟的解決方案。單從設計上來說，上面的案例採用了單屏網頁設計，所有的內容都在一屏內展示完，通過滑鼠切換頁面，同時左側文案隨之回應。頁面上的線條和按鈕不但起到了模組之間的分隔作用，也增強了設計感。

14.大面積的留白，大面積的淺灰色背景，給人安靜沉穩的感覺。但是右側紅色圓球的加入又打破了背景的平靜，可以說是點睛之筆，一靜一動之間，對比強烈，效果非常贊！

15.在圖片上疊加漸變最早應該是Spotify開始的，也是非常吸引眼球的設計方式，再配合加粗加大的文字，看起來非常棒。

16.全屏大圖往往可以帶給我們沉浸式的體驗，因此選擇高品質的大圖作為背景，壓暗後加上簡單的文字和按鈕效果就很出眾。同時上面的案例還採用了卡片式佈局，每張案例都是一張卡片，滾動滑鼠從左到右可以切換卡片案例。

17.對於展示產品的網站來說，採用淺色背景是非常高效解決辦法，因為可以讓產品更加突出，比如上面的頭圖，還有四小一大的產品展示圖，卡片式設計的加入也非常實用。

18.上面的例子是一個教練APP的著陸頁，整體配色採用了綠茵場的綠色，帶給我們身臨其境的感覺，加上我們前面說到的單色線性圖示、幾何原色，曲線線條，整體設計感很強。

19.又是全屏大圖+黑色遮罩+白色文字，這種設計非常容易出效果。下面圖片加色塊的結合也是很棒的方式，值得我們學習。