分類功能應該如何設計?

2021-3-15    資深UI設計者

什么是分類

簡單地講,分類就是按照種類、等級或性質分別歸類。


分類的特點

1、共同性:

某種事物無論是按什么分類,只要是屬于同一種分類,就一定有一個共同的屬性,而這個屬性就是分類的依據(jù)。

假如手機是指“移動便攜性的通訊設備”,那么小米手機、華為手機、蘋果手機等,雖然系統(tǒng)不同、性能配置不同、外觀設計不同,但是都可以歸類到手機,因為它們都具備“移動便攜性的通訊設備”這一共同屬性。


再舉個很簡單的例子,蘋果、梨子、芒果都可以劃分為水果,因為他們具備“多汁且主要味覺為甜味和酸味,可食用”的屬性(定義來自百度百科),這些屬性是歸屬于這個分類的必要條件。基于這個分類,我們比較容易判斷得出,生菜不是水果,因為雖然具備可食用性,但是不具備“多汁且主要味覺為甜味和酸味”。


2、組織性:

分類可以把雜亂的事物變得規(guī)整,把凌亂的信息按照某些維度劃分,使事物更加清晰。


前兩年風風火火的垃圾分類,就是一個例子。生活中所有物品廢棄后都可以成為垃圾,如果不進行垃圾分類,處理成本高且污染環(huán)境。而垃圾分類,就是將垃圾按一定規(guī)定或標準將垃圾分類儲存、投放和搬運。


既然分類是按照某種方式進行組織,那我們需要明確了解,分類方式必須讓用戶易于理解。所以,分類本身是否合理,很大程度上取決于人們能否容易理解分類。


“簡單的組織模式具有清晰的界限——是非分明。這樣,用戶才能明確知道到哪里去找自己想要的東西。因此,要多找一些用戶,詢問他們的分類標準。如果眾口不一,或者根本就難以回答,你就有麻煩了?!?


垃圾分類很火還有一個原因,因為用戶經(jīng)常不知道什么物品屬于什么垃圾,這就對垃圾分類產(chǎn)生很大的阻力,網(wǎng)上一時間有了很多識別物品垃圾分類的產(chǎn)品功能。


我之前使用三星手機,每次想要在設置里面尋找某功能,都很讓人煩躁,因為手機設置里定義的某功能的分類方式,與我們的認知并不一致,這就會造成尋找時及其低效的情況,同時也會引起強烈不滿,這意味著,如果你忘了某事物的具體名稱,而分類方式與心理模型所認知的分類方式不一致,你就極難找到。(不過三星很有意思的一點是,盡管在設置的分類項里找不到,但是往往能在設置項下方的推薦查找處找到相應功能,這就很魔幻。)


3、高效性:

分類本身就是將混亂的事物進行歸類,這帶來一個很明顯優(yōu)點,就是便于用戶查找,只要用戶明確某事物屬于哪一分類,便能相對輕松地找到。


比如我們想要尋找某款好用的修圖軟件,但是不知道具體名稱,想要在應用商店的眾多應用里,尋找某款應用,比較常用的方式就是搜索或者分類。


分類可以將應用按不同用途進行劃分,比如視頻、拍攝、工具、社交等。通過這些分類,可以很大程度上縮小我們的尋找范圍,這就是分類的高效性。


4、對比性:

分類還有隱藏屬性,就是對比性。許多用戶使用分類時,也會喜歡進行對比。


還是以修圖軟件為例子,你想要某款修圖軟件,于是你通過分類,找到了一批修圖軟件,而你本身并不知道什么軟件好。分類將相同屬性的軟件聚合到一起,一定程度上可以幫助你基于某種維度進行對比,正好可以讓你更輕松地對比哪款軟件更適合你。


5、全面性:

分類是否合理,還需要看分類本身是否足夠全面。理論上,我們通過分類劃分事物,則分類需要可以將這些食物完全囊括。如果分類本身無法囊括這些事物,就會造成用戶尋找時的盲區(qū),證明這種分類方式本身不合理。


假如用戶去逛淘寶,想要找某物品,但是翻了很多分類,仍然找不到,這時大概率就不會再通過分類進行尋找了,而這種糟糕的體驗,也會讓用戶對這個產(chǎn)品的分類變得很失望。


6、多樣性:

剛才說到,同一分類是圍繞同一個屬性的。但是,同一個事物,本身可以有很多種分類方式。而我們需要保證的是,事物在同一分類里的具有唯一性。


一首歌,如果按照語言體系維度進行劃分,一般可以劃分為華語、英語、日語等。還可以按照流派維度來劃分,一般可以劃分為電子、輕音樂、搖滾、說唱等。


我們對事物的認識方式是立體的,事物可以被按照不同維度進行不同分類也就不足為怪了。同一個事物,甚至同一個人,是可以有多種分類方式的。


設計分類功能

說完分類的許多屬性,我們聊聊在互聯(lián)網(wǎng)產(chǎn)品中,用戶會在什么場景下使用分類?我們又該如何設計分類功能?


1、分類的使用場景

首先,用戶會在什么場景下使用分類?從產(chǎn)品層面,分類是便于人們查找某事物的一種方式,因為相對比較清晰、高效。


這里有個很關鍵的點,就是“查找”。也就是說,分類的使用場景,偏向于人們有相對明確的目的。用戶的行為路徑是有主動的查找需求。

互聯(lián)網(wǎng)產(chǎn)品,查找某事物,最常見的方式是搜索,瀏覽,分類。而這幾種方式都有不同點,分類側重于“屬性”區(qū)分。


大部分用戶使用分類時,行為特點是相對主動的。此時用戶未必有十分明確的目標,但大致知道想要什么。比如你想和朋友聚餐,不知道具體吃什么,這時候你打開了大眾點評,你只知道要吃中餐,這時你可以在中餐的分類里去找適合你的店。


用戶的目標如果十分清晰,則更適合直接搜索,因為這比起分類查找的路徑更短也更高效。


總結一下,我們要設計分類功能,需要從用戶的角度來觀察分類這件事情。:

· 用戶主要的行為模式:人找內容。

· 有目標但不夠明確。


2、如何設計分類功能

a、分類的層級

我們需要先了解分類的細分層級,分類的層級大部分不超過 4 層,但會因不同產(chǎn)品的定義不同而有所區(qū)別。

一般來說,第一層是顆粒度相對較大的,接下來會層層在上一層的基礎上細化。


以京東的分類為例:

第一層:奢侈品,箱包,手機等;

第二層:手機包含:熱門品牌、手機類型、運營商、手機配件;

第三層:熱門品牌包含:蘋果、華為、OPPO、VIVO、小米等;

第四層:蘋果手機包含:iPhone 12、iPhone 11等;


最少的層級是兩層,比如垃圾分類:

第一層:可回收垃圾、干垃圾、濕垃圾、有害垃圾;

第二層:具體的垃圾物品。


就體驗層面而言,建議分類層級避免超過 3、4 層,盡管本身可能會提升細分度,便于用戶查找。但由于分類方式本身必須與用戶的理解相契合,如果太多層分類,用戶需要思考目標內容在哪一分類。經(jīng)過幾層判斷后,才能找到目標內容,這對于用戶的理解成本是比較高的。


此外,太多層級不利于用戶在不夠熟悉分類方式時快速了解某分類下的具體事物。如果用戶對分類的劃分方式理解錯誤,就需要返回繼續(xù)查找,效率低、使用門檻高。


當然也不能盲目追求盡可能短的分類層級。兩個層級可能無法滿足查找需求,因為內容量龐大,所以還需要更多的過濾,需要依據(jù)產(chǎn)品類型而定。


由于目前許多產(chǎn)品都發(fā)展到相對成熟的狀態(tài),所以設計分類功能時,一般不需要對分類方式再進行劃分,主要原因是相同類型的產(chǎn)品,分類方式大同小異。用戶的理解習慣上,對于某事物的分類也有基本的認知?,F(xiàn)在設計分類功能,主要是對頁面交互及視覺層級進行重新設計和調整。


b、如何根據(jù)產(chǎn)品設計分類

我們會梳理常見的分類交互框架,從分類入口、頁面布局等層面可以看到產(chǎn)品中分類功能的定位強弱。這里列舉的分類形式,會根據(jù)產(chǎn)品的主功能進行闡述。比如電商類就是商品分類、旅游類就是地點分類等。


  • 側邊導航型分類

以京東 App 為例,京東把分類功能作為一個主要的頁面模塊。分類 tab 占據(jù)了 App 的第 2 個底部 tab。


使用京東的用戶,購買的目的性相對較強,京東主打的就是自營正品和快遞速度,商品與淘寶相比會少很多,但依然很全。用戶習慣上,“逛”的屬性沒有淘寶那么強。首頁以功能區(qū)+信息流為主,偏向于商品分發(fā)+逛信息流,而分類功能則主要滿足相對明確目的用戶需求。

京東分類頁左側為一級分類,右側為二、三級分類。側邊導航將分類豎排的最大優(yōu)點是能夠充分利用屏幕空間,提升分類類型的展示效率。適用于分類類型多、分類層級多的場景。右側頁面信息靈活性較高,可以配置運營位,如放置運營 Banner ,且支持左右滑動 Banner 。下方一般放置二、三級分類。


右側頁面滑動時,頂部有輔助查找二、三級分類的導航分類標簽,便于用戶快速查找:


切換一級分類:這種框架切換分類的方式主要有兩種:1、點擊左側導航欄進行切換;2、向上滑動右側頁面進行切換。用戶習慣上,第 1 種方式會更高效,而第 2 種切換方式會更自然,更符合手勢操作。

以【推薦分類】為例,右側【常用分類、專場推薦、熱門分類】都是歸屬于【推薦分類】的。為了便于用戶更好區(qū)分頁面分類層級,頁面向上滑動時,通常會設計繼續(xù)上拉切換的提示。目的是提醒用戶,該部分已經(jīng)滑動到底了,繼續(xù)上滑會切換到下一部分,明確區(qū)分不同分類。


上滑的另外一種模式,以宜家為例,宜家聚焦于家居用品,分類類目沒有大型電商 App 那么多。左側是一級導航【燈具照明、裝飾品等】,右側分類標題與左側導航一一對應,并且分類之間無明確的頁面分隔區(qū)分,所以滑動時無需設計切換到下一部分的提示。


以上講的,右側頁面均是二、三級分類入口,并不是具體的。分類層級或類型少的情況下,右側可以嘗試放置具體內容,比如華為應用市場的處理形式。


需要注意:

1、左側導航占據(jù)了屏幕縱向的固定位置,從而縮減了頁面寬度。

2、由于層級多,左右側均是分類入口,用戶無法在頁面直接看到具體商品/內容。在電商產(chǎn)品上,用戶容易區(qū)分不同分類類目下是什么商品。但可能在某些 App 上,用戶未必清晰所要尋找的內容在哪一分類類目下,可能造成用戶流失。

3、如果沒有具體的內容呈現(xiàn),對于內容、商品等分發(fā)效率也存在影響。


  • 頂部 Tab 型分類

頂部導航型的優(yōu)點是將多級分類與具體內容結合在一個頁面,可通過點擊或者滑動切換不同分類,將觸達具體內容的路徑盡可能減少,提升具體內容的曝光。


以掌閱 App 為例:最高層為一級分類,可滑動。第二層是二級分類,更精準分類挑選。第三層導航偏向于篩選。第四層為具體內容,用戶無需通過頁面跳轉就能查看。這種設計特點很明顯:內容曝光 > 分類效率。由于一級分類不多,可以通過左右滑動查看,避免浪費頁面空間。二級分類類型多,采用折疊的形式將分類收起,點擊可以展開更多二級分類。


顯而易見的,多層分類在頂部排列,視覺效果并不佳。默認狀態(tài)下,占用頁面頂部的空間。這種結構,在設計時為了能夠節(jié)省頁面空間,二、三級導航會伴隨用戶向上滑動的手勢折疊,提升內容的曝光效率。用戶在滑動場景下,會更聚焦于頁面具體內容而非導航,所以折疊的設計比較巧妙。


這種設計由于具體內容曝光的效率高,受到許多產(chǎn)品的青睞,適合于資訊類、內容類等產(chǎn)品。比如微博首頁,微博側重于內容的主動推薦,所以將分類弱化為一行導航欄,頁面主體為具體內容推薦。用戶瀏覽的內容有相對固定的傾向,比如會喜歡看綜藝、社會、美妝等內容,并沒有很強的尋找不同分類的訴求。


若用戶想要設置常用的分類頻道,可點擊【+】展開,查看常用頻道。由于頻道比較多,而橫滑 Tab 左右滑動的效率較低,所以微博選擇了展示部分常用頻道。如果用戶想查看更多頻道,還能在展開的頁面里進行配置。這種設計為分類功能的設計帶來了更多自定義性。


知乎的處理邏輯與微博一致:


淘寶的分類相比于一般電商類的產(chǎn)品,會比較特別,常見的電商類產(chǎn)品的分類模式和上面介紹的京東 App 比較相似。但淘寶已經(jīng)往全面信息流化的方向發(fā)展,為了推動用戶在淘寶中“逛街”,甚至連分類都已經(jīng)往信息流化的方向發(fā)展。


淘寶的分類功能正在弱化,不像京東、蘇寧占據(jù)著底部第 2 個 tab 的位置,而是在首屏功能區(qū)的最后一位。點擊后,也不再是常規(guī)的側邊導航,而是強化商品外顯。

淘寶分類頁除了上方的一、二級分類,下方都是商品推薦,向上滑動就是瀑布流,增強商品而弱化分類效率。

如果用戶想看其他分類,可以通過左右滑動切換。如果希望查看更多分類,需點開旁邊的”更多“按鈕,通過”更多“按鈕進入的頁面,側重于高效展示分類。淘寶有信心這么做,一部分原因可能基于對算法推薦的信心,我發(fā)現(xiàn)不同手機看到的分類順序并不一致。


  • 聚焦型分類

以 B 站為例,B 站的分區(qū)頁面的設計形式為展示番劇、國劇、放映等所有一級導航,而將細分層級隱藏到下一級頁面。


這種設計方式適合一級分類類型很多,且重點在于高效呈現(xiàn)這些分類類型的場景。二級頁面聚焦于具體的內容,可以避免將一、二級分類堆疊在一個頁面,滿足用戶對查找分類的效率的要求,避免過載的信息量使頁面變得復雜。但顯而易見的,這種結構不利于用戶在當前頁面直接看到下一層級內容。


App store 整體邏輯與 B 站一致,區(qū)別在于排列方式為列表型排列。


vivo 應用商店也是聚焦型分類,但是會把二級分類呈現(xiàn)出來,與側邊導航型分類很相似,區(qū)別在于這里是整列表滑動。


  • 篩選型分類

前面講到,分類是具有多種維度的。以“好好住”為例,有居室、面積、風格、預算、特色等維度。

上面“好好住”的幾個維度之間,沒有上下層級之分,均屬于同一層級,所以層級是并列而非遞進的,這種情況更適合采用篩選的處理形式。同樣的,由于頂部篩選類型多,占據(jù)過多的頁面空間,當頁面上滑后,篩選可折疊以節(jié)省頁面空間,同時更聚焦與具體內容。


結語

設計分類功能,要先明確分類的維度,以及用戶是否容易理解,避免造成與用戶認知習慣相沖突從而影響功能使用的情況。


整體上,通過分類功能找目標內容的路徑應該避免太長,因為這會影響到內容曝光效率及用戶對分類之下的具體內容的感知。


分類本身是一種信息組織與呈現(xiàn)方式,設計時需要對產(chǎn)品信息本身有足夠理解,才能有針對性地思考交互框架。分類功能的交互框架多樣,每種都有優(yōu)點和缺點,需要根據(jù)產(chǎn)品定位及訴求(優(yōu)先展示分類,還是優(yōu)先展示具體內容)采用適合的交互形式。


需要注意的是,有的產(chǎn)品的主功能甚至沒有很明確的分類,比如淘票票,定位是買電影票,而人們看的電影具有很強的時效性,能不能看到電影幾乎完全取決于電影何時上映,重點更側重于向用戶推薦最近的電影。


以上分析了分類功能、羅列了比較常見的分類功能設計形式,希望能幫助到各位。

文章來源:站酷   作者:熱風_

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔