如何做好分類導航設計？

如何做好分類導航設計？作為設計師的我們，在思考設計實現方案的時候一定記得從業務邏輯出發，多跟運營以及產品溝通，挖掘到更多的需求，這樣才能更有效的用設計工具解決問題。

一般說來，在購物類的app中，用戶想要到達商品詳情頁的路徑有以下3種：

●通過搜索直達商品列表；

●通過分類導航；

●通過運營設定的特定模塊到達（比如促銷活動和專區）。

這三種路徑基本上就涵蓋了用戶購物的的3種心態：

●第1種路徑可以有效滿足用戶明確知道自己要買哪個具體商品的需求；

●第2種路徑可以有效滿足用戶明確自己要買哪類商品但不知道具體要買哪個商品的需求；

●第3種路徑可以滿足用戶逛逛的心態。

分類導航設計

接下來的篇幅我們主要講關於分類導航的相關知識點。

分類是把商品按照固有屬性、適用人群、使用場景等座位區分標準，把符合統一標準的商品歸類，提高查找商品效率的一種手段。

按照分類查找商品是人類最常用到的一種思維方式和習慣，這種習慣主要來源於人們在線下購物的方式。線下商場的商品都是實體的，需要占用三維的物理空間，無法像在網上一樣可以通過搜索把商品相關信息展現在用戶的眼前，商品是不會動的，用戶需要改變自己的地理位置去走到商品所在位置，才能拿到商品，為了能夠讓用戶快速找到自己的商品，商場就會按照一定的標準給商品分類，符合同類標準的商品會放在同一片區域，百貨商場裏麵1樓是化妝品、2樓是女裝、3樓男裝、4樓箱包、5樓文體用品……在電商剛興起的時候，PC端的網站就是很大程度上借鑒了線下樓層的這種概念。

由於線下購物習慣的存在，分類導航始終是用戶查找商品的一個重要入口，如何更高效的利用分類導航帶來更多的成交，這是在電商app設計中不可忽略的一個課題。經過一些用戶調研發現，用戶在明確自己要買的商品大類但不知道具體商品型號的時候，90%的用戶會通過類目去查找商品。

使用場景

設想一個使用場景，用戶想買一些零食吃，但不知道具體買哪一種。我們來看下天貓怎麼做的？如果通過類目導航查找，在零食的類目下會有多種零食的種類幫助用戶做出選擇，經過三級類目的引導，用戶可以輕易選擇買哪個品類的零食；假如用戶通過搜索路徑，在“零食”的搜索結果頁，天貓也在頂部增加了一個分類展示，企圖通過分類引導的方式幫助用戶快速完成任務。我們再看一樣京東，京東在分類的上部分放了一個活動banner，這樣的話用戶又多了一種選擇：反正也不知道具體買什麼零食，剛好去優惠活動去看看。

頁麵設計

在分類頁麵的設計樣式上，基本上都采用了標簽＋盒子的形式，隻不過標簽的樣式采用了橫式和豎式。一級類目數量不是很多的情況下，可以優先考慮橫式標簽樣式，這樣能夠把更多的空間留給二級類目；在一級類目數量比較多的情況下，建議采用豎式標簽的樣式，這樣方便用戶快捷的進行一級類目的查找。看下麵的例子，左邊的例子采用橫式的，右邊的例子采用豎式的，在類目數量非常大的情況下，顯然右邊的樣式會更高效一點。

在一些商品數量還不是很龐大的購物app上，大部分的會在首頁的頂部欄額外增加一個標簽式的分類導航，提升分類導航的層級，更好的引導用戶利用分類導航去找到自己想要的商品，由於每個二級分類的商品數量不是很多，可以把多個二級類目的商品全部排列在一級類目的標簽頁下麵（僅通過滑動就可以切換到下一個類目，如下圖中右圖），降低了用戶的二級類目切換成本，提升用戶逛的沉浸感，增加商品成交量。

品牌因素

隨著消費水平的提高，品牌因素對用戶選購商品會占有越來越大的比重，按照品牌來分類也越來越多的出現在購物類的app中，如圖中左邊的例子，可以直接通過品牌列表來查找自己要找的品牌；右邊的例子在一級類目下麵集成了品牌推薦，這也是對用戶思路的一種引導方式。

商品屬性

在分類導航的邏輯中，按照商品屬性分類是最基本的分類方式，但並不是唯一的方式，我們可以嚐試以商品屬性分類為基礎＋其他緯度分類結合的方式，以求能夠覆蓋更多的用戶使用場景，響應更多的用戶需求；分類導航頁還漸漸地成為運營活動的展示窗口，針對類目的運營活動在這裏放置一個入口再合適不過了。例如下圖左邊的案例，增加了以商品使用場景（送禮）為緯度的分類，和以商品屬性為緯度的分類並列成為一級類目；下圖右邊的案例就針對該類目放置了專題活動（值得買好物）的入口。

經過上麵的案例可以看出來：

類目導航最高效的適用場景是：用戶有購物欲望，但無法確定所要購買具體商品型號；

按照商品屬性分類僅僅是類目導航的一個基本的維度，我們還可以嚐試從使用場景、使用人群、品牌、個性推薦等維度進行更多的分類嚐試，以便覆蓋更多的用戶場景；

在類目導航頁增加類目運營活動是提高轉化率的一個有效手段，值得嚐試；

要考慮好上下文的關係，點擊二級類目進入到商品列表以後，較為合理的篩選與排序操作就是必不可少的動作了。

作為設計師的我們，在思考設計實現方案的時候一定記得從業務邏輯出發，多跟運營以及產品溝通，挖掘到更多的需求，這樣才能更有效的用設計工具解決問題。

作者：WOWDESIGN