具有大量庫存商品，或是涉及復(fù)雜產(chǎn)品的網(wǎng)站，通常會(huì)提供產(chǎn)品類別頁面，或者是產(chǎn)品列表頁面。 類別頁面就像是特定產(chǎn)品類別的主頁。他們可能不提供完整的產(chǎn)品列表，但可能會(huì)展示一些產(chǎn)品并提供產(chǎn)品子類別的鏈接。這種頁面本質(zhì)上是用戶在進(jìn)入產(chǎn)品列表頁面的過程中經(jīng)過的一個(gè)中間步驟，讓用戶不用一下子面對海量的分類信息。

Eddie Bauer 在其全局導(dǎo)航中， WOMEN 鏈接將用戶帶到了這個(gè)傳統(tǒng)的類別頁面。這些頁面通常包含產(chǎn)品照片和營銷內(nèi)容，以及促銷子類別（例如SHOP FLANNEL 和 SHOP FLEECE ）的鏈接。

類別頁面通常提供以下組合：

• 類別的描述、解釋及其包含的內(nèi)容
• 帶有描述和代表性圖像的子類別菜單
• 推銷該類別中的特色產(chǎn)品

并非所有產(chǎn)品都需要專門的類別頁面。 不過這種情況有時(shí)候會(huì)讓用戶非常惱火，因?yàn)橛脩粜枰ㄟ^額外的步驟才能查看特定類別的產(chǎn)品。

許多網(wǎng)站完全省略了類別頁面，而是將用戶直接引導(dǎo)到產(chǎn)品列表頁面，在那里他們可以借助過濾篩選的方式來瀏覽產(chǎn)品。

Bonobos 網(wǎng)站上的 Pants & Jeans 鏈接不是類別頁面，而是將用戶直接帶到產(chǎn)品的列表頁面。這種方法通常效果很好，因?yàn)樗M快向客戶展示了他們可選的選擇。

雖然本文偏向于電商網(wǎng)站中的類別頁面的探討，但實(shí)際上這些頁面也用于其他類型的網(wǎng)站，特別是新聞資訊和教育類的網(wǎng)站。這些建議也可能適用于這些情況，但最好根據(jù)領(lǐng)域?qū)δ愕脑O(shè)計(jì)進(jìn)行測試，以防你的用戶需求與購物型用戶的需求不同。

何時(shí)使用類別頁面

如果您的電商網(wǎng)站所涉及的產(chǎn)品非常復(fù)雜，以至于您的許多客戶需要經(jīng)過學(xué)習(xí)之后才會(huì)使用，才能正確地過濾和比較產(chǎn)品，那么類別頁面就是一個(gè)好主意了 。此外，具有 大類別和大量子類別的網(wǎng)站，有時(shí)會(huì)提供某種類型的獨(dú)立類別頁面，以幫助用戶找到有意義的起點(diǎn)。

不過，你可以決定讓特定的產(chǎn)品具有類別頁面，而其他的則不具有獨(dú)立的類別頁面。例如，Lululemon 主打的健身服裝產(chǎn)品（大多不需要分類頁面），同時(shí)也銷售一種名為 MIRROR 的昂貴的家庭健身產(chǎn)品，后者需要更詳細(xì)的解釋，因此有自己的分類頁面。

Lululemon 為其復(fù)雜的家庭健身產(chǎn)品 MIRROR 提供了一個(gè)單獨(dú)的類別頁面，但并未為其所有產(chǎn)品類別使用類別頁面。

闡釋復(fù)雜產(chǎn)品

類別頁面可以對電子產(chǎn)品等復(fù)雜產(chǎn)品起到解釋作用 。如果用戶還不了解產(chǎn)品選項(xiàng)，他們可能還沒有準(zhǔn)備好單擊單個(gè)產(chǎn)品。與隨機(jī)點(diǎn)擊不同的產(chǎn)品相比，類別頁面為他們提供了一種更有效地了解各種潛在相關(guān)產(chǎn)品功能的途徑。

例如，智能手表通常會(huì)有不同的功能和價(jià)格范圍，著名智能手表品牌 Fossil 在自己的網(wǎng)站提供了一個(gè)類別頁面，列出了不同類型的智能手表，并提供「立即購買」、「了解更多」 以及「比較」的選項(xiàng)。

Fossil 的 智能手表分類頁面解釋了不同型號的智能手表的功能和性能差異

子類別的特征

購物型用戶可能不需要通過網(wǎng)站來學(xué)習(xí)服裝或食品等熟悉商品的內(nèi)容和知識(shí)。然而，一個(gè)擁有大量產(chǎn)品和內(nèi)容，并組織成許多子類別的網(wǎng)站，仍然可以從類別頁面中受益——尤其當(dāng)子類別頁面可以通過獨(dú)特的圖文清楚地介紹產(chǎn)品的時(shí)候。這比一長串標(biāo)簽文本更容易方便用戶了解產(chǎn)品，此外它還可以為國外的購物者提供幫助。

REI 銷售用于各種戶外活動(dòng)的許多產(chǎn)品，從皮劃艇到登山用具。如果點(diǎn)擊網(wǎng)站的全局導(dǎo)航中Camp & Hike 鏈接之后，頁面跳轉(zhuǎn)到一個(gè)包含所有露營產(chǎn)品的列表面，用戶可能會(huì)不知所措，而且無趣。相反，REI 讓鏈接指向到一個(gè)傳統(tǒng)的類別頁面，而不是列表，這個(gè)頁面包括：

• 子類別 (帳篷, 睡袋 , 遠(yuǎn)足)
• 該類別中最受歡迎的品牌（Osprey、YETI）
• 與類別相關(guān)的季節(jié)性信息（寒冷天氣徒步旅行）
• 建議（如何選擇睡墊、食物儲(chǔ)存和處理的技巧）

REI 使用傳統(tǒng)的類別頁面來幫助購物者在龐大的 Camp & Hike 類別中找到適合自己的產(chǎn)品。

不要強(qiáng)迫客戶瀏覽類別頁面

如果你的網(wǎng)站確實(shí)提供了傳統(tǒng)的類別頁面，請同樣為用戶提供了避免進(jìn)入這些頁面的簡單方法，并在他們愿意時(shí)，也能直接轉(zhuǎn)到產(chǎn)品列表頁面。為你的站點(diǎn)的全局導(dǎo)航，提供指向子類別產(chǎn)品的列表頁面（比如使用超大導(dǎo)航 Megamenu ），以及指向傳統(tǒng)類別頁面的鏈接。

可能還需要確保搜索結(jié)果始終指向產(chǎn)品選項(xiàng)，而不是將購物者引導(dǎo)到類別頁面。在我們的研究中，Zappos 會(huì)將某些搜索結(jié)果指向到以品牌為中心的類別頁面，而不是鏈接到該品牌的產(chǎn)品。

在用戶測試的時(shí)候，一位參與者看到孩子后很生氣，因?yàn)樗阉魉钕矚g的品牌 Sam Edelman 時(shí)，她進(jìn)入了一個(gè)具有促銷感的傳統(tǒng)類別頁面，而不是指向她要的產(chǎn)品。對她來說，這感覺像是一個(gè)不必要的額外步驟。

「當(dāng)我進(jìn)入 Sam Edelman 時(shí)，我想看到結(jié)果。我不希望打開一個(gè)品牌的分類頁面。」

當(dāng)用戶在 Zappos.com 上搜索「sam edelman」時(shí)，她很惱火地看到一個(gè)沒有列出任何單個(gè)產(chǎn)品的品牌類別頁面。

當(dāng)用戶搜索時(shí)，他們希望立即看到結(jié)果。

混合：在產(chǎn)品列表頁面上提供類別信息 

為了避免傳統(tǒng)的類別頁面的缺陷，并提供對產(chǎn)品列表的快速訪問，許多電商網(wǎng)站現(xiàn)在在主產(chǎn)品列表頁面中，結(jié)合混用了少量的類別有頁面的設(shè)計(jì)——例如簡短的描述性內(nèi)容，或簡短的子類別菜單。

在女士緊身褲 產(chǎn)品列表頁面上，Lululemon 包含了一些傳統(tǒng)會(huì)在類別頁面上顯示的元素：營銷內(nèi)容（藍(lán)綠色框標(biāo)注的區(qū)域）和對不同緊身褲樣式的解釋，以及指向這些子類別的鏈接（以黃色框標(biāo)注的區(qū)域）。

這種混合呈現(xiàn)方法效果很好，因?yàn)閷γ枋龌蜃宇悇e菜單感興趣的用戶可以暫停并閱讀它，而不感興趣的用戶可以簡單地跳過，直接快速訪問實(shí)際的產(chǎn)品列表。

說明內(nèi)容

一些電商網(wǎng)站在 產(chǎn)品 Banner 旁邊加入營銷的內(nèi)容和元素，這些元素傳達(dá)有用的信息而不會(huì)減慢用戶的速度，就像傳統(tǒng)的類別頁面一樣。

高級珠寶零售商 VRAI 使用混合式設(shè)計(jì)，在一些產(chǎn)品列表頁面中包含類別頁面樣式元素。它的一個(gè)產(chǎn)品列表頁面當(dāng)中，圓形訂婚戒指頁面中，包含了帶有價(jià)格的產(chǎn)品列表，以及解釋性的內(nèi)容。頂部的文字描述了此類產(chǎn)品的一般特征。側(cè)面板提供了有關(guān)該類別中所有產(chǎn)品共有特征的說明，以及更多詳細(xì)信息。

在這個(gè)列表頁面中，VRAI 包含了促銷內(nèi)容（以藍(lán)綠色框標(biāo)注）和說明性內(nèi)容（以黃色框標(biāo)注）。其中所呈現(xiàn)的圖文內(nèi)容是典型的傳統(tǒng)類別頁面的特征（沒有產(chǎn)品列表）。

子導(dǎo)航

一些零售類的網(wǎng)站不使用類別頁面，而是提供指向產(chǎn)品列表頁面上的子類別的導(dǎo)航鏈接。這些鏈接（這是最初發(fā)明類別頁面的原因之一）讓用戶輕松瀏覽網(wǎng)站的產(chǎn)品庫存。

例如，Ann Taylor 的 褲子 列表頁面顯示了不同款式褲子的類別，并提供指向該子類別的鏈接。這些內(nèi)容直接顯示在產(chǎn)品列表上方，幫助用戶了解可用類別項(xiàng)目，并且直接導(dǎo)航到這些類別。

Ann Taylor 的網(wǎng)站在 褲子 的列表頁面的頂部，加入了不同褲子款式和合身度的說明和圖片，以便用戶了解其中的差異。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.izc.net.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)