B端 - 必看的篩選設(shè)計復盤

B端|必看的篩選設(shè)計復盤在平臺的系統(tǒng)和業(yè)務(wù)流程中，篩選功能在一定程度上扮演了相對重要的角色，它的存在可以幫助用戶快速地、便捷地找到自己想要的信息。那么，篩選設(shè)計應該怎么做，才能更符合實際業(yè)務(wù)場景，從而給用戶帶來好的使用體驗？本文作者就對篩選設(shè)計進行了總結(jié)，一起來看。下半年，分配到樓下業(yè)務(wù)線做體驗改造，面對B端龐大的平臺系統(tǒng)和業(yè)務(wù)流程，發(fā)現(xiàn)篩選扮演了基礎(chǔ)且非常重要的角色。就最近的一些工作經(jīng)歷和感悟，對篩選做了一下復盤。在B端系統(tǒng)中，不同的用戶操作著不同的業(yè)務(wù)流程，面對大量的數(shù)據(jù)，能快速且準確的找到自己需要的數(shù)據(jù)，可以明顯提升任務(wù)完成效率。因此篩選作為任務(wù)節(jié)點中的重要媒介工具，設(shè)計師如何才能準確全面的匹配場景，那就先讓我們?nèi)娴恼J識一下篩選。一、篩選的類型篩選的存在無非就是幫助用戶準確、快速的找到目標數(shù)據(jù)，這個數(shù)據(jù)可能是單個，也可能是一組。在《信息架構(gòu)：超越Web設(shè)計》中，篩選系統(tǒng)與導航系統(tǒng)、標簽系統(tǒng)、組織系統(tǒng)被列為信息架構(gòu)的一部分，因此篩選也會與其他系統(tǒng)有一定的聯(lián)系，比如狀態(tài)、類型篩選就需要依賴標簽系統(tǒng)。篩選的類型分為輸入類篩選、選擇器類篩選、平鋪類篩選、分頁篩選、高級篩選。1.輸入類篩選輸入類篩選需要用戶輸入一定的文本關(guān)鍵詞，篩選出對應的數(shù)據(jù)。輸入類篩選從篩選準確性上，可以分為模糊篩選和精準篩選。1）模糊搜索按照用戶輸入的檢索詞，篩選出字段中帶有該檢索詞的所有數(shù)據(jù)。優(yōu)點：可以篩選出同類數(shù)據(jù)。缺陷：精準度不高。2）精準搜索按照用戶輸入的關(guān)鍵詞，僅篩選出整個字段與篩選詞相同的數(shù)據(jù)。優(yōu)點：檢索精準。缺陷：由于過于精準，會考驗用戶的記憶能力。由于精準搜索的精準性，一個字的偏差，都會造成搜索失敗，因此，在正常的設(shè)計應用中，模糊搜索的使用頻率會更高一些。輸入類篩選從篩選形式上，可以分為單標簽搜索和多標簽可切換搜索。3）單標簽單標簽搜索只能在輸入框中的一個既定范圍中搜索。優(yōu)點：便捷，應用普遍。缺陷：范圍少，面對復雜數(shù)據(jù)需要多個組合篩選。4）多標簽可切換在一組標簽中選擇搜索的范圍。優(yōu)點：便捷，節(jié)省空間。缺陷：展示不直觀；多一步選擇標簽的操作；不能組合篩選。如果空間有限，沒有組合搜索的可能性，可以使用多標簽可切換；正常情況下，不要剝奪用戶使用組合篩選的機會。2.選擇器類篩選選擇器類篩選可以是單選或者多選，用戶點擊選擇待選項即可。這類篩選往往是篩選的某類標簽或者某組數(shù)據(jù)，方便用戶批量處理。優(yōu)點：無需準確記憶，適合批量數(shù)據(jù)。缺陷：展現(xiàn)方式不直觀，匹配結(jié)果的精準度不夠。此類篩選往往和表單的選擇器使用的是同一個組件，而且可以使用第三方的開源庫，應用范圍比較廣，同輸入類搜索一樣，是最優(yōu)先被考慮的類型。3.平鋪類篩選平鋪類篩選是將所有的待選項鋪出來，方便用戶直觀選擇。可以是單選，也可以是多選。優(yōu)點：待選項平鋪，選擇方便直觀。缺陷：占用空間，待選項數(shù)量過多的時候，可能會存在折行或隱藏，沒有關(guān)鍵詞搜索，選擇效率變低。平鋪類篩選大多應用在電商、招聘等網(wǎng)站；如果篩選維度很少，空間充足且待選項的數(shù)量在5個左右，可以考慮在表格、列表頁面使用平鋪類篩選。4.分頁篩選分頁Tabs類似于平鋪類篩選，都是將待選項平鋪出來，不一樣的是，分頁Tabs的視覺級別更高一些，相當于標題存在，并且不支持重置，有一些平臺也稱之為分組。優(yōu)點：幫助用戶提前做了一輪篩選；待選項平鋪，選擇方便直觀。缺陷：占用空間，需要考慮待選項的數(shù)量和頁面空間的適配。分頁Tabs對用戶來講無疑是便捷的數(shù)據(jù)篩選，但前提是需要保證大多數(shù)用戶篩選維度的共通性，否則就會對部分用戶造成困擾，或者提供用戶自定義的機會。5.高級篩選高級篩選的判斷關(guān)系較多，一般會包括篩選條件、篩選關(guān)系（且、或）、篩選類型（包含、不包含、等于、不等于等）、篩選值和添加等屬性。優(yōu)點：可以滿足的用戶應用場景最多。缺陷：操作比較繁瑣。二、篩選的布局由于篩選組件的數(shù)量和業(yè)務(wù)應用的場景有所不同，所形成的布局模式會有所差異，大致會分上下布局、側(cè)邊布局、浮層布局、表頭布局。1.上下布局上下布局是值篩選條件位于數(shù)據(jù)的頂部。優(yōu)點：展示直觀，篩選條件和數(shù)據(jù)關(guān)系聯(lián)系更緊密；橫向空間上可以展示更多的數(shù)據(jù)。缺陷：數(shù)量多的話會壓縮縱向空間。上下布局是當前用戶使用方式中最常用的方式，如果系統(tǒng)給的篩選條件過多，需要對篩選條件進行分層，低頻類的需要收起。2.側(cè)邊布局側(cè)邊布局是指將篩選條件列在數(shù)據(jù)的左側(cè)或者右側(cè)。優(yōu)點：可以展示更多的篩選條件。缺陷：寬度大的會壓縮橫向空間；從視線覆蓋面積來講，側(cè)邊布局用戶對照查看數(shù)據(jù)的耗時會更長。使用側(cè)邊布局的時候，需要考量當前內(nèi)容區(qū)數(shù)據(jù)的字段展示量如何。因為一般情況下，側(cè)邊會存在導航，再加側(cè)邊篩選，數(shù)據(jù)壓縮比較嚴重。還要看一下當前用戶的使用習慣如何，對側(cè)邊布局的接受度。3.浮層布局浮層布局一般會有抽屜、對話框、懸浮框。優(yōu)點：節(jié)省空間，能容納更多的篩選條件。缺陷：用戶無法快捷的對比篩選值和篩選數(shù)據(jù)；具有一定的打斷性，特別是對話框和抽屜；用戶再次修改比較麻煩。浮層布局一般在空間有限，又有篩選需求的時候使用；使用過程中需要標記當前有篩選值，最好能將篩選值單獨顯示出來，方便用戶數(shù)據(jù)對比和清除重置。4.表頭布局表頭布局是將篩選條件的圖標固定在表格表頭的右側(cè)，用戶點擊后篩選。優(yōu)點：篩選流程更直觀。缺陷：用戶無法快捷的對比篩選值和篩選數(shù)據(jù)；表頭的空間有限，如果是橫向滾動，隱藏后不容易發(fā)現(xiàn)。1）一般不推薦優(yōu)先使用表頭篩選；像個別場景，空間有限，使用過程要標記當前有篩選值的狀態(tài)。2）如果為方便用戶篩選，又沒必要單獨給界面加一個選擇器類篩選，可以嘗試使用排序代替篩選，讓數(shù)據(jù)以一定的順序進行分組。比如按照優(yōu)先級：高、中、低排序，倒序按照高、中、低的順序排列，正序反之，可以滿足大部分用戶的查詢需求。三、篩選的觸發(fā)方式1.實時觸發(fā)在輸入或者選擇篩選值的時候，數(shù)據(jù)實時匹配。優(yōu)點：篩選效率高。缺陷：比較考驗系統(tǒng)的穩(wěn)定性；對于想要精準搜索范圍的場景，會延長整體的加載時間。與手動觸發(fā)相比，更推薦實時觸發(fā)，但是要考慮系統(tǒng)的穩(wěn)定性，在答應用戶之前先和研發(fā)團隊預研方式的可行性。2.手動觸發(fā)在輸入或者選擇篩選值的之后，需要手動點一下搜索或者查詢按鈕。優(yōu)點：穩(wěn)定性更高。缺陷：多一步操作，效率低。四、幫助用戶1.幫助用戶做收納無論使用哪種布局或者篩選類型，都會遇到篩選條件數(shù)量很多的情況。如果當下不能輕易改變用戶習慣或者優(yōu)化成本太高，可以試試以下三種方式。1、）對篩選條件進行分層，將高頻的篩選條件放在外面，低頻的收起，用戶用到的時候再展開。2）一些復雜B端系統(tǒng)，篩選條件是根據(jù)用戶自定的數(shù)據(jù)生成，因此數(shù)量和內(nèi)容不可控，多角色場景下使用習慣也不一致，這時可以給幾個系統(tǒng)常用篩選條件，讓用戶可以自定義選擇。3）考慮極限情況，如果用戶確實添加了很多的篩選條件，要考慮頁面內(nèi)局部滾動。2.幫用戶標記篩選狀態(tài)如果在使用可收起篩選、浮層篩選、表頭篩選等方式的時候，一定要為用戶標記當前有篩選值的狀態(tài)。如果不標記，用戶在篩選后沒有重置，離開頁面再回來的時候容易遺忘當前已經(jīng)篩選過?；蛘邔⑦x擇后的篩選值外顯，在數(shù)據(jù)頂部放置一份，方便用戶對比和清除。3.幫助用戶記住篩選值1）用戶篩選過后，點擊數(shù)據(jù)查看詳情，如果詳情是一個單獨頁面，往往都會刷新，再返回的時候，篩選條件已經(jīng)清空了，如果用戶需要多次查看該篩選值下的數(shù)據(jù)，需要多次選擇。所以，用戶從下級頁面返回上級頁面的時候，需要幫用戶記住篩選值。至于是研發(fā)記住，還是優(yōu)化設(shè)計表達避免刷新，要具體場景具體分析。2）篩選器的使用有的平臺也會叫過濾器、視圖等，名稱有出入，但是功能大體是一致的。一般在篩選條件數(shù)量和使用角色都比較多的業(yè)務(wù)場景中使用。系統(tǒng)會默認給幾個篩選器：全部、我負責的、我創(chuàng)建的等。這是從另外一個維度幫助用戶記住：將常用的帶有篩選值的篩選條件作為一個篩選組保存起來，方便用戶下次進來的時候直接選擇使用，方式便捷迅速。以下是幾種篩選器在頁面中的常見表現(xiàn)形式。4.幫助用戶更容易到達在有篩選條件的表格頁面，應該確保頂部篩選條件和操作欄固定。如果數(shù)