編者按：這篇來(lái)自nngroup 的文章探討的是如今的現(xiàn)代電商類網(wǎng)站（以及其他復(fù)雜的網(wǎng)站中）導(dǎo)航設(shè)計(jì)的問題，對(duì)比了傳統(tǒng)的導(dǎo)航模式和混合式導(dǎo)航的使用場(chǎng)景和實(shí)際優(yōu)劣，為設(shè)計(jì)這類網(wǎng)站提供了一個(gè)相對(duì)完整的設(shè)計(jì)思路：

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

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

類別頁(yè)面通常提供以下組合：

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

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

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

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

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

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

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

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

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

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

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

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

Fossil 的 智能手表分類頁(yè)面解釋了不同型號(hào)的智能手表的功能和性能差異

子類別的特征

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

說(shuō)明內(nèi)容

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

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

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

子導(dǎo)航

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

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

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

結(jié)語(yǔ)

盡管類別頁(yè)面可以提供有用的上下文信息，但它們也同樣為用戶增加了一個(gè)額外的跳轉(zhuǎn)步驟，用戶必須先瀏覽它們，才能看到實(shí)際的產(chǎn)品。當(dāng)類別頁(yè)面上的內(nèi)容沒有幫助時(shí)，用戶可能會(huì)對(duì)它們做出負(fù)面的反應(yīng)。

因此，僅在真正需要時(shí)才使用傳統(tǒng)類別頁(yè)面非常重要，而通常用于復(fù)雜產(chǎn)品或有許多子類別的網(wǎng)站，在這種情況下，還得允許用戶通過(guò)全局導(dǎo)航中的產(chǎn)品子類別鏈接，來(lái)跳過(guò)它們。