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

人們在訪問你的網(wǎng)站時(shí)，第一眼看到的就是你的主頁。這就是為什么你的網(wǎng)站主頁設(shè)計(jì)需要盡可能做到最好。如果你的主頁無法吸引訪客，如果你的主頁設(shè)計(jì)不夠簡單和直觀，你就無法提升轉(zhuǎn)化率。

你需要學(xué)習(xí)如何設(shè)計(jì)一個(gè)網(wǎng)站主頁，使你的網(wǎng)站和業(yè)務(wù)更為強(qiáng)大。但是一個(gè)優(yōu)秀的網(wǎng)站主頁需要什么呢？它們是如何直接使你受益的呢？

一個(gè)優(yōu)秀的主頁設(shè)計(jì)可以帶來哪些好處？

一個(gè)簡單的主頁設(shè)計(jì)，首先會(huì)對(duì)訪客表示歡迎，然后表示你希望他們下一步做什么，并且允許他們更深入地搜索你的網(wǎng)站。你可以在這基礎(chǔ)之上，從基礎(chǔ)元素開始添加一些復(fù)雜性設(shè)計(jì)，但是切忌胡亂堆砌。

你的主頁需要什么？你的訪客會(huì)期待什么？應(yīng)該優(yōu)先添加哪些元素呢？

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

幫助目標(biāo)受眾了解你的業(yè)務(wù)

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

提升網(wǎng)站用戶體驗(yàn)

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

無論如何，你都會(huì)期望將消費(fèi)者引導(dǎo)到相應(yīng)的頁面。如果你能提供直觀的導(dǎo)航和對(duì)網(wǎng)站流程的了解，你的主頁設(shè)計(jì)將會(huì)促進(jìn)這類轉(zhuǎn)化。

提升轉(zhuǎn)化率

如果你想要提升轉(zhuǎn)化率，但是如果你沒有給他們必要的激勵(lì)和機(jī)會(huì)，那么就不會(huì)有任何改變。例如，你想要建立一個(gè)電子郵件列表，但是訪客找不到注冊表單，那么你的數(shù)據(jù)庫只會(huì)是空空如也。

如果訪客對(duì)你的網(wǎng)站體驗(yàn)非常滿意，他們也更有可能記住它。也許你今天沒有促成銷售，但是顧客會(huì)在不久之后回來購買你的產(chǎn)品。這就是為什么給訪客留下強(qiáng)烈的第一印象非常重要。

提高品牌知名度

主頁是通往網(wǎng)站其余部分的門戶，因此品牌形象應(yīng)該在主頁處就立竿見影，這一點(diǎn)極其重要。你的標(biāo)志、標(biāo)語和宗旨應(yīng)該占據(jù)主頁中心位置。另外，你可能想在主頁的頂部添加一個(gè)聲明（最好是大字體），讓訪客對(duì)你的工作有個(gè)概念，比如：你為顧客解決了什么問題？你如何改善顧客的生活（無論是個(gè)人生活還是職場生活）？

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

沒有比范例更好的學(xué)習(xí)方法了。下文將為你展示2018年28個(gè)最佳的主頁設(shè)計(jì)范例，并且會(huì)說明這些網(wǎng)頁收效甚好的原因，這樣你就可以在自己的網(wǎng)站上應(yīng)用相同的策略。

1、Dropbox

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

2、Slack

Slack的主頁設(shè)計(jì)選擇了獨(dú)特的插畫，顯得十分別具一格。選擇定制圖案總是一種可行的方法。該網(wǎng)站的標(biāo)語“Where Work Happens（你的智能辦公平臺(tái)）”不僅富有創(chuàng)意，也概括了所提供工具的用途。Slack在主頁中即為訪客提供了登錄或創(chuàng)建一個(gè)賬戶的選項(xiàng)。該網(wǎng)站提供了比Dropbox更多的導(dǎo)航選項(xiàng)，但是每一個(gè)都有助于訪客找到他們想要的東西。

3、Green Mountain Energy

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

4、CarMax

CarMax是一個(gè)既購車又賣車的平臺(tái)，所以主頁的設(shè)計(jì)上需要迎合兩種受眾。但是CarMax也出色地完成了這一挑戰(zhàn)，它的主頁中提供了多個(gè)CTA引導(dǎo)訪客找到買車或出售二手車的頁面，整個(gè)頁面既干凈又簡單。你可以看到主頁橫幅中的汽車牌照上的CarMax標(biāo)志，顯然它的主頁橫幅也是特別定制的。

5、thredUP

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

6、StudioPress

簡約元素、平面插畫和柔和的色彩使得StudioPress的主頁閃閃發(fā)亮。StudioPress用文字描述了其網(wǎng)站宗旨“Build Amazing WordPress Sites（致力于創(chuàng)建最佳內(nèi)容管理系統(tǒng)）”。然后，該網(wǎng)站提供了三個(gè)CTA讓顧客根據(jù)自身需要進(jìn)行選擇。

7、Healthline

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

8、Crazy Egg

Crazy Egg是一個(gè)強(qiáng)大的頁面點(diǎn)擊分析工具，它鼓勵(lì)訪客輸入自己的URL，以此來查看自己網(wǎng)站的熱圖（用熱譜圖展示用戶在網(wǎng)站上的行為）。此外，它提供了一個(gè)30天免費(fèi)試用的鏈接，鏈接旁邊標(biāo)注了“隨時(shí)取消”的短語，用以建立訪客的信任。

主頁的副標(biāo)題表明了網(wǎng)站的社會(huì)認(rèn)可度，告訴訪客有多少人相信Crazy Egg的工具。在副標(biāo)題之下還提供了更多關(guān)于社會(huì)認(rèn)可度的可擴(kuò)展內(nèi)容。

當(dāng)訪客點(diǎn)擊“Learn more（了解更多）”時(shí)，主頁就會(huì)擴(kuò)展到更多關(guān)于Crazy Egg如何幫助網(wǎng)站所有者提高轉(zhuǎn)化率的信息。

9、Abacus Plumbing

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

10、trivago

Trivago簡潔的主頁設(shè)計(jì)可以說是獨(dú)具一格了。該網(wǎng)站的宗旨就是：讓訪客搜索想要的目的地。再無其他，簡潔有力。

11、Century21

作為一個(gè)不動(dòng)產(chǎn)智能服務(wù)平臺(tái)，Century21的主頁設(shè)計(jì)既有魅力又理想化，符合用戶需求。它的一大特點(diǎn)是訪客可以直接在主頁篩選具體屬性并進(jìn)行搜索，與此同時(shí)還有一個(gè)有效的導(dǎo)航可供使用。

12、Marc Jacobs

Marc Jacobs的整體主頁設(shè)計(jì)充斥著極簡風(fēng)和精致感，符合追求時(shí)尚的目標(biāo)受眾，它的創(chuàng)意文案又進(jìn)一步抓住了訪客的眼球。此外，訪客會(huì)立即注意到頂部菜單欄的“訂單免費(fèi)配送”字樣，以及簡單、間距合理的導(dǎo)航鏈接。

13、Laura Worthington Fonts

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

14、Skype

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

15、Fitness Blender

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

16、Nest

Nest的主頁設(shè)計(jì)以文案和圖像為中心，它將產(chǎn)品按顏色列為一排，文案是“Saving energy never goes out of style（節(jié)約能源，永不過時(shí)）”。而“Buy now（現(xiàn)在購買）”的CTA按鈕告訴了訪客他們下一步應(yīng)該做什么。

17、Toastmasters International

雖然Toastmasters International（國際演講協(xié)會(huì)）的主頁設(shè)計(jì)似乎有點(diǎn)過時(shí)，但是他們的目標(biāo)受眾通常是商界領(lǐng)袖，因此主頁成效甚好。其主頁的背景圖片和標(biāo)題文案都十分具有吸引力。此外，主頁的色彩符合網(wǎng)站所想表達(dá)的宗旨。

18、Bookouture

Bookouture是一家數(shù)字出版商，主要出版言情小說和懸疑小說，其主頁的目標(biāo)受眾是那些可能想在該平臺(tái)出版圖書的作者。使用筆記本桌面來展示封面藝術(shù)是個(gè)明智的做法。主頁中的文案中有一個(gè)提交的鏈接，在文案之下提供了另一個(gè)CTA供訪客了解更多信息。

19、ensurem

Ensurem的主頁是一個(gè)極簡主義設(shè)計(jì)的典范，但它同時(shí)也傳達(dá)了一種優(yōu)雅充實(shí)的感覺。巨大的主頁橫幅以及暗色調(diào)設(shè)計(jì)體現(xiàn)其精致之處。主頁的CTA又著實(shí)抓人眼球——較大的尺寸、背景與文字之間的高對(duì)比度以及讓人想起Ensurem商標(biāo)的背景顏色。這所有的設(shè)計(jì)渾然一體，給人舒適的觀感。

20、Suicide Prevention Hotline

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

21、L’Oursin

L’Oursin是西雅圖一家富有格調(diào)的餐廳，它的主頁設(shè)計(jì)有種致命的魅力，食物的照片會(huì)讓訪客的味蕾為之一振，照片和字體營造了一種令人身臨其境的氣氛。

22、The Motley Fool

The Motley Fool所提供的文章類型并不僅限于大眾普遍認(rèn)知的金融類型，在它的主頁上有一個(gè)黃色的CTA按鈕，上面寫著“Latest Stock Prices（最新的股票價(jià)格）”。如果你點(diǎn)擊這個(gè)按鈕，就會(huì)進(jìn)入該公司的付費(fèi)服務(wù)中，該服務(wù)包括了從分析師和專家那里為你提供股票選擇。

23、FindLaw

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

24、United Healthcare

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

25、Viewership

Viewership致力于幫助人們充分利用視頻營銷的優(yōu)勢。其首頁設(shè)計(jì)堪稱典范，主頁中只有兩處粉色/紅色和兩處綠色，這就是為什么頁面中的主要部分會(huì)吸引到訪客的眼球。

26、Lyft

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

27、hubEngage

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

28、Starbucks

Starbucks（星巴克）的主頁設(shè)計(jì)會(huì)根據(jù)其所要推廣的產(chǎn)品進(jìn)行定期調(diào)整。在它的主頁中，你可以看到兩杯看起來很美味的蛋白奶昔，簡單但有效。產(chǎn)品旁邊的“New（新品）”圖標(biāo)也會(huì)引起人們的興趣。

2018年首頁設(shè)計(jì)最佳范例：備忘錄

在了解完主頁設(shè)計(jì)范例之后，以下為你提供了一個(gè)主頁設(shè)計(jì)要點(diǎn)備忘錄，方便你在創(chuàng)建主頁時(shí)有法可依。

清晰明了

確立你的獨(dú)特賣點(diǎn)和宗旨，讓訪客知道你提供什么服務(wù)，以及讓你在競爭中脫穎而出的原因。

動(dòng)態(tài)

訪客可以使用主頁上的不同元素，如鏈接、表單和可擴(kuò)展內(nèi)容。

對(duì)比色

運(yùn)用強(qiáng)烈的色彩引導(dǎo)訪客關(guān)注你想突出的重點(diǎn)內(nèi)容。鏈接、CTA和標(biāo)題都應(yīng)該在頁面中引人注目。

快速加載

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

有吸引力的文案

你應(yīng)該使用創(chuàng)造性的語言來傳達(dá)重要的思想，并將訪客吸引到你的網(wǎng)站上。

優(yōu)秀的導(dǎo)航設(shè)計(jì)

頂部和側(cè)邊導(dǎo)航欄在良好的主頁設(shè)計(jì)示例中很常見。

移動(dòng)友好

當(dāng)訪客用移動(dòng)設(shè)備訪問你的網(wǎng)站時(shí)，你同樣也需要為他們創(chuàng)造良好的用戶體驗(yàn)。

相關(guān)的CTA

當(dāng)你想讓訪客做什么的時(shí)候，你的網(wǎng)站不能留有任何被誤解的余地。你的CTA應(yīng)該使用強(qiáng)烈的動(dòng)詞和形容詞來促使訪客點(diǎn)擊。

主頁設(shè)計(jì)要能打動(dòng)人心

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

總結(jié)

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

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

為你的特定受眾建立最佳的主頁設(shè)計(jì)，并確保突出你的產(chǎn)品和服務(wù)的亮點(diǎn)。

做到這些以后，你的網(wǎng)站轉(zhuǎn)化率還用愁嗎？

（編譯/雨果網(wǎng) 陳小如）