許多產(chǎn)品都會(huì)涉及到“分類”功能，比如在電商產(chǎn)品中，這一功能的存在更是不容忽視。那么，當(dāng)前電商產(chǎn)品的“分類”功能都是如何設(shè)計(jì)的？這篇文章里，作者從信息架構(gòu)、操作流程、用戶體驗(yàn)三個(gè)維度對(duì)該功能進(jìn)行了體驗(yàn)拆解，一起來(lái)看看吧。

不管是電商產(chǎn)品還是其他類型的產(chǎn)品，都會(huì)涉及到“分類”功能。信息分類不僅有利于平臺(tái)對(duì)于信息的管理，同時(shí)還有利于用戶能快速找到對(duì)應(yīng)的信息。

【資料圖】

其中電商產(chǎn)品中的分類，一直都是產(chǎn)品的核心功能，在電商產(chǎn)品設(shè)計(jì)之初就一直占據(jù)底部四個(gè)tab的其中一位。

但是隨著用戶使用習(xí)慣的改變以及業(yè)務(wù)的調(diào)整，“分類”功能也在不斷的在升級(jí)。接下來(lái)我將通過(guò)信息架構(gòu)、操作流程、用戶體驗(yàn)三個(gè)維度，來(lái)帶大家分析一下當(dāng)前市面上電商產(chǎn)品的“分類”功能。

一、信息架構(gòu)

分類功能的信息架構(gòu)主要考慮兩個(gè)核心頁(yè)面，及即分類入口、分類頁(yè)。

根據(jù)不同的業(yè)務(wù)形態(tài)，分類入口的設(shè)計(jì)也有所不同，對(duì)應(yīng)的分類頁(yè)也有所差異，結(jié)合當(dāng)前市面上主流產(chǎn)品的設(shè)計(jì)，我將當(dāng)前的電商產(chǎn)品中分類功能分為了常規(guī)型、業(yè)務(wù)型、加購(gòu)型三類。

1. 常規(guī)型

常規(guī)型指的是最古早的分類功能，分類頁(yè)一般分為三個(gè)商品類目，一級(jí)類目在左側(cè)，從上到下排列，二級(jí)類目在右側(cè)，每個(gè)二級(jí)類目下以九宮格形式排列三級(jí)類目，如食品酒飲-中外名酒-啤酒。

根據(jù)不同的業(yè)務(wù)特點(diǎn)，三個(gè)類目的劃分及名稱都有所不同，但是整體架構(gòu)大致如此。

而常規(guī)型的分類入口設(shè)計(jì)，目前市面上的差異性較大，主要?dú)w納為以下幾種：

1）底部標(biāo)簽

一般適用于導(dǎo)購(gòu)屬性強(qiáng)且業(yè)務(wù)相對(duì)單一的產(chǎn)品，隨著電商產(chǎn)品不斷發(fā)展，直播、社區(qū)等功能逐漸占據(jù)底部標(biāo)簽位置，且用戶在電商產(chǎn)品中通過(guò)搜索定位商品的頻率越來(lái)越高，底部標(biāo)簽也逐漸開(kāi)始把分類的入口讓了出來(lái)。

2）頂部tab

頂部tab是將分類頁(yè)的一級(jí)類目用橫向tab的形式展示在頁(yè)面頂部。該方式不僅釋放了底部標(biāo)簽的位置，同時(shí)每個(gè)一級(jí)分類下的頁(yè)面可以展示對(duì)應(yīng)商品，縮短用戶觸達(dá)商品的路徑。

3）金剛區(qū)

分類入口放在金剛區(qū)還是比較少見(jiàn)的，金剛區(qū)一般承載大的業(yè)務(wù)入口，所以相比較下分類這種功能入口的層級(jí)就比較低，一般都放在金剛區(qū)圖標(biāo)的后面呈現(xiàn)，主要適用與強(qiáng)搜索、強(qiáng)營(yíng)銷的產(chǎn)品，分類此時(shí)僅僅是一個(gè)商品類別的承載。

4）頂部標(biāo)簽

頂部標(biāo)簽一般是將分類入口以功能入口的形式放在頁(yè)面頂部，一般跟在搜索后面，此時(shí)既不占用底部標(biāo)簽及金剛區(qū)位置，又能將入口透出方便用戶點(diǎn)擊，分類的層級(jí)相對(duì)也沒(méi)那么重。

2. 業(yè)務(wù)型

業(yè)務(wù)型分類不同于常規(guī)型，其主要特點(diǎn)在于不是以商品類型劃分，而是以業(yè)務(wù)類型。

由于業(yè)務(wù)入口眾多，所以除了在首頁(yè)金剛區(qū)展示部分入口外，其他的通過(guò)相同類型做歸類，放在分類頁(yè)中，而此時(shí)頁(yè)面也區(qū)別常規(guī)的左右布局，而大多采取上下布局的形式，一方面考慮到類別一般不多，左右布局顯得類目切換底部空白太多影響頁(yè)面信息平衡，另一方面，上下布局能方便用戶自定義金剛區(qū)的業(yè)務(wù)入口，滿足用戶的個(gè)性化需求。

3. 加購(gòu)型

加購(gòu)型主要針對(duì)的是業(yè)務(wù)單一，商品數(shù)量有限的新零售電商產(chǎn)品。由于平臺(tái)沒(méi)有過(guò)多的延展業(yè)務(wù)模塊，所以金剛區(qū)都用不同的分類入口所占據(jù)。

進(jìn)入分類頁(yè)后，除了展示一二級(jí)分類外，還會(huì)展示該分類下對(duì)應(yīng)的商品，這樣呈現(xiàn)的原因一是因?yàn)閷?duì)應(yīng)分類下的商品數(shù)量有限，用戶可以在有限的滑動(dòng)操作中查看，第二點(diǎn)主要是因?yàn)樾铝闶勰Ｊ竭€是基于線下的場(chǎng)景，用戶僅僅通過(guò)商品名稱與價(jià)格就基本能判斷是不是自己想要的商品，而無(wú)需過(guò)多的參考評(píng)價(jià)、商品詳情等信息，所以一般會(huì)加上購(gòu)物車，方便用戶直接加購(gòu)商品。

二、操作流程

分類的操作流程根據(jù)不同的類型也會(huì)有所不同，我們可以結(jié)合上面提到的幾種不同的架構(gòu)逐個(gè)分析。

1. 常規(guī)型

對(duì)于常規(guī)類型而言，當(dāng)分類入口位于底部標(biāo)簽、頂部標(biāo)簽、金剛區(qū)位置時(shí)，此時(shí)用戶點(diǎn)擊后直接跳轉(zhuǎn)到分類頁(yè)，但是如果分類入口為頂部tab的形式，操作流程就會(huì)有所不同，此時(shí)就需要注意兩點(diǎn)：

第一，增加分類入口，用戶可以直接進(jìn)入分類頁(yè)進(jìn)行選擇而無(wú)需通過(guò)切換選擇某個(gè)分類，提升用戶查找分類的效率；第二，是否支持手勢(shì)滑動(dòng)切換，常規(guī)的tab切換為了方便用戶操作，除了點(diǎn)擊切換，還支持左右滑動(dòng)屏幕切換，但是此時(shí)分類tab在首頁(yè)頂部，首頁(yè)可能還有banner位、金剛區(qū)等位置可滑動(dòng)切換，所以為了減少用戶的誤操作，這里最好僅支持點(diǎn)擊切換的形式。

另外一個(gè)操作流程就是用戶點(diǎn)擊某個(gè)三級(jí)類目進(jìn)入到對(duì)應(yīng)類目的商品瀑布流，此時(shí)頁(yè)面承載包括兩類，第一類就是默認(rèn)以該類目進(jìn)行搜索后展示的搜索結(jié)果頁(yè)，如葡萄酒，而另一種就是以類目tab展示，用戶可以在該頁(yè)面切換其他三級(jí)類目，如白酒、啤酒等。

該選擇哪種需要結(jié)合具體的業(yè)務(wù)去做考量，但是筆者基于自身使用習(xí)慣與場(chǎng)景，覺(jué)得類目tab的形式能更好的解決當(dāng)前的訴求。

2. 業(yè)務(wù)型

對(duì)于業(yè)務(wù)型而言，一般是對(duì)業(yè)務(wù)類型做分類，此時(shí)需要根據(jù)業(yè)務(wù)類型做考量，當(dāng)業(yè)務(wù)類型不是很多時(shí)，沒(méi)必要做相關(guān)分類，就不用業(yè)務(wù)分類頁(yè)去承載，用戶可以通過(guò)滑動(dòng)金剛區(qū)查看更多業(yè)務(wù)入口；但是當(dāng)業(yè)務(wù)類型過(guò)多時(shí)，此時(shí)就需要將所有業(yè)務(wù)按照類型分類，并展示在分類頁(yè)中。

一般為了滿足用戶的個(gè)性化需求，都會(huì)支持用戶自定義首頁(yè)金剛區(qū)的業(yè)務(wù)入口，如支付寶、餓了么等，此時(shí)就需要補(bǔ)充管理首頁(yè)入口的功能與流程。

3. 加購(gòu)型

對(duì)于加購(gòu)型而言，由于一級(jí)分類都展示在金剛區(qū)，所以任何一個(gè)入口點(diǎn)擊后都會(huì)進(jìn)入到分類頁(yè)，而由于一般此類電商平臺(tái)的商品數(shù)量有限，且加購(gòu)意愿強(qiáng)，所以區(qū)別于常規(guī)性的分類，一級(jí)分類一般放在頂部，二級(jí)分類在左側(cè)，這樣能盡可能方便用戶做挑選，同時(shí)為了減少用戶對(duì)于一級(jí)分類的滑動(dòng)選擇，一般會(huì)加入展開(kāi)操作，方便用戶快速選擇一級(jí)分類。

除此以外，為了方便用戶快速加購(gòu)，我們?cè)诿總€(gè)分類商品下都放了加購(gòu)入口，為了方便用戶能快速結(jié)算，一般會(huì)在該頁(yè)面放置進(jìn)入“購(gòu)物車”的入口，那么購(gòu)物車的入口該放在哪里呢？

目前市面上大部分購(gòu)物車入口都放在右上角，展示對(duì)應(yīng)的加購(gòu)數(shù)量，用戶加購(gòu)商品后會(huì)有視覺(jué)引導(dǎo)用戶到購(gòu)物車入口，但是由于用戶加購(gòu)操作大部分發(fā)生在屏幕中部，所以右上角的位置不方便用戶點(diǎn)擊；那如果以懸浮窗形式放在屏幕下半?yún)^(qū)，雖然方便用戶進(jìn)入購(gòu)物車頁(yè)面結(jié)算，但是懸浮窗會(huì)影響一部分操作。

我們可以從業(yè)務(wù)目的與用戶使用路徑考量，加購(gòu)的目的最終是為了結(jié)算，那如果我們?cè)谠擁?yè)面的下方展示加購(gòu)數(shù)量以及當(dāng)前的金額，用戶可以直接喚起結(jié)算，是不是就不用跳轉(zhuǎn)到購(gòu)物車頁(yè)面了呢？

三、用戶體驗(yàn)

用戶使用分類功能，就是希望通過(guò)不同類型的劃分，找到對(duì)應(yīng)的類型，瀏覽或者選購(gòu)對(duì)應(yīng)的商品，所以分類功能的用戶體驗(yàn)，就需要聚焦在提升用戶查找品類與商品的效率上來(lái)。

1. 內(nèi)容適配

用戶進(jìn)入分類頁(yè)的目的是想瀏覽對(duì)應(yīng)類目下的商品，所以提升用戶目標(biāo)商品的曝光意味著能帶來(lái)更高的商品轉(zhuǎn)化。內(nèi)容適配則是根據(jù)用戶過(guò)往的行為數(shù)據(jù)，通過(guò)一組規(guī)則推薦用戶商品，這套邏輯適用于電商產(chǎn)品的各個(gè)模塊與路徑，分類功能也不例外。

在常規(guī)型的分類功能中，一級(jí)分類有時(shí)候按照默認(rèn)排序，而有時(shí)候則根據(jù)用戶行為動(dòng)態(tài)排序，比如京東，分類tab則會(huì)根據(jù)你的行為數(shù)據(jù)動(dòng)態(tài)調(diào)整；而對(duì)于默認(rèn)排序的產(chǎn)品，一般也會(huì)在一級(jí)類目上加上“精選”，用來(lái)挑選出與用戶適配度高的分類，方便用戶觸達(dá)。

而內(nèi)容適配的另一種形式則不是根據(jù)用戶行為數(shù)據(jù)，而是根據(jù)商品屬性推薦。比如在加購(gòu)型分類中，大多是新零售商超產(chǎn)品，此時(shí)當(dāng)用戶在加購(gòu)某個(gè)商品時(shí)，會(huì)根據(jù)其屬性推薦相關(guān)商品。如當(dāng)加購(gòu)羊肉卷，系統(tǒng)判斷用戶目的是“吃火鍋”，此時(shí)推薦你相關(guān)的火鍋食材，減少用戶加購(gòu)路徑，提升商品轉(zhuǎn)化。

2. 場(chǎng)景劃分

分類是電商產(chǎn)品針對(duì)自身商品做的劃分與歸類，但是可以根據(jù)業(yè)務(wù)屬性增加相關(guān)分類的劃分場(chǎng)景，比如大部分電商產(chǎn)品根據(jù)人群分為了男生、女生，以區(qū)分不同性別帶來(lái)的不同分類訴求，而另一些產(chǎn)品如宜家，則是根據(jù)自身業(yè)務(wù)還區(qū)分了房間、設(shè)計(jì)工具，用來(lái)滿足不同業(yè)務(wù)屬性下的分類需求。

3. 操作連續(xù)

用戶在使用產(chǎn)品時(shí)，操作遇到的阻力越小，停留的時(shí)間越長(zhǎng)，比如抖音的切換視頻方式，采用上滑下滑的方式就比點(diǎn)擊更方便。在常規(guī)分類頁(yè)中，用戶在查看對(duì)應(yīng)一級(jí)類目下的子分類時(shí)，當(dāng)滑到最后，目前市面上有幾種處理方式：第一，阻斷操作，用戶滑到最底部就無(wú)法再進(jìn)一步上滑操作；第二，默認(rèn)跳轉(zhuǎn)，用戶滑到最底部再上滑操作，直接跳轉(zhuǎn)到下一個(gè)一級(jí)類目下；第三，給與提示，告知用戶上滑跳轉(zhuǎn)到下個(gè)類目。

阻斷操作影響了用戶的操作連貫性，一般不可取，比起直接跳轉(zhuǎn)，給予對(duì)應(yīng)提示后跳轉(zhuǎn)能給用戶有個(gè)操作預(yù)期，體驗(yàn)上會(huì)更加友好。

四、總結(jié)

以上，就是筆者根據(jù)電商產(chǎn)品的使用感受，分享的一篇關(guān)于分類功能體驗(yàn)分析的文章，經(jīng)驗(yàn)有限，歡迎大家批評(píng)指正與交流。

本文由@一個(gè)青橙子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議