建站指南 | 如何打造完美實用的綜合性電商首頁（pc + 手機(jī)端）

時間：2022-08-03 06:18:01 | 來源：網(wǎng)站運(yùn)營

時間：2022-08-03 06:18:01 來源：網(wǎng)站運(yùn)營

相較于垂直類電商，綜合性電商商品種類繁多，數(shù)量也更為龐大。因此，在搭建網(wǎng)站上更具難度。嘿店 heyshop 以網(wǎng)易嚴(yán)選官網(wǎng)與玩物志手機(jī)端為例，就綜合性電商網(wǎng)站以銷售為導(dǎo)向的搭建提出一些建議。

這部綜合性電商參考指南將根據(jù)頁面分為：首頁布局／商品頁面布局／專題頁面布局／博客頁面布局／差異化頁面布局 5 塊內(nèi)容，每塊又分為 pc／mobile 端。Blog 第一期便從首頁的 pc／mobile 端開始。

綜合性電商網(wǎng)站首頁布局

PC 端

1、分類準(zhǔn)確且清晰的導(dǎo)航菜單

導(dǎo)航菜單于網(wǎng)站來說是非常重要的組成部分之一。于消費(fèi)者而言，分類準(zhǔn)確且清晰的導(dǎo)航菜單能帶來愉悅的用戶體驗，他們能在最短時間內(nèi)了解網(wǎng)站的大致構(gòu)成，并迅速找到想要購買的產(chǎn)品類別或有用信息；于商家而言，這樣的導(dǎo)航菜單不易使消費(fèi)者產(chǎn)生困惑并流失。再者，分類準(zhǔn)確且清晰的導(dǎo)航菜單更有利于商家的維護(hù)與擴(kuò)充。

那么如何做到分類準(zhǔn)確且清晰？

以商品性質(zhì)分類是不錯的選擇，將不同的商品以行業(yè)劃分成不同的分類，再根據(jù)功能劃分成二級，甚至三級分類，以達(dá)到清晰、方便消費(fèi)者查找商品的目的。

網(wǎng)易嚴(yán)選的一級菜單分成了居家、餐廚、配件、服裝等不同分類，在一級菜單 “雜貨” 下面又以不同的功能選擇分為了出行用品、收納等二級分類。這樣，即使是初次進(jìn)入官網(wǎng)的消費(fèi)者也能在最短時間內(nèi)查詢到想要購買的商品，或是了解網(wǎng)站售賣范圍及信息。



但無論如何，導(dǎo)航菜單都應(yīng)以商品分類或是專題活動優(yōu)先，類似與博客文章或聯(lián)系我們等沒有添加商品的版塊可放置于頁面底部。

同時導(dǎo)航菜單也應(yīng)具備以下幾點(diǎn)要素：

• 位置醒目，便于消費(fèi)者發(fā)現(xiàn)與點(diǎn)擊
• 手機(jī)端顯示完整，不存在溢出現(xiàn)象
• 文案簡短扼要
• 設(shè)計簡要，方便查詢

2、主題明確并跳轉(zhuǎn)的 banner

通常來說一部分消費(fèi)者是通過主動的 “搜索” 來完成購買行為，另一部分則是被 banner 所吸引過來的。顯然，我們需要一個主題明確且能夠跳轉(zhuǎn)的 banner，因為它的受歡迎程度直接關(guān)系到點(diǎn)擊率與轉(zhuǎn)化率。

Banner 必須直白且準(zhǔn)確地傳遞有效的購買信息，譬如特賣秒殺／滿減活動／專題活動等，信息越明確，越利于轉(zhuǎn)化。毋庸置疑，每個 banner 上都要帶有可跳轉(zhuǎn)的按鈕／文字／圖片，并且保證這些按鈕／文字／圖片在點(diǎn)擊后能一次進(jìn)入帶有一個或多個商品的頁面。在消費(fèi)者進(jìn)行多次點(diǎn)擊時，跳出率會隨著這一系列 “無用” 的動作而增加，購買率也會隨著下降。

當(dāng)然，可以選用幻燈片式 banner，但圖片間的跳轉(zhuǎn)速度不易過快，保持在 5-10s 左右是恰好的。

3、有內(nèi)容有質(zhì)量的 collection

綜合性電商可設(shè)置多個不同的 collection 版塊，以吸引消費(fèi)者的目光，譬如新品首發(fā)／人氣推薦／節(jié)日必備／限時搶購／商品分類／賣家評論等。值得注意的是，

各個不同版塊的模板設(shè)計應(yīng)是不同的、醒目且能快速分辨出的。 版塊中出現(xiàn)的商品圖片清晰，背景簡單，純色為宜。 為商品添加醒目的標(biāo)簽，如爆品／顏色分類／折扣等信息。

新品發(fā)布

對于綜合性電商來說，新品 collection 是一種友善的提醒。它能夠及時告知消費(fèi)者最近網(wǎng)站上新情況，消費(fèi)者也可通過這個 collection 了解訊息。當(dāng)然，collection 中的商品需要被標(biāo)注信息，例如，人氣款／App 專享價格／多種顏色可選等標(biāo)簽，方便消費(fèi)者

人氣推薦

人氣推薦模塊給予品質(zhì)、評論都不錯的商品更多曝光，能夠很好地促進(jìn)消費(fèi)者的購買。對于隨機(jī)購買的消費(fèi)者來說，這起到了一個推薦作用或指出了一個方向，他們可以從這些人氣商品中進(jìn)行挑選嘗試。對于有需求購買的消費(fèi)者來說，這起到了借鑒作用。假設(shè)我是一個想購買電動牙刷但沒有想好具體要購買哪一款或者是什么牌子的消費(fèi)者，當(dāng)我看到人氣推薦中正好有關(guān)于電動牙刷推薦，且這個商品的標(biāo)簽是爆品，點(diǎn)擊到商品詳情頁，物品與評價確實都不錯，那么我購買這款電動牙刷的概率便大大增加了。

當(dāng)然，這些商品也需要打上不同的標(biāo)簽，以便消費(fèi)者識別。

商品分類

導(dǎo)航菜單欄上的商品分類也可在首頁進(jìn)行展示。banner 以主推商品／折扣優(yōu)惠為主，以便迅速吸引消費(fèi)者目光。在 banner 下方可放置一些推薦商品，商品不宜過多，4 個適中。

4、信息明確的 footer

footer 部分可放置一些沒有商品信息的說明類導(dǎo)航，例如，關(guān)于我們／售后服務(wù)／幫助中心等內(nèi)容。當(dāng)然可以根據(jù)情況，選擇再次顯示主導(dǎo)航菜單。

mobile 端

1、清晰醒目的頂部搜索欄／底部標(biāo)簽導(dǎo)航欄

頂部固定搜索欄便于消費(fèi)者們隨時找到想要檢索的產(chǎn)品，提供了很好的購買體驗。底部不同的 tags 也方便了他們的購買。首頁／分類／購物車／我的，這四個標(biāo)簽選擇是必要的，當(dāng)然標(biāo)簽的名字可作更改，但不建議改為復(fù)雜的名稱。畢竟手機(jī)端的購買還是以簡潔明了為出發(fā)點(diǎn)。

2、有吸引力的首頁 banner

與 pc 端 banner 相同，mobile 端的首頁 banner 也需要明確的主題、有吸引力的文案與能夠跳轉(zhuǎn)的按鈕，同時可以備注物流相關(guān)信息，令消費(fèi)者感到貼心。

3、恰當(dāng)分類、數(shù)量適中的 section

首頁需要出現(xiàn)一定量的產(chǎn)品分類版塊，4 個版塊是合適的，這樣消費(fèi)者可以滑動 5-6 次到達(dá)首頁底部。如果超過 8 個產(chǎn)品分類版塊，那么在滑動過程中他們便會喪失興趣，以至于離開。

產(chǎn)品分類的名稱需要有統(tǒng)一的格式，便于消費(fèi)者記憶。譬如玩物志的酷黑科技／解憂雜貨／吃貨最愛等名字，4 字文案，簡單上口、更易理解。

版塊 banner 要帶有可跳轉(zhuǎn)的圖片／文字／按鈕，確保點(diǎn)擊進(jìn)入商品頁面。banner 下方的商品不易過多，盡量選擇橫向滑動頁面形式，以便節(jié)省空間。

總結(jié)：綜合性電商網(wǎng)站首頁基本素養(yǎng)

pc 端：

• 分類清晰的導(dǎo)航欄
• 主題明確并跳轉(zhuǎn)的 banner
• 有內(nèi)容有質(zhì)量的 collection
• 信息明確的 footer
• 導(dǎo)航欄／各版塊風(fēng)格必須符合品牌定位，且 logo 與主題色調(diào)保持一致。
• 登錄／注冊按鈕醒目
• 購物車標(biāo)識醒目
• 網(wǎng)站搜索欄位置突出

mobile 端：

• 固定搜索欄與底部標(biāo)簽導(dǎo)航醒目
• 背景簡潔明了，純淺色為宜，以便突出商品
• 主題明確、有吸引力、能跳轉(zhuǎn)的 banner
• 分類、數(shù)量均恰當(dāng)?shù)?section，橫向滑動頁面更節(jié)約空間

圖片截取自網(wǎng)易嚴(yán)選官網(wǎng)與玩物志手機(jī)端

編輯 | 鱸魚 校對 | Tingting

更多詳情請查看嘿店官網(wǎng) hey.shop