B端篩選功能如何設(shè)計(jì)?4個(gè)章節(jié)幫你掌握!
引言
篩選作為一個(gè)常用的功能,在產(chǎn)品設(shè)計(jì)中的應(yīng)用面是非常廣的。比如我們?nèi)ベ?gòu)物,會(huì)選擇銷量高、價(jià)格實(shí)惠并且包郵的商品,篩選區(qū)的設(shè)計(jì)就便于用戶進(jìn)行數(shù)據(jù)的查詢和定位,可以快速查詢到滿意的商品。本文就篩選這個(gè)話題展開了分析和探討。
一、篩選簡(jiǎn)介
篩選,也可以稱作過(guò)濾器,它屬于搜索框架的一部分主要用于內(nèi)容提取,將一類數(shù)據(jù)展示,一類數(shù)據(jù)隱藏,同時(shí)可以整合很多的組件。
在 B 端設(shè)計(jì)中篩選存在的對(duì)于整個(gè)表單來(lái)說(shuō)是非常重要的,它可以幫助用戶,在茫茫的表單數(shù)據(jù)當(dāng)中進(jìn)行快速的定位;可對(duì)表單進(jìn)行快速劃分,縮短用戶對(duì)于數(shù)據(jù)的尋找時(shí)間;能夠滿足用戶在工作中,實(shí)際業(yè)務(wù)場(chǎng)景的篩選。
二、篩選的展示類型
篩選區(qū)常見到的有搜索、條件篩選這兩類控件。搜索和篩選雖然同在篩選區(qū),但是二者還是有所差異的。
搜索:需要通過(guò)查找搜尋獲得的。
在 B 端系統(tǒng)界面設(shè)計(jì)中,搜索是通過(guò)指定任意條件,系統(tǒng)對(duì)此條件進(jìn)行檢索后,展示相對(duì)應(yīng)內(nèi)容,功能偏主動(dòng)性;條件篩選:好比一個(gè)個(gè)篩子將物料進(jìn)行粗細(xì)料分離的一個(gè)過(guò)程。
條件篩選是系統(tǒng)提供指定各種條件縮小范圍,可以選擇查找不同條件的內(nèi)容,功能偏被動(dòng)性。
無(wú)論被動(dòng)性還是主動(dòng)性,搜索和條件篩選這兩個(gè)功能都是讓用戶使用某個(gè)條件對(duì)內(nèi)容進(jìn)行區(qū)分,從而找到用戶想要的內(nèi)容。二者在功能上相輔相成,在 B 端系統(tǒng)的頁(yè)面中僅靠搜索或者篩選作為內(nèi)容篩選都是不夠的,這就需要組合篩選區(qū)了。
1. 搜索篩選
精確搜索
這種方式搜索準(zhǔn)確率高,所要即所得。但需要用戶自己輸入,然后進(jìn)行查詢。需要記憶搜索詳細(xì)信息。輸入框需要有提示輸入的內(nèi)容,方便用戶填寫,以及確認(rèn)輸入的類別或格式。適用于用戶有清晰的目標(biāo),同時(shí)需要有查詢/搜索按鈕,來(lái)執(zhí)行篩選。搜索可配合篩選固有類一起使用。
模糊搜索
模糊搜索可以用于搜索關(guān)鍵字的同義詞,提高搜索的精確性。字段匹配推薦搜索結(jié)果,減少記憶負(fù)擔(dān),適用于不明確的信息篩選。但是會(huì)篩選出很多類似相關(guān)的內(nèi)容,需要查找鑒別所要內(nèi)容,不便捷。適用于用戶對(duì)目標(biāo)模糊,模糊是指不用關(guān)心輸入了什么格式,哪怕錯(cuò)了,系統(tǒng)也會(huì)推薦給用戶相對(duì)正確的;用戶需要瀏覽操作過(guò)濾器提供的信息來(lái)輔助篩選達(dá)到目標(biāo)。同時(shí)也可配合篩選固有類一起使用。
2. 條件篩選
下拉篩選
這個(gè)篩選的優(yōu)勢(shì)是頁(yè)面的空間利用率高,同時(shí)下拉起到了很好的收納作用,不占據(jù)頁(yè)面空間。但由于下拉的局限性無(wú)法觀看到所有的篩選字段,需要操作點(diǎn)擊查看。
固定選項(xiàng)類,適用于下拉的篩選字段選項(xiàng)有限,并有明確的總結(jié)分類。這種操作起來(lái)便捷,降低用戶的操作難度。一般情況下需要"搜索/查詢"按鈕,但是也有的產(chǎn)品是勾選即執(zhí)行的。需要結(jié)合具體的使用場(chǎng)景去判定。
矩陣(平鋪)篩選
用戶可以直接看到篩選內(nèi)容,支持輸入更多篩選條件,減少操作步驟提高了用戶篩選的效率。但平鋪的篩選類目占據(jù)頁(yè)面空間較大,空間利用率低,信息量過(guò)多都是重點(diǎn)等于沒(méi)有重點(diǎn),增加用戶的決策時(shí)間,不適合選項(xiàng)太多的情況。平鋪篩選控件的普適性為最強(qiáng),當(dāng)沒(méi)有其他更好想法時(shí),用平鋪總是一個(gè)好的選擇。需要注意的是,篩選條件不要過(guò)多(遵循 7±2 法則)。
表頭篩選
通過(guò)表頭的點(diǎn)擊,簡(jiǎn)潔、直觀地篩選當(dāng)前表格列。但只能篩選當(dāng)前列的內(nèi)容,篩選字段比較少,篩選形式比較單一。每個(gè)表頭都會(huì)有篩選的 icon,影響用戶對(duì)于表頭的識(shí)別。表頭篩選學(xué)習(xí)成本最高,且和表頭排序容易沖突,篩選值展示也不夠直觀。
表頭篩選類似 Excel 表格的操作,是一種相對(duì)高級(jí)的交互,適合表格列比較單一內(nèi)容的篩選。
TAB 篩選
篩選條件一目了然,交互步驟少,一個(gè) Tab 標(biāo)簽代表一個(gè)緯度,平鋪展示篩選內(nèi)容方便識(shí)別,學(xué)習(xí)成本低。但 Tab 標(biāo)簽篩選字段數(shù)量有限制,不宜過(guò)多,分類需覆蓋選項(xiàng),并且保證每一項(xiàng)沒(méi)有交集,空間占用多、不夠靈活,對(duì)用戶自定義項(xiàng)支持較差。適用于 Tab 標(biāo)簽切換一般用于和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān),且沒(méi)有交集的數(shù)據(jù)內(nèi)容(可以是同性質(zhì),也可以是不同性質(zhì))。權(quán)重高,選項(xiàng)值不超過(guò) 5 個(gè)。
3. 組合篩選
在 B 端系統(tǒng)表格類頁(yè)面中,字段屬性很多,簡(jiǎn)單的檢索方式很難準(zhǔn)確定位到目標(biāo)數(shù)據(jù),所以在實(shí)際使用當(dāng)中,常會(huì)將大量非交叉關(guān)系的屬性進(jìn)行羅列,搜索、篩選、TAB 標(biāo)簽切換組合出現(xiàn),形成多屬性的組合檢索。而篩選項(xiàng)互相組合,其展示方式有如下幾種:
平鋪式
優(yōu)點(diǎn):用戶能直接看到選項(xiàng)內(nèi)容,方便用戶識(shí)別選項(xiàng),且提高了用戶篩選的效率(節(jié)省了篩選操作),大而全的篩選字段最大限度避免篩選條件遺漏的問(wèn)題。
缺點(diǎn):篩選項(xiàng)多會(huì)占據(jù)大量頁(yè)面空間,信息量過(guò)多都是重點(diǎn)等于沒(méi)有重點(diǎn),增加用戶的決策時(shí)間,不利于表格數(shù)據(jù)的直觀展示,此類型一般配合"勾選即執(zhí)行"使用。
適用從各個(gè)維度篩選的場(chǎng)景,多維度篩選對(duì)信息篩選的顆粒度需求不一致,同時(shí)希望備選項(xiàng)被選中。
折疊式
折疊式篩選是平鋪式篩選的改進(jìn),一種簡(jiǎn)單直接的篩選形式,對(duì)平鋪的篩選項(xiàng)進(jìn)行收納,如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的,但又是必須存在的,可以通過(guò)折疊的方式將這部分篩選字段隱藏起來(lái),高頻篩選字段外露。適用于折疊低頻篩選,顯示高頻篩選,能滿足大多場(chǎng)景下不占用太多空間。針對(duì)有更多篩選需求的用戶也有更好的引導(dǎo)性。
三、篩選的反饋
篩選區(qū)有兩種不同的反饋模式:數(shù)據(jù)實(shí)時(shí)更新反饋和數(shù)據(jù)手動(dòng)更新反饋。
數(shù)據(jù)實(shí)時(shí)更新反饋
界面將與所有設(shè)置的篩選相匹配并對(duì)結(jié)果進(jìn)行實(shí)時(shí)更新。
這種模式的優(yōu)點(diǎn)是在執(zhí)行篩選時(shí)為用戶提供了一種方便簡(jiǎn)單的體驗(yàn),可以在每次點(diǎn)擊后立即看到結(jié)果。適用于較低風(fēng)險(xiǎn)的交互,一旦處理多選過(guò)濾器或更復(fù)雜的輸入時(shí)可能會(huì)造成混亂。當(dāng)然還需要考慮處理數(shù)據(jù)的多少,如果應(yīng)用中數(shù)據(jù)量巨大,每次更新時(shí)間較長(zhǎng),反而會(huì)降低用戶的使用效率。
手動(dòng)更新反饋
在手動(dòng)更新反饋模式下,過(guò)濾結(jié)果只有在用戶點(diǎn)擊查詢時(shí)才會(huì)更新。如果用戶想在每次更改后查看結(jié)果,必須單擊查詢按鈕。
這種模式適合多緯度復(fù)雜的篩選,所有篩選字段設(shè)置完畢之后,統(tǒng)一執(zhí)行操作,和實(shí)時(shí)反饋結(jié)果相比降低篩選等待時(shí)間,尤其是在大量數(shù)據(jù)進(jìn)行篩選中,優(yōu)化了用戶體驗(yàn)。
四、篩選要注意的問(wèn)題
什么情況不適合用篩選?
選用篩選組件的前提是信息能被清晰分類。如用戶 ID/電話號(hào)碼,姓名、郵箱這種無(wú)明顯規(guī)則的就不適合用篩選組件去查找,用搜索會(huì)更好。
篩選分類有哪些要求?
- 分類需符合大眾認(rèn)知的條件。如:按照年月日的認(rèn)知來(lái)選擇,地理位置按照省市區(qū)街道…
- 要求篩選類目的分類要合理、避免晦澀難懂的文案。這決定了用戶使用篩選功能的時(shí)候是否清晰無(wú)困惑。
五、總結(jié)
關(guān)于篩選設(shè)計(jì)指南這里就結(jié)束啦,在具體項(xiàng)目中大家可以根據(jù)產(chǎn)品的特性和需求進(jìn)行對(duì)應(yīng)的調(diào)整。如果文章中不對(duì)的地方也歡迎指出。
作者:兆日 UCD
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)
本文來(lái)源:http://gagu89.com/seodongtai/19141.html