一文看懂B端篩選設(shè)計(jì)

2022-11-2    博博

篩選作為一個(gè)常用的功能,在B端產(chǎn)品設(shè)計(jì)中可以快速按照需要對(duì)數(shù)據(jù)進(jìn)行查詢(xún)和篩選。希望本文對(duì)你有幫助。

今天與大家分享的是關(guān)于B端頁(yè)面中篩選區(qū)的功能設(shè)計(jì),本文會(huì)從篩選的展現(xiàn)形式、布局、反饋、設(shè)計(jì)中遇到的問(wèn)題以及設(shè)計(jì)思考這幾個(gè)方面進(jìn)行講述。


簡(jiǎn)單介紹下篩選


篩選,也可以稱(chēng)作過(guò)濾器,它屬于搜索框架的一部分主要用于內(nèi)容提取,將一類(lèi)數(shù)據(jù)展示,同時(shí)一類(lèi)數(shù)據(jù)隱藏,可以整合很多的組件。


在B端產(chǎn)品設(shè)計(jì)中,篩選區(qū)的設(shè)置便于用戶(hù)進(jìn)行數(shù)據(jù)查詢(xún)和數(shù)據(jù)定位,可以快速的按照需要對(duì)數(shù)據(jù)進(jìn)行查詢(xún)和篩選;篩選的存在對(duì)于整個(gè)表單來(lái)說(shuō)是非常重要的,它可以幫助用戶(hù)在表單茫茫多的數(shù)據(jù)當(dāng)中進(jìn)行快速的數(shù)據(jù)定位;可以對(duì)表單進(jìn)行快速數(shù)據(jù)按照自己想要的方式進(jìn)行劃分,縮短用戶(hù)對(duì)于數(shù)據(jù)的尋找時(shí)間。

1、篩選區(qū)的展現(xiàn)形式有哪些?


篩選區(qū)常見(jiàn)到的有搜索、條件篩選這兩類(lèi)控件。搜索和篩選雖然同在篩選區(qū),但是二者還是有所差異的。


通過(guò)百度百科我們可以了解到:
搜索,意思指仔細(xì)查找,搜尋。
篩選,篩選是利用篩子使物料中小于篩孔的細(xì)粒物料透過(guò)篩面,而大于篩孔的粗粒物料滯留在篩面上,從而完成粗、細(xì)料分離的過(guò)程。該分離過(guò)程可看作是物料分層和細(xì)粒透篩兩個(gè)階段組成的。物料分層是完成分離的條件,細(xì)粒適篩是分離的目的。

在B端系統(tǒng)界面設(shè)計(jì)中,搜索是通過(guò)指定任意條件,系統(tǒng)對(duì)此條件進(jìn)行的檢索后,展示相對(duì)應(yīng)內(nèi)容,功能偏主動(dòng)性;篩選是系統(tǒng)提供指定各種條件縮小范圍,可以選擇查找不同條件的內(nèi)容,功能偏被動(dòng)性


無(wú)論被動(dòng)性還是主動(dòng)性,搜索和篩選這倆個(gè)功能都是讓用戶(hù)使用某個(gè)條件對(duì)內(nèi)容進(jìn)行區(qū)分,從而找到用戶(hù)想要的內(nèi)容。二者在功能上相輔相成,在B端系統(tǒng)的頁(yè)面中僅靠搜索或者篩選作為內(nèi)容篩選都是不夠的,這就需要組合篩選區(qū)了。



1.1搜索篩選


精確搜索
優(yōu)點(diǎn):搜索準(zhǔn)確率高,所要即所得。
缺點(diǎn):需要用戶(hù)自己輸入,然后進(jìn)行查詢(xún)。需要記憶搜索詳細(xì)信息。輸入框需要有提示輸入的內(nèi)容,方便用戶(hù)填寫(xiě),以及確認(rèn)輸入的類(lèi)別或格式。
適用場(chǎng)景:適用于用戶(hù)有清晰的目標(biāo),同時(shí)需要有查詢(xún)/搜索按鈕,來(lái)執(zhí)行篩選。搜索需要配合篩選固有類(lèi)一起使用。


模糊搜索
優(yōu)點(diǎn):模糊搜索可以用于搜索關(guān)鍵字的同義詞,提高搜索的精確性。字段匹配推薦搜索結(jié)果,減少記憶負(fù)擔(dān),適用于不明確的信息篩選。
缺點(diǎn):篩選出很多類(lèi)似相關(guān)的內(nèi)容,需要查找鑒別所要內(nèi)容,不便捷。
適用場(chǎng)景:用戶(hù)對(duì)目標(biāo)模糊,模糊是指不用關(guān)心輸入了什么格式,哪怕錯(cuò)了,系統(tǒng)也會(huì)推薦給用戶(hù)相對(duì)正確的;用戶(hù)需要瀏覽操作過(guò)濾器提供的信息來(lái)輔助篩選達(dá)到目標(biāo)。搜索需要配合篩選固有類(lèi)一起使用。

搜索的設(shè)計(jì)原則


關(guān)于搜索,幾乎沒(méi)有人不知道,哪怕是不從事設(shè)計(jì)、產(chǎn)品的人,他們也知道。同時(shí)每一個(gè)產(chǎn)品,隨著規(guī)模變大,搜索一定必不可少。那么如何設(shè)計(jì)好搜索呢?有哪些原則可以借鑒,總結(jié)了以下4個(gè)方面。


漸進(jìn)呈現(xiàn)
在我們?cè)O(shè)計(jì)搜索時(shí),可以考慮漸進(jìn)呈現(xiàn)的方式。這是指搜索結(jié)果不要一股腦兒都塞給用戶(hù),而是使用逐步擴(kuò)大的方式,讓用戶(hù)慢慢進(jìn)入目標(biāo)。但這里要注意,漸進(jìn)的層級(jí)不要太深,漸進(jìn)的內(nèi)容要做到足夠?yàn)橛脩?hù)著想。

結(jié)構(gòu)化
結(jié)構(gòu)化是指搜索結(jié)果呈現(xiàn)的形式要有歸納和整理的意圖,不能反饋給用戶(hù)的是沒(méi)有層次的內(nèi)容。簡(jiǎn)單來(lái)說(shuō),分類(lèi)就是結(jié)構(gòu)化呈現(xiàn)的體現(xiàn),內(nèi)容結(jié)構(gòu)化后用戶(hù)查找和定位才會(huì)更快速。

可操作
對(duì)于搜索結(jié)果,我們可以給予操作選擇,例如收藏、分享等,這將會(huì)大大提升用戶(hù)與搜索結(jié)果之間的后續(xù)聯(lián)系。
可操作性是最佳優(yōu)先的好伙伴。同時(shí)給搜索結(jié)果添加使用類(lèi)操作,這會(huì)讓用戶(hù)專(zhuān)注于目標(biāo)。

可保存
無(wú)論搜索任何內(nèi)容,用戶(hù)都有權(quán)保存自己常用的搜索結(jié)果,保證用戶(hù)后續(xù)無(wú)需重復(fù)搜索。這點(diǎn)上已經(jīng)有很多C端產(chǎn)品做的很好了,我們?cè)贐端產(chǎn)品上也可以考慮起來(lái)。


1.2條件篩選


下拉篩選


優(yōu)點(diǎn):頁(yè)面的空間利用率高,同時(shí)下拉起到了很好的收納作用,不占據(jù)頁(yè)面空間。
缺點(diǎn):由于下拉的局限性無(wú)法觀看到所有的篩選字段,需要操作點(diǎn)擊查看。


適用場(chǎng)景:下拉的篩選字段選項(xiàng)有限,可以明確的總結(jié)分類(lèi)時(shí),一般采用固定選項(xiàng)類(lèi)。這種操作起來(lái)便捷,降低用戶(hù)的操作難度。一般情況下需要“搜索/查詢(xún)”按鈕,但是也有的產(chǎn)品是勾選即執(zhí)行的。主要需要結(jié)合具體的使用場(chǎng)景去判定。


矩陣(平鋪)篩選
優(yōu)點(diǎn):用戶(hù)可以直接看到篩選內(nèi)容,支持輸入更多篩選條件,減少操作步驟提高了用戶(hù)篩選的效率。
缺點(diǎn):平鋪的篩選類(lèi)目占據(jù)頁(yè)面空間較大,空間利用率低,信息量過(guò)多都是重點(diǎn)等于沒(méi)有重點(diǎn),增加用戶(hù)的決策時(shí)間,不適合選項(xiàng)太多的情況。


適用場(chǎng)景:平鋪篩選控件的普適性為最強(qiáng),當(dāng)沒(méi)有其他更好想法時(shí),用平鋪總是一個(gè)好的選擇。需要注意的是,篩選條件不要過(guò)多(遵循7±2 法則)。


注意事項(xiàng):
當(dāng)確實(shí)需要支持大量的篩選條件時(shí),有兩種解決方案可供參考
1、用戶(hù)自行配置篩選條件:對(duì)用戶(hù)來(lái)說(shuō),單次篩選會(huì)用到的條件是有限的;通過(guò)可配置的篩選條件,實(shí)現(xiàn)檢索效率和信息噪音的平衡,對(duì)于用戶(hù)自定義項(xiàng)的體驗(yàn)與應(yīng)用都有更好的支持。
2、 隱藏低頻的篩選條件:這種方法需要對(duì)用戶(hù)需求有明確的把握,哪些篩選條件是高頻、哪些是低頻需要有明確的分界,優(yōu)點(diǎn)是第一次使用時(shí)用戶(hù)能更快上手。

表頭篩選
優(yōu)點(diǎn):通過(guò)表頭的點(diǎn)擊,簡(jiǎn)潔、直觀的篩選當(dāng)前表格列。
缺點(diǎn):只能篩選當(dāng)前列的內(nèi)容,篩選字段比較少,篩選形式比較單一。每個(gè)表頭都會(huì)有篩選的icon,影響用戶(hù)對(duì)于表頭的識(shí)別。表頭篩選學(xué)習(xí)成本最高,且和表頭排序容易沖突,篩選值展示也不夠直觀。


適用場(chǎng)景:表頭篩選類(lèi)似Excel表格的操作,是一種相對(duì)高級(jí)的交互,適合表格列比較單一內(nèi)容的篩選。
注意事項(xiàng):
一般來(lái)說(shuō)不推薦使用,僅建議在以下幾種情況考慮使用
1、空間是在有限或者表格非常靈活;
2、用戶(hù)可能對(duì)每一列都有篩選需求(如數(shù)據(jù)報(bào)表、Excel);
3、產(chǎn)品規(guī)劃時(shí)對(duì)于用戶(hù)篩選需求不夠明確,也可通過(guò)這種模式先采集數(shù)據(jù),分析其使用頻次,對(duì)后期的界面優(yōu)化進(jìn)行指導(dǎo)。

TAB標(biāo)簽
優(yōu)點(diǎn):篩選條件一目了然,交互步驟少,一個(gè)Tab標(biāo)簽代表一個(gè)緯度,平鋪展示篩選內(nèi)容方便識(shí)別,學(xué)習(xí)成本低。
缺點(diǎn):Tab標(biāo)簽篩選字段數(shù)量有限制,不宜過(guò)多,分類(lèi)需覆蓋選項(xiàng),并且保證每一項(xiàng)沒(méi)有交集,空間占用多、不夠靈活,對(duì)用戶(hù)自定義項(xiàng)支持較差。


適用場(chǎ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è)。

1.3組合篩選


在B端系統(tǒng)表格類(lèi)頁(yè)面中,字段屬性很多,簡(jiǎn)單的檢索方式很難準(zhǔn)確定位到目標(biāo)數(shù)據(jù),所以在實(shí)際使用當(dāng)中,常會(huì)將大量非交叉關(guān)系的屬性進(jìn)行羅列,搜索、篩選、TAB標(biāo)簽切換組合出現(xiàn),形成多屬性的組合檢索。而篩選項(xiàng)互相組合,其展示方式有如下幾種: 


平鋪式
平鋪式是將所有篩選項(xiàng)羅列出來(lái)平鋪在頁(yè)面上,可以兼容多種數(shù)據(jù)格式比如數(shù)字、文本、標(biāo)簽、枚舉值、布爾值等,包含但不限于日期選擇期、標(biāo)簽切換、單選框、復(fù)選框等多種控件。


優(yōu)點(diǎn):用戶(hù)能直接看到選項(xiàng)內(nèi)容,方便用戶(hù)識(shí)別選項(xiàng),且提高了用戶(hù)篩選的效率(節(jié)省了篩選操作),大而全的篩選字段最大限度避免篩選條件遺漏的問(wèn)題。


缺點(diǎn):篩選項(xiàng)多會(huì)占據(jù)大量頁(yè)面空間,信息量過(guò)多都是重點(diǎn)等于沒(méi)有重點(diǎn),增加用戶(hù)的決策時(shí)間,不利于表格數(shù)據(jù)的直觀展示,此類(lèi)型一般配合“勾選即執(zhí)行”使用。


適用場(chǎng)景:普適性為最強(qiáng),當(dāng)沒(méi)有其他更好想法時(shí),用平鋪總是一個(gè)好的選擇。適用于從各個(gè)緯度篩選的場(chǎng)景,多維度篩選對(duì)信息篩選的顆粒度需求不一致,同時(shí)希望備選項(xiàng)被選中。

折疊式
折疊式篩選是平鋪式篩選的改進(jìn),一種簡(jiǎn)單直接的篩選形式,對(duì)平鋪的篩選項(xiàng)進(jìn)行收納,如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的,但又是必須存在的,可以通過(guò)折疊的方式將這部分篩選字段隱藏起來(lái),高頻篩選字段外露。


優(yōu)點(diǎn):高頻篩條件可優(yōu)先快速篩選、一定程度上減少用戶(hù)的認(rèn)知負(fù)荷,同時(shí)占用空間較小。


缺點(diǎn):不好劃分不同用戶(hù)的高頻篩選項(xiàng),當(dāng)高頻篩選項(xiàng)過(guò)多時(shí),頁(yè)面同樣會(huì)出現(xiàn)信息冗雜、空間占比大等問(wèn)題。


適用場(chǎng)景:折疊低頻篩選,顯示高頻篩選,能滿(mǎn)足大多場(chǎng)景下不占用太多空間。針對(duì)有更多篩選需求的用戶(hù)也有更好的引導(dǎo)性。



2.篩選區(qū)布局


從位置上來(lái)說(shuō),組合篩選一般有如下幾種常見(jiàn)類(lèi)型:上下布局水平篩選區(qū)、左右布局的垂直側(cè)邊篩選區(qū)、 內(nèi)嵌的的表頭篩選區(qū)。


上下布局水平篩選區(qū)


最常用的上下布局,篩選區(qū)放置在表格頁(yè)面的上方,方便用戶(hù)識(shí)別選項(xiàng),提高了用戶(hù)篩選的效率,明確哪些數(shù)據(jù)是用戶(hù)所需的。上下布局的篩選區(qū)也方便用戶(hù)進(jìn)行閱讀,對(duì)于那些由不同數(shù)據(jù)結(jié)構(gòu)組成的頁(yè)面,是一個(gè)很好的選擇。


上下布局的篩選區(qū)的可擴(kuò)展性差,當(dāng)篩選項(xiàng)目少于五個(gè)的情況下,最常使用的就是上下布局,而當(dāng)篩選項(xiàng)目多的時(shí)候,會(huì)占據(jù)大量頁(yè)面空間,內(nèi)容在較多時(shí),推薦增加收起功能,這樣保證篩選整體面積不會(huì)很大,提升屏效比。


左右布局的垂直側(cè)邊篩選區(qū)
左右布局的篩選區(qū)一般是以字段選擇進(jìn)行篩選,篩選區(qū)的位置較固定,不會(huì)因?yàn)楹Y選項(xiàng)過(guò)多而影響頁(yè)面中主要內(nèi)容的位置,可擴(kuò)展性強(qiáng),可在收起部分嵌套更多的字段值。


左右布局的好處就是能夠?qū)⒑Y選的所有條件都直接的展示出來(lái),可以適應(yīng)很多場(chǎng)景,但是這種類(lèi)型篩選器可以影響整個(gè)頁(yè)面。我們需要確保頁(yè)面上的每個(gè)元素都有效地受到篩選的影響,避免造成混亂。


內(nèi)嵌的表頭篩選區(qū)


表頭篩選是一種復(fù)雜的篩選形式,常見(jiàn)于列表中,是一種列表內(nèi)置篩選形式,適合表格列比較單一內(nèi)容的篩選,其最開(kāi)始是源于Excel的篩選形式,點(diǎn)擊表單的篩選按鈕,可以將表頭的篩選字段直接帶入,方便用戶(hù)。


3.篩選區(qū)的反饋


篩選區(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í)為用戶(hù)提供了一種方便簡(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ì)降低用戶(hù)的使用效率。


手動(dòng)更新反饋


在手動(dòng)更新反饋模式下,過(guò)濾結(jié)果只有在用戶(hù)點(diǎn)擊查詢(xún)時(shí)才會(huì)更新。如果用戶(hù)想在每次更改后查看結(jié)果,必須單擊查詢(xún)按鈕。
這種模式適合多緯度復(fù)雜的篩選,所有篩選字段設(shè)置完畢之后,統(tǒng)一執(zhí)行操作,和實(shí)時(shí)反饋結(jié)果相比降低篩選等待時(shí)間,尤其是在大量數(shù)據(jù)進(jìn)行篩選中,優(yōu)化了用戶(hù)體驗(yàn)。

4.篩選需要注意哪些問(wèn)題


什么情況不適合用篩選?
選用篩選組件的前提是信息能被清晰分類(lèi)。如用戶(hù)ID/電話(huà)號(hào)碼,注冊(cè)用戶(hù)郵箱這種無(wú)明顯規(guī)則的就不適合用篩選組件去查找,用搜索會(huì)更好。


篩選分類(lèi)條件有什么要求?
一是分類(lèi)需符合大眾認(rèn)知的條件。如:按照年月日的認(rèn)知來(lái)選擇,地理位置按照省市區(qū)街道…
二是要求篩選類(lèi)目的分類(lèi)要合理、避免晦澀難懂的文案。這決定了用戶(hù)使用篩選功能的時(shí)候是否清晰無(wú)困惑。

高頻篩選操作怎么樣方便用戶(hù)操作?
首先高頻篩選操作不是產(chǎn)研團(tuán)隊(duì)自己主觀臆斷出來(lái)的,需要有數(shù)據(jù)支撐。很多產(chǎn)品為了滿(mǎn)足用戶(hù)快捷操作,會(huì)在篩選區(qū)幫用戶(hù)集成常用的快捷操作入口。比如很多電商產(chǎn)品的新品、包郵等快捷篩選。根據(jù)不同產(chǎn)品用戶(hù)習(xí)慣下操作整理出快捷操作入口能提高用戶(hù)體驗(yàn)方便度。

篩選和搜索的區(qū)別?
主要區(qū)別在于用戶(hù)對(duì)目標(biāo)的清晰度不同,需要選用不同組件功能來(lái)達(dá)到其目的。
在B端系統(tǒng)界面設(shè)計(jì)中,搜索是通過(guò)指定任意條件,系統(tǒng)對(duì)此條件進(jìn)行的檢索后,展示相對(duì)應(yīng)內(nèi)容;篩選是系統(tǒng)提供指定各種條件縮小范圍,可以選擇查找不同條件的內(nèi)容。
搜索和篩選都是讓用戶(hù)使用某個(gè)條件對(duì)內(nèi)容進(jìn)行區(qū)分,從而找到用戶(hù)想要的內(nèi)容。


5.工作中的設(shè)計(jì)思考


在設(shè)計(jì)組合篩選的時(shí)候,篩選區(qū)的設(shè)計(jì)需要根據(jù)業(yè)務(wù)實(shí)際情況進(jìn)行設(shè)計(jì),考慮每個(gè)篩選字段和業(yè)務(wù)場(chǎng)景,來(lái)安排合理的篩選展示方式。
那么到底什么情況下使用何種篩選模式?我們?cè)谠O(shè)計(jì)篩選的時(shí)候可以如何思考?顯然,使用頻率和界面空間是兩個(gè)非常重要的評(píng)判維度。除此之外,我們還可以以可見(jiàn)性、系統(tǒng)性能和用戶(hù)認(rèn)知等維度去深入思考,下面將逐一分析。


頻率
使用頻率是界面設(shè)計(jì)的一個(gè)重要考量因素,我們通常都會(huì)把高頻使用的功能放在顯眼且容易操作的位置。同理,對(duì)于篩選模式,我們也會(huì)依據(jù)篩選條件的高低頻進(jìn)行設(shè)計(jì)。頻率除了影響使用什么模式外,還會(huì)影響篩選條件及篩選項(xiàng)的排列順序,這里就不多敘述了。

界面空間
一些界面模式的出現(xiàn)就為了應(yīng)對(duì)界面空間不足的情況。而我們基于有限的界面空間選擇合適的篩選模式是件再正常不過(guò)的事。
可見(jiàn)性太弱,當(dāng)篩選條件都被收納在一個(gè)個(gè)小小的入口按鈕時(shí),它的可見(jiàn)性也會(huì)隨之降低,尤其在PC端,一個(gè)大屏幕下更難發(fā)現(xiàn)。

可見(jiàn)性
既然說(shuō)到可見(jiàn)性,不妨展開(kāi)講講??梢?jiàn)性是一項(xiàng)重要的設(shè)計(jì)原則之一。一個(gè)明顯的道理是,可見(jiàn)總比不可見(jiàn)好,但由于界面空間限制,我們不得不取舍。那么如何取舍才能保證可用性仍然友好?
針對(duì)篩選模式的可見(jiàn)性,我們可以分三個(gè)要點(diǎn)去考慮:


1、篩選條件本身的可見(jiàn)性:
用戶(hù)越難發(fā)現(xiàn),即可見(jiàn)性越低。通常,我們都可以以使用頻率來(lái)決定篩選條件的可見(jiàn)程度。但有時(shí)候也會(huì)失效,因?yàn)檎缟衔乃峒?,到了篩選這一步通常是顆粒度比較細(xì)的分類(lèi),否則我們可以用導(dǎo)航解決。但顆粒度越細(xì),用戶(hù)對(duì)信息的需求就越不一致。比如,挑一件衣服,有人希望按品牌篩選,有人希望按價(jià)格,有人希望按顏色,我們很難判斷哪個(gè)頻率更高。面對(duì)這種情況,只能將所有的篩選條件平鋪出來(lái)供用戶(hù)選擇。例如,淘寶天貓等電商產(chǎn)品往往會(huì)使用矩陣式的篩選,而一些數(shù)據(jù)格式更多樣的B端產(chǎn)品則直接使用輸入式的篩選。

2、篩選項(xiàng)的可見(jiàn)性:
篩選項(xiàng)的可見(jiàn)性同樣影響模式的選擇。頁(yè)簽式和矩陣式篩選的可見(jiàn)性比下拉式更高,因?yàn)橛脩?hù)可以直接看到篩選項(xiàng)。但篩選項(xiàng)一定要讓用戶(hù)看見(jiàn)嗎?對(duì)于這個(gè)問(wèn)題,可直接以篩選項(xiàng)的多少去決策(少則可見(jiàn),多則不可見(jiàn)),比如一些B端產(chǎn)品,如果將備選項(xiàng)都全平鋪出來(lái)可能一個(gè)屏幕都放不下,所以只能將所有篩選項(xiàng)收起。但這是一種極端的情況,缺乏說(shuō)服力。
用戶(hù)對(duì)備選項(xiàng)是否足夠熟悉?比如對(duì)于一個(gè)尺碼的下拉框,我很清楚自己能選擇什么,但對(duì)于一個(gè)衣服風(fēng)格的下拉框,由于我對(duì)風(fēng)格不熟悉,不能預(yù)判這個(gè)篩選條件能起什么作用,很可能會(huì)將其忽略。

3、選中項(xiàng)的可見(jiàn)性:
選中項(xiàng)的可見(jiàn)性,即當(dāng)我選中某幾項(xiàng)后再次查看選中項(xiàng)的難易程度。

性能


數(shù)據(jù)量大才需要篩選,而數(shù)據(jù)量大必然會(huì)有性能問(wèn)題。在不同場(chǎng)景下,用戶(hù)會(huì)發(fā)生不同的行為,對(duì)性能的要求也會(huì)不一樣。我們能經(jīng)常發(fā)現(xiàn)一些篩選模式會(huì)帶有“確認(rèn)”按鈕,當(dāng)用戶(hù)設(shè)置完篩選條件后不會(huì)即時(shí)刷新,而需點(diǎn)擊按鈕才能觸發(fā)。而有的篩選模式則沒(méi)有“確認(rèn)”按鈕。這分別對(duì)應(yīng)著兩種不同的場(chǎng)景。
第一種場(chǎng)景,如B端產(chǎn)品中的查詢(xún)報(bào)表場(chǎng)景。我需要找出符合條件A、B、C的所有信息,并進(jìn)行對(duì)比分析,那么我就會(huì)設(shè)置篩選條件A、B、C后一并篩選出來(lái),這種情況是一步到位的,我不需要再額外添加條件D或E,所以有“確認(rèn)”按鈕的篩選模式更符合此場(chǎng)景。反而即時(shí)刷新會(huì)在我設(shè)置篩選條件時(shí)造成干擾。
另外一種場(chǎng)景,常見(jiàn)于B端產(chǎn)品中的查詢(xún)列表場(chǎng)景。如果我想找到信息α,通過(guò)篩選A后得出10個(gè)信息,那么憑肉眼即可找出信息α,任務(wù)結(jié)束,但如果篩選A后得出1000個(gè)信息,我可能會(huì)再添加篩選條件B、C或D,直到篩出的信息能讓我一眼分辨出信息α。換句話(huà)說(shuō),這時(shí)候我的心理模式是即時(shí)滿(mǎn)足的,只要信息縮窄到一定范圍我就會(huì)停止添加篩選條件,否則我會(huì)繼續(xù)添加篩選條件。所以即時(shí)刷新能更符合此場(chǎng)景,但與此同時(shí)就需要考慮到性能問(wèn)題。

另外,我們也可從變更頻次和變更概率這兩個(gè)維度進(jìn)行思考。
變更頻次是指用戶(hù)反復(fù)使用篩選的次數(shù),變更概率是指用戶(hù)使用篩選的可能性,一般來(lái)說(shuō),高頻次必然大概率,但大概率不一定高頻次。而這兩種情況對(duì)性能的要求是不同的。還是以報(bào)表和列表為例,在列表中,雖然很大概率會(huì)使用篩選來(lái)尋找信息,但由于用戶(hù)是即時(shí)滿(mǎn)足的,而且滿(mǎn)足即可,所以不會(huì)重復(fù)變更篩選條件。而在報(bào)表中,雖然用戶(hù)會(huì)一次性設(shè)置篩選條件,但需要分析的數(shù)據(jù)不只一種,所以會(huì)高頻更換篩選項(xiàng),回想一下我們?nèi)シ治鲎约寒a(chǎn)品或競(jìng)品的日活月活等數(shù)據(jù)時(shí),是不是會(huì)高頻地切換數(shù)據(jù)來(lái)分析比對(duì)?所以,高頻次的篩選就會(huì)對(duì)性能有更強(qiáng)的要求,而為了避免性能問(wèn)題,往往也會(huì)加上“確認(rèn)”按鈕。
用戶(hù)認(rèn)知
最難解決的其實(shí)是用戶(hù)的認(rèn)知問(wèn)題,尤其在模式相對(duì)固定的當(dāng)下,讓用戶(hù)適應(yīng)并習(xí)慣新的模式并非易事。我們想出一些創(chuàng)新性的篩選模式時(shí),不要忽略用戶(hù)的認(rèn)知。



作者:Colar可樂(lè)      來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話(huà),可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司 

日歷

鏈接

個(gè)人資料

存檔