2024,B端篩選有啥變化?

1 評論 4335 瀏覽 41 收藏 26 分鐘

在B端產(chǎn)品設(shè)計中,篩選功能雖然看似簡單,卻是影響用戶體驗(yàn)和數(shù)據(jù)處理效率的關(guān)鍵環(huán)節(jié)。隨著企業(yè)對數(shù)據(jù)管理和分析需求的不斷增長,篩選功能的設(shè)計也變得越來越復(fù)雜多變。這篇文章,將帶領(lǐng)讀者深入了解篩選功能的最新趨勢和最佳實(shí)踐。

篩選雖然是一個較小的設(shè)計模塊,但對于整個 B 端系統(tǒng)來說非常重要。

因?yàn)楹Y選的設(shè)計形式看上去單一,但其實(shí)內(nèi)在的變化還是非常之多,導(dǎo)致很多時候我們在做設(shè)計的時候,就會非常迷茫。

在 2019 年的時候, B 端的整體要求比較簡單,也就導(dǎo)致對于篩選的內(nèi)容剖析并不深入,隨著這些年的行業(yè)發(fā)展,你會發(fā)現(xiàn)篩選的變化非常之大。

既然我是從篩選開始講起的,那我們就嘗試重新將整個篩選進(jìn)行相應(yīng)的梳理,帶領(lǐng)大家重新認(rèn)識整個 B 端組件,B 端設(shè)計。

一、篩選的定義

對于篩選而言,其實(shí)就是數(shù)據(jù)檢索的一種方式。它主要用于系統(tǒng)中數(shù)據(jù)量較大的情況,會根據(jù)數(shù)據(jù)的條件、屬性進(jìn)行細(xì)致的分類,以便于縮小數(shù)據(jù)的結(jié)果范圍。

在去使用時,會存在有幾個重要知識點(diǎn):

1. 數(shù)據(jù)量大

在使用篩選時,一定是系統(tǒng)當(dāng)中表格會存在大量數(shù)據(jù)。

但由于在一個系統(tǒng)當(dāng)中,我們很難做到對用戶的真實(shí)數(shù)據(jù)進(jìn)行預(yù)判,因此在設(shè)計表格頁面時就需要搭配設(shè)計篩選,它幾乎是一個必要條件。

2. 篩選運(yùn)算關(guān)系

在用戶使用多個篩選條件時,系統(tǒng)會默認(rèn)使用 “AND”的條件關(guān)系。

除了 AND 之外,還會存在 “OR”以及”NOT”條件關(guān)系(也就是:且、或、非),如果要同時使用 且、或、非 的關(guān)系,則需要使用復(fù)雜篩選組件才能滿足(在文章后半段會講)。

3. 篩選與表單關(guān)聯(lián)

篩選當(dāng)中的數(shù)據(jù),其實(shí)會與其表單數(shù)據(jù)互通。比如用戶填寫表單用了 商品類型、商品分類、商品類目 等選擇類組件時,在表格當(dāng)中就會使用篩選進(jìn)行檢索;用戶填寫表單用了 商品名稱、商品條碼 等輸入類組件,在表格當(dāng)中就會使用搜索框進(jìn)行檢索。

4.篩選的意義

其實(shí)我們了解篩選的定義,并不能設(shè)計一個好的篩選。

在去做篩選需求,我認(rèn)為最重要是理解用戶使用表格的目的與習(xí)慣。

比如,我們現(xiàn)在你是一名 HR,在表格處會有 800 份簡歷,你的任務(wù)是找到 10 份合適的簡歷。

由于數(shù)據(jù)太多,你不能一個個去查看,因此就需要通過篩選來去做快速的尋找,會有那些篩選條件呢?

所以你會發(fā)現(xiàn)想要做好篩選,就必須得去明確表格的真實(shí)場景。

因?yàn)槊恳粋€人的工作習(xí)慣不同,對于系統(tǒng)理解不同,因此需要去尋找到一個最折中的解決方案。

而在設(shè)計時,我們會更關(guān)注用戶的使用習(xí)慣,也就是通過數(shù)據(jù)埋點(diǎn)、現(xiàn)場觀察的方式,通過定性、定量的方式去做系統(tǒng)的分析。

二、篩選的布局

篩選的布局,也就是篩選會與表格如何進(jìn)行搭配呈現(xiàn)。我們先來了解一下不同的布局形式:

1. 上下布局

上下布局是最常使用的一種布局方式,將篩選放在表格內(nèi)容上方,用戶可以操作篩選條件并閱讀數(shù)據(jù)。

上下布局本身沒有字段的限制,如果字段較少,就能占據(jù)在表格上方,能夠讓用戶快速操作;如果字段較多,就會讓用戶使用 收折、自定義 等方式進(jìn)行優(yōu)化,盡可能減少頁面占比。

通常建議篩選高度不宜過高,如果超過三行(100px左右)就要通過設(shè)計進(jìn)行處理。

2. 左右布局

左右布局是系統(tǒng)當(dāng)中較為特殊的方式,因?yàn)闀⑵浞胖迷陧撁娴淖笥覂蓚?cè),讓用戶優(yōu)先進(jìn)行篩選操作,再閱讀數(shù)據(jù)。

但由于左右布局通常都是縱向排列,在篩選項(xiàng)的呈現(xiàn)上會更為容易,因此會更適配篩選條件較多的情況。

3. 容器布局

通過 彈窗、抽屜、氣泡卡片 等方式,將篩選條件進(jìn)行呈現(xiàn)。

在頁面當(dāng)中由于是非常駐的情況,因此只能適配非高頻使用的場景。

4. 布局背后的邏輯

在這里大家一定要先明白一個概念,頁面當(dāng)中的布局,其實(shí)會與整個用戶的屏幕尺寸(表格可使用尺寸)密切相關(guān)。

如果要明確篩選在哪個位置?

我們必須優(yōu)先了解兩種數(shù)據(jù):

a.用戶常用表格尺寸

b.系統(tǒng)當(dāng)中的類型

a. 表格尺寸會決定我們整體的布局方式

這里要解決大家一個誤區(qū):在篩選當(dāng)中,我們更關(guān)注的是表格內(nèi)容所能呈現(xiàn)的具體尺寸,而非屏幕尺寸。

  • 如果表格尺寸以寬屏為主,那我們就可以考慮使用左右布局方式排列;
  • 如果表格尺寸以方屏為主,那我們就可以將布局進(jìn)行上下排列;
  • 如果表格尺寸本身太小,屏效很低,那我們就可以進(jìn)行收折排列。

關(guān)于屏效,其實(shí)就是表格所占用整體面積的大小比例,計算公式為:頁面面積 / 表格面積 = 屏效比

b. 在系統(tǒng)當(dāng)中的類型也很重要

系統(tǒng)一共會分為四類,不同的類型對應(yīng)的用戶群體并不相同。

如果是 運(yùn)營管理型、行業(yè)屬性型 的產(chǎn)品,比如 :有贊、小鵝通、美團(tuán)商家后臺、小紅書千帆… 由于用戶水平各異,導(dǎo)致我們再去設(shè)計的時候,需要去考慮將交互的難度降低,因此在設(shè)計的篩選的時候會更為簡單。

如果是一些復(fù)雜系統(tǒng),則會采取更難、占比更低的呈現(xiàn)形式,比如 容器布局,將篩選信息收折,因?yàn)橐环矫媸菑?fù)雜系統(tǒng)信息不可控,因此 使用容器會更容易解決篩選當(dāng)中的多字段的情況;另一方面是復(fù)雜系統(tǒng)的信息密度很高,很難騰出大量空間去呈現(xiàn)篩選。

三、篩選的類型

隨著時間的推移,你會發(fā)現(xiàn)篩選的類型非常多不同的形式。

很多設(shè)計師都會根據(jù)自己的業(yè)務(wù)情況,開始自定義不同的類型形式。因此我們就嘗試將其進(jìn)行總結(jié)~ 希望能夠有一個更為完整的類型表幫助大家進(jìn)行理解。

1. 表單篩選

表單篩選就是將篩選模塊通過表單的形式進(jìn)行呈現(xiàn),通常位于頁面頂部,能夠使用戶快速點(diǎn)擊。它的門檻很低,幾乎所有的產(chǎn)品都可以使用表單篩選。

當(dāng)然,在頂部空間有限的情況下,我們也可以使用左右兩側(cè)的方式,去呈現(xiàn)表單內(nèi)容。

如果表單過長,我們就會去考慮通過收折的方式進(jìn)行排布,這幾乎是每一個表單篩選的必備選項(xiàng)。

如果篩選字段本身不多,又想讓篩選的樣式變得很好,也可以考慮將整個篩選作為一個標(biāo)簽,放置在輸入框內(nèi),這會和表單輸入框形成區(qū)分,能夠讓用戶快速知道這是篩選的內(nèi)容。

2. 外露篩選

外露篩選嚴(yán)格來說是表單篩選當(dāng)中的一個分支,其更加強(qiáng)調(diào)在篩選中的選項(xiàng)內(nèi)容直接外露展示,能夠更快更高效地進(jìn)行數(shù)據(jù)選擇。

比如在京東網(wǎng)頁端搜索完一件商品后,就會提供較多的外漏選項(xiàng)來幫助我們提前進(jìn)行數(shù)據(jù)的聚焦。

這里我們可以思考一下,京東為什么會將選項(xiàng)外露?

在這里其實(shí)就是由于搜索出來的結(jié)果過于寬泛,并且很難針對用戶提供個性化的推送,因此可以將外露的篩選放置出來,盡可能的精準(zhǔn)搜索的結(jié)果。

當(dāng)然在目前的 B 端產(chǎn)品當(dāng)中,由于外露的方式所占的空間過大,因此目前在行業(yè)中存在兩種解法:

a.像有贊一樣,基于傳統(tǒng)的表單篩選。

但會提供部分高頻使用的篩選項(xiàng)進(jìn)行外露,進(jìn)而可以提高效率。

比如在 淘寶、京東的網(wǎng)頁端,它們在商品價格處提供了金額的快捷選擇,外露的方式會比用戶單獨(dú)進(jìn)行金額的輸入效率要高。

b.像紛享銷客一樣,由于本身的篩選邏輯異常復(fù)雜,會將選項(xiàng)外露的權(quán)限給到用戶,讓其進(jìn)行自定義,從而解決用戶高頻使用的情況。

3. 指標(biāo)篩選

嚴(yán)格意義上來說,指標(biāo)算不上一種篩選類型,只是想把它拎出來,給到同學(xué)們進(jìn)行學(xué)習(xí)。

在使用時,就是當(dāng)用戶想要確切了解不同類型中的具體數(shù)值時,可以使用指標(biāo)圖+篩選融合的方式,實(shí)現(xiàn)高效地操作。

比如在一個 HRM 系統(tǒng)當(dāng)中,候選人表格里 HR 最關(guān)注的便是 候選人當(dāng)前的進(jìn)度狀態(tài)。這時候我們就可以將指標(biāo)圖放置在表格頂部,幫助用戶進(jìn)行點(diǎn)擊,從而快速實(shí)現(xiàn)篩選操作,同時也會有數(shù)據(jù)下鉆的感覺,比起讓用戶重新進(jìn)行下拉選擇,易用性會更強(qiáng)。

4. 復(fù)雜篩選

復(fù)雜篩選其實(shí)是業(yè)務(wù)當(dāng)中字段不可控的無奈之舉。

如果你要去使用復(fù)雜篩選,也就意味著你的系統(tǒng)當(dāng)中會存在有非常多的自定義字段,用戶在篩選時會使用 且、或、非 等篩選條件,這時候你的篩選就沒辦法只能這么復(fù)雜。

比如 紛享銷客、Coding、ONES、明道云、簡道云… 它們其實(shí)都是在系統(tǒng)當(dāng)中,提供大量的自定義字段需要用戶進(jìn)行配置,因此只能使用復(fù)雜篩選進(jìn)行呈現(xiàn)。

為了讓大家理解這個無奈,我舉一個例子:比如在 ONES 當(dāng)中,由于自己是一個研發(fā)管理產(chǎn)品,每一個企業(yè)的研發(fā)流程與字段屬性配置并不相同,因此會使用自定義字段讓用戶自行配置自己的業(yè)務(wù)。

那自定義字段里面如何進(jìn)行篩選操作就會非常頭疼,大多數(shù)情況下就只能使用復(fù)雜篩選來解決問題,因此就會出現(xiàn)下面的這種情況。

這里需要解釋一下復(fù)雜篩選的基本結(jié)構(gòu),第一個選擇器為 篩選字段的選擇、第二個為 篩選對應(yīng)的運(yùn)算符、第三個為 所篩選對應(yīng)的值。

對于復(fù)雜篩選來說,我們也會去考慮在設(shè)計上對其進(jìn)行優(yōu)化。

5. 表頭篩選

表頭篩選其實(shí)也是我們的老朋友,早在 19 年的時候我們就曾聊到過。它就是在表格的表頭處提供篩選的入口,當(dāng)用戶點(diǎn)擊過后去執(zhí)行篩選的操作。不過在表頭篩選當(dāng)中,會存在部分特殊情況。

a.為復(fù)雜篩選進(jìn)行優(yōu)化,因?yàn)閺?fù)雜篩選需要進(jìn)行復(fù)雜的篩選項(xiàng)選擇,而用戶所關(guān)注的數(shù)據(jù)通常也是表格當(dāng)中的前半段數(shù)據(jù),因此便可以實(shí)現(xiàn)點(diǎn)擊表頭,添加篩選項(xiàng)的操作。

b.在表頭直接篩選,點(diǎn)擊篩選圖標(biāo)后,直接展示下拉選項(xiàng)。

這就和 Excel 的表格篩選如出一轍,使用門檻也會相對較低。

表頭篩選其實(shí)也是篩選過程當(dāng)中的一種補(bǔ)充,算是篩選不好用時我們可以考慮的一個范疇,比如在復(fù)雜篩選時,就可以與表頭篩選進(jìn)行結(jié)合。

6. 篩選組

既然篩選很麻煩,那如果我每天進(jìn)入到一個系統(tǒng)當(dāng)中,都會去使用某一類篩選條件,那有什么辦法嗎?

這時候就會去考慮「篩選組」它其實(shí)就是將自己常用的多個篩選條件,通過保存的方式在系統(tǒng)當(dāng)中記錄下來,這樣就能實(shí)現(xiàn)日常高配篩選的快速訪問。

比如在飛書招聘當(dāng)中,由于候選人的數(shù)據(jù)字段很多,每一個 HR 的使用習(xí)慣并不相同,因此在篩選中你會發(fā)現(xiàn)可以添加篩選值以及保存當(dāng)前篩選數(shù)據(jù)放置在左側(cè),能夠快速呼出自己想創(chuàng)建的數(shù)據(jù)。

除了飛書,在紛享銷客也有類似情況,我們可以添加篩選,保存對應(yīng)的篩選條件,不過在紛享銷客上它們做的更極致,能夠去配置表格的 排序方式、表格中每一個字段的順序,這樣會使整個功能更強(qiáng)大。

當(dāng)然在 ONES 當(dāng)中也會存在類似情況,不過他們的解法不一樣,會將保存的篩選組放在頂部,進(jìn)行 tab 展示,這也會是一種不錯的解決方案。

7.AI 篩選

隨著 AI 能力的不斷擴(kuò)充,你會發(fā)現(xiàn) AI 與 篩選 之間,存在著一種不可描述的魔力。

因?yàn)樵跇I(yè)務(wù)當(dāng)中,想要去做數(shù)據(jù)的篩選分析本身就比較復(fù)雜,因此可以通過 AI 的加持,使整個篩選的難度降低,為產(chǎn)品創(chuàng)造出新的機(jī)會點(diǎn)。

比如 JIRA 當(dāng)中,我們可以通過 AI 篩選的方式,將復(fù)雜的程序篩選邏輯變?yōu)楦唵蔚闹苯雍Y選方式,明顯的效率更高。

在有贊當(dāng)中,也會有類似的 AI 功能提供給用戶進(jìn)行對話操作,進(jìn)而執(zhí)行篩選。

8. 特殊篩選形式

其實(shí)對于常規(guī)的字段篩選以外,我們在日常工作中還會有圖片類的篩選情況。

比如我們在監(jiān)控系統(tǒng)當(dāng)中,我們就可以使用對應(yīng)的圖片篩選去精準(zhǔn)數(shù)據(jù)結(jié)果,這類型在日常工作中比較少見,因此提供給到大家作為一個參考。

四、如何去做好篩選?

其實(shí)對于篩選來說,如何才能做好它?

1. 明確它的使用位置

這句話聽上去有些奇怪,但做過篩選的同學(xué)就知道,因?yàn)槲覀兂嗽诒砀裰袝褂煤Y選之外,還會將它與其他很多地方進(jìn)行關(guān)聯(lián)。

比如在數(shù)據(jù)分析頁面當(dāng)中,我們就需要通過篩選的方式,結(jié)合圖表得到我們想要的數(shù)據(jù)內(nèi)容。

再到規(guī)則的配置頁面中,我們很多數(shù)據(jù)條件配置選項(xiàng),也可以使用復(fù)雜的篩選得到解決。

落地到實(shí)際的業(yè)務(wù),比如我需要去做相應(yīng)的廣告投放,也會通過篩選來配置相應(yīng)的投放規(guī)則。

因此你會發(fā)現(xiàn),雖然我們剛開始只會去講它與表格之間的關(guān)系,但真正落地時,它的使用場景會非常的多。這也就導(dǎo)致了我們在做設(shè)計的時候,不能僅僅局限于一個維度。

你需要考慮不同場景當(dāng)中可能會存在的解決方案,不過在前期時可以理解為篩選維度單一,因此將方案收斂一下,做得更為簡單。

2. 確定交互變種

因?yàn)楹Y選本身,它能以非常多不同的方式呈現(xiàn)。只要是選擇類的組件,我們都可以使用篩選的方式來進(jìn)行設(shè)計。但由于思維的慣性,導(dǎo)致我們從一開始只會去考慮下拉選擇。而一些常見的交互變種,能夠給我們帶來意想不到的收獲。

比如滑塊,它就能在一些特定的篩選場景中進(jìn)行使用。因此,需要大家有較為敏銳的嗅覺,同時要在工作中收集足夠多的篩選內(nèi)容和案例,為后面的設(shè)計方案做足準(zhǔn)備。

3. 循序漸進(jìn)

在設(shè)計篩選功能時,我們不能期待一勞永逸的解決方案。每個產(chǎn)品都有其獨(dú)特的特性和需求,這意味著沒有一種萬能的策略能夠適用于所有場景。

因此,我們必須根據(jù)每個產(chǎn)品的具體情況,有針對性地規(guī)劃和構(gòu)建篩選功能的框架。

設(shè)計篩選功能應(yīng)該是一個逐步推進(jìn)的過程,既要有短期內(nèi)可實(shí)現(xiàn)的計劃,也要有長遠(yuǎn)的視角。這要求我們具備前瞻性,能夠預(yù)測業(yè)務(wù)發(fā)展中可能遇到的問題,并據(jù)此靈活調(diào)整設(shè)計策略。只有這樣,我們才能確保篩選功能不僅能夠滿足當(dāng)前的需求,還能適應(yīng)未來的發(fā)展,保持其擴(kuò)展性和靈活性。

在產(chǎn)品開發(fā)的早期階段,如果產(chǎn)品的功能和字段較少,我們應(yīng)該避免將篩選功能設(shè)計得過于復(fù)雜。簡化設(shè)計不僅可以提升用戶的使用效率,還能有效降低開發(fā)成本。

隨著產(chǎn)品的不斷迭代和業(yè)務(wù)需求的增長,我們可以逐步引入更高級的篩選條件,以此來不斷優(yōu)化用戶體驗(yàn)并提升產(chǎn)品的整體性能。這種逐步演進(jìn)的策略,才是最為合理和有效的。

五、我認(rèn)為的篩選最優(yōu)思路

關(guān)于篩選,我認(rèn)為更多是需要設(shè)計師在組件層面上做更多的了解,然后再進(jìn)行拓展。

在產(chǎn)品初期,我們需要使用表單篩選來盡可能滿足產(chǎn)品的通用性,讓整個項(xiàng)目能夠快速上線。

在產(chǎn)品成長期,我們就可以對表單進(jìn)行更多特殊樣式的定制,比如外露指標(biāo),以優(yōu)化表單篩選所帶來的不足。

在產(chǎn)品成熟期,就可以使用更多更為復(fù)雜的篩選來滿足產(chǎn)品的上限,以獲得更多的可能性。

當(dāng)然,不同產(chǎn)品的情況可能還是會有所不同,因此這里只能提供一個建議,大家還是需要根據(jù)自己的情況來做出相應(yīng)的調(diào)整。

因?yàn)樾枨笤谧儯M件在變,不變的是你的思考~

本文由人人都是產(chǎn)品經(jīng)理作者【CE青年】,微信公眾號:【CE青年Youthce】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 非常好?。?!

    來自山東 回復(fù)