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

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

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

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

并非所有產(chǎn)品都需要專門的類別頁面。 不過這種情況有時候會讓用戶非常惱火，因為用戶需要通過額外的步驟才能查看特定類別的產(chǎn)品。

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

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

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

何時使用類別頁面

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

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

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

闡釋復雜產(chǎn)品

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

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

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

子類別的特征

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

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

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

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

不要強迫客戶瀏覽類別頁面

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

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

在用戶測試的時候，一位參與者看到孩子后很生氣，因為搜索她最喜歡的品牌 Sam Edelman 時，她進入了一個具有促銷感的傳統(tǒng)類別頁面，而不是指向她要的產(chǎn)品。對她來說，這感覺像是一個不必要的額外步驟。

「當我進入 Sam Edelman 時，我想看到結(jié)果。我不希望打開一個品牌的分類頁面?！?

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

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

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

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

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

這種混合呈現(xiàn)方法效果很好，因為對描述或子類別菜單感興趣的用戶可以暫停并閱讀它，而不感興趣的用戶可以簡單地跳過，直接快速訪問實際的產(chǎn)品列表。

說明內(nèi)容

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

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

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

子導航

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

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

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

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

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