分類，是指將商品根據種類、目標人群、使用場景等某一統一規則進行整理歸類。導航則是告知用戶在哪裡，可以去到什麼地方以及如何到達那裡的方式。在線下商場里，會將符合同樣標準的商品會放在同一片區。我們發現，即使是不同的百貨商場里，商品的劃分區域也是相似的。如，一樓是化妝品；二、三樓是女裝；四樓賣男裝；五樓賣箱包和文體用品……而在每一層的電梯區域，指示牌會告訴用戶他們所處的位置，並且告知他們不同樓層是什麼商品的片區。

受到線下商場的分類導航的啟發，在線電商也對不同的商品設計了不同的分類。合理的分類導航，能夠提高用戶查找到目標商品的效率。在本篇文章中，我們將總結移動端常見的幾種分類導航的設計。

第一種 導航與分類同頁展示 且含 導航定位(電梯)

電梯，也稱之為導航定位，是指在同一個頁面中，在不同類別內容的起始位置設定了錨點，當用戶選擇了某一分類，頁面能快速定位到該分類下。 導航位置可在頁面左側，也可在頁面頂部。

電梯導航在頁面左側

一級分類導航在頁頁面布局左側，且豎式排列。所有子分類平鋪展示在頁面布局右側。這種展示方式往往應用在分類層級為2級，且二級分類內容含圖文，一屏僅能展示1-2個分類的子分類的情況下。

優點

1. 一屏內最多可展示10個左右的一級分類，一級分類較少的情況下，可直觀地總覽全部一級分類。
2. 由於每個一級分類下的二級分類較多，用戶可通過無限滑動的方式瀏覽所有內容，也可通過電梯導航快速切換和定位到不同的一級分類下，兩種方式相結合，用戶操作更便捷。

缺點

1. 一個頁面承載的內容過多，加重認知負載。
2. 由於頁面右側會展示所有的二級分類，若二級分類的數量過多，會導致頁面變慢；若做分頁，往下滑動時會有卡頓情況出現。
3. 若一級分類下的二級分類較少，一屏里會展示不同一級分類下的二級分類，但左側的一級分類會定位到第一個二級分類對應的一級分類下，會對用戶的認知造成誤解，以為右側都是同一個一級分類下的內容。因此。二級分類較少且在一屏里可以展示的情況下，不建議採取這種展示方式。

電梯導航在頁面頂部

一級分類導航固定展示在頂部，全部子分類垂直展示在一級分類導航下方。一級分類導航可通過導航定位快速切換並定位到某個一級分類的子分類下。

優點

1. 由於一級分類導航在頂部，子分類垂直展示，視覺區間更廣，用戶可以更加專註去關注子分類內容，同時操作區域更開闊，能承載不同的操作。如圖示意，除了可以點擊分類名稱進入結果頁，也可以點擊」更多「查看更多。

缺點

1. 受制於屏幕寬度影響，一級導航最多只能展示6個，用戶需要進一步滑動導航去瀏覽更多內容，具有一定隱蔽性；對於安卓用戶來說，左滑容易誤操作成返回操作。若一級分類較多，不建議使用這種布局。

第二種 導航與分類同頁展示

與第一種導航相比，這種分類導航沒有導航定位，可展示的分類最多可為3級。導航位置可在頁面左側，也可在頁面頂部。

優點

1. 明確分界，用戶在滑動的時候， 選中了某一分類後，往下滑動， 看到的只會是同一個一級分類下的內容。若子分類層級較多，展示會更加明確。
2. 通過導航切換不同的一級分類，向伺服器請求對應數據，若同一分類下數據過多，頁面不會負載太重。

缺點

1. 若一級分類下的子分類較少，想要查看不同一級分類的內容，需要用戶頻繁操作。因此，分類較少的情況下，不適用於這種展示方式。

第三種 導航與分類在不同頁面展示

在首頁展示重要的一級分類，將不重要的一級分類放在在」全部「分類下，點擊」全部「進入全部分類頁面。分類頁面中無導航，所有分類平鋪展示。

優點

1. 首頁突出核心，可對重要或常用的一級分類突出展示。
2. 目標用戶可以更有針對性地進行篩選，選擇了感興趣的目標分類後，不會被不相干的內容所干擾。

缺點

1. 隱藏了部分一級分類，若用戶不去探索，可能無法察覺到其餘的一級分類。
2. 分類總覽頁面，用戶只能從上往下線性查找，查找效率低。
3. 若每個分類下的數量較多，且所有內容無法在兩屏內展示完全，用戶可能失去耐心探索到底部，導致即使有用戶感興趣的內容，用戶也未找到的情況。

參考資料

A UI Design Language?

ant.design移動端產品設計之分類管理?

baijiahao.baidu.com淺析移動端電商分類導航設計?

baijiahao.baidu.com
推薦閱讀：