你的網(wǎng)站主頁(yè)既是品牌的門面，又得能幫助新老客戶更好地各取所需。每個(gè)細(xì)節(jié)都應(yīng)旨在建立更好的第一印象和鼓勵(lì)特定行為，無(wú)論你的目標(biāo)是賣產(chǎn)品，還是想獲取更多的注冊(cè)用戶。

主頁(yè)設(shè)計(jì)的途徑有不少。以下是一些小竅門，不管你是新手還是單純想升級(jí)網(wǎng)站都可以參考一下。
 

主頁(yè)設(shè)計(jì)過(guò)程中涉及到的問(wèn)題

一個(gè)好的主頁(yè)設(shè)計(jì)并不代表它適用于所有的電商。

如果你正在尋找一個(gè)設(shè)計(jì)方案，但是還摸不著頭腦，那么可以先從以下幾個(gè)問(wèn)題入手：

• 你希望網(wǎng)站訪客完成什么行為？（如立即購(gòu)買，注冊(cè)用戶等）
• 如何才能讓他們更輕松地做到這一點(diǎn)？
• 實(shí)現(xiàn)你的目標(biāo)需要經(jīng)過(guò)多少步驟？
• 他們需要提交多少信息才能進(jìn)入到下一步？
• 有可以省略的步驟嗎？

有些消費(fèi)者在訪問(wèn)網(wǎng)站的時(shí)候目的性比較明確，但是也有一部分人并不是很清楚。你在設(shè)計(jì)網(wǎng)站的時(shí)候不僅需要充分考慮到這一點(diǎn)，而且還要綜合考慮你為網(wǎng)站所設(shè)定的主要目標(biāo)。

一個(gè)好的網(wǎng)站主頁(yè)不但要能幫助有目的的消費(fèi)者得其所需，還應(yīng)能引導(dǎo)那些沒(méi)有方向的潛在消費(fèi)者。
 

你的主頁(yè)設(shè)計(jì)需要達(dá)到哪些目標(biāo)？

網(wǎng)站訪問(wèn)者在主頁(yè)的平均停留時(shí)間應(yīng)該在10至20秒。從設(shè)計(jì)的角度來(lái)講這就意味著主頁(yè)的導(dǎo)航流程需要非常清晰，這樣訪問(wèn)者就可以更快地為自己（和你的業(yè)務(wù)）選取最佳途徑。

由于“決策規(guī)避”（即人們通常不會(huì)花太長(zhǎng)時(shí)間做決定）這一普遍心理現(xiàn)象，使得達(dá)到以上這一目標(biāo)顯得更為緊迫。

對(duì)于網(wǎng)站主頁(yè)來(lái)說(shuō)，決策規(guī)避也就是退出主頁(yè)或點(diǎn)擊返回按鈕。要想避免這一點(diǎn)，網(wǎng)站設(shè)計(jì)的首要任務(wù)就是說(shuō)服潛在消費(fèi)者繼續(xù)留在頁(yè)面上。

要想做到這一點(diǎn)，你需要先搞清楚網(wǎng)站最具價(jià)值的版塊所扮演的角色。
 

1.能夠激發(fā)特定行為的“首屏”內(nèi)容

當(dāng)網(wǎng)站設(shè)計(jì)師在提及主頁(yè)的“首屏”區(qū)域時(shí)，他們通常指的是在訪客決定下拉頁(yè)面之前所看到的東西。

當(dāng)你在考慮將哪些內(nèi)容放在首屏及其如何與主頁(yè)其它內(nèi)容聯(lián)合作用的時(shí)候，你應(yīng)該把重心放在你希望訪客完成哪些特定行為，他們所需要獲得的初步信息，以及你可以怎樣幫他們做決定這些方面上。

以Morning Recovery的網(wǎng)站為例，他們的業(yè)務(wù)是售賣一款防宿醉產(chǎn)品。所以他們的目標(biāo)就是引導(dǎo)潛在消費(fèi)者購(gòu)買他們家的龍頭產(chǎn)品，為達(dá)到此目的他們?cè)O(shè)計(jì)了一個(gè)顏色鮮艷的、以產(chǎn)品為中心的視覺(jué)和一個(gè)清晰的行為號(hào)召按鈕（Call to Action，以下簡(jiǎn)稱CTA）放在他們的“首屏”區(qū)域，以引導(dǎo)潛在消費(fèi)者進(jìn)行購(gòu)買。

消費(fèi)者在該頁(yè)面面臨兩個(gè)可選捷徑：

• 點(diǎn)擊下一步進(jìn)行購(gòu)買
• 首屏下拉以獲取更多信息——用戶評(píng)價(jià)，視頻，有關(guān)產(chǎn)品原料的信息等。

許多網(wǎng)站頭部會(huì)使用一個(gè)醒目的主標(biāo)題和具有說(shuō)服力的副標(biāo)題，以及引人注意的視覺(jué)來(lái)吸引新用戶并帶領(lǐng)他們對(duì)品牌進(jìn)行深入了解。

然而，從一開(kāi)始你就可以通過(guò)許多方式來(lái)吸引消費(fèi)者，比如說(shuō)在導(dǎo)航欄上方設(shè)計(jì)一個(gè)促銷橫幅，可以是特價(jià)促銷或免郵優(yōu)惠等。
 

一個(gè)主頁(yè)的導(dǎo)航欄清晰與否取決于它的簡(jiǎn)潔度。這可能聽(tīng)起來(lái)跟你要滿足不同消費(fèi)者的需求有點(diǎn)自相矛盾，但是你得保證消費(fèi)者能夠在主頁(yè)上進(jìn)行快速瀏覽。

頭部導(dǎo)航應(yīng)該越簡(jiǎn)潔明了越好，將多數(shù)消費(fèi)者的需求放在首位。Orbit Media Studios的策略總監(jiān)Andy Crestodina認(rèn)為網(wǎng)站上不應(yīng)有超過(guò)7個(gè)的導(dǎo)航鏈接。

人類習(xí)慣用一種叫做“組塊”的記憶法，將信息分解成較小的“組塊”單元進(jìn)行記憶。

“組塊”越少，記起來(lái)就越容易。在1956發(fā)表的一個(gè)頗具影響力的研究中，心理學(xué)教授George Miller總結(jié)說(shuō)，我們的短期記憶通常只允許一次性容納7個(gè)項(xiàng)目。

那些含有太多導(dǎo)航項(xiàng)的網(wǎng)站，往往會(huì)給人一種擁擠雜亂的感覺(jué)，因而會(huì)增加用戶離開(kāi)網(wǎng)頁(yè)或者走錯(cuò)路的可能性。一個(gè)比較好的策略就是合理安排導(dǎo)航項(xiàng)，從左到右安排，將最重要的頁(yè)面放在左側(cè)。

如果你有很多產(chǎn)品和系列，那么把重點(diǎn)放在主要的高級(jí)系列上，使用超級(jí)菜單或者下拉菜單來(lái)創(chuàng)建二級(jí)導(dǎo)航。

二級(jí)導(dǎo)航能夠更好地幫助你對(duì)產(chǎn)品和頁(yè)面進(jìn)行組織分類而不影響消費(fèi)者的購(gòu)物體驗(yàn)。

拿UNCONDITIONAL的主頁(yè)來(lái)說(shuō)，他們巧妙地通過(guò)簡(jiǎn)單的主導(dǎo)航和二級(jí)導(dǎo)航展示豐富的產(chǎn)品類目。

有一些網(wǎng)站還會(huì)根據(jù)自己的主要需求在主導(dǎo)航欄上設(shè)立了介紹頁(yè)面（關(guān)于我們）和聯(lián)系頁(yè)面，常見(jiàn)問(wèn)題（FAQ）頁(yè)面或其它的頁(yè)面。

但是如果你發(fā)現(xiàn)這些頁(yè)面的轉(zhuǎn)化效果不如預(yù)期，那么它們很可能是轉(zhuǎn)化失敗的問(wèn)題所在。如果是這樣的話，最好把它們放在網(wǎng)頁(yè)底部。

決策規(guī)避不僅體現(xiàn)在導(dǎo)航欄上，主頁(yè)上的其它因素也會(huì)對(duì)其產(chǎn)生影響。在設(shè)計(jì)主頁(yè)的時(shí)候清楚地認(rèn)識(shí)到用戶注意力的有限能夠幫你分析主次因素。

無(wú)論你是對(duì)某個(gè)產(chǎn)品或系列進(jìn)行促銷，還是想吸引潛在客戶，視覺(jué)在吸引用戶的注意力方面扮演著極為重要的角色。

以下是將視覺(jué)整合到主頁(yè)首屏區(qū)域的一些途徑：
 

添加帶文字的圖片

這種首屏視覺(jué)的風(fēng)格通常由一個(gè)單獨(dú)醒目的圖片，一句簡(jiǎn)單的文案和一個(gè)CTA按鈕組成。對(duì)于那些希望把諸如限時(shí)優(yōu)惠、龍頭產(chǎn)品或當(dāng)季系列之類的主要促銷放在首屏上的電商來(lái)說(shuō)，這是最佳的途徑。

圖片幻燈片播放

你也可以考慮使用圖片幻燈播放來(lái)展示一個(gè)特定的折扣，一組產(chǎn)品或高清產(chǎn)品圖。

對(duì)于那些擁有一些類目且產(chǎn)品豐富的商家來(lái)說(shuō)，這是一個(gè)不錯(cuò)的手段。他們可以用它來(lái)推廣其中一些產(chǎn)品系列或他們希望推廣的頁(yè)面。

你需要合理安排播放的先后次序，先放最主要的。而且建議不超過(guò)三張圖片，因?yàn)橄M(fèi)者在進(jìn)入下一步前不會(huì)花太長(zhǎng)時(shí)間看一張圖片。

視頻

一些品牌會(huì)從主頁(yè)上一個(gè)背景介紹的視覺(jué)中獲益。但是對(duì)于那些創(chuàng)意性強(qiáng)或者較為復(fù)雜的品牌來(lái)說(shuō)，在真正感興趣之前可能有必要先告訴消費(fèi)者如何使用他們的產(chǎn)品。

以Bottle Cutting Inc的主頁(yè)為例，許多訪客可能還不清楚自己到底需不需要他們的產(chǎn)品，所以品牌在主頁(yè)上通過(guò)添加視頻展示來(lái)增加刺激性——這也是轉(zhuǎn)化過(guò)程的一個(gè)很有必要的步驟。

由于視覺(jué)起到直接和明顯的作用，所以必須確保它們的高清質(zhì)量及其真實(shí)代表性。

如果你不是專業(yè)攝影師，你可以請(qǐng)一位專業(yè)攝影師或者使用Shopify主題編輯中image picker的免費(fèi)素材圖庫(kù)。

4.一個(gè)直接的CTA

可以把CTA理解為高速公路的出口標(biāo)志，它應(yīng)該簡(jiǎn)短精悍，醒目而且能夠?qū)π枰獛椭乃緳C(jī)起引導(dǎo)作用。

你的CTA及其鏈接需要能夠引導(dǎo)消費(fèi)者采取符合主頁(yè)首要目標(biāo)的步驟。它可能會(huì)將消費(fèi)者導(dǎo)至最新產(chǎn)品系列的鏈接或者觀看視頻來(lái)獲取更多的信息。

從CTA按鈕獨(dú)特的設(shè)計(jì)中，消費(fèi)者應(yīng)該馬上知道要點(diǎn)擊哪里。找到這個(gè)按鈕所需的時(shí)間越長(zhǎng)，消費(fèi)者就會(huì)越迷失方向或干脆放棄。

上圖所示的PopSockets主頁(yè)，在帶領(lǐng)消費(fèi)者走上理想的轉(zhuǎn)化道路方面就做得很不錯(cuò)。他們用醒目的產(chǎn)品視覺(jué)來(lái)吸引注意力，而且黑白相間（與背景色區(qū)分開(kāi)來(lái)）的CTA按鈕就在前方正中央。

首屏上方所顯示的內(nèi)容也是主頁(yè)的主要目標(biāo)：引導(dǎo)用戶直接瀏覽最新產(chǎn)品線。在你下拉時(shí)，你可以看到更多的CTA按鈕來(lái)購(gòu)買其他產(chǎn)品。
 

對(duì)于許多電商網(wǎng)站來(lái)說(shuō)，購(gòu)物車屬于主頁(yè)中不可分割的一部分。

讓導(dǎo)航欄更直觀的其中一個(gè)目的就是確保購(gòu)物車容易找到。一個(gè)“置頂”購(gòu)物車（有時(shí)候又稱“slide-out”購(gòu)物車，可在部分Shopify主題中找到）是一種在瀏覽過(guò)程中全程顯示的購(gòu)物車，一般在頁(yè)面右上角顯示。

不僅如此，它還可以顯示購(gòu)物車?yán)镆延械纳唐窋?shù)量。一個(gè)顯眼的購(gòu)物車提示，不但可以顯示已加入購(gòu)物車的商品數(shù)量，還可以提醒消費(fèi)者他們的購(gòu)買正在進(jìn)行中并鼓勵(lì)完成購(gòu)物。

底線：使購(gòu)物車一目了然而且容易進(jìn)入。

Chubbies主頁(yè)設(shè)置了一個(gè)紅色提示，旨在提醒消費(fèi)者購(gòu)物車內(nèi)的商品數(shù)量，而且還有一個(gè)置頂購(gòu)物車，使得消費(fèi)者很容易就可以繼續(xù)購(gòu)物或直接結(jié)賬。

6.一個(gè)搜索欄 （適用于產(chǎn)品系列較多的品牌）

除了簡(jiǎn)潔明了的導(dǎo)航欄與置頂購(gòu)物車之外，很多電商會(huì)在主頁(yè)添加一個(gè)“搜索欄”來(lái)幫助那些目的性明確的訪客搜索想要的產(chǎn)品，特別是在網(wǎng)站上有很多產(chǎn)品或很多內(nèi)容的情況下。

旗下?lián)碛幸幌盗懈鞣N各樣化妝品的品牌Morphe就是一個(gè)很好的例子。為了讓消費(fèi)者更容易找到他們想要的產(chǎn)品，Morphe添加了一個(gè)智能搜索欄，它可以自動(dòng)完善訪客的搜索需求并推薦相應(yīng)的產(chǎn)品，系列或頁(yè)面。這就在主頁(yè)和訪客目標(biāo)頁(yè)之間建立了一個(gè)直接的橋梁。

一般來(lái)講，在經(jīng)過(guò)一個(gè)完整搜索過(guò)程的消費(fèi)者更容易完成轉(zhuǎn)化。如果你的品牌旗下?lián)碛泻芏喈a(chǎn)品，并且有一個(gè)可能會(huì)將顧客拒之門外的復(fù)雜導(dǎo)航系統(tǒng)，一個(gè)簡(jiǎn)單快捷的搜索欄將是一個(gè)不錯(cuò)的選擇。

如果你想在你的Shopify商店里添加一個(gè)智能搜索，你可以試一試Smart Search & Instant Search或者Instant Search +。

首屏之外：其他需要考慮的主頁(yè)元素

首屏下方所提供的元素（當(dāng)用戶下拉頁(yè)面時(shí)）不一定就不重要——他們通常是對(duì)已有內(nèi)容的強(qiáng)調(diào)和拓展，旨在為同樣的轉(zhuǎn)化目標(biāo)提供更多的實(shí)現(xiàn)途徑，而且讓消費(fèi)者更容易訪問(wèn)其它頁(yè)面。

以下是一些可以加入主頁(yè)設(shè)計(jì)或底部的元素，可以根據(jù)你的網(wǎng)站目標(biāo)來(lái)選擇。

1.博客、視頻及其它內(nèi)容

博客和視頻內(nèi)容對(duì)于SEO來(lái)講很重要，但是首屏上不當(dāng)?shù)膬?nèi)容足以轉(zhuǎn)移消費(fèi)者的注意力并讓他們對(duì)產(chǎn)品失去興趣。你所需要的是能夠推動(dòng)潛在消費(fèi)的內(nèi)容，而不是其它的雜七雜八的東西。

可以考慮將內(nèi)容鏈接置于首屏下方，或者放在網(wǎng)頁(yè)底部，特別是當(dāng)內(nèi)容不是業(yè)務(wù)的核心方面，但它可以方便那些決定訪問(wèn)網(wǎng)站的潛在消費(fèi)者找到相關(guān)內(nèi)容。

如果你要推廣內(nèi)容，你可以選擇在主導(dǎo)航欄添加一個(gè)鏈接，但是這類推廣信息最好放在社交媒體，郵件或第三方網(wǎng)站上傳播，這樣可以從網(wǎng)站外部引流。

舉個(gè)例子，售賣環(huán)保且易攜帶的炊具和照明設(shè)備的品牌BioLite Energy通過(guò)將包含主要信息的視頻內(nèi)容插在首屏與網(wǎng)頁(yè)底部之間的區(qū)域，避免了用戶將注意力分散到他們的核心價(jià)值主張之外。其它博客和YouTube頻道等方面的內(nèi)容都在其下方。

 2.社會(huì)認(rèn)同：用戶評(píng)價(jià)、認(rèn)可與媒體報(bào)道
                        
社會(huì)認(rèn)同是對(duì)品牌的一種認(rèn)可，通過(guò)利用老顧客或?qū)＜业默F(xiàn)有信任來(lái)獲取潛在消費(fèi)者對(duì)品牌的信任。它可以包含媒體報(bào)道，用戶評(píng)價(jià)，社交媒體發(fā)布，Instagram發(fā)圖或者紅人或?qū)＜业耐扑]。

如果你擁有具有說(shuō)服力的社會(huì)認(rèn)同，建議可以將其放在主頁(yè)。

下圖顯示的ErgoDox網(wǎng)站主頁(yè)就通過(guò)截取社交媒體上的一些使用心得以及來(lái)自知名公司員工的推薦為其產(chǎn)品的質(zhì)量作擔(dān)保。但是他們選擇把這些內(nèi)容放在靠近網(wǎng)頁(yè)底部處，并在這之前介紹了產(chǎn)品的功效。

3.低優(yōu)先級(jí)與附加產(chǎn)品
      
可以把較早的一些產(chǎn)品和附加產(chǎn)品放到靠近網(wǎng)頁(yè)底部的地方。你的重點(diǎn)是推廣龍頭產(chǎn)品或最新產(chǎn)品線。
      
那些可以作為主產(chǎn)品的補(bǔ)充又不是特別貴的產(chǎn)品可以作為結(jié)賬時(shí)的增銷推廣，也可以放在首屏下方便消費(fèi)者知曉，如果你賣的產(chǎn)品需要更換零件或替換裝的話。

LIV Watches以手表銷售為主，但是他們也推廣像表帶之類的優(yōu)質(zhì)附加產(chǎn)品，把它們放在主頁(yè)靠近底部的區(qū)域。

4.低優(yōu)先級(jí)頁(yè)面
      
低優(yōu)先級(jí)頁(yè)面因業(yè)務(wù)模式而異。

通常情況下，像服務(wù)條款，隱私權(quán)政策和退貨政策這樣的頁(yè)面都是放在網(wǎng)頁(yè)底部。因?yàn)榇蟛糠志W(wǎng)站都會(huì)選擇把這些頁(yè)面的鏈接放在網(wǎng)頁(yè)底部，所以很多用戶如果需要訪問(wèn)這些頁(yè)面的話會(huì)直接去網(wǎng)頁(yè)底部找。

其它如關(guān)于我們，聯(lián)系信息，店鋪地址，或者訂單跟蹤頁(yè)面之類的頁(yè)面也可以添加到網(wǎng)頁(yè)底部。但是如果這些頁(yè)面真的能夠幫助你獲得轉(zhuǎn)化，或是實(shí)現(xiàn)其中一個(gè)主要目標(biāo)的話，你也可以考慮在主導(dǎo)航欄上為其安排位置，甚至是加到主頁(yè)設(shè)計(jì)中。

例如，一個(gè)提供訂閱服務(wù)的商家如果在其主頁(yè)導(dǎo)航欄上添加一個(gè)明顯的FAQ頁(yè)面可能會(huì)大大地減少請(qǐng)求發(fā)送量。或者，像Bellroy這樣一般需要在線下購(gòu)買產(chǎn)品的商家，你可以通過(guò)明顯的Store Locator（店鋪定位）鏈接幫助消費(fèi)者定位實(shí)體店鋪。

在決定一個(gè)頁(yè)面是否屬于低級(jí)別時(shí)，問(wèn)問(wèn)自己如果你直接將訪問(wèn)者導(dǎo)航至該頁(yè)面的話你會(huì)獲益多少，以及你是將消費(fèi)者驅(qū)離還是導(dǎo)向預(yù)期效果。

不要忘記手機(jī)的主頁(yè)設(shè)計(jì)

手機(jī)網(wǎng)頁(yè)瀏覽量在過(guò)去近十年內(nèi)持續(xù)增長(zhǎng)。由于你的一部分流量會(huì)是來(lái)自手機(jī)用戶，在主頁(yè)設(shè)計(jì)的過(guò)程中也需要考慮到手機(jī)用戶這一因素。

簡(jiǎn)化主頁(yè)，引導(dǎo)用戶的特定行為對(duì)于手機(jī)用戶來(lái)講尤為重要。 

如果你是Shopify商店店主，就應(yīng)該清楚在Shopify主題商店里的任何一個(gè)主題元素都可以根據(jù)屏幕大小進(jìn)行調(diào)整。但是，你要考慮到那些在電腦桌面上完美展示的圖片在手機(jī)屏幕上看起來(lái)可能因被截圖而看起來(lái)有點(diǎn)怪。CTA按鈕可能有點(diǎn)難找，或是被調(diào)到一個(gè)不太顯眼的地方，這樣很容易誤導(dǎo)消費(fèi)者。

在Shopify主題編輯中，通過(guò)預(yù)覽頂端的切換選項(xiàng)你可以很容易地預(yù)覽各種主頁(yè)設(shè)計(jì)在不同設(shè)備上的效果。
 

經(jīng)過(guò)一段時(shí)間后升級(jí)主頁(yè)設(shè)計(jì)

你自己可能心里也很清楚，完成一個(gè)網(wǎng)站的主頁(yè)設(shè)計(jì)并沒(méi)有一個(gè)絕對(duì)的解決方案。像人口統(tǒng)計(jì)、品牌推廣、商品數(shù)量、營(yíng)銷渠道等因素都可以通過(guò)各種各樣的方式影響到用戶行為。

這也就是為什么我們要經(jīng)常把主頁(yè)設(shè)計(jì)看成是一項(xiàng)永遠(yuǎn)未完成的項(xiàng)目，因?yàn)樗枰忝扛粢欢螘r(shí)間就得通過(guò)流量和銷售量進(jìn)行評(píng)估與重新調(diào)整。