28個(gè)案例教你如何打磨自建站主頁提升流量轉化(huà)

你的(de)網站主頁就如同一幢房(fáng)子的(de)外在美(měi)感。當你試圖賣掉房(fáng)子，但是房(fáng)子的(de)花園雜(zá)草(cǎo)叢生、車道有裂縫而且前門還(hái)有破損，還(hái)能夠賣得(de)出去嗎？當然不能。房(fáng)子的(de)外觀缺陷會阻止買家考慮購(gòu)買的(de)想法，而你的(de)網站也(yě)是如此。

人(rén)們在訪問你的(de)網站時(shí)，第一眼看到的(de)就是你的(de)主頁。這(zhè)就是爲什(shén)麽你的(de)網站主頁設計需要盡可(kě)能做(zuò)到最好。如果你的(de)主頁無法吸引訪客，如果你的(de)主頁設計不夠簡單和(hé)直觀，你就無法提升轉化(huà)率。

你需要學習(xí)如何設計一個(gè)網站主頁，使你的(de)網站和(hé)業務更爲強大(dà)。但是一個(gè)優秀的(de)網站主頁需要什(shén)麽呢(ne)？它們是如何直接使你受益的(de)呢(ne)？

一個(gè)優秀的(de)主頁設計可(kě)以帶來(lái)哪些好處？

一個(gè)簡單的(de)主頁設計，首先會對(duì)訪客表示歡迎，然後表示你希望他(tā)們下(xià)一步做(zuò)什(shén)麽，并且允許他(tā)們更深入地搜索你的(de)網站。你可(kě)以在這(zhè)基礎之上，從基礎元素開始添加一些複雜(zá)性設計，但是切忌胡亂堆砌。

你的(de)主頁需要什(shén)麽？你的(de)訪客會期待什(shén)麽？應該優先添加哪些元素呢(ne)？

當你能回答(dá)這(zhè)些問題時(shí)，你就了(le)解了(le)優秀主頁設計所需要的(de)信息。在網頁設計中，每個(gè)主頁元素都有著(zhe)非常具體的(de)用(yòng)途。

幫助目标受衆了(le)解你的(de)業務

許多(duō)訪客會首先找到你的(de)網站主頁。考慮到這(zhè)一點，你需要給他(tā)們留下(xià)深刻的(de)第一印象。你的(de)主頁應該能夠傳遞你公司的(de)價值觀、USP（獨特的(de)銷售主張）和(hé)宗旨。如果你能夠成功傳達這(zhè)些品質，你就更有可(kě)能吸引潛在顧客。

提升網站用(yòng)戶體驗

消費者訪問你的(de)網站一定是有其意圖的(de)，也(yě)許他(tā)/她想看看你的(de)産品線、閱讀你的(de)博文或者看看你是否有銷售某種類型的(de)服務。

無論如何，你都會期望将消費者引導到相應的(de)頁面。如果你能提供直觀的(de)導航和(hé)對(duì)網站流程的(de)了(le)解，你的(de)主頁設計将會促進這(zhè)類轉化(huà)。

提升轉化(huà)率

如果你想要提升轉化(huà)率，但是如果你沒有給他(tā)們必要的(de)激勵和(hé)機會，那麽就不會有任何改變。例如，你想要建立一個(gè)電子郵件列表，但是訪客找不到注冊表單，那麽你的(de)數據庫隻會是空空如也(yě)。

如果訪客對(duì)你的(de)網站體驗非常滿意，他(tā)們也(yě)更有可(kě)能記住它。也(yě)許你今天沒有促成銷售，但是顧客會在不久之後回來(lái)購(gòu)買你的(de)産品。這(zhè)就是爲什(shén)麽給訪客留下(xià)強烈的(de)第一印象非常重要。

提高(gāo)品牌知名度

主頁是通(tōng)往網站其餘部分(fēn)的(de)門戶，因此品牌形象應該在主頁處就立竿見影(yǐng)，這(zhè)一點極其重要。你的(de)标志、标語和(hé)宗旨應該占據主頁中心位置。另外，你可(kě)能想在主頁的(de)頂部添加一個(gè)聲明(míng)（最好是大(dà)字體），讓訪客對(duì)你的(de)工作有個(gè)概念，比如：你爲顧客解決了(le)什(shén)麽問題？你如何改善顧客的(de)生活（無論是個(gè)人(rén)生活還(hái)是職場(chǎng)生活）？

2018年28個(gè)最佳主頁設計範例（以及收獲成效的(de)原因）

沒有比範例更好的(de)學習(xí)方法了(le)。下(xià)文将爲你展示2018年28個(gè)最佳的(de)主頁設計範例，并且會說明(míng)這(zhè)些網頁收效甚好的(de)原因，這(zhè)樣你就可(kě)以在自己的(de)網站上應用(yòng)相同的(de)策略。

1、Dropbox

作爲一個(gè)網絡文件同步工具，Dropbox的(de)主頁橫幅是一張略微傾斜的(de)圖像，一下(xià)子就抓住人(rén)的(de)眼球，還(hái)有兩個(gè)CTA（Call to Action，行動召喚）——其中一個(gè)付費版本的(de)工具使用(yòng)了(le)深色背景來(lái)吸引更多(duō)的(de)注意力。主頁的(de)營銷文案抓住消費者的(de)痛點，簡潔明(míng)了(le)地強調了(le)效率性和(hé)安全性。另外，導航功能也(yě)做(zuò)了(le)簡化(huà)，訪客可(kě)以點擊“Compare plans（比較套餐）”，選擇适合自己的(de)使用(yòng)方案。

2、Slack

Slack的(de)主頁設計選擇了(le)獨特的(de)插畫(huà)，顯得(de)十分(fēn)别具一格。選擇定制圖案總是一種可(kě)行的(de)方法。該網站的(de)标語“Where Work Happens（你的(de)智能辦公平台）”不僅富有創意，也(yě)概括了(le)所提供工具的(de)用(yòng)途。Slack在主頁中即爲訪客提供了(le)登錄或創建一個(gè)賬戶的(de)選項。該網站提供了(le)比Dropbox更多(duō)的(de)導航選項，但是每一個(gè)都有助于訪客找到他(tā)們想要的(de)東西。

3、Green Mountain Energy

Green Mountain Energy的(de)主頁同樣采用(yòng)了(le)定制插畫(huà)。這(zhè)家公司的(de)宗旨毋庸置疑——以合理(lǐ)的(de)價格爲顧客提供清潔能源。主頁中有兩個(gè)相同的(de)CTA：一種是針對(duì)住宅客戶，另一種是針對(duì)企業客戶。而且設計者在CTA的(de)背景圖案中采用(yòng)了(le)對(duì)比色來(lái)吸引訪客的(de)眼球。

4、CarMax

CarMax是一個(gè)既購(gòu)車又賣車的(de)平台，所以主頁的(de)設計上需要迎合兩種受衆。但是CarMax也(yě)出色地完成了(le)這(zhè)一挑戰，它的(de)主頁中提供了(le)多(duō)個(gè)CTA引導訪客找到買車或出售二手車的(de)頁面，整個(gè)頁面既幹淨又簡單。你可(kě)以看到主頁橫幅中的(de)汽車牌照(zhào)上的(de)CarMax标志，顯然它的(de)主頁橫幅也(yě)是特别定制的(de)。

5、thredUP

電商主頁的(de)設計可(kě)能會很棘手，你可(kě)以參考thredUP公司的(de)主頁設計，它采用(yòng)了(le)季節性方法——在夏季推出當季潮品。顯然，波西米亞風很流行（至少對(duì)女(nǚ)性來(lái)說是這(zhè)樣），所以主頁定制大(dà)圖中展示了(le)許多(duō)波西米亞風的(de)流行趨勢。雖然主頁中的(de)導航很多(duō)，但是得(de)益于其利落的(de)設計，訪客可(kě)以輕松地找到感興趣的(de)類别。

6、StudioPress

簡約元素、平面插畫(huà)和(hé)柔和(hé)的(de)色彩使得(de)StudioPress的(de)主頁閃閃發亮。StudioPress用(yòng)文字描述了(le)其網站宗旨“Build Amazing WordPress Sites（緻力于創建最佳内容管理(lǐ)系統）”。然後，該網站提供了(le)三個(gè)CTA讓顧客根據自身需要進行選擇。

7、Healthline

有時(shí)候，主頁設計需要體現出你的(de)網站類型。以Healthline爲例，它主要是一個(gè)發布教育性内容的(de)平台，爲用(yòng)戶提供包括醫療保健、營養和(hé)健身等方面的(de)建議(yì)和(hé)見解。它的(de)主頁設計是“showing, not telling（展示而不是講述）”的(de)一個(gè)典型例子。與“我們所發表關于健康的(de)文章(zhāng)”這(zhè)樣的(de)大(dà)标題不同，Healthline在文章(zhāng)标題和(hé)摘要處體現了(le)其文章(zhāng)類型。不過，訪客可(kě)以在頁面頂端處訪問漢堡菜單，由此尋找到所需内容和(hé)網站的(de)時(shí)事通(tōng)訊。

8、Crazy Egg

Crazy Egg是一個(gè)強大(dà)的(de)頁面點擊分(fēn)析工具，它鼓勵訪客輸入自己的(de)URL，以此來(lái)查看自己網站的(de)熱(rè)圖（用(yòng)熱(rè)譜圖展示用(yòng)戶在網站上的(de)行爲）。此外，它提供了(le)一個(gè)30天免費試用(yòng)的(de)鏈接，鏈接旁邊标注了(le)“随時(shí)取消”的(de)短語，用(yòng)以建立訪客的(de)信任。

主頁的(de)副标題表明(míng)了(le)網站的(de)社會認可(kě)度，告訴訪客有多(duō)少人(rén)相信Crazy Egg的(de)工具。在副标題之下(xià)還(hái)提供了(le)更多(duō)關于社會認可(kě)度的(de)可(kě)擴展内容。

當訪客點擊“Learn more（了(le)解更多(duō)）”時(shí)，主頁就會擴展到更多(duō)關于Crazy Egg如何幫助網站所有者提高(gāo)轉化(huà)率的(de)信息。

9、Abacus Plumbing

Abacus的(de)主頁看起來(lái)可(kě)能有點混亂，但是它提供了(le)許多(duō)的(de)社會認可(kě)證明(míng)，比如BBB（美(měi)國商業促進局）認證的(de)标志、評論數量以及“You Can Count On Us（你可(kě)以信賴我們）”标語，都是其戰略性的(de)設計。該主頁突出了(le)公司營銷中另一個(gè)構建信任的(de)元素，它允許顧客在技術人(rén)員(yuán)上門之前就獲得(de)關于技術人(rén)員(yuán)的(de)個(gè)人(rén)信息，使他(tā)們更有安全感。

10、trivago

Trivago簡潔的(de)主頁設計可(kě)以說是獨具一格了(le)。該網站的(de)宗旨就是：讓訪客搜索想要的(de)目的(de)地。再無其他(tā)，簡潔有力。

11、Century21

作爲一個(gè)不動産智能服務平台，Century21的(de)主頁設計既有魅力又理(lǐ)想化(huà)，符合用(yòng)戶需求。它的(de)一大(dà)特點是訪客可(kě)以直接在主頁篩選具體屬性并進行搜索，與此同時(shí)還(hái)有一個(gè)有效的(de)導航可(kě)供使用(yòng)。

12、Marc Jacobs

Marc Jacobs的(de)整體主頁設計充斥著(zhe)極簡風和(hé)精緻感，符合追求時(shí)尚的(de)目标受衆，它的(de)創意文案又進一步抓住了(le)訪客的(de)眼球。此外，訪客會立即注意到頂部菜單欄的(de)“訂單免費配送”字樣，以及簡單、間距合理(lǐ)的(de)導航鏈接。

13、Laura Worthington Fonts

Laura Worthington Fonts（字體設計網站）的(de)主頁設計和(hé)前文的(de)幾個(gè)例子大(dà)有不同。該主頁中體現了(le)勞拉·沃辛頓（Laura Worthington）設計字體的(de)手法。整個(gè)主頁充滿了(le)女(nǚ)性化(huà)以及觀感舒适的(de)豐富色彩，與此同時(shí)，這(zhè)些元素不會讓你感到混亂，你一眼就能看出這(zhè)個(gè)網站在銷售什(shén)麽。

14、Skype

Skype的(de)主頁設計完美(měi)地滿足了(le)其目标受衆的(de)需求：主頁大(dà)圖巧妙地傳達了(le)其技術對(duì)所有設備類型的(de)适用(yòng)性、“millions（數百萬）”表現了(le)這(zhè)項服務的(de)受歡迎程度、“talking, chatting, and collaborating（交談、聊天和(hé)合作）”簡潔有力地闡述了(le)該服務的(de)用(yòng)途，然後帶有藍色背景和(hé)白色字體的(de)CTA按鈕成功地吸引了(le)訪客的(de)注意。

15、Fitness Blender

從标志到營銷文案，Fitnessblender設計了(le)一個(gè)優秀的(de)主頁。如今人(rén)們在健身方面投入的(de)資金與日俱增，在看到一條這(zhè)樣的(de)信息——承諾提供免費健身視頻(pín)，這(zhè)是令人(rén)耳目一新的(de)，也(yě)非常具有吸引力。主頁大(dà)圖是一對(duì)模特，擁有健康身材的(de)他(tā)們既可(kě)以吸引訪客的(de)注意力，也(yě)在某種程度上鼓勵了(le)他(tā)們加入健身隊伍之中。

16、Nest

Nest的(de)主頁設計以文案和(hé)圖像爲中心，它将産品按顔色列爲一排，文案是“Saving energy never goes out of style（節約能源，永不過時(shí)）”。而“Buy now（現在購(gòu)買）”的(de)CTA按鈕告訴了(le)訪客他(tā)們下(xià)一步應該做(zuò)什(shén)麽。

17、Toastmasters International

雖然Toastmasters International（國際演講協會）的(de)主頁設計似乎有點過時(shí)，但是他(tā)們的(de)目标受衆通(tōng)常是商界領袖，因此主頁成效甚好。其主頁的(de)背景圖片和(hé)标題文案都十分(fēn)具有吸引力。此外，主頁的(de)色彩符合網站所想表達的(de)宗旨。

18、Bookouture

Bookouture是一家數字出版商，主要出版言情小說和(hé)懸疑小說，其主頁的(de)目标受衆是那些可(kě)能想在該平台出版圖書(shū)的(de)作者。使用(yòng)筆記本桌面來(lái)展示封面藝術是個(gè)明(míng)智的(de)做(zuò)法。主頁中的(de)文案中有一個(gè)提交的(de)鏈接，在文案之下(xià)提供了(le)另一個(gè)CTA供訪客了(le)解更多(duō)信息。

19、ensurem

Ensurem的(de)主頁是一個(gè)極簡主義設計的(de)典範，但它同時(shí)也(yě)傳達了(le)一種優雅充實的(de)感覺。巨大(dà)的(de)主頁橫幅以及暗色調設計體現其精緻之處。主頁的(de)CTA又著(zhe)實抓人(rén)眼球——較大(dà)的(de)尺寸、背景與文字之間的(de)高(gāo)對(duì)比度以及讓人(rén)想起Ensurem商标的(de)背景顔色。這(zhè)所有的(de)設計渾然一體，給人(rén)舒适的(de)觀感。

20、Suicide Prevention Hotline

非營利組織在網頁設計上有著(zhe)一定的(de)困難之處，他(tā)們想幫助盡可(kě)能多(duō)的(de)人(rén)，但他(tā)們也(yě)想從公衆中尋求捐款、志願者和(hé)其他(tā)幫助。The Suicide Prevention Hotline很好地做(zuò)到了(le)這(zhè)一點。其網站首頁主要的(de)CTA是一個(gè)電話(huà)号碼，這(zhè)可(kě)能和(hé)通(tōng)常看到的(de)有所不同，但是它是爲其受衆設計的(de)。如果訪客有需要的(de)話(huà)，點擊這(zhè)個(gè)号碼并撥打會十分(fēn)有用(yòng)處。

21、L’Oursin

L’Oursin是西雅圖一家富有格調的(de)餐廳，它的(de)主頁設計有種緻命的(de)魅力，食物(wù)的(de)照(zhào)片會讓訪客的(de)味蕾爲之一振，照(zhào)片和(hé)字體營造了(le)一種令人(rén)身臨其境的(de)氣氛。

22、The Motley Fool

The Motley Fool所提供的(de)文章(zhāng)類型并不僅限于大(dà)衆普遍認知的(de)金融類型，在它的(de)主頁上有一個(gè)黃(huáng)色的(de)CTA按鈕，上面寫著(zhe)“Latest Stock Prices（最新的(de)股票(piào)價格）”。如果你點擊這(zhè)個(gè)按鈕，就會進入該公司的(de)付費服務中，該服務包括了(le)從分(fēn)析師和(hé)專家那裏爲你提供股票(piào)選擇。

23、FindLaw

FindLaw有兩大(dà)宗旨：對(duì)人(rén)們進行法律教育，并爲客戶聯系律師。這(zhè)兩個(gè)目的(de)也(yě)在其主頁設計中有所體現：主頁中的(de)頂部導航可(kě)供尋找教育信息，但是主頁橫幅中心處的(de)CTA（它鼓勵你尋找附近的(de)律師）才是主要的(de)設計。

24、United Healthcare

如果你對(duì)市場(chǎng)營銷中的(de)色彩心理(lǐ)學有所了(le)解，就應該知道藍色經常用(yòng)于象征健康和(hé)情感的(de)愈合，這(zhè)也(yě)是爲什(shén)麽United Healthcare的(de)主頁設計如此行之有效的(de)原因。此外，主頁中使用(yòng)了(le)相關的(de)圖片爲訪客營造賓至如歸的(de)感覺，并提供了(le)多(duō)個(gè)CTA幫助訪客繼續深入了(le)解。

25、Viewership

Viewership緻力于幫助人(rén)們充分(fēn)利用(yòng)視頻(pín)營銷的(de)優勢。其首頁設計堪稱典範，主頁中隻有兩處粉色/紅色和(hé)兩處綠(lǜ)色，這(zhè)就是爲什(shén)麽頁面中的(de)主要部分(fēn)會吸引到訪客的(de)眼球。

26、Lyft

Lyft（打車應用(yòng)）的(de)主頁使用(yòng)了(le)一個(gè)巧妙的(de)定制插畫(huà)來(lái)吸引觀衆、提供了(le)一個(gè)具有高(gāo)對(duì)比度的(de)CTA按鈕，并成功滿足了(le)司機受衆的(de)需求。

27、hubEngage

hubEngage的(de)主頁設計極具吸引力。主頁中心的(de)“Unleash the Power of Engaged Employees（釋放員(yuán)工力量）”标語是該企業的(de)宗旨。在主頁右下(xià)角有一個(gè)聊天窗(chuāng)口，這(zhè)是一個(gè)巧妙的(de)UX（用(yòng)戶體驗）設計和(hé)局部主圖。

28、Starbucks

Starbucks（星巴克）的(de)主頁設計會根據其所要推廣的(de)産品進行定期調整。在它的(de)主頁中，你可(kě)以看到兩杯看起來(lái)很美(měi)味的(de)蛋白奶昔，簡單但有效。産品旁邊的(de)“New（新品）”圖标也(yě)會引起人(rén)們的(de)興趣。

2018年首頁設計最佳範例：備忘錄

在了(le)解完主頁設計範例之後，以下(xià)爲你提供了(le)一個(gè)主頁設計要點備忘錄，方便你在創建主頁時(shí)有法可(kě)依。

清晰明(míng)了(le)

确立你的(de)獨特賣點和(hé)宗旨，讓訪客知道你提供什(shén)麽服務，以及讓你在競争中脫穎而出的(de)原因。

動态

訪客可(kě)以使用(yòng)主頁上的(de)不同元素，如鏈接、表單和(hé)可(kě)擴展内容。

對(duì)比色

運用(yòng)強烈的(de)色彩引導訪客關注你想突出的(de)重點内容。鏈接、CTA和(hé)标題都應該在頁面中引人(rén)注目。

快(kuài)速加載

最好的(de)主頁設計兼具精簡和(hé)快(kuài)速。你的(de)主頁應該在幾秒内加載顯示，這(zhè)樣你的(de)訪客就不會厭倦等待并一再地點擊頁面。

有吸引力的(de)文案

你應該使用(yòng)創造性的(de)語言來(lái)傳達重要的(de)思想，并将訪客吸引到你的(de)網站上。

優秀的(de)導航設計

頂部和(hé)側邊導航欄在良好的(de)主頁設計示例中很常見。

移動友好

當訪客用(yòng)移動設備訪問你的(de)網站時(shí)，你同樣也(yě)需要爲他(tā)們創造良好的(de)用(yòng)戶體驗。

相關的(de)CTA

當你想讓訪客做(zuò)什(shén)麽的(de)時(shí)候，你的(de)網站不能留有任何被誤解的(de)餘地。你的(de)CTA應該使用(yòng)強烈的(de)動詞和(hé)形容詞來(lái)促使訪客點擊。

主頁設計要能打動人(rén)心

有趣的(de)文案、生動的(de)視覺效果和(hé)獨特的(de)頁面布局都能讓訪客流連忘返、再三訪問。

總結

一個(gè)稱之爲優秀的(de)主頁設計并不需要你遵循一個(gè)特定的(de)公式。正如前文所列舉的(de)主頁範例，它們有著(zhe)共同的(de)元素，但又各不相同。

在不破壞用(yòng)戶體驗、不犧牲實用(yòng)性的(de)前提下(xià)，做(zuò)一些大(dà)膽的(de)設計、嘗試突破現代設計慣例對(duì)你來(lái)說是有利的(de)。

爲你的(de)特定受衆建立最佳的(de)主頁設計，并确保突出你的(de)産品和(hé)服務的(de)亮點。

做(zuò)到這(zhè)些以後，你的(de)網站轉化(huà)率還(hái)用(yòng)愁嗎？