2021-3-15 資深UI設(shè)計(jì)者
簡(jiǎn)單地講，分類就是按照種類、等級(jí)或性質(zhì)分別歸類。
某種事物無(wú)論是按什么分類，只要是屬于同一種分類，就一定有一個(gè)共同的屬性，而這個(gè)屬性就是分類的依據(jù)。
假如手機(jī)是指“移動(dòng)便攜性的通訊設(shè)備”，那么小米手機(jī)、華為手機(jī)、蘋果手機(jī)等，雖然系統(tǒng)不同、性能配置不同、外觀設(shè)計(jì)不同，但是都可以歸類到手機(jī)，因?yàn)樗鼈兌季邆洹耙苿?dòng)便攜性的通訊設(shè)備”這一共同屬性。
再舉個(gè)很簡(jiǎn)單的例子，蘋果、梨子、芒果都可以劃分為水果，因?yàn)樗麄兙邆洹岸嘀抑饕队X為甜味和酸味，可食用”的屬性（定義來(lái)自百度百科），這些屬性是歸屬于這個(gè)分類的必要條件?；谶@個(gè)分類，我們比較容易判斷得出，生菜不是水果，因?yàn)殡m然具備可食用性，但是不具備“多汁且主要味覺為甜味和酸味”。
分類可以把雜亂的事物變得規(guī)整，把凌亂的信息按照某些維度劃分，使事物更加清晰。
前兩年風(fēng)風(fēng)火火的垃圾分類，就是一個(gè)例子。生活中所有物品廢棄后都可以成為垃圾，如果不進(jìn)行垃圾分類，處理成本高且污染環(huán)境。而垃圾分類，就是將垃圾按一定規(guī)定或標(biāo)準(zhǔn)將垃圾分類儲(chǔ)存、投放和搬運(yùn)。
既然分類是按照某種方式進(jìn)行組織，那我們需要明確了解，分類方式必須讓用戶易于理解。所以，分類本身是否合理，很大程度上取決于人們能否容易理解分類。
“簡(jiǎn)單的組織模式具有清晰的界限——是非分明。這樣，用戶才能明確知道到哪里去找自己想要的東西。因此，要多找一些用戶，詢問(wèn)他們的分類標(biāo)準(zhǔn)。如果眾口不一，或者根本就難以回答，你就有麻煩了?！?
垃圾分類很火還有一個(gè)原因，因?yàn)橛脩艚?jīng)常不知道什么物品屬于什么垃圾，這就對(duì)垃圾分類產(chǎn)生很大的阻力，網(wǎng)上一時(shí)間有了很多識(shí)別物品垃圾分類的產(chǎn)品功能。
我之前使用三星手機(jī)，每次想要在設(shè)置里面尋找某功能，都很讓人煩躁，因?yàn)槭謾C(jī)設(shè)置里定義的某功能的分類方式，與我們的認(rèn)知并不一致，這就會(huì)造成尋找時(shí)及其低效的情況，同時(shí)也會(huì)引起強(qiáng)烈不滿，這意味著，如果你忘了某事物的具體名稱，而分類方式與心理模型所認(rèn)知的分類方式不一致，你就極難找到。（不過(guò)三星很有意思的一點(diǎn)是，盡管在設(shè)置的分類項(xiàng)里找不到，但是往往能在設(shè)置項(xiàng)下方的推薦查找處找到相應(yīng)功能，這就很魔幻。）
分類本身就是將混亂的事物進(jìn)行歸類，這帶來(lái)一個(gè)很明顯優(yōu)點(diǎn)，就是便于用戶查找，只要用戶明確某事物屬于哪一分類，便能相對(duì)輕松地找到。
比如我們想要尋找某款好用的修圖軟件，但是不知道具體名稱，想要在應(yīng)用商店的眾多應(yīng)用里，尋找某款應(yīng)用，比較常用的方式就是搜索或者分類。
分類可以將應(yīng)用按不同用途進(jìn)行劃分，比如視頻、拍攝、工具、社交等。通過(guò)這些分類，可以很大程度上縮小我們的尋找范圍，這就是分類的高效性。
分類還有隱藏屬性，就是對(duì)比性。許多用戶使用分類時(shí)，也會(huì)喜歡進(jìn)行對(duì)比。
還是以修圖軟件為例子，你想要某款修圖軟件，于是你通過(guò)分類，找到了一批修圖軟件，而你本身并不知道什么軟件好。分類將相同屬性的軟件聚合到一起，一定程度上可以幫助你基于某種維度進(jìn)行對(duì)比，正好可以讓你更輕松地對(duì)比哪款軟件更適合你。
分類是否合理，還需要看分類本身是否足夠全面。理論上，我們通過(guò)分類劃分事物，則分類需要可以將這些食物完全囊括。如果分類本身無(wú)法囊括這些事物，就會(huì)造成用戶尋找時(shí)的盲區(qū)，證明這種分類方式本身不合理。
假如用戶去逛淘寶，想要找某物品，但是翻了很多分類，仍然找不到，這時(shí)大概率就不會(huì)再通過(guò)分類進(jìn)行尋找了，而這種糟糕的體驗(yàn)，也會(huì)讓用戶對(duì)這個(gè)產(chǎn)品的分類變得很失望。
剛才說(shuō)到，同一分類是圍繞同一個(gè)屬性的。但是，同一個(gè)事物，本身可以有很多種分類方式。而我們需要保證的是，事物在同一分類里的具有唯一性。
一首歌，如果按照語(yǔ)言體系維度進(jìn)行劃分，一般可以劃分為華語(yǔ)、英語(yǔ)、日語(yǔ)等。還可以按照流派維度來(lái)劃分，一般可以劃分為電子、輕音樂、搖滾、說(shuō)唱等。
我們對(duì)事物的認(rèn)識(shí)方式是立體的，事物可以被按照不同維度進(jìn)行不同分類也就不足為怪了。同一個(gè)事物，甚至同一個(gè)人，是可以有多種分類方式的。
說(shuō)完分類的許多屬性，我們聊聊在互聯(lián)網(wǎng)產(chǎn)品中，用戶會(huì)在什么場(chǎng)景下使用分類？我們又該如何設(shè)計(jì)分類功能？
首先，用戶會(huì)在什么場(chǎng)景下使用分類？從產(chǎn)品層面，分類是便于人們查找某事物的一種方式，因?yàn)橄鄬?duì)比較清晰、高效。
這里有個(gè)很關(guān)鍵的點(diǎn)，就是“查找”。也就是說(shuō)，分類的使用場(chǎng)景，偏向于人們有相對(duì)明確的目的。用戶的行為路徑是有主動(dòng)的查找需求。
互聯(lián)網(wǎng)產(chǎn)品，查找某事物，最常見的方式是搜索，瀏覽，分類。而這幾種方式都有不同點(diǎn)，分類側(cè)重于“屬性”區(qū)分。
大部分用戶使用分類時(shí)，行為特點(diǎn)是相對(duì)主動(dòng)的。此時(shí)用戶未必有十分明確的目標(biāo)，但大致知道想要什么。比如你想和朋友聚餐，不知道具體吃什么，這時(shí)候你打開了大眾點(diǎn)評(píng)，你只知道要吃中餐，這時(shí)你可以在中餐的分類里去找適合你的店。
用戶的目標(biāo)如果十分清晰，則更適合直接搜索，因?yàn)檫@比起分類查找的路徑更短也更高效。
總結(jié)一下，我們要設(shè)計(jì)分類功能，需要從用戶的角度來(lái)觀察分類這件事情。：
· 用戶主要的行為模式：人找內(nèi)容。
· 有目標(biāo)但不夠明確。
我們需要先了解分類的細(xì)分層級(jí)，分類的層級(jí)大部分不超過(guò) 4 層，但會(huì)因不同產(chǎn)品的定義不同而有所區(qū)別。
一般來(lái)說(shuō)，第一層是顆粒度相對(duì)較大的，接下來(lái)會(huì)層層在上一層的基礎(chǔ)上細(xì)化。
以京東的分類為例：
第一層：奢侈品，箱包，手機(jī)等；
第二層：手機(jī)包含：熱門品牌、手機(jī)類型、運(yùn)營(yíng)商、手機(jī)配件；
第三層：熱門品牌包含：蘋果、華為、OPPO、VIVO、小米等；
第四層：蘋果手機(jī)包含：iPhone 12、iPhone 11等；
最少的層級(jí)是兩層，比如垃圾分類：
第一層：可回收垃圾、干垃圾、濕垃圾、有害垃圾；
第二層：具體的垃圾物品。
就體驗(yàn)層面而言，建議分類層級(jí)避免超過(guò) 3、4 層，盡管本身可能會(huì)提升細(xì)分度，便于用戶查找。但由于分類方式本身必須與用戶的理解相契合，如果太多層分類，用戶需要思考目標(biāo)內(nèi)容在哪一分類。經(jīng)過(guò)幾層判斷后，才能找到目標(biāo)內(nèi)容，這對(duì)于用戶的理解成本是比較高的。
此外，太多層級(jí)不利于用戶在不夠熟悉分類方式時(shí)快速了解某分類下的具體事物。如果用戶對(duì)分類的劃分方式理解錯(cuò)誤，就需要返回繼續(xù)查找，效率低、使用門檻高。
當(dāng)然也不能盲目追求盡可能短的分類層級(jí)。兩個(gè)層級(jí)可能無(wú)法滿足查找需求，因?yàn)閮?nèi)容量龐大，所以還需要更多的過(guò)濾，需要依據(jù)產(chǎn)品類型而定。
由于目前許多產(chǎn)品都發(fā)展到相對(duì)成熟的狀態(tài)，所以設(shè)計(jì)分類功能時(shí)，一般不需要對(duì)分類方式再進(jìn)行劃分，主要原因是相同類型的產(chǎn)品，分類方式大同小異。用戶的理解習(xí)慣上，對(duì)于某事物的分類也有基本的認(rèn)知?，F(xiàn)在設(shè)計(jì)分類功能，主要是對(duì)頁(yè)面交互及視覺層級(jí)進(jìn)行重新設(shè)計(jì)和調(diào)整。
我們會(huì)梳理常見的分類交互框架，從分類入口、頁(yè)面布局等層面可以看到產(chǎn)品中分類功能的定位強(qiáng)弱。這里列舉的分類形式，會(huì)根據(jù)產(chǎn)品的主功能進(jìn)行闡述。比如電商類就是商品分類、旅游類就是地點(diǎn)分類等。
以京東 App 為例，京東把分類功能作為一個(gè)主要的頁(yè)面模塊。分類 tab 占據(jù)了 App 的第 2 個(gè)底部 tab。
使用京東的用戶，購(gòu)買的目的性相對(duì)較強(qiáng)，京東主打的就是自營(yíng)正品和快遞速度，商品與淘寶相比會(huì)少很多，但依然很全。用戶習(xí)慣上，“逛”的屬性沒有淘寶那么強(qiáng)。首頁(yè)以功能區(qū)+信息流為主，偏向于商品分發(fā)+逛信息流，而分類功能則主要滿足相對(duì)明確目的用戶需求。
京東分類頁(yè)左側(cè)為一級(jí)分類，右側(cè)為二、三級(jí)分類。側(cè)邊導(dǎo)航將分類豎排的最大優(yōu)點(diǎn)是能夠充分利用屏幕空間，提升分類類型的展示效率。適用于分類類型多、分類層級(jí)多的場(chǎng)景。右側(cè)頁(yè)面信息靈活性較高，可以配置運(yùn)營(yíng)位，如放置運(yùn)營(yíng) Banner ，且支持左右滑動(dòng) Banner 。下方一般放置二、三級(jí)分類。
右側(cè)頁(yè)面滑動(dòng)時(shí)，頂部有輔助查找二、三級(jí)分類的導(dǎo)航分類標(biāo)簽，便于用戶快速查找：
切換一級(jí)分類：這種框架切換分類的方式主要有兩種：1、點(diǎn)擊左側(cè)導(dǎo)航欄進(jìn)行切換；2、向上滑動(dòng)右側(cè)頁(yè)面進(jìn)行切換。用戶習(xí)慣上，第 1 種方式會(huì)更高效，而第 2 種切換方式會(huì)更自然，更符合手勢(shì)操作。
以【推薦分類】為例，右側(cè)【常用分類、專場(chǎng)推薦、熱門分類】都是歸屬于【推薦分類】的。為了便于用戶更好區(qū)分頁(yè)面分類層級(jí)，頁(yè)面向上滑動(dòng)時(shí)，通常會(huì)設(shè)計(jì)繼續(xù)上拉切換的提示。目的是提醒用戶，該部分已經(jīng)滑動(dòng)到底了，繼續(xù)上滑會(huì)切換到下一部分，明確區(qū)分不同分類。
上滑的另外一種模式，以宜家為例，宜家聚焦于家居用品，分類類目沒有大型電商 App 那么多。左側(cè)是一級(jí)導(dǎo)航【燈具照明、裝飾品等】，右側(cè)分類標(biāo)題與左側(cè)導(dǎo)航一一對(duì)應(yīng)，并且分類之間無(wú)明確的頁(yè)面分隔區(qū)分，所以滑動(dòng)時(shí)無(wú)需設(shè)計(jì)切換到下一部分的提示。
以上講的，右側(cè)頁(yè)面均是二、三級(jí)分類入口，并不是具體的。分類層級(jí)或類型少的情況下，右側(cè)可以嘗試放置具體內(nèi)容，比如華為應(yīng)用市場(chǎng)的處理形式。
需要注意：
1、左側(cè)導(dǎo)航占據(jù)了屏幕縱向的固定位置，從而縮減了頁(yè)面寬度。
2、由于層級(jí)多，左右側(cè)均是分類入口，用戶無(wú)法在頁(yè)面直接看到具體商品/內(nèi)容。在電商產(chǎn)品上，用戶容易區(qū)分不同分類類目下是什么商品。但可能在某些 App 上，用戶未必清晰所要尋找的內(nèi)容在哪一分類類目下，可能造成用戶流失。
3、如果沒有具體的內(nèi)容呈現(xiàn)，對(duì)于內(nèi)容、商品等分發(fā)效率也存在影響。
頂部導(dǎo)航型的優(yōu)點(diǎn)是將多級(jí)分類與具體內(nèi)容結(jié)合在一個(gè)頁(yè)面，可通過(guò)點(diǎn)擊或者滑動(dòng)切換不同分類，將觸達(dá)具體內(nèi)容的路徑盡可能減少，提升具體內(nèi)容的曝光。
以掌閱 App 為例：最高層為一級(jí)分類，可滑動(dòng)。第二層是二級(jí)分類，更精準(zhǔn)分類挑選。第三層導(dǎo)航偏向于篩選。第四層為具體內(nèi)容，用戶無(wú)需通過(guò)頁(yè)面跳轉(zhuǎn)就能查看。這種設(shè)計(jì)特點(diǎn)很明顯：內(nèi)容曝光 > 分類效率。由于一級(jí)分類不多，可以通過(guò)左右滑動(dòng)查看，避免浪費(fèi)頁(yè)面空間。二級(jí)分類類型多，采用折疊的形式將分類收起，點(diǎn)擊可以展開更多二級(jí)分類。
顯而易見的，多層分類在頂部排列，視覺效果并不佳。默認(rèn)狀態(tài)下，占用頁(yè)面頂部的空間。這種結(jié)構(gòu)，在設(shè)計(jì)時(shí)為了能夠節(jié)省頁(yè)面空間，二、三級(jí)導(dǎo)航會(huì)伴隨用戶向上滑動(dòng)的手勢(shì)折疊，提升內(nèi)容的曝光效率。用戶在滑動(dòng)場(chǎng)景下，會(huì)更聚焦于頁(yè)面具體內(nèi)容而非導(dǎo)航，所以折疊的設(shè)計(jì)比較巧妙。
這種設(shè)計(jì)由于具體內(nèi)容曝光的效率高，受到許多產(chǎn)品的青睞，適合于資訊類、內(nèi)容類等產(chǎn)品。比如微博首頁(yè)，微博側(cè)重于內(nèi)容的主動(dòng)推薦，所以將分類弱化為一行導(dǎo)航欄，頁(yè)面主體為具體內(nèi)容推薦。用戶瀏覽的內(nèi)容有相對(duì)固定的傾向，比如會(huì)喜歡看綜藝、社會(huì)、美妝等內(nèi)容，并沒有很強(qiáng)的尋找不同分類的訴求。
若用戶想要設(shè)置常用的分類頻道，可點(diǎn)擊【+】展開，查看常用頻道。由于頻道比較多，而橫滑 Tab 左右滑動(dòng)的效率較低，所以微博選擇了展示部分常用頻道。如果用戶想查看更多頻道，還能在展開的頁(yè)面里進(jìn)行配置。這種設(shè)計(jì)為分類功能的設(shè)計(jì)帶來(lái)了更多自定義性。
知乎的處理邏輯與微博一致：
淘寶的分類相比于一般電商類的產(chǎn)品，會(huì)比較特別，常見的電商類產(chǎn)品的分類模式和上面介紹的京東 App 比較相似。但淘寶已經(jīng)往全面信息流化的方向發(fā)展，為了推動(dòng)用戶在淘寶中“逛街”，甚至連分類都已經(jīng)往信息流化的方向發(fā)展。
淘寶的分類功能正在弱化，不像京東、蘇寧占據(jù)著底部第 2 個(gè) tab 的位置，而是在首屏功能區(qū)的最后一位。點(diǎn)擊后，也不再是常規(guī)的側(cè)邊導(dǎo)航，而是強(qiáng)化商品外顯。
淘寶分類頁(yè)除了上方的一、二級(jí)分類，下方都是商品推薦，向上滑動(dòng)就是瀑布流，增強(qiáng)商品而弱化分類效率。
如果用戶想看其他分類，可以通過(guò)左右滑動(dòng)切換。如果希望查看更多分類，需點(diǎn)開旁邊的”更多“按鈕，通過(guò)”更多“按鈕進(jìn)入的頁(yè)面，側(cè)重于高效展示分類。淘寶有信心這么做，一部分原因可能基于對(duì)算法推薦的信心，我發(fā)現(xiàn)不同手機(jī)看到的分類順序并不一致。
以 B 站為例，B 站的分區(qū)頁(yè)面的設(shè)計(jì)形式為展示番劇、國(guó)劇、放映等所有一級(jí)導(dǎo)航，而將細(xì)分層級(jí)隱藏到下一級(jí)頁(yè)面。
這種設(shè)計(jì)方式適合一級(jí)分類類型很多，且重點(diǎn)在于高效呈現(xiàn)這些分類類型的場(chǎng)景。二級(jí)頁(yè)面聚焦于具體的內(nèi)容，可以避免將一、二級(jí)分類堆疊在一個(gè)頁(yè)面，滿足用戶對(duì)查找分類的效率的要求，避免過(guò)載的信息量使頁(yè)面變得復(fù)雜。但顯而易見的，這種結(jié)構(gòu)不利于用戶在當(dāng)前頁(yè)面直接看到下一層級(jí)內(nèi)容。
App store 整體邏輯與 B 站一致，區(qū)別在于排列方式為列表型排列。
vivo 應(yīng)用商店也是聚焦型分類，但是會(huì)把二級(jí)分類呈現(xiàn)出來(lái)，與側(cè)邊導(dǎo)航型分類很相似，區(qū)別在于這里是整列表滑動(dòng)。
前面講到，分類是具有多種維度的。以“好好住”為例，有居室、面積、風(fēng)格、預(yù)算、特色等維度。
上面“好好住”的幾個(gè)維度之間，沒有上下層級(jí)之分，均屬于同一層級(jí)，所以層級(jí)是并列而非遞進(jìn)的，這種情況更適合采用篩選的處理形式。同樣的，由于頂部篩選類型多，占據(jù)過(guò)多的頁(yè)面空間，當(dāng)頁(yè)面上滑后，篩選可折疊以節(jié)省頁(yè)面空間，同時(shí)更聚焦與具體內(nèi)容。
設(shè)計(jì)分類功能，要先明確分類的維度，以及用戶是否容易理解，避免造成與用戶認(rèn)知習(xí)慣相沖突從而影響功能使用的情況。
整體上，通過(guò)分類功能找目標(biāo)內(nèi)容的路徑應(yīng)該避免太長(zhǎng)，因?yàn)檫@會(huì)影響到內(nèi)容曝光效率及用戶對(duì)分類之下的具體內(nèi)容的感知。
分類本身是一種信息組織與呈現(xiàn)方式，設(shè)計(jì)時(shí)需要對(duì)產(chǎn)品信息本身有足夠理解，才能有針對(duì)性地思考交互框架。分類功能的交互框架多樣，每種都有優(yōu)點(diǎn)和缺點(diǎn)，需要根據(jù)產(chǎn)品定位及訴求（優(yōu)先展示分類，還是優(yōu)先展示具體內(nèi)容）采用適合的交互形式。
需要注意的是，有的產(chǎn)品的主功能甚至沒有很明確的分類，比如淘票票，定位是買電影票，而人們看的電影具有很強(qiáng)的時(shí)效性，能不能看到電影幾乎完全取決于電影何時(shí)上映，重點(diǎn)更側(cè)重于向用戶推薦最近的電影。
以上分析了分類功能、羅列了比較常見的分類功能設(shè)計(jì)形式，希望能幫助到各位。
文章來(lái)源：站酷 作者：熱風(fēng)_
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn