網站設計入門：主頁設計要點

你的網站主頁既是品牌的門面，又得能幫助新老客戶更好地各取所需。每個細節都應旨在建立更好的第一印象和鼓勵特定行為，無論你的目標是賣產品，還是想獲取更多的注冊用戶。

主頁設計的途徑有不少。以下是一些小竅門，不管你是新手還是單純想升級網站都可以參考一下。
 

主頁設計過程中涉及到的問題

一個好的主頁設計并不代表它適用于所有的電商。

如果你正在尋找一個設計方案，但是還摸不著頭腦，那么可以先從以下幾個問題入手：

• 你希望網站訪客完成什么行為？（如立即購買，注冊用戶等）
• 如何才能讓他們更輕松地做到這一點？
• 實現你的目標需要經過多少步驟？
• 他們需要提交多少信息才能進入到下一步？
• 有可以省略的步驟嗎？

有些消費者在訪問網站的時候目的性比較明確，但是也有一部分人并不是很清楚。你在設計網站的時候不僅需要充分考慮到這一點，而且還要綜合考慮你為網站所設定的主要目標。

一個好的網站主頁不但要能幫助有目的的消費者得其所需，還應能引導那些沒有方向的潛在消費者。
 

你的主頁設計需要達到哪些目標？

網站訪問者在主頁的平均停留時間應該在10至20秒。從設計的角度來講這就意味著主頁的導航流程需要非常清晰，這樣訪問者就可以更快地為自己（和你的業務）選取最佳途徑。

由于“決策規避”（即人們通常不會花太長時間做決定）這一普遍心理現象，使得達到以上這一目標顯得更為緊迫。

對于網站主頁來說，決策規避也就是退出主頁或點擊返回按鈕。要想避免這一點，網站設計的首要任務就是說服潛在消費者繼續留在頁面上。

要想做到這一點，你需要先搞清楚網站最具價值的版塊所扮演的角色。
 

1.能夠激發特定行為的“首屏”內容

當網站設計師在提及主頁的“首屏”區域時，他們通常指的是在訪客決定下拉頁面之前所看到的東西。

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

以Morning Recovery的網站為例，他們的業務是售賣一款防宿醉產品。所以他們的目標就是引導潛在消費者購買他們家的龍頭產品，為達到此目的他們設計了一個顏色鮮艷的、以產品為中心的視覺和一個清晰的行為號召按鈕（Call to Action，以下簡稱CTA）放在他們的“首屏”區域，以引導潛在消費者進行購買。

消費者在該頁面面臨兩個可選捷徑：

• 點擊下一步進行購買
• 首屏下拉以獲取更多信息——用戶評價，視頻，有關產品原料的信息等。

許多網站頭部會使用一個醒目的主標題和具有說服力的副標題，以及引人注意的視覺來吸引新用戶并帶領他們對品牌進行深入了解。

然而，從一開始你就可以通過許多方式來吸引消費者，比如說在導航欄上方設計一個促銷橫幅，可以是特價促銷或免郵優惠等。
 

一個主頁的導航欄清晰與否取決于它的簡潔度。這可能聽起來跟你要滿足不同消費者的需求有點自相矛盾，但是你得保證消費者能夠在主頁上進行快速瀏覽。

頭部導航應該越簡潔明了越好，將多數消費者的需求放在首位。Orbit Media Studios的策略總監Andy Crestodina認為網站上不應有超過7個的導航鏈接。

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

“組塊”越少，記起來就越容易。在1956發表的一個頗具影響力的研究中，心理學教授George Miller總結說，我們的短期記憶通常只允許一次性容納7個項目。

那些含有太多導航項的網站，往往會給人一種擁擠雜亂的感覺，因而會增加用戶離開網頁或者走錯路的可能性。一個比較好的策略就是合理安排導航項，從左到右安排，將最重要的頁面放在左側。

如果你有很多產品和系列，那么把重點放在主要的高級系列上，使用超級菜單或者下拉菜單來創建二級導航。

二級導航能夠更好地幫助你對產品和頁面進行組織分類而不影響消費者的購物體驗。

拿UNCONDITIONAL的主頁來說，他們巧妙地通過簡單的主導航和二級導航展示豐富的產品類目。

有一些網站還會根據自己的主要需求在主導航欄上設立了介紹頁面（關于我們）和聯系頁面，常見問題（FAQ）頁面或其它的頁面。

但是如果你發現這些頁面的轉化效果不如預期，那么它們很可能是轉化失敗的問題所在。如果是這樣的話，最好把它們放在網頁底部。

決策規避不僅體現在導航欄上，主頁上的其它因素也會對其產生影響。在設計主頁的時候清楚地認識到用戶注意力的有限能夠幫你分析主次因素。

無論你是對某個產品或系列進行促銷，還是想吸引潛在客戶，視覺在吸引用戶的注意力方面扮演著極為重要的角色。

以下是將視覺整合到主頁首屏區域的一些途徑：
 

添加帶文字的圖片

這種首屏視覺的風格通常由一個單獨醒目的圖片，一句簡單的文案和一個CTA按鈕組成。對于那些希望把諸如限時優惠、龍頭產品或當季系列之類的主要促銷放在首屏上的電商來說，這是最佳的途徑。

圖片幻燈片播放

你也可以考慮使用圖片幻燈播放來展示一個特定的折扣，一組產品或高清產品圖。

對于那些擁有一些類目且產品豐富的商家來說，這是一個不錯的手段。他們可以用它來推廣其中一些產品系列或他們希望推廣的頁面。

你需要合理安排播放的先后次序，先放最主要的。而且建議不超過三張圖片，因為消費者在進入下一步前不會花太長時間看一張圖片。

視頻

一些品牌會從主頁上一個背景介紹的視覺中獲益。但是對于那些創意性強或者較為復雜的品牌來說，在真正感興趣之前可能有必要先告訴消費者如何使用他們的產品。

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

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

如果你不是專業攝影師，你可以請一位專業攝影師或者使用Shopify主題編輯中image picker的免費素材圖庫。

4.一個直接的CTA

可以把CTA理解為高速公路的出口標志，它應該簡短精悍，醒目而且能夠對需要幫助的司機起引導作用。

你的CTA及其鏈接需要能夠引導消費者采取符合主頁首要目標的步驟。它可能會將消費者導至最新產品系列的鏈接或者觀看視頻來獲取更多的信息。

從CTA按鈕獨特的設計中，消費者應該馬上知道要點擊哪里。找到這個按鈕所需的時間越長，消費者就會越迷失方向或干脆放棄。

上圖所示的PopSockets主頁，在帶領消費者走上理想的轉化道路方面就做得很不錯。他們用醒目的產品視覺來吸引注意力，而且黑白相間（與背景色區分開來）的CTA按鈕就在前方正中央。

首屏上方所顯示的內容也是主頁的主要目標：引導用戶直接瀏覽最新產品線。在你下拉時，你可以看到更多的CTA按鈕來購買其他產品。
 

對于許多電商網站來說，購物車屬于主頁中不可分割的一部分。

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

不僅如此，它還可以顯示購物車里已有的商品數量。一個顯眼的購物車提示，不但可以顯示已加入購物車的商品數量，還可以提醒消費者他們的購買正在進行中并鼓勵完成購物。

底線：使購物車一目了然而且容易進入。

Chubbies主頁設置了一個紅色提示，旨在提醒消費者購物車內的商品數量，而且還有一個置頂購物車，使得消費者很容易就可以繼續購物或直接結賬。

6.一個搜索欄 （適用于產品系列較多的品牌）

除了簡潔明了的導航欄與置頂購物車之外，很多電商會在主頁添加一個“搜索欄”來幫助那些目的性明確的訪客搜索想要的產品，特別是在網站上有很多產品或很多內容的情況下。

旗下擁有一系列各種各樣化妝品的品牌Morphe就是一個很好的例子。為了讓消費者更容易找到他們想要的產品，Morphe添加了一個智能搜索欄，它可以自動完善訪客的搜索需求并推薦相應的產品，系列或頁面。這就在主頁和訪客目標頁之間建立了一個直接的橋梁。

一般來講，在經過一個完整搜索過程的消費者更容易完成轉化。如果你的品牌旗下擁有很多產品，并且有一個可能會將顧客拒之門外的復雜導航系統，一個簡單快捷的搜索欄將是一個不錯的選擇。

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

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

首屏下方所提供的元素（當用戶下拉頁面時）不一定就不重要——他們通常是對已有內容的強調和拓展，旨在為同樣的轉化目標提供更多的實現途徑，而且讓消費者更容易訪問其它頁面。

以下是一些可以加入主頁設計或底部的元素，可以根據你的網站目標來選擇。

1.博客、視頻及其它內容

博客和視頻內容對于SEO來講很重要，但是首屏上不當的內容足以轉移消費者的注意力并讓他們對產品失去興趣。你所需要的是能夠推動潛在消費的內容，而不是其它的雜七雜八的東西。

可以考慮將內容鏈接置于首屏下方，或者放在網頁底部，特別是當內容不是業務的核心方面，但它可以方便那些決定訪問網站的潛在消費者找到相關內容。

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

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

 2.社會認同：用戶評價、認可與媒體報道
                        
社會認同是對品牌的一種認可，通過利用老顧客或專家的現有信任來獲取潛在消費者對品牌的信任。它可以包含媒體報道，用戶評價，社交媒體發布，Instagram發圖或者紅人或專家的推薦。

如果你擁有具有說服力的社會認同，建議可以將其放在主頁。

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

3.低優先級與附加產品
      
可以把較早的一些產品和附加產品放到靠近網頁底部的地方。你的重點是推廣龍頭產品或最新產品線。
      
那些可以作為主產品的補充又不是特別貴的產品可以作為結賬時的增銷推廣，也可以放在首屏下方便消費者知曉，如果你賣的產品需要更換零件或替換裝的話。

LIV Watches以手表銷售為主，但是他們也推廣像表帶之類的優質附加產品，把它們放在主頁靠近底部的區域。

4.低優先級頁面
      
低優先級頁面因業務模式而異。

通常情況下，像服務條款，隱私權政策和退貨政策這樣的頁面都是放在網頁底部。因為大部分網站都會選擇把這些頁面的鏈接放在網頁底部，所以很多用戶如果需要訪問這些頁面的話會直接去網頁底部找。

其它如關于我們，聯系信息，店鋪地址，或者訂單跟蹤頁面之類的頁面也可以添加到網頁底部。但是如果這些頁面真的能夠幫助你獲得轉化，或是實現其中一個主要目標的話，你也可以考慮在主導航欄上為其安排位置，甚至是加到主頁設計中。

例如，一個提供訂閱服務的商家如果在其主頁導航欄上添加一個明顯的FAQ頁面可能會大大地減少請求發送量?；蛘撸馚ellroy這樣一般需要在線下購買產品的商家，你可以通過明顯的Store Locator（店鋪定位）鏈接幫助消費者定位實體店鋪。

在決定一個頁面是否屬于低級別時，問問自己如果你直接將訪問者導航至該頁面的話你會獲益多少，以及你是將消費者驅離還是導向預期效果。

不要忘記手機的主頁設計

手機網頁瀏覽量在過去近十年內持續增長。由于你的一部分流量會是來自手機用戶，在主頁設計的過程中也需要考慮到手機用戶這一因素。

簡化主頁，引導用戶的特定行為對于手機用戶來講尤為重要。 

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

在Shopify主題編輯中，通過預覽頂端的切換選項你可以很容易地預覽各種主頁設計在不同設備上的效果。
 

經過一段時間后升級主頁設計

你自己可能心里也很清楚，完成一個網站的主頁設計并沒有一個絕對的解決方案。像人口統計、品牌推廣、商品數量、營銷渠道等因素都可以通過各種各樣的方式影響到用戶行為。

這也就是為什么我們要經常把主頁設計看成是一項永遠未完成的項目，因為它需要你每隔一段時間就得通過流量和銷售量進行評估與重新調整。