給設(shè)計(jì)師點(diǎn)贊！14個(gè)特別走心的網(wǎng)站著陸頁(yè)設(shè)計(jì)

編者按：著陸頁(yè)作為網(wǎng)站門(mén)面，重要性不多贅述。不過(guò)得花點(diǎn)時(shí)間介紹下今天這組網(wǎng)站，既有效地展示了產(chǎn)品，也兼顧了設(shè)計(jì)美感，兩者平衡得非常得當(dāng)，文中有@網(wǎng)秦UEC? 同學(xué)細(xì)致專業(yè)的設(shè)計(jì)分析，作為一組頂尖案例來(lái)學(xué)習(xí)，絕對(duì)不容錯(cuò)過(guò) >>>

在過(guò)去的幾年里，精美的登陸頁(yè)面見(jiàn)證了設(shè)計(jì)趨勢(shì)實(shí)實(shí)在在的轉(zhuǎn)變。不論是iPhone應(yīng)用、Web應(yīng)用、服務(wù)還是實(shí)際產(chǎn)品，在登陸頁(yè)面設(shè)計(jì)方面的門(mén)檻是節(jié)節(jié)升高。

我認(rèn)為在其中很多初創(chuàng)公司發(fā)揮了很大作用。在初創(chuàng)公司的世界里，給用戶留下第一印象的機(jī)會(huì)僅此一次，所以如何展示產(chǎn)品至關(guān)重要。而為了有效競(jìng)爭(zhēng)，一些比較大的品牌在這一方面也不得不多走點(diǎn)心，而這一競(jìng)爭(zhēng)就造就了越來(lái)越多精美的營(yíng)銷(xiāo)頁(yè)面，這些頁(yè)面能夠有效地展示產(chǎn)品、說(shuō)明產(chǎn)品功能和好處，并鼓動(dòng)顧客的情懷，讓他們產(chǎn)生比較高的期望。

下面我收集了一些我個(gè)人比較喜歡的營(yíng)銷(xiāo)頁(yè)面設(shè)計(jì)，這些設(shè)計(jì)我覺(jué)得融入了大量的心思和功夫，希望能夠給大家?guī)?lái)一些靈感。

1）FOREST

Forest是一款能夠幫助用戶以30分鐘為單位集中時(shí)間和注意力的工作效率提升應(yīng)用。其登陸頁(yè)看起來(lái)比較松散，近似極簡(jiǎn)主義，但仍然很好地解釋了產(chǎn)品簡(jiǎn)單而上檔次的理念。

2）MOTO 360

這是摩托羅拉首次殺入智能手表市場(chǎng)，其Moto 360是公司的旗艦產(chǎn)品，因此一定要以一種創(chuàng)新、有趣地方式展示出來(lái)。滾動(dòng)登陸頁(yè)你會(huì)看到以動(dòng)態(tài)UI展示的手表裝配過(guò)程。其中比較討巧的一個(gè)元素，就是手表圖片上顯示的是當(dāng)前實(shí)際的精確時(shí)間。

3）Instapaper

Instapaper是比較成功的一款閱讀儲(chǔ)備應(yīng)用，其特點(diǎn)是應(yīng)用界面簡(jiǎn)單、簡(jiǎn)約。其登陸頁(yè)面也集產(chǎn)品之大成，雖然有大量的留白空間，但卻展現(xiàn)出了一切必要信息，沒(méi)有亂七八糟的東西。

4）Ring

Ring是一款門(mén)鈴產(chǎn)品，不在互聯(lián)網(wǎng)圈子內(nèi)。其內(nèi)置的攝像頭可以讓你通過(guò)手機(jī)看到門(mén)前來(lái)者，甚至還能檢測(cè)到自己房屋周邊的動(dòng)作情況并向你發(fā)送警報(bào)。這是個(gè)比較新奇的理念，所以可能需要詳加解釋一番，其登陸頁(yè)面充分而優(yōu)雅地展示出了產(chǎn)品的所有好處。

5）Gumroad

Gumroad可提供網(wǎng)上銷(xiāo)售服務(wù)，用戶還可通過(guò)其系統(tǒng)收款。其登陸頁(yè)面踩中了很多設(shè)計(jì)最佳實(shí)踐方式：有明確的方向指引（大大的“免費(fèi)設(shè)立”按鈕）、用詞巧妙的操作引導(dǎo)、與之合作的大網(wǎng)站的logo，還有用精美插畫(huà)繪制的整體流程方式。

6）RDIO

Rdio提供在線音樂(lè)服務(wù)，其擁有一套制作精良的登陸頁(yè)。頁(yè)面典雅、簡(jiǎn)潔，并采用了大量留白空間和大幅的滿屏圖片，營(yíng)造出能夠吸引眼球的大膽設(shè)計(jì)。

7） Intercom

Intercom服務(wù)可幫助用戶提高向客戶發(fā)送電子郵件的效率。其登陸頁(yè)采用了相對(duì)比較復(fù)雜的理念以便大家理解產(chǎn)品工作原理以及好處所在。這個(gè)設(shè)計(jì)中我最喜歡的是對(duì)比展示舊有工作方式和Intercome的簡(jiǎn)便方法。

8） iPhone 6

iPhone 6的登陸頁(yè)面采用了其標(biāo)志性地營(yíng)銷(xiāo)風(fēng)格——大量留白、巨型方便閱讀的文字和高質(zhì)量的圖片襯托白色背景。不僅如此，公司還加入了相對(duì)比較微妙的動(dòng)畫(huà)效果——向下滾動(dòng)鼠標(biāo)時(shí)，手機(jī)會(huì)以視差的形式自己移動(dòng)。這一切元素共同組成了一套漂亮、容易領(lǐng)會(huì)而且具有蘋(píng)果風(fēng)格特色的登陸頁(yè)。

9）Shyp

Shyp是一款旨在簡(jiǎn)化包裹發(fā)運(yùn)工作的服務(wù)。其流程是首先用手機(jī)應(yīng)用拍攝物品照片，準(zhǔn)備發(fā)運(yùn)，然后Shyp會(huì)負(fù)責(zé)完成剩下全部工作。考慮到這個(gè)想法比較不尋常，所以需要比較復(fù)雜的解釋工作來(lái)展現(xiàn)出這項(xiàng)服務(wù)的簡(jiǎn)單和直接，而這也就是登陸頁(yè)面的作用了。用戶滾動(dòng)鼠標(biāo)時(shí)，可以看到分步驟的服務(wù)流程，并領(lǐng)會(huì)到這一切有多簡(jiǎn)單和方便。

11） DISQUS

Disqus可通過(guò)嵌入代碼幫助網(wǎng)站所有方在網(wǎng)站任意位置添加評(píng)論功能。Disqus一直崇尚創(chuàng)意、巧妙并且設(shè)計(jì)精巧的登陸頁(yè)，而其最新的登陸頁(yè)版本又加入了一個(gè)新元素：個(gè)性化。其將主頁(yè)的標(biāo)題部分打造成了一個(gè)不同尋常、有趣且好玩的評(píng)論幻燈片，給整體設(shè)計(jì)精美的頁(yè)面帶來(lái)了另一絲魅力。

12） CAMPAIGN MONITOR

打造簡(jiǎn)單雅致的登陸頁(yè)面看似簡(jiǎn)單做起來(lái)難，但是Campaign Monitor出手不凡。這是我印象中最簡(jiǎn)單但最漂亮的頁(yè)面。其同樣踏中了最正確的節(jié)奏：有力的標(biāo)題、撰寫(xiě)得當(dāng)?shù)慕榻B語(yǔ)準(zhǔn)確說(shuō)明軟件的好處、顯眼的操作引導(dǎo)以及一片正在使用其軟件的知名公司名稱。

13） Human

Human是一款能夠跟蹤健身水平、卡路里攝入等的iPhone應(yīng)用。其推廣產(chǎn)品的登陸頁(yè)面在一定程度上采納了蘋(píng)果的設(shè)計(jì)風(fēng)格，使用了大型的文字、大量留白和巨大粗獷的圖片。其簡(jiǎn)約的設(shè)計(jì)一筆到位，沒(méi)有廢話，而且看起來(lái)也很不錯(cuò)。

14） CIRCLE

Circle是一項(xiàng)比較新穎的服務(wù)，其可輔助你使用比特幣買(mǎi)東西。公司登陸頁(yè)面有幾個(gè)方面做得非常好，比如在多個(gè)位置放置注冊(cè)表單，而不是單獨(dú)跳出頁(yè)面。另外，其還采用了幾個(gè)其他設(shè)計(jì)訣竅。鼠標(biāo)滾動(dòng)時(shí)，其背景圖片上采用了比較聰明的視差效果，但大型的圖片并不會(huì)原地不動(dòng)，而是會(huì)縮小到遠(yuǎn)景，營(yíng)造出不同尋常的運(yùn)動(dòng)感。

15） DYSON 360 EYE

Dyson正式揭開(kāi)了其機(jī)器人吸塵器Dyson 360 Eye的面紗。其登陸頁(yè)面采用絕妙而不同尋常的方式展現(xiàn)了其不同尋常的產(chǎn)品。頁(yè)面在顯眼位置展示了成品，鼠標(biāo)滾動(dòng)采用了有趣的動(dòng)畫(huà)效果展示每個(gè)零部件，以便用戶仔細(xì)查看吸塵器內(nèi)部構(gòu)造。而最后就組成了這一信息滿滿而又十分有趣的產(chǎn)品展示登陸頁(yè)面。

【優(yōu)設(shè)熱門(mén)免費(fèi)資源打包合集】

給2014年劃上最后的句號(hào)，頒獎(jiǎng)大典：
《年度頒獎(jiǎng)盛典！2014年最受歡迎的設(shè)計(jì)資源大盤(pán)點(diǎn)》

短短兩天人氣爆棚的精品PSD文件免費(fèi)打包！
《年底資源包！27個(gè)優(yōu)質(zhì)的PSD精品資源免費(fèi)下載》

設(shè)計(jì)圈干貨全方位搜羅！總有一款亮到你！
《圣誕節(jié)大福利！十二月設(shè)計(jì)圈免費(fèi)資源大合集》

原文地址：webdesignerdepot
譯文地址：uec.nq
譯者：蔣燦

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量91萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：