28個案例教你如何打磨自建站主頁提升流量轉化

你的網站主頁就如同一(yī)幢房子的外(wài)在美感。當你試圖賣掉房子，但是房子的花園雜(zá)草叢生(shēng)、車(chē)道有裂縫而且前門還有破損，還能夠賣得出去(qù)嗎(ma)？當然不能。房子的外(wài)觀缺陷會阻止買家考慮購買的想法，而你的網站也是如此。

人們在訪問你的網站時，第一(yī)眼看到的就是你的主頁。這就是爲什麽你的網站主頁設計需要盡可能做到最好。如果你的主頁無法吸引訪客，如果你的主頁設計不夠簡單和直觀，你就無法提升轉化率。

你需要學習如何設計一(yī)個網站主頁，使你的網站和業務更爲強大(dà)。但是一(yī)個優秀的網站主頁需要什麽呢？它們是如何直接使你受益的呢？

一(yī)個優秀的主頁設計可以帶來哪些好處？

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

你的主頁需要什麽？你的訪客會期待什麽？應該優先添加哪些元素呢？

當你能回答這些問題時，你就了解了優秀主頁設計所需要的信息。在網頁設計中(zhōng)，每個主頁元素都有着非常具體(tǐ)的用途。

幫助目标受衆了解你的業務

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

提升網站用戶體(tǐ)驗

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

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

提升轉化率

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

如果訪客對你的網站體(tǐ)驗非常滿意，他們也更有可能記住它。也許你今天沒有促成銷售，但是顧客會在不久之後回來購買你的産品。這就是爲什麽給訪客留下(xià)強烈的第一(yī)印象非常重要。

提高品牌知(zhī)名度

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

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

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

1、Dropbox

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

2、Slack

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

3、Green Mountain Energy

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

4、CarMax

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

5、thredUP

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

6、StudioPress

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

7、Healthline

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

8、Crazy Egg

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

主頁的副标題表明了網站的社會認可度，告訴訪客有多少人相信Crazy Egg的工(gōng)具。在副标題之下(xià)還提供了更多關于社會認可度的可擴展内容。

當訪客點擊“Learn more（了解更多）”時，主頁就會擴展到更多關于Crazy Egg如何幫助網站所有者提高轉化率的信息。

9、Abacus Plumbing

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

10、trivago

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

11、Century21

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

12、Marc Jacobs

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

13、Laura Worthington Fonts

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

14、Skype

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

15、Fitness Blender

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

16、Nest

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

17、Toastmasters International

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

18、Bookouture

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

19、ensurem

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

20、Suicide Prevention Hotline

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

21、L’Oursin

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

22、The Motley Fool

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

23、FindLaw

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

24、United Healthcare

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

25、Viewership

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

26、Lyft

Lyft（打車(chē)應用）的主頁使用了一(yī)個巧妙的定制插畫來吸引觀衆、提供了一(yī)個具有高對比度的CTA按鈕，并成功滿足了司機受衆的需求。

27、hubEngage

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

28、Starbucks

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

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

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

清晰明了

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

動态

訪客可以使用主頁上的不同元素，如鏈接、表單和可擴展内容。

對比色

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

快速加載

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

有吸引力的文案

你應該使用創造性的語言來傳達重要的思想，并将訪客吸引到你的網站上。

優秀的導航設計

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

移動友好

當訪客用移動設備訪問你的網站時，你同樣也需要爲他們創造良好的用戶體(tǐ)驗。

相關的CTA

當你想讓訪客做什麽的時候，你的網站不能留有任何被誤解的餘地。你的CTA應該使用強烈的動詞和形容詞來促使訪客點擊。

主頁設計要能打動人心

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

總結

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

在不破壞用戶體(tǐ)驗、不犧牲實用性的前提下(xià)，做一(yī)些大(dà)膽的設計、嘗試突破現代設計慣例對你來說是有利的。

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

做到這些以後，你的網站轉化率還用愁嗎(ma)？