2022-5-17 ui設計分享達人
具有大量庫存商品，或是涉及復雜產品的網站，通常會提供產品類別頁面，或者是產品列表頁面。 類別頁面就像是特定產品類別的主頁。他們可能不提供完整的產品列表，但可能會展示一些產品并提供產品子類別的鏈接。這種頁面本質上是用戶在進入產品列表頁面的過程中經過的一個中間步驟，讓用戶不用一下子面對海量的分類信息。
Eddie Bauer 在其全局導航中， WOMEN 鏈接將用戶帶到了這個傳統的類別頁面。這些頁面通常包含產品照片和營銷內容，以及促銷子類別（例如SHOP FLANNEL 和 SHOP FLEECE ）的鏈接。
類別頁面通常提供以下組合：
并非所有產品都需要專門的類別頁面。 不過這種情況有時候會讓用戶非常惱火，因為用戶需要通過額外的步驟才能查看特定類別的產品。
許多網站完全省略了類別頁面，而是將用戶直接引導到產品列表頁面，在那里他們可以借助過濾篩選的方式來瀏覽產品。
Bonobos 網站上的 Pants & Jeans 鏈接不是類別頁面，而是將用戶直接帶到產品的列表頁面。這種方法通常效果很好，因為它盡快向客戶展示了他們可選的選擇。
雖然本文偏向于電商網站中的類別頁面的探討，但實際上這些頁面也用于其他類型的網站，特別是新聞資訊和教育類的網站。這些建議也可能適用于這些情況，但最好根據領域對你的設計進行測試，以防你的用戶需求與購物型用戶的需求不同。
如果您的電商網站所涉及的產品非常復雜，以至于您的許多客戶需要經過學習之后才會使用，才能正確地過濾和比較產品，那么類別頁面就是一個好主意了 。此外，具有 大類別和大量子類別的網站，有時會提供某種類型的獨立類別頁面，以幫助用戶找到有意義的起點。
不過，你可以決定讓特定的產品具有類別頁面，而其他的則不具有獨立的類別頁面。例如，Lululemon 主打的健身服裝產品（大多不需要分類頁面），同時也銷售一種名為 MIRROR 的昂貴的家庭健身產品，后者需要更詳細的解釋，因此有自己的分類頁面。
Lululemon 為其復雜的家庭健身產品 MIRROR 提供了一個單獨的類別頁面，但并未為其所有產品類別使用類別頁面。
類別頁面可以對電子產品等復雜產品起到解釋作用 。如果用戶還不了解產品選項，他們可能還沒有準備好單擊單個產品。與隨機點擊不同的產品相比，類別頁面為他們提供了一種更有效地了解各種潛在相關產品功能的途徑。
例如，智能手表通常會有不同的功能和價格范圍，著名智能手表品牌 Fossil 在自己的網站提供了一個類別頁面，列出了不同類型的智能手表，并提供「立即購買」、「了解更多」 以及「比較」的選項。
Fossil 的 智能手表分類頁面解釋了不同型號的智能手表的功能和性能差異
購物型用戶可能不需要通過網站來學習服裝或食品等熟悉商品的內容和知識。然而，一個擁有大量產品和內容，并組織成許多子類別的網站，仍然可以從類別頁面中受益——尤其當子類別頁面可以通過獨特的圖文清楚地介紹產品的時候。這比一長串標簽文本更容易方便用戶了解產品，此外它還可以為國外的購物者提供幫助。
REI 銷售用于各種戶外活動的許多產品，從皮劃艇到登山用具。如果點擊網站的全局導航中Camp & Hike 鏈接之后，頁面跳轉到一個包含所有露營產品的列表面，用戶可能會不知所措，而且無趣。相反，REI 讓鏈接指向到一個傳統的類別頁面，而不是列表，這個頁面包括：
REI 使用傳統的類別頁面來幫助購物者在龐大的 Camp & Hike 類別中找到適合自己的產品。
如果你的網站確實提供了傳統的類別頁面，請同樣為用戶提供了避免進入這些頁面的簡單方法，并在他們愿意時，也能直接轉到產品列表頁面。為你的站點的全局導航，提供指向子類別產品的列表頁面（比如使用超大導航 Megamenu ），以及指向傳統類別頁面的鏈接。
可能還需要確保搜索結果始終指向產品選項，而不是將購物者引導到類別頁面。在我們的研究中，Zappos 會將某些搜索結果指向到以品牌為中心的類別頁面，而不是鏈接到該品牌的產品。
在用戶測試的時候，一位參與者看到孩子后很生氣，因為搜索她最喜歡的品牌 Sam Edelman 時，她進入了一個具有促銷感的傳統類別頁面，而不是指向她要的產品。對她來說，這感覺像是一個不必要的額外步驟。
「當我進入 Sam Edelman 時，我想看到結果。我不希望打開一個品牌的分類頁面?！?
當用戶在 Zappos.com 上搜索「sam edelman」時，她很惱火地看到一個沒有列出任何單個產品的品牌類別頁面。
當用戶搜索時，他們希望立即看到結果。
為了避免傳統的類別頁面的缺陷，并提供對產品列表的快速訪問，許多電商網站現在在主產品列表頁面中，結合混用了少量的類別有頁面的設計——例如簡短的描述性內容，或簡短的子類別菜單。
在女士緊身褲 產品列表頁面上，Lululemon 包含了一些傳統會在類別頁面上顯示的元素：營銷內容（藍綠色框標注的區域）和對不同緊身褲樣式的解釋，以及指向這些子類別的鏈接（以黃色框標注的區域）。
這種混合呈現方法效果很好，因為對描述或子類別菜單感興趣的用戶可以暫停并閱讀它，而不感興趣的用戶可以簡單地跳過，直接快速訪問實際的產品列表。
一些電商網站在 產品 Banner 旁邊加入營銷的內容和元素，這些元素傳達有用的信息而不會減慢用戶的速度，就像傳統的類別頁面一樣。
高級珠寶零售商 VRAI 使用混合式設計，在一些產品列表頁面中包含類別頁面樣式元素。它的一個產品列表頁面當中，圓形訂婚戒指頁面中，包含了帶有價格的產品列表，以及解釋性的內容。頂部的文字描述了此類產品的一般特征。側面板提供了有關該類別中所有產品共有特征的說明，以及更多詳細信息。
在這個列表頁面中，VRAI 包含了促銷內容（以藍綠色框標注）和說明性內容（以黃色框標注）。其中所呈現的圖文內容是典型的傳統類別頁面的特征（沒有產品列表）。
一些零售類的網站不使用類別頁面，而是提供指向產品列表頁面上的子類別的導航鏈接。這些鏈接（這是最初發明類別頁面的原因之一）讓用戶輕松瀏覽網站的產品庫存。
例如，Ann Taylor 的 褲子 列表頁面顯示了不同款式褲子的類別，并提供指向該子類別的鏈接。這些內容直接顯示在產品列表上方，幫助用戶了解可用類別項目，并且直接導航到這些類別。
Ann Taylor 的網站在 褲子 的列表頁面的頂部，加入了不同褲子款式和合身度的說明和圖片，以便用戶了解其中的差異。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務