20個案例告訴你著陸頁設計趨勢

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

作為設計師的我們，每天都會去各大設計網站尋找靈感，比如Dribbble / Behance / Pinterest上面有大量的優秀作品，看到那些賞心悅目的作品會忍不住採集收藏下來，但是你有沒有想過，你可以做的不只是讓它們安靜的待在收藏夾中長草。對這些優秀的作品進行理性的分析，會比你走馬觀花的看一遍收穫更多，如果再進一步思考，甚至可以獲取到當前網頁設計的流行趨勢。

下面是我選取Dribbble上面一些優秀的網頁作品，我試著帶大家從排版布局、色彩搭配、包裝展示等方面一起來分析這些優秀的作品。

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

20.這其實是一個動圖，因為太大傳不上來。案例中用的是左右分屏的手法，把兩個等級差不多的頁面放在一起，配合滑鼠Hover效果，頁面的元素比如logo、箭頭等元素會左右移動，滑鼠處在的頁面會高亮顯示。

最後總結：

我們常說設計師成長就是要多看多想，但怎麼看怎麼想呢？上面都是一些我自己個人的想法，平時看到好的作品也會多問問自己，為什麼它好，好在哪裡？也不用想的特別細，大概的方向就行，如此積累，堅持幾個月我相信大家會有不少收穫。

這篇文章也就是拋磚引玉，大家也可以分享下自己的想法，平時是怎麼分析好作品的，我也希望跟大家互相交流，取長補短共同進步！

原文地址：UISTAR（公眾號）

轉載請註明：學UI網 » 20個案例告訴你著陸頁設計趨勢

學UI就上學UI網！越努力，越幸運！

「學UI網 」最值得關注的UI學習平台！ 每天發布高質量的設計教程和分享設計經驗，服務於20萬UI設計師,幫助初學者快速轉型。每周六晚上免費YY公開課（36013311），給大家提供更多免費學習的機會。想成為設計師的你快來關注吧！

【特色推薦】

」 海量APP截圖，讓你靈感爆發！國內最好的APP截圖站。