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

你的網站主頁就如(rú)同一幢房子(zǐ)冷但的外在美感。當你試圖賣掉房子(zǐ)，但是房子(zǐ)的花園雜草叢生、車(城秒chē)道有裂縫而且前門還有破損，還能夠賣得(de)出去嗎？當然不(bù熱照)能。房子(zǐ)的外觀缺陷會(huì)阻止買家(jiā)考慮購買的想法，而你吃國的網站也是如(rú)此。

人們(men)在訪問你的網站時(shí)，第一眼看到的就是村醫你的主頁。這就是為(wèi)什麼你的網站主頁設計需要盡可能做到兒志最好(hǎo)。如(rú)果你的主頁無法吸引訪客，如(rú)果你的路在主頁設計不(bù)夠簡單和直觀，你就無法提升轉化率。

你需要學習如(rú)何設計一個網站主頁，使你的網站和業務更為(wè信熱i)強大(dà)。但是一個優秀的網站主頁需要什麼呢？它們生樹(men)是如(rú)何直接使你受益的呢？ 離慢

一個優秀的主頁設計可以帶來哪些好(hǎo)處？ 些睡

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

你的主頁需要什麼？你的訪客會(huì)期待什麼？應該優我道先添加哪些元素呢？

當你能回答(dá)這些問題時(shí)，你就器知了解了優秀主頁設計所需要的信息。在網頁設計中，每個主頁元素都有訊還着非常具體的用途。

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

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

提升網站用戶體驗

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

無論如(rú)何，你都會(huì)期望将消費者引導得音到相應的頁面。如(rú)果你能提供直觀的導航和對網站流程村他的了解，你的主頁設計将會(huì)促進這類轉車動化。

提升轉化率

如(rú)果你想要提升轉化率，但是如(rú)懂視果你沒有給他(tā)們(men)必要的激勵和算著機會(huì)，那麼就不(bù)會(huì)有妹慢任何改變。例如(rú)，你想要建立一個電子(zǐ)郵件列表民有，但是訪客找不(bù)到注冊表單，那麼你的數據庫隻會(huì)是空業西空如(rú)也。

如(rú)果訪客對你的網站體驗非常滿意，他(tā)們(me議煙n)也更有可能記住它。也許你今天沒有促成銷售讀務，但是顧客會(huì)在不(bù)久之後回來購買你的産品。這就是為(w又相èi)什麼給訪客留下強烈的第一印象非常重要。 劇廠

提高品牌知名度

主頁是通(tōng)往網站其餘部分的門戶，因此房劇品牌形象應該在主頁處就立竿見影，這一點極其重要。你的标志資你、标語和宗旨應該占據主頁中心位置。另外，你可能來話想在主頁的頂部添加一個聲明（最好(hǎo)是大(dà)字體），讓時地訪客對你的工(gōng)作有個概念，比如(rú)：你為數朋(wèi)顧客解決了什麼問題？你如(rú)何改善顧客的生活（無論是個人生活還工內是職場生活）？

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

沒有比範例更好(hǎo)的學習方法了。下文将為(wèi)你展大紅示2018年28個最佳的主頁設計範例，并雨我且會(huì)說(shuō)明這些網頁收效甚好(hǎo)的原因，這樣你就可以爸區在自己的網站上應用相同的策略。

1、Dropbox

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

2、Slack

Slack的主頁設計選擇了獨特的插畫(huà)，顯得(de)十分别具一男討格。選擇定制圖案總是一種可行的方法。該網站的标語“Whe遠事re Work Happens（你的智能辦公平台）”不(bù)僅富有創科城意，也概括了所提供工(gōng)具的用途。Slack在主頁中即為(城又wèi)訪客提供了登錄或創建一個賬戶的選項。該網站提供了比Dropbo中站x更多的導航選項，但是每一個都有助于訪客找到他(tā)們(men)想要的劇金東西。

3、Green Mountain Energy

Green Mountain Energy的但家主頁同樣采用了定制插畫(huà)。這家(jiā)公也歌司的宗旨毋庸置疑——以合理的價格為(wèi男業)顧客提供清潔能源。主頁中有兩個相同的CT唱時A：一種是針對住宅客戶，另一種是針對企業客戶。而且設計者近唱在CTA的背景圖案中采用了對比色來吸引訪客的眼球水文。

4、CarMax

CarMax是一個既購車(chē)又賣刀懂車(chē)的平台，所以主頁的設計上需要迎合兩種受衆。但是Ca們服rMax也出色地完成了這一挑戰，它的主頁中提供了多個CTA引厭視導訪客找到買車(chē)或出售二手車(c黃可hē)的頁面，整個頁面既幹淨又簡單。你可以看到主頁橫幅中的汽車(chē)下化牌照上的CarMax标志，顯然它的主頁橫飛鐘幅也是特别定制的。

5、thredUP

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

6、StudioPress

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

7、Healthline

有時(shí)候，主頁設計需要體現出飛請你的網站類型。以Healthline為(房城wèi)例，它主要是一個發布教育性内容的平台生長，為(wèi)用戶提供包括醫療保健、營養和健身等方面的建議南水和見解。它的主頁設計是“showing, not telling（展示而不(刀和bù)是講述）”的一個典型例子(zǐ)。與“我們(m吧會en)所發表關于健康的文章”這樣的大(dà)标題不吃中(bù)同，Healthline在文章标題和摘要處體現煙樹了其文章類型。不(bù)過，訪客可以在頁面頂端處訪問漢堡森資菜單，由此尋找到所需内容和網站的時(shí)事通(tōng線學)訊(xùn)。

8、Crazy Egg

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

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

當訪客點擊“Learn more（了解更多）”時(shí)，街遠主頁就會(huì)擴展到更多關于Crazy Egg如(rú)何區答幫助網站所有者提高轉化率的信息。

9、Abacus Plumbing

Abacus的主頁看起來可能有點混亂，但是它提供了許多的社會(huì鐘玩)認可證明，比如(rú)BBB（美國商業促進局）認證的标志、評論數量以及“Y的這ou Can Count On Us（你可書廠以信賴我們(men)）”标語，都是其戰略性的設計。該主頁年化突出了公司營銷中另一個構建信任的元素，它允許媽民顧客在技術人員上門之前就獲得(de)關于技術人員的個人信息，使他(師白tā)們(men)更有安全感。

10、trivago

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

11、Century21

作為(wèi)一個不(bù)動産智能服務平台，Century21的主拍弟頁設計既有魅力又理想化，符合用戶需求。它的一大(dà)特點是訪客可以直接在主理和頁篩選具體屬性并進行搜索，與此同時(shí)還有一個有效的導航可供使用。 科少

12、Marc Jacobs

Marc Jacobs的整體主頁設計充斥着極簡風和精緻感少通，符合追求時(shí)尚的目标受衆，它的創意文案又進一步抓住了訪客的眼球。此外討輛，訪客會(huì)立即注意到頂部菜單欄的“訂單免費配男也送”字樣，以及簡單、間距合理的導航鍊接。 日鄉

13、Laura Worthington Fonts

Laura Worthington Fonts（字體設計網理街站）的主頁設計和前文的幾個例子(zǐ)大(dà)有站快不(bù)同。該主頁中體現了勞拉·沃辛頓（Laura Wo但在rthington）設計字體的手法。整個主頁充滿了女性化以明美及觀感舒适的豐富色彩，與此同時(shí)，這些元素不(bù)會也山(huì)讓你感到混亂，你一眼就能看出這個網站在銷售什麼。 到她

14、Skype

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

15、Fitness Blender

從标志到營銷文案，Fitnessbl機她ender設計了一個優秀的主頁。如(rú)今人們(men)在健身方面投入能購的資(zī)金(jīn)與日俱增，在看到一條這樣的信息——承諾提供免費健身視頻些員，這是令人耳目一新的，也非常具有吸引力。主頁大(dà)圖是一文有對模特，擁有健康身材的他(tā)們(men)既可以吸引訪客的注意力，也在某種程暗好度上鼓勵了他(tā)們(men)加入健身微山隊伍之中。

16、Nest

Nest的主頁設計以文案和圖像為(wèi)中心，它将産品按慢道顔色列為(wèi)一排，文案是“Saving e白微nergy never goes out 笑下of style（節約能源，永不(bù)過時(s他綠hí)）”。而“Buy now（現在購買）”的CTA按鈕告訴了訪客他(tā)們化生(men)下一步應該做什麼。

17、Toastmasters Internatio男哥nal

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

18、Bookouture

Bookouture是一家(jiā)數字出版商，主要出版言情小說(sh綠高uō)和懸疑小說(shuō)，其主頁的目标對鄉受衆是那些可能想在該平台出版圖書的作者。使用筆記本桌面來展示封面藝分筆術是個明智的做法。主頁中的文案中有一個提交的鍊接，在文案之下提供了另一個C舞畫TA供訪客了解更多信息。

19、ensurem

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

20、Suicide Prevention Hotline

非營利組織在網頁設計上有着一定的困難之處，他(tā)們(他睡men)想幫助盡可能多的人，但他(tā)們(men)也想作銀從公衆中尋求捐款、志願者和其他(tā)幫助。The Suicide P兒討revention Hotline很好(hǎo)街冷地做到了這一點。其網站首頁主要的CTA是多讀一個電話号碼，這可能和通(tōng)常看到的有所不(bù)同，但是它是為(wè習到i)其受衆設計的。如(rú)果訪客有需要的話，點擊作飛這個号碼并撥打會(huì)十分有用處。

21、L’Oursin

L’Oursin是西雅圖一家(jiā)鐵去富有格調的餐廳，它的主頁設計有種緻命的魅力醫都，食物的照片會(huì)讓訪客的味蕾為(wèi)之一振農習，照片和字體營造了一種令人身臨其境的氣氛。 作物

22、The Motley Fool

The Motley Fool所提供的文章類型并不(bù)僅限于大會爸(dà)衆普遍認知的金(jīn)融類型，在它的主頁上有一個高視黃色的CTA按鈕，上面寫着“Latest Stock Pr影子ices（最新的股票價格）”。如(rú)果你兵唱點擊這個按鈕，就會(huì)進入該公司的付費服務中，該服務包括了從分相很析師和專家(jiā)那裡為(wèi)你提供股票選擇。白都

23、FindLaw

FindLaw有兩大(dà)宗旨：對人們音樂(men)進行法律教育，并為(wèi)客街白戶聯系律師。這兩個目的也在其主頁設計中有所體現：主頁中的頂部導航可供尋找教育工錢信息，但是主頁橫幅中心處的CTA（它鼓勵你尋找附近的律坐藍師）才是主要的設計。

24、United Healthcare

如(rú)果你對市場營銷中的色彩心理學有所了解，校外就應該知道藍色經常用于象征健康和情感的愈合，這也是為(wèi子科)什麼United Healthcare的主頁設計如(rú)此行之有效子玩的原因。此外，主頁中使用了相關的圖片為(wèi)訪客有些營造賓至如(rú)歸的感覺，并提供了多個CT訊黑A幫助訪客繼續深入了解。

25、Viewership

Viewership緻力于幫助人們(me劇裡n)充分利用視頻營銷的優勢。其首頁設計堪稱典範，主頁中會友隻有兩處粉色/紅色和兩處綠色，這就是為(wèi)什麼頁面中的主要部分會(hu費飛ì)吸引到訪客的眼球。

26、Lyft

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

27、hubEngage

hubEngage的主頁設計極具吸引頻兒力。主頁中心的“Unleash the Power of Engaged Em說行ployees（釋放員工(gōng)力量）”标語是該企業的宗旨。在主頁右下土城角有一個聊天窗口，這是一個巧妙的UX（用戶體驗）設計和局部店購主圖。

28、Starbucks

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

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

在了解完主頁設計範例之後，以下為(wèi)和請你提供了一個主頁設計要點備忘錄，方便你在創建主頁時(shí)有法可依。 事小

清晰明了

确立你的獨特賣點和宗旨，讓訪客知道你提供什麼服靜問務，以及讓你在競争中脫穎而出的原因。

動态

訪客可以使用主頁上的不(bù)同元素，如(rú)鍊接、表單和可擴展坐書内容。

對比色

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

快速加載

最好(hǎo)的主頁設計兼具精簡和快速務有。你的主頁應該在幾秒内加載顯示，這樣你的訪客就不(bù)海話會(huì)厭倦等待并一再地點擊頁面。

有吸引力的文案

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

優秀的導航設計

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

移動友好(hǎo)

當訪客用移動設備訪問你的網站時(shí)，你同明水樣也需要為(wèi)他(tā)們(men)創造良好(h得店ǎo)的用戶體驗。

相關的CTA

當你想讓訪客做什麼的時(shí)候，你的網站不(文輛bù)能留有任何被誤解的餘地。你的CTA應該使用強烈的動詞校遠和形容詞來促使訪客點擊。

主頁設計要能打動人心

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

總結

一個稱之為(wèi)優秀的主頁設計并花懂不(bù)需要你遵循一個特定的公式。正如書老(rú)前文所列舉的主頁範例，它們(men)有着共同的元素，但又各不(分討bù)相同。

在不(bù)破壞用戶體驗、不(bù)犧牲實公上用性的前提下，做一些大(dà)膽的設計、嘗試突好章破現代設計慣例對你來說(shuō)是有利的。

為(wèi)你的特定受衆建立最佳的主頁設計，并确舞笑保突出你的産品和服務的亮點。

做到這些以後，你的網站轉化率還用愁嗎？ 師西