設(shè)計(jì)指南:中后臺(tái)系統(tǒng)數(shù)據(jù)檢索功能
編輯導(dǎo)語(yǔ):一個(gè)體驗(yàn)感良好的數(shù)據(jù)檢索功能,能夠幫助用戶在海量的信息中快速定位到需要的內(nèi)容。本文作者從檢索方式、布局和樣式等多個(gè)維度,并結(jié)合實(shí)際案例,分享了在中后臺(tái)系統(tǒng)中列表頁(yè)的數(shù)據(jù)檢索功能設(shè)計(jì),希望能給你帶來(lái)幫助。
在中后臺(tái)系統(tǒng)中,列表頁(yè)是使用最多的頁(yè)面形式之一。為了幫助用戶在海量的信息中快速定位到需要的內(nèi)容,我們會(huì)提供一些數(shù)據(jù)檢索工具來(lái)進(jìn)行輔助定位。那么將如何設(shè)計(jì)一個(gè)體驗(yàn)感良好的數(shù)據(jù)檢索功能呢?接下來(lái)我將從檢索方式、布局和樣式等多個(gè)維度并結(jié)合實(shí)際案例來(lái)解析相關(guān)設(shè)計(jì)。
一、有哪些檢索方式
我們?cè)趯?shí)際生活中逛店買(mǎi)東西時(shí),如果想要找一件商品,大概率會(huì)有以下幾種方式:
1)如果這家店?yáng)|西沒(méi)那么多,直接的方式是從將整個(gè)店的東西從頭到尾看一遍,直到看見(jiàn)你需要的,這是最本能尋找信息的方式——直接查找。
2)如果你逛的是一家大型超市,直接查找顯然不切實(shí)際,但可以根據(jù)那件商品大致判斷出是屬于哪一類,先找到分類,在定位分類下的這個(gè)商品。這是第二種尋找信息的方式——按分類查找。
3)如果你買(mǎi)的商品有一些特殊標(biāo)記(如顏色是紅色),就可以直接去找對(duì)應(yīng)顏色,這種尋找信息的方式就是——按標(biāo)記查找。
綜上所述,在尋找信息時(shí),會(huì)有三種行為模式:
- 直接查找
- 按信息分類查找
- 按信息的標(biāo)記查找
而這三種行為模式剛好對(duì)應(yīng)著三種檢索方式:
- 搜索
- 導(dǎo)航
- 篩選
二、搜索
搜索可以幫助用戶在巨大的信息池中縮小目標(biāo)范圍,快速而準(zhǔn)確的定位到目標(biāo)數(shù)據(jù),并速獲取需要的信息。接下來(lái)將從搜索樣式和搜索結(jié)果的觸發(fā)方式,兩個(gè)維度來(lái)解析如何設(shè)計(jì)搜索功能。
1. 搜索樣式
從搜索目標(biāo)信息的路徑來(lái)說(shuō),不同路徑對(duì)應(yīng)不同的展示樣式,主要有模糊搜索和分標(biāo)簽搜索。
1)模糊搜索
優(yōu)點(diǎn):操作便捷,用戶想要什么輸就完事兒了。
缺點(diǎn):容易把不相關(guān)的內(nèi)容搜出來(lái),結(jié)果匹配不夠精準(zhǔn)。
2)分標(biāo)簽搜索
優(yōu)點(diǎn):結(jié)果匹配較為精準(zhǔn)。
缺點(diǎn):操作不方便,每次都需要先切換對(duì)應(yīng)標(biāo)簽在輸入搜索。
2. 結(jié)果觸發(fā)方式
結(jié)果觸發(fā)方式包含兩種:實(shí)時(shí)觸發(fā)和手動(dòng)觸發(fā)。
1)實(shí)時(shí)觸發(fā)
在輸入過(guò)程中實(shí)時(shí)匹配結(jié)果,對(duì)搜索結(jié)果即時(shí)反饋,引導(dǎo)性強(qiáng),效率高。適用于搜索數(shù)據(jù)量小或本地?cái)?shù)據(jù)的情況。例如:數(shù)據(jù)量較少的列表。
優(yōu)點(diǎn):效率高。
缺點(diǎn):過(guò)程中匹配對(duì)計(jì)算能力要求高,若計(jì)算能力跟不上則需要加載等待,從而影響體驗(yàn)。
2)手動(dòng)觸發(fā)
輸入完成后,需回車鍵或點(diǎn)擊按鈕觸發(fā)搜索。適用于在大量信息中搜索,或需要單獨(dú)搜索結(jié)果頁(yè)的情況,例如:全局搜索、大量數(shù)據(jù)的表格等。
優(yōu)點(diǎn):結(jié)果數(shù)據(jù)確定性高。
缺點(diǎn):輸完多一步操作,成本略高。
三、導(dǎo)航
列表頁(yè)數(shù)據(jù)過(guò)濾場(chǎng)景下使用的導(dǎo)航,主要是指標(biāo)簽切換樣式,多用于和時(shí)間、狀態(tài)的流轉(zhuǎn)等高頻切換的場(chǎng)景,選項(xiàng)之間的數(shù)據(jù)一般互相獨(dú)立沒(méi)有交集。
優(yōu)點(diǎn):劃分清晰,切換便捷。
缺點(diǎn):需確保每一項(xiàng)的數(shù)據(jù)沒(méi)有交集,數(shù)量也不能過(guò)多,最好控制在5個(gè)以內(nèi)。
使用建議:默認(rèn)選中的標(biāo)簽最好是用戶最常用的選項(xiàng)。
四、篩選
篩選可以幫助用戶縮小數(shù)據(jù)范圍,逐步找到想要的內(nèi)容;或者當(dāng)用戶的目標(biāo)就是查看某一范圍的數(shù)據(jù)時(shí),也可以通過(guò)篩選實(shí)現(xiàn)。
體驗(yàn)良好的篩選功能,需要充分考慮用戶的需求和具體的業(yè)務(wù)場(chǎng)景,選擇合適的篩選布局、樣式。除此之外,還要處理好與其他元素之間的關(guān)系。確保頁(yè)面各個(gè)元素之間的合理性。
1. 篩選區(qū)布局
設(shè)計(jì)篩選功能時(shí),需結(jié)合整體頁(yè)面元素,思考與篩選功能之間的關(guān)系,尤其是與列表數(shù)據(jù)的布局關(guān)系。
1)上下布局
優(yōu)點(diǎn):節(jié)省頁(yè)面橫向空間,尤其在使用表格展示數(shù)據(jù)時(shí),能最大化利用橫向空間來(lái)展示表格字段,便于閱讀和操作。
缺點(diǎn):當(dāng)篩選字段過(guò)多時(shí)會(huì)占用縱向高度,影響結(jié)果數(shù)據(jù)的查看。
使用建議:
- 當(dāng)篩選項(xiàng)或常用篩選項(xiàng)較少時(shí)使用
- 使用時(shí),可以收起不常用的,保證篩選區(qū)不會(huì)占用太多縱向空間,同時(shí)將常用篩選項(xiàng)露出,以此來(lái)滿足用戶的業(yè)務(wù)需求和使用場(chǎng)景
2)左右布局
優(yōu)點(diǎn):能將所有篩選字段都直接展示出來(lái),節(jié)省頁(yè)面縱向空間,可對(duì)篩選條件和結(jié)果列表同時(shí)查看。當(dāng)篩選條件較多時(shí)可縱向滾動(dòng),有較強(qiáng)的的擴(kuò)展性。
缺點(diǎn):占用橫向空間。
使用建議:
- 常用篩選條件較多,且需要直觀展示出來(lái)的場(chǎng)景下使用。
- 需要頻繁切換篩選項(xiàng),并需要對(duì)照查看篩選結(jié)果時(shí)使用。
3)浮層(彈窗/抽屜)
篩選功能通過(guò)頁(yè)面中收起的入口,點(diǎn)擊后以彈窗或抽屜的形式去承載篩選內(nèi)容。
優(yōu)點(diǎn):節(jié)省空間,可以兼容任何形組件及各種組件組合。
缺點(diǎn):浮層會(huì)遮擋一部分表單數(shù)據(jù),會(huì)影響用戶的判斷,由于篩選區(qū)域與結(jié)果展示區(qū)域不在同一頁(yè)面,整個(gè)篩選過(guò)程將會(huì)存在較強(qiáng)的打斷感和割裂感。
使用建議:
- 頁(yè)面空間有限,且篩選功能不是很高頻使用。
- 篩選內(nèi)容較多,且形式較為復(fù)雜時(shí)使用。
2. 篩選模式
1)平鋪式
平鋪式將篩選條件對(duì)應(yīng)的選項(xiàng)全部或者部分平鋪展示出來(lái)。
優(yōu)點(diǎn):很直觀,操作效率高。且在選中多個(gè)選項(xiàng)后,用戶仍能清晰知道他的選中項(xiàng)是什么、備選項(xiàng)有哪些,一目了然。
缺點(diǎn):太占空間,導(dǎo)致首屏內(nèi)容信息呈現(xiàn)量大打折扣,從而影響結(jié)果數(shù)據(jù)的展示。
使用建議:
- 篩選條件較少(2行以內(nèi)),且需要直觀展示的篩選項(xiàng)的場(chǎng)景下可以使用。
- 用于信息密集型產(chǎn)品,需要在篩選項(xiàng)中頻繁切換以定位目標(biāo)信息,如:電商、視頻網(wǎng)站。
2)收折式
優(yōu)點(diǎn):非常節(jié)省空間,并且對(duì)多種數(shù)據(jù)格式兼容,例如:日期、地址、時(shí)間等。
缺點(diǎn):無(wú)法直觀看到篩選項(xiàng),已選項(xiàng)與對(duì)應(yīng)篩選條件也無(wú)法很好對(duì)應(yīng)起來(lái),使用時(shí)需要點(diǎn)擊后才能選擇選項(xiàng),不夠快捷。
使用建議:
- 有大量篩選條件要展示,且需頁(yè)面空間有限的場(chǎng)景下使用。
- 使用該方式,由于已選項(xiàng)的可見(jiàn)性不太好,因此,需要通過(guò)其他方式彌補(bǔ)已選項(xiàng)可見(jiàn)性。
3)錄入式
錄入式即下拉框樣式,比起平鋪式和收折式,錄入式能夠在空間利用率和信息獲取效率上取得較好的平衡。
優(yōu)點(diǎn):空間利用率比平鋪要高,形式簡(jiǎn)單易理解。同時(shí)可以兼容多種數(shù)據(jù)格式(數(shù)字、文本、標(biāo)簽、布爾值、枚舉值等)。
缺點(diǎn):無(wú)法直觀看到備選項(xiàng),需要點(diǎn)擊下拉框后才能選擇選項(xiàng),不夠快捷。
4)表頭篩選
優(yōu)點(diǎn):篩選當(dāng)前列,比較直觀。
缺點(diǎn):篩選的內(nèi)容僅限于特定、單次列的篩選,對(duì)于首次使用者來(lái)說(shuō)交互形式需要學(xué)習(xí)。且在每個(gè)表頭都會(huì)有一個(gè)icon,影響用戶對(duì)于表頭信息的識(shí)別。
使用建議:
- 用于頁(yè)面有表格時(shí),但受到表頭信息的限制,篩選條件僅限于特定、單次列的內(nèi)容。
- 篩選前和篩選后,需要在表頭上樣式上給用戶明確區(qū)分。
五、如何設(shè)計(jì)
為了幫助用戶在海量的信息中快速定位到需要的內(nèi)容,搜索雖然是最直接的檢索方式,但當(dāng)結(jié)果信息的層級(jí)和維度都較復(fù)雜時(shí)需要結(jié)合篩選和導(dǎo)航,去收窄信息范圍,提高尋找的效率。
因此在復(fù)雜表格數(shù)據(jù)中,經(jīng)常會(huì)將幾種檢索方式結(jié)合起來(lái)使用。那么,我們?cè)谠O(shè)計(jì)的時(shí)候該從哪些維度去思考呢?體驗(yàn)設(shè)計(jì)的本質(zhì)是建立在以用戶為中心的基礎(chǔ)之上,而對(duì)于使用中后系統(tǒng)的用戶來(lái)說(shuō),核心訴求是穩(wěn)定和效率。
數(shù)據(jù)檢索是為了解決用戶“查數(shù)據(jù)”的問(wèn)題,因此需要確保用戶查詢結(jié)果的準(zhǔn)確和檢索過(guò)程的高效。基于這兩點(diǎn)出發(fā),總結(jié)了以下幾點(diǎn)在設(shè)計(jì)中的思考維度。
1. 用戶認(rèn)知
衡量體驗(yàn)的好壞,最重要的一點(diǎn)就是,是否符合用戶認(rèn)知。尤其在模式相對(duì)固定的當(dāng)下,讓用戶適應(yīng)并習(xí)慣新的模式并非易事。
因此在使用一些新奇的模式時(shí),需要慎重考慮用戶群體的接受度。
2. 使用頻率
用戶使用頻率是界面設(shè)計(jì)的一個(gè)重要考量因素,我們通常都會(huì)把高頻使用的功能放在顯眼且容易操作的位置。
同理,對(duì)于篩選模式,我們也會(huì)依據(jù)篩選條件的高低頻進(jìn)行設(shè)計(jì)。例如:高頻使用的篩選條件我們會(huì)優(yōu)先使用平鋪的篩選模式。
3. 頁(yè)面空間
在有限的頁(yè)面空間中,需要確保用戶對(duì)核心信息的瀏覽。上文已經(jīng)提到,一些模式的出現(xiàn)就為了應(yīng)對(duì)界面空間不足的情況,而我們也需要基于有限的界面空間選擇合適的篩選模式。
但在節(jié)省頁(yè)面空間的同時(shí),也需要平衡其他可用性問(wèn)題,例如:
- 篩選入口與承載的篩選控件在空間關(guān)系上關(guān)聯(lián)較弱,導(dǎo)致用戶的操作路徑被延長(zhǎng)和信息隔離的問(wèn)題。
- 當(dāng)篩選功能被收起在一個(gè)小入口時(shí),它的可見(jiàn)性也會(huì)隨之降低的問(wèn)題。
4. 可見(jiàn)性
針對(duì)篩選模式的可見(jiàn)性,可以分三個(gè)點(diǎn)去考慮:篩選條件本身的可見(jiàn)性、篩選項(xiàng)的可見(jiàn)性和選中項(xiàng)的可見(jiàn)性。
篩選條件的可見(jiàn)性通常是由使用頻率來(lái)決定的,但有時(shí)候,不同用戶對(duì)信息的需求會(huì)不一致,這時(shí)就很難判斷哪個(gè)頻率更高。面對(duì)這種情況,只能將所有的篩選條件展示出來(lái)供用戶選擇。
篩選項(xiàng)的可見(jiàn)性影響模式的選擇,平鋪式篩選的可見(jiàn)性比下拉式更高,但有些業(yè)務(wù)場(chǎng)景并不需要讓用戶看見(jiàn)篩選項(xiàng)。當(dāng)然,我們還需要結(jié)合具體業(yè)務(wù)場(chǎng)景考慮,如:用戶是否熟悉備選項(xiàng)?是否期望強(qiáng)化備選項(xiàng)?
選中項(xiàng)的可見(jiàn)性即當(dāng)選中選項(xiàng)后再次查看選中項(xiàng)的難易程度,可以從兩點(diǎn)去考慮:
- 用戶進(jìn)入該頁(yè)面,系統(tǒng)是否已經(jīng)默認(rèn)有選中某些選項(xiàng),那么這種狀態(tài)需要讓用戶感知。
- 用戶對(duì)自己選擇的選項(xiàng),是否需要回看。
5. 性能
數(shù)據(jù)量大才需要查詢工具,而數(shù)據(jù)量大也伴隨著性能問(wèn)題。在查詢控件中,有兩種:
- 需要設(shè)置條件后點(diǎn)擊“確認(rèn)/查詢”按鈕,才能觸發(fā)結(jié)果。適用于用戶一次性添加多個(gè)條件,一并進(jìn)行查詢,對(duì)應(yīng)的結(jié)果肯定是用戶需要的結(jié)果。
- 查詢一個(gè)條件后實(shí)時(shí)出結(jié)果,適用于用戶需要基于結(jié)果判斷是否需要添加查詢條件。基于查詢條件一點(diǎn)一點(diǎn)收窄結(jié)果,直到找出目標(biāo)。
六、案例解析
在微盟電商零售業(yè)務(wù)的舊版商家后臺(tái)中,列表頁(yè)篩選存在較多體驗(yàn)問(wèn)題,需進(jìn)行優(yōu)化。
1. 問(wèn)題梳理
從上圖可以看出,主要問(wèn)題如下:
- 篩選模式難理解:使用開(kāi)關(guān)控制篩選條件的顯示/隱藏
- 功能分區(qū)不明確:篩選和操作混排在一起
- 空間利用率太低:篩選項(xiàng)全部平鋪,影響結(jié)果數(shù)據(jù)的查看
- 體驗(yàn)路徑不連貫:彈窗篩選無(wú)法明顯感知內(nèi)容變化,切換條件時(shí)成本過(guò)高
- 體驗(yàn)缺乏一致性:更多篩選條件有的用彈窗承載,有的在當(dāng)前頁(yè)平鋪
總結(jié)起來(lái),以上的問(wèn)題主要影響了信息獲取效率,提高了數(shù)據(jù)過(guò)濾的操作成本,影響了篩選體驗(yàn)一致性。因此,接下來(lái)的優(yōu)化方向如下:
- 優(yōu)化信息結(jié)構(gòu)
- 優(yōu)化操作路徑
- 考慮方案擴(kuò)展性
2. 競(jìng)品分析
為了更讓競(jìng)品分析更具有參考意義,選擇了相似業(yè)務(wù)場(chǎng)景的幾款產(chǎn)品:有贊商城、千牛商家后臺(tái)、拼多多商家后臺(tái)。
接下來(lái)通過(guò)以下幾個(gè)維度進(jìn)行分析:篩選布局、篩選模式、篩選結(jié)果觸發(fā)方式、多個(gè)篩選條件的處理方式,與其他元素的關(guān)系。
3. 分析總結(jié)
- 篩選條件的使用頻率:最主要的幾個(gè)業(yè)務(wù)場(chǎng)景(商品、訂單),存在一部分條件常用,一部分不常用。有頻率的差異性,因此,可根據(jù)需要進(jìn)行顯示/隱藏。
- 用戶對(duì)備選項(xiàng)的預(yù)判:基于主要業(yè)務(wù)場(chǎng)景(商品、訂單),用戶不存在認(rèn)知問(wèn)題,再結(jié)合空間利用率綜合考慮,下拉框模式是個(gè)很好的選擇。
- 更多篩選條件:從已有業(yè)務(wù)場(chǎng)景來(lái)看,篩選條件的數(shù)據(jù)格式都較為簡(jiǎn)單(輸入、選擇、日期),這種情況下,折疊展開(kāi)方式就能較好的承載,并且要比彈窗/抽屜展開(kāi)更流暢??紤]到篩選條件過(guò)多,展開(kāi)后會(huì)影響列表數(shù)據(jù)的展示,因此需要處理好縱向空間和擴(kuò)展問(wèn)題。
- 頁(yè)面橫向空間:左側(cè)已被導(dǎo)航占據(jù)了較寬的空間,右側(cè)又多為復(fù)雜表格(如商品、訂單列表),上下布局是最好的選擇。
- 已選項(xiàng):基于主要業(yè)務(wù)場(chǎng)景(商品、訂單),用戶每次進(jìn)來(lái)目標(biāo)基本上是比較明確的,如:我就是要找這一類商品或這一類訂單。假如篩選結(jié)果為空,我就會(huì)認(rèn)為沒(méi)有這一類數(shù)據(jù)。盡管沒(méi)有找到目標(biāo),但我的任務(wù)也已經(jīng)結(jié)束,所以回看選中項(xiàng)的可能性也不大。
- 性能:商品和訂單數(shù)據(jù)都較大較復(fù)雜,加上查詢商品和訂單更多場(chǎng)景是一次性添加多個(gè)條件,一并進(jìn)行查詢,因此使用點(diǎn)擊按鈕后查詢更合適。
商家后臺(tái)業(yè)務(wù)中存在需要基于狀態(tài)查看的訂單/商品,由于操作較為高頻,下拉框篩選樣式雖然更能平衡效率與空間問(wèn)題,但效率較低,因此特殊場(chǎng)景下需要配合標(biāo)簽切換的方式。
4. 優(yōu)化方案
1)優(yōu)化信息結(jié)構(gòu)
舊版:搜索、篩選和更多篩選條件排列無(wú)序,不符合閱讀習(xí)慣。
新版:篩選區(qū)信息組合方式基于用戶行為路徑:搜索 → 篩選 →更多篩選。
舊版:篩選、全局操作、批量操作混合在一起,難以識(shí)別,操作效率低。
新版:清晰區(qū)分篩選和批量操作,保持操作與操作對(duì)象(表格數(shù)據(jù))的親密性。
2)優(yōu)化操作路徑
舊版:部分頁(yè)面使用彈窗承載篩選條件,有打斷感,且搜索和其他條件組合篩選場(chǎng)景下要在不同地方選擇,成本較高。
新版:在當(dāng)前位置直接展開(kāi),篩選后實(shí)時(shí)感知結(jié)果數(shù)據(jù)變化。設(shè)置最大高度,確保表格信息能正常瀏覽。
舊版:常用的狀態(tài)過(guò)濾(如訂單狀態(tài)、商品審核狀態(tài))收在高級(jí)篩選中,加長(zhǎng)用戶的操作路徑。
新版:在原來(lái)基礎(chǔ)上篩選上結(jié)合了標(biāo)簽切換模式,更加高效便捷。
七、總結(jié)
本文從數(shù)據(jù)檢索的方式、篩選功能的布局模式及設(shè)計(jì)中的思考點(diǎn)等多個(gè)維度,并結(jié)合了實(shí)際案例,分享了在中后臺(tái)系統(tǒng)中列表頁(yè)的數(shù)據(jù)檢索功能設(shè)計(jì)。
但由于業(yè)務(wù)的復(fù)雜性,仍有一些尚未提及,如報(bào)表類的數(shù)據(jù)過(guò)濾、自定義篩選條件等復(fù)雜的篩選模式。篇幅有限,暫不做擴(kuò)展。
以上更多是從用戶可用性角度去思考和分析數(shù)據(jù)過(guò)濾功能,可能不能適用于所有的業(yè)務(wù)場(chǎng)景。我想說(shuō)的是,在實(shí)際業(yè)務(wù)中,我們還需要站在產(chǎn)品和業(yè)務(wù)的角度去分析和思考,以此找到最合適的方案。
參考文獻(xiàn):
[1]表格數(shù)據(jù)檢索(一)
[2]B端體驗(yàn)設(shè)計(jì)專題——表格篇
本文由 @大青哥 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash,基于CC0協(xié)議
作者對(duì)整個(gè)中后臺(tái)系統(tǒng)數(shù)據(jù)檢索功能設(shè)計(jì)流程非常明晰易懂。