13163882291
hr@1kcloud.cn
優秀的主頁設計不愁轉化率止步不前。
你的網站主頁就如同一幢房子的外在美感。當你試圖賣掉房子,但是房子的花園雜草叢生、車道(dào)有裂縫而且前門還(hái)有破損,還(hái)能(néng)夠賣得出去嗎?當然不能(néng)。房子的外觀缺陷會(huì)阻止買家考慮購買的想法,而你的網站也是如此。
人們在訪問你的網站時,第一眼看到的就是你的主頁。這(zhè)就是爲什麼(me)你的網站主頁設計需要盡可能(néng)做到最好(hǎo)。如果你的主頁無法吸引訪客,如果你的主頁設計不夠簡單和直觀,你就無法提升轉化率。
你需要學(xué)習如何設計一個網站主頁,使你的網站和業務更爲強大。但是一個優秀的網站主頁需要什麼(me)呢?它們是如何直接使你受益的呢?
一個簡單的主頁設計,首先會(huì)對(duì)訪客表示歡迎,然後(hòu)表示你希望他們下一步做什麼(me),并且允許他們更深入地搜索你的網站。你可以在這(zhè)基礎之上,從基礎元素開(kāi)始添加一些複雜性設計,但是切忌胡亂堆砌。
你的主頁需要什麼(me)?你的訪客會(huì)期待什麼(me)?應該優先添加哪些元素呢?
當你能(néng)回答這(zhè)些問題時,你就了解了優秀主頁設計所需要的信息。在網頁設計中,每個主頁元素都(dōu)有著(zhe)非常具體的用途。
幫助目标受衆了解你的業務
許多訪客會(huì)首先找到你的網站主頁。考慮到這(zhè)一點,你需要給他們留下深刻的第一印象。你的主頁應該能(néng)夠傳遞你公司的價值觀、USP(獨特的銷售主張)和宗旨。如果你能(néng)夠成(chéng)功傳達這(zhè)些品質,你就更有可能(néng)吸引潛在顧客。
提升網站用戶體驗
消費者訪問你的網站一定是有其意圖的,也許他/她想看看你的産品線、閱讀你的博文或者看看你是否有銷售某種(zhǒng)類型的服務。
無論如何,你都(dōu)會(huì)期望將(jiāng)消費者引導到相應的頁面(miàn)。如果你能(néng)提供直觀的導航和對(duì)網站流程的了解,你的主頁設計將(jiāng)會(huì)促進(jìn)這(zhè)類轉化。
提升轉化率
如果你想要提升轉化率,但是如果你沒(méi)有給他們必要的激勵和機會(huì),那麼(me)就不會(huì)有任何改變。例如,你想要建立一個電子郵件列表,但是訪客找不到注冊表單,那麼(me)你的數據庫隻會(huì)是空空如也。
如果訪客對(duì)你的網站體驗非常滿意,他們也更有可能(néng)記住它。也許你今天沒(méi)有促成(chéng)銷售,但是顧客會(huì)在不久之後(hòu)回來購買你的産品。這(zhè)就是爲什麼(me)給訪客留下強烈的第一印象非常重要。
提高品牌知名度
主頁是通往網站其餘部分的門戶,因此品牌形象應該在主頁處就立竿見影,這(zhè)一點極其重要。你的标志、标語和宗旨應該占據主頁中心位置。另外,你可能(néng)想在主頁的頂部添加一個聲明(最好(hǎo)是大字體),讓訪客對(duì)你的工作有個概念,比如:你爲顧客解決了什麼(me)問題?你如何改善顧客的生活(無論是個人生活還(hái)是職場生活)?
沒(méi)有比範例更好(hǎo)的學(xué)習方法了。下文將(jiāng)爲你展示2018年28個最佳的主頁設計範例,并且會(huì)說明這(zhè)些網頁收效甚好(hǎo)的原因,這(zhè)樣(yàng)你就可以在自己的網站上應用相同的策略。
1、Dropbox
作爲一個網絡文件同步工具,Dropbox的主頁橫幅是一張略微傾斜的圖像,一下子就抓住人的眼球,還(hái)有兩(liǎng)個CTA(Call to Action,行動召喚)——其中一個付費版本的工具使用了深色背景來吸引更多的注意力。主頁的營銷文案抓住消費者的痛點,簡潔明了地強調了效率性和安全性。另外,導航功能(néng)也做了簡化,訪客可以點擊“Compare plans(比較套餐)”,選擇适合自己的使用方案。
2、Slack
Slack的主頁設計選擇了獨特的插畫,顯得十分别具一格。選擇定制圖案總是一種(zhǒng)可行的方法。該網站的标語“Where Work Happens(你的智能(néng)辦公平台)”不僅富有創意,也概括了所提供工具的用途。Slack在主頁中即爲訪客提供了登錄或創建一個賬戶的選項。該網站提供了比Dropbox更多的導航選項,但是每一個都(dōu)有助于訪客找到他們想要的東西。
3、Green Mountain Energy
Green Mountain Energy的主頁同樣(yàng)采用了定制插畫。這(zhè)家公司的宗旨毋庸置疑——以合理的價格爲顧客提供清潔能(néng)源。主頁中有兩(liǎng)個相同的CTA:一種(zhǒng)是針對(duì)住宅客戶,另一種(zhǒng)是針對(duì)企業客戶。而且設計者在CTA的背景圖案中采用了對(duì)比色來吸引訪客的眼球。
4、CarMax
CarMax是一個既購車又賣車的平台,所以主頁的設計上需要迎合兩(liǎng)種(zhǒng)受衆。但是CarMax也出色地完成(chéng)了這(zhè)一挑戰,它的主頁中提供了多個CTA引導訪客找到買車或出售二手車的頁面(miàn),整個頁面(miàn)既幹淨又簡單。你可以看到主頁橫幅中的汽車牌照上的CarMax标志,顯然它的主頁橫幅也是特别定制的。
5、thredUP
電商主頁的設計可能(néng)會(huì)很棘手,你可以參考thredUP公司的主頁設計,它采用了季節性方法——在夏季推出當季潮品。顯然,波西米亞風很流行(至少對(duì)女性來說是這(zhè)樣(yàng)),所以主頁定制大圖中展示了許多波西米亞風的流行趨勢。雖然主頁中的導航很多,但是得益于其利落的設計,訪客可以輕松地找到感興趣的類别。
6、StudioPress
簡約元素、平面(miàn)插畫和柔和的色彩使得StudioPress的主頁閃閃發(fā)亮。StudioPress用文字描述了其網站宗旨“Build Amazing WordPress Sites(緻力于創建最佳内容管理系統)”。然後(hòu),該網站提供了三個CTA讓顧客根據自身需要進(jìn)行選擇。
7、Healthline
有時候,主頁設計需要體現出你的網站類型。以Healthline爲例,它主要是一個發(fā)布教育性内容的平台,爲用戶提供包括醫療保健、營養和健身等方面(miàn)的建議和見解。它的主頁設計是“showing, not telling(展示而不是講述)”的一個典型例子。與“我們所發(fā)表關于健康的文章”這(zhè)樣(yàng)的大标題不同,Healthline在文章标題和摘要處體現了其文章類型。不過(guò),訪客可以在頁面(miàn)頂端處訪問漢堡菜單,由此尋找到所需内容和網站的時事(shì)通訊。
8、Crazy Egg
Crazy Egg是一個強大的頁面(miàn)點擊分析工具,它鼓勵訪客輸入自己的URL,以此來查看自己網站的熱圖(用熱譜圖展示用戶在網站上的行爲)。此外,它提供了一個30天免費試用的鏈接,鏈接旁邊标注了“随時取消”的短語,用以建立訪客的信任。
主頁的副标題表明了網站的社會(huì)認可度,告訴訪客有多少人相信Crazy Egg的工具。在副标題之下還(hái)提供了更多關于社會(huì)認可度的可擴展内容。
當訪客點擊“Learn more(了解更多)”時,主頁就會(huì)擴展到更多關于Crazy Egg如何幫助網站所有者提高轉化率的信息。
9、Abacus Plumbing
Abacus的主頁看起(qǐ)來可能(néng)有點混亂,但是它提供了許多的社會(huì)認可證明,比如BBB(美國(guó)商業促進(jìn)局)認證的标志、評論數量以及“You Can Count On Us(你可以信賴我們)”标語,都(dōu)是其戰略性的設計。該主頁突出了公司營銷中另一個構建信任的元素,它允許顧客在技術人員上門之前就獲得關于技術人員的個人信息,使他們更有安全感。
10、trivago
Trivago簡潔的主頁設計可以說是獨具一格了。該網站的宗旨就是:讓訪客搜索想要的目的地。再無其他,簡潔有力。
11、Century21
作爲一個不動産智能(néng)服務平台,Century21的主頁設計既有魅力又理想化,符合用戶需求。它的一大特點是訪客可以直接在主頁篩選具體屬性并進(jìn)行搜索,與此同時還(hái)有一個有效的導航可供使用。
12、Marc Jacobs
Marc Jacobs的整體主頁設計充斥著(zhe)極簡風和精緻感,符合追求時尚的目标受衆,它的創意文案又進(jìn)一步抓住了訪客的眼球。此外,訪客會(huì)立即注意到頂部菜單欄的“訂單免費配送”字樣(yàng),以及簡單、間距合理的導航鏈接。
13、Laura Worthington Fonts
Laura Worthington Fonts(字體設計網站)的主頁設計和前文的幾個例子大有不同。該主頁中體現了勞拉·沃辛頓(Laura Worthington)設計字體的手法。整個主頁充滿了女性化以及觀感舒适的豐富色彩,與此同時,這(zhè)些元素不會(huì)讓你感到混亂,你一眼就能(néng)看出這(zhè)個網站在銷售什麼(me)。
14、Skype
Skype的主頁設計完美地滿足了其目标受衆的需求:主頁大圖巧妙地傳達了其技術對(duì)所有設備類型的适用性、“millions(數百萬)”表現了這(zhè)項服務的受歡迎程度、“talking, chatting, and collaborating(交談、聊天和合作)”簡潔有力地闡述了該服務的用途,然後(hòu)帶有藍色背景和白色字體的CTA按鈕成(chéng)功地吸引了訪客的注意。
15、Fitness Blender
從标志到營銷文案,Fitnessblender設計了一個優秀的主頁。如今人們在健身方面(miàn)投入的資金與日俱增,在看到一條這(zhè)樣(yàng)的信息——承諾提供免費健身視頻,這(zhè)是令人耳目一新的,也非常具有吸引力。主頁大圖是一對(duì)模特,擁有健康身材的他們既可以吸引訪客的注意力,也在某種(zhǒng)程度上鼓勵了他們加入健身隊伍之中。
16、Nest
Nest的主頁設計以文案和圖像爲中心,它將(jiāng)産品按顔色列爲一排,文案是“Saving energy never goes out of style(節約能(néng)源,永不過(guò)時)”。而“Buy now(現在購買)”的CTA按鈕告訴了訪客他們下一步應該做什麼(me)。
17、Toastmasters International
雖然Toastmasters International(國(guó)際演講協會(huì))的主頁設計似乎有點過(guò)時,但是他們的目标受衆通常是商界領袖,因此主頁成(chéng)效甚好(hǎo)。其主頁的背景圖片和标題文案都(dōu)十分具有吸引力。此外,主頁的色彩符合網站所想表達的宗旨。
18、Bookouture
Bookouture是一家數字出版商,主要出版言情小說和懸疑小說,其主頁的目标受衆是那些可能(néng)想在該平台出版圖書的作者。使用筆記本桌面(miàn)來展示封面(miàn)藝術是個明智的做法。主頁中的文案中有一個提交的鏈接,在文案之下提供了另一個CTA供訪客了解更多信息。
19、ensurem
Ensurem的主頁是一個極簡主義設計的典範,但它同時也傳達了一種(zhǒng)優雅充實的感覺。巨大的主頁橫幅以及暗色調設計體現其精緻之處。主頁的CTA又著(zhe)實抓人眼球——較大的尺寸、背景與文字之間的高對(duì)比度以及讓人想起(qǐ)Ensurem商标的背景顔色。這(zhè)所有的設計渾然一體,給人舒适的觀感。
20、Suicide Prevention Hotline
非營利組織在網頁設計上有著(zhe)一定的困難之處,他們想幫助盡可能(néng)多的人,但他們也想從公衆中尋求捐款、志願者和其他幫助。The Suicide Prevention Hotline很好(hǎo)地做到了這(zhè)一點。其網站首頁主要的CTA是一個電話号碼,這(zhè)可能(néng)和通常看到的有所不同,但是它是爲其受衆設計的。如果訪客有需要的話,點擊這(zhè)個号碼并撥打會(huì)十分有用處。
21、L’Oursin
L’Oursin是西雅圖一家富有格調的餐廳,它的主頁設計有種(zhǒng)緻命的魅力,食物的照片會(huì)讓訪客的味蕾爲之一振,照片和字體營造了一種(zhǒng)令人身臨其境的氣氛。
22、The Motley Fool
The Motley Fool所提供的文章類型并不僅限于大衆普遍認知的金融類型,在它的主頁上有一個黃色的CTA按鈕,上面(miàn)寫著(zhe)“Latest Stock Prices(最新的股票價格)”。如果你點擊這(zhè)個按鈕,就會(huì)進(jìn)入該公司的付費服務中,該服務包括了從分析師和專家那裡(lǐ)爲你提供股票選擇。
23、FindLaw
FindLaw有兩(liǎng)大宗旨:對(duì)人們進(jìn)行法律教育,并爲客戶聯系律師。這(zhè)兩(liǎng)個目的也在其主頁設計中有所體現:主頁中的頂部導航可供尋找教育信息,但是主頁橫幅中心處的CTA(它鼓勵你尋找附近的律師)才是主要的設計。
24、United Healthcare
如果你對(duì)市場營銷中的色彩心理學(xué)有所了解,就應該知道(dào)藍色經(jīng)常用于象征健康和情感的愈合,這(zhè)也是爲什麼(me)United Healthcare的主頁設計如此行之有效的原因。此外,主頁中使用了相關的圖片爲訪客營造賓至如歸的感覺,并提供了多個CTA幫助訪客繼續深入了解。
25、Viewership
Viewership緻力于幫助人們充分利用視頻營銷的優勢。其首頁設計堪稱典範,主頁中隻有兩(liǎng)處粉色/紅色和兩(liǎng)處綠色,這(zhè)就是爲什麼(me)頁面(miàn)中的主要部分會(huì)吸引到訪客的眼球。
26、Lyft
Lyft(打車應用)的主頁使用了一個巧妙的定制插畫來吸引觀衆、提供了一個具有高對(duì)比度的CTA按鈕,并成(chéng)功滿足了司機受衆的需求。
27、hubEngage
hubEngage的主頁設計極具吸引力。主頁中心的“Unleash the Power of Engaged Employees(釋放員工力量)”标語是該企業的宗旨。在主頁右下角有一個聊天窗口,這(zhè)是一個巧妙的UX(用戶體驗)設計和局部主圖。
28、Starbucks
Starbucks(星巴克)的主頁設計會(huì)根據其所要推廣的産品進(jìn)行定期調整。在它的主頁中,你可以看到兩(liǎng)杯看起(qǐ)來很美味的蛋白奶昔,簡單但有效。産品旁邊的“New(新品)”圖标也會(huì)引起(qǐ)人們的興趣。
在了解完主頁設計範例之後(hòu),以下爲你提供了一個主頁設計要點備忘錄,方便你在創建主頁時有法可依。
清晰明了
确立你的獨特賣點和宗旨,讓訪客知道(dào)你提供什麼(me)服務,以及讓你在競争中脫穎而出的原因。
動态
訪客可以使用主頁上的不同元素,如鏈接、表單和可擴展内容。
對(duì)比色
運用強烈的色彩引導訪客關注你想突出的重點内容。鏈接、CTA和标題都(dōu)應該在頁面(miàn)中引人注目。
快速加載
最好(hǎo)的主頁設計兼具精簡和快速。你的主頁應該在幾秒内加載顯示,這(zhè)樣(yàng)你的訪客就不會(huì)厭倦等待并一再地點擊頁面(miàn)。
有吸引力的文案
你應該使用創造性的語言來傳達重要的思想,并將(jiāng)訪客吸引到你的網站上。
優秀的導航設計
頂部和側邊導航欄在良好(hǎo)的主頁設計示例中很常見。
移動友好(hǎo)
當訪客用移動設備訪問你的網站時,你同樣(yàng)也需要爲他們創造良好(hǎo)的用戶體驗。
相關的CTA
當你想讓訪客做什麼(me)的時候,你的網站不能(néng)留有任何被(bèi)誤解的餘地。你的CTA應該使用強烈的動詞和形容詞來促使訪客點擊。
主頁設計要能(néng)打動人心
有趣的文案、生動的視覺效果和獨特的頁面(miàn)布局都(dōu)能(néng)讓訪客流連忘返、再三訪問。
一個稱之爲優秀的主頁設計并不需要你遵循一個特定的公式。正如前文所列舉的主頁範例,它們有著(zhe)共同的元素,但又各不相同。
在不破壞用戶體驗、不犧牲實用性的前提下,做一些大膽的設計、嘗試突破現代設計慣例對(duì)你來說是有利的。
爲你的特定受衆建立最佳的主頁設計,并确保突出你的産品和服務的亮點。
做到這(zhè)些以後(hòu),你的網站轉化率還(hái)用愁嗎?
電話:13163882291
郵箱:hr@1kcloud.cn
網址:/
地址:福建省福州市閩侯縣上街鎮科技東路海獅數智中心A棟3樓301