最近的研究發(fā)現(xiàn)，電子商務(wù)類別頁面在搜索中的點(diǎn)擊率高于單個(gè)類別頁面。因此，如果你的電子商務(wù)網(wǎng)站設(shè)計(jì)正在努力吸引顧客和轉(zhuǎn)換他們，你的分類頁面（特別是那些在移動(dòng)設(shè)備上）可能需要重新網(wǎng)站設(shè)計(jì)。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)商城免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

對(duì)于電子商務(wù)設(shè)計(jì)師來說，很容易專注于設(shè)計(jì)主頁、單個(gè)產(chǎn)品頁面以及結(jié)賬體驗(yàn)，因?yàn)樗鼈兪且苿?dòng)購物者旅程中顯而易見的墊腳石。然而，根據(jù)以下數(shù)據(jù)，分類頁面也可以發(fā)揮作用——作為搜索引擎和電子商務(wù)網(wǎng)站設(shè)計(jì)之間的中介。

JumpFly的SEO總監(jiān)Jill Kocher Brown在SMX West 2020上分享了以下研究：

SEO Jill Brown分享了電子商務(wù)分類頁面與產(chǎn)品頁面性能的研究。（來源：Slideshare）

在對(duì)排名前30位的電子商務(wù)網(wǎng)站設(shè)計(jì)進(jìn)行評(píng)估后，Brown發(fā)現(xiàn)產(chǎn)品分類頁面在關(guān)鍵詞排名和流量方面都優(yōu)于產(chǎn)品頁面。

考慮到有多少頂級(jí)的漏斗客戶使用移動(dòng)搜索來找到他們?cè)诰W(wǎng)上尋找的東西，我們需要把更多的注意力放在為移動(dòng)設(shè)計(jì)電子商務(wù)類別頁面上。

今天將為您提供一些設(shè)計(jì)移動(dòng)電子商務(wù)類別頁面的技巧，這將使您獲得更多的搜索訪問（因此，轉(zhuǎn)換到現(xiàn)場(chǎng)）。

如何設(shè)計(jì)電子商務(wù)類別網(wǎng)頁的移動(dòng)

讓我們開始吧：

1. 只包含頁面上的基本元素

這或多或少是我們?cè)跒槭謾C(jī)設(shè)計(jì)電子商務(wù)類別頁面時(shí)應(yīng)該追求的目標(biāo)：

一個(gè)例子wireframe為電子商務(wù)類別網(wǎng)頁上移動(dòng)。（來源：用Wireframe.cc創(chuàng)建）

我們需要包含在折疊上的元素是：

導(dǎo)航條（它可以在滾動(dòng)時(shí)消失，也可以停留在頁面頂部），

一個(gè)描述性的類別頁面標(biāo)題，

類別中的產(chǎn)品總數(shù)，

過濾選項(xiàng)，

排序設(shè)置，

至少一個(gè)或兩個(gè)匹配的產(chǎn)品。

至于為什么這些元素需要在折疊之上，向您展示一個(gè)示例。

根據(jù)SEMrush（和谷歌）的說法，“kong dog toys”是一個(gè)很受歡迎的搜索詞，狗玩具的購買者都在尋找這個(gè)詞：

SEMrush透露，“kong dog toys”的月搜索量為33，100個(gè)。（來源：SEMrush）

搜索詞的最匹配結(jié)果之一是PetSmart網(wǎng)站上的這個(gè)類別/品牌頁面：

PetSmart的產(chǎn)品類別頁面，用于Kong品牌的狗玩具。（來源：PetSmart）

接下來的四次點(diǎn)擊會(huì)引導(dǎo)購物者瀏覽信息區(qū)、視頻和類似這樣的子目錄：

PetSmart在分類頁面的頂部包含了大量關(guān)于Kong品牌的信息。（來源：PetSmart）

問題是這樣的：

對(duì)于網(wǎng)站上探索寵物產(chǎn)品的訪客來說，這些信息很重要，因?yàn)樗屗麄兞私饬朔浅Ｊ軞g迎的Kong品牌。然而，對(duì)于那些在谷歌中搜索“金剛狗玩具”的訪問者來說，他們并不需要所有這些信息。它只是妨礙了購物體驗(yàn)。

雖然不喜歡百思買在標(biāo)題上方添加廣告，也不喜歡第一次顯示的贊助產(chǎn)品，但類別頁面頂部的簡潔布局做得很好：

百思買的分類頁面在細(xì)節(jié)上很簡潔，并能立即顯示產(chǎn)品。（來源：百思買）

此外，百思買還提供了額外的分類信息（就像PetSmart一樣）。然而，它明智地把這些信息放在搜索結(jié)果下面：

百思買在搜索結(jié)果下面包含了分類信息。（來源：百思買）

為什么百思買要這么做？你為什么要這么做？

首先，你希望那些剛接觸某個(gè)產(chǎn)品類別或品牌的購物者仍然能夠獲得這些信息。考慮到受過良好培訓(xùn)的消費(fèi)者是如何在線下尋找更多信息的，這在移動(dòng)設(shè)備上是可行的。

此外，這對(duì)SEO也很有用。如果沒有這個(gè)類別的描述，你將不得不把它留給你的元標(biāo)題和描述來影響頁面的排名。通過類似這樣的搜索優(yōu)化信息部分，您可以提高類別頁面到達(dá)搜索頂部的機(jī)會(huì)。

2. 展示最具說服力的產(chǎn)品細(xì)節(jié)

正如你所看到的，我們?cè)谶@些移動(dòng)電子商務(wù)分類頁面上沒有太多的空間。因此，當(dāng)購物者最終得到匹配的產(chǎn)品結(jié)果時(shí)，您希望讓他們盡可能輕松地找到正在尋找的人。

以下是每個(gè)產(chǎn)品清單應(yīng)該包括的細(xì)節(jié)：

晶瑩剔透、引人入勝的產(chǎn)品形象，

產(chǎn)品名稱（如果名稱/品牌沒有拼出它是什么，則提供簡短的說明），

價(jià)格，

星級(jí)和評(píng)論的數(shù)量。

上面唯一一個(gè)可選的元素是評(píng)價(jià)/評(píng)論，只有當(dāng)你的網(wǎng)站是新的，你不想因?yàn)槿鄙僭u(píng)論而讓人厭煩時(shí)，才會(huì)出現(xiàn)這種情況。

至于向產(chǎn)品清單中添加其他元素，請(qǐng)注意這一點(diǎn)。如果它沒有增加任何價(jià)值（換句話說，它并沒有使從另一個(gè)產(chǎn)品中選擇一個(gè)產(chǎn)品變得更容易），那么就不要使用它。

例如，這個(gè)“金剛狗玩具”類別的網(wǎng)頁來自Chewy：

耐嚼的類別頁和“金剛狗玩具”的結(jié)果。（來源：耐嚼）

這個(gè)類別頁面設(shè)計(jì)作為一個(gè)整體比競(jìng)爭(zhēng)對(duì)手PetSmart處理他們的更簡潔。然而，這里有相當(dāng)多的浪費(fèi)。也就是說，有兩個(gè)重復(fù)的文本字符串需要去：

“更多選擇”下的產(chǎn)品形象；

“免費(fèi)1 - 2天運(yùn)輸49美元”之間的價(jià)格和評(píng)級(jí)。

免費(fèi)送貨通知可以很容易地出現(xiàn)在網(wǎng)站頂部的一個(gè)可刪除的粘性欄中。“更多的選擇”根本不需要在這里。通過收緊產(chǎn)品細(xì)節(jié)，移動(dòng)購物者可以更快地瀏覽可用的搜索結(jié)果。

這里有一個(gè)來自BH化妝品公司的產(chǎn)品清單可能會(huì)被削減的例子：

BH化妝品在相應(yīng)的分類頁面上顯示化妝刷設(shè)置。（來源：BH化妝品）

“添加到包”按鈕都需要去。除非購物者看到一個(gè)產(chǎn)品圖片就知道他們需要什么，否則這些按鈕在這個(gè)頁面上是沒用的。

個(gè)人也認(rèn)為“XX% OFF”是不必要的。沒有理由把這個(gè)問題復(fù)雜化。原來的價(jià)格和新的更低的粉紅色價(jià)格應(yīng)該足以引起注意的報(bào)價(jià)。

這并不是在電子商務(wù)網(wǎng)站設(shè)計(jì)顯示庫存/選項(xiàng)的唯一方法，因此您必須根據(jù)具體情況評(píng)估每個(gè)產(chǎn)品元素。

所以你可以看到所說的，以下是在Expedia上搜索“圣托里尼希臘酒店”的結(jié)果：

在Expedia上搜索“圣托里尼希臘酒店”的結(jié)果頁面。（來源：Expedia）

在Booking.com上：

在Booking.com上搜索“圣托里尼希臘酒店”的結(jié)果頁面。（來源：Booking.com）

兩者都包含每個(gè)清單所需的基本細(xì)節(jié)。然而，它們包含了額外的細(xì)節(jié)來幫助用戶做出決定。

但是，在顯示這些額外信息的方式上有很大的不同。在Expedia上，用戶可以看到“含早餐”是最重要的功能之一，只有兩個(gè)房間的特價(jià)。這是有用的信息。然而，在Booking.com網(wǎng)站上，有一大堆綠色的細(xì)節(jié)顯示在價(jià)格的正下方。它很難讀，我不確定所有的細(xì)節(jié)都是必要的。

如果有疑問，從最低限度開始。然后，使用A/B測(cè)試來確認(rèn)其他細(xì)節(jié)是否可以提高點(diǎn)擊率和轉(zhuǎn)化率。

3.管理您的移動(dòng)類別頁面大小

在設(shè)計(jì)電子商務(wù)類別頁面時(shí)，我們需要注意頁面大小有兩個(gè)原因：

由于在這類頁面上出現(xiàn)了大量的圖像和數(shù)據(jù)，這可能會(huì)嚴(yán)重影響加載時(shí)間。

一次展示的產(chǎn)品越多，分析就會(huì)越癱瘓

所以，首先要做的是對(duì)頁面的長度設(shè)置一個(gè)限制。

雖然你可能會(huì)忍不住使用無限滾動(dòng)或自動(dòng)加載，顯示更多的產(chǎn)品圖像，因?yàn)橛慰拖蛳聺L動(dòng)頁面，如果你使用的分頁鏈接更好的性能，如沃爾瑪所做的：

沃爾瑪在其產(chǎn)品類別頁面的末尾使用分頁。（來源：沃爾瑪）

你可以從沃爾瑪學(xué)到的另一個(gè)技巧是它的產(chǎn)品視圖設(shè)置。默認(rèn)情況下，產(chǎn)品出現(xiàn)在一個(gè)網(wǎng)格的類別頁面：

默認(rèn)情況下，沃爾瑪以網(wǎng)格布局顯示類別產(chǎn)品。（來源：沃爾瑪）

點(diǎn)擊“Sort & Filter”左側(cè)按鈕，用戶可以將對(duì)齊方式更改為列表視圖：

用戶可以調(diào)整沃爾瑪?shù)姆诸愴撁妫栽诹斜聿季种酗@示產(chǎn)品。（來源：沃爾瑪）

雖然這更多的是個(gè)人喜好的問題，但是您可以看到列表布局實(shí)際上一次顯示了更多的產(chǎn)品，所以用戶可能會(huì)發(fā)現(xiàn)這種布局的選擇對(duì)于加速他們的購物體驗(yàn)非常有用。

最后要考慮的一件事：

你不能假設(shè)默認(rèn)的排序方法是所有客戶自動(dòng)喜歡的。例如，絲芙蘭的默認(rèn)分類是“暢銷書”：

默認(rèn)情況下，絲芙蘭會(huì)根據(jù)“最暢銷”產(chǎn)品對(duì)分類頁面進(jìn)行分類。（來源：絲芙蘭）

正如我們所知，消費(fèi)者在網(wǎng)上購物時(shí)還會(huì)考慮其他事情。負(fù)擔(dān)能力是其中之一，所以按“價(jià)格從低到高”排序可能更有意義。評(píng)論和評(píng)級(jí)是他們尋找的其他東西，所以“最高評(píng)級(jí)”可能是他們選的排序方法：

絲芙蘭的客戶可以改變分類頁面的排序方式。（來源：絲芙蘭）

說到過濾器，不要吝嗇。

例如，絲芙蘭只允許客戶通過兩個(gè)因素進(jìn)行篩選：

絲芙蘭的客戶可以根據(jù)品牌和價(jià)格范圍過濾頁面結(jié)果。（來源：絲芙蘭）

這是假設(shè)消費(fèi)者熟悉美容品牌。對(duì)于那些沒有這樣做的人來說，這可能會(huì)嚴(yán)重影響他們找到想要的產(chǎn)品的能力，因?yàn)樗麄冃枰ǜ嗟臅r(shí)間來考慮所有可用的選項(xiàng)。

相反，您應(yīng)該使用自己的產(chǎn)品類別和標(biāo)記為用戶提供更全面的過濾選項(xiàng)。畢竟，如果這些數(shù)據(jù)有助于你更好地組織和銷售你的庫存，那么它也應(yīng)該為你的客戶做同樣的事情。

Ulta在這方面做得很好：

Ulta用戶可以根據(jù)目的、類型、品牌等對(duì)頁面結(jié)果進(jìn)行過濾。（來源：Ulta）

這不僅在用戶友好性方面是有益的（盡管這是它的一個(gè)重要部分）。通過讓購物者創(chuàng)建更小的產(chǎn)品列表來閱讀，您還可以讓他們?cè)谶x項(xiàng)減少和頁面加載時(shí)間改進(jìn)時(shí)加快購物體驗(yàn)。

總結(jié)

總之，要注意如何設(shè)計(jì)移動(dòng)電子商務(wù)類別頁面。盡管研究表明，這些網(wǎng)頁的點(diǎn)擊率和搜索引擎的訪問量都高于單個(gè)產(chǎn)品網(wǎng)頁，但糟糕的設(shè)計(jì)選擇會(huì)讓你的網(wǎng)站設(shè)計(jì)成為例外。