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

專(zhuān)注于為中小企業(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)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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

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

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

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

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

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

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

讓我們開(kāi)始吧：

1. 只包含頁(yè)面上的基本元素

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

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

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

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

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

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

過(guò)濾選項(xiàng)，

排序設(shè)置，

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

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

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

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

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

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

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

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

問(wèn)題是這樣的：

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

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

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

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

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

為什么百思買(mǎi)要這么做？你為什么要這么做？

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

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

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

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

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

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

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

價(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)。如果它沒(méi)有增加任何價(jià)值（換句話(huà)說(shuō)，它并沒(méi)有使從另一個(gè)產(chǎn)品中選擇一個(gè)產(chǎn)品變得更容易），那么就不要使用它。

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

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

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

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

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

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

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

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

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

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

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

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

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

在Booking.com上：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

用戶(hù)可以調(diào)整沃爾瑪?shù)姆诸?lèi)頁(yè)面，以在列表布局中顯示產(chǎn)品。（來(lái)源：沃爾瑪）

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

最后要考慮的一件事：

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

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

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

絲芙蘭的客戶(hù)可以改變分類(lèi)頁(yè)面的排序方式。（來(lái)源：絲芙蘭）

說(shuō)到過(guò)濾器，不要吝嗇。

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

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

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

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

Ulta在這方面做得很好：

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

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

總結(jié)

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