如果你是一名 UX/UI 設(shè)計師，不要錯過這篇文章。把 UI 中的一個控件設(shè)計講細(xì)講透，一些設(shè)計細(xì)節(jié)可能你之前都沒想過，這篇文章值得收藏閱讀。

更多控件設(shè)計干貨：

篩選控件，是非常常用的 UI 控件，它幾乎隨處可見。尤其是在一些 B 端后臺界面和電商網(wǎng)站中，面對大量信息時，這個 UI 控件用的非常多。篩選和排序能幫助用戶從長長的列表里快速找到自己需要的信息。

當(dāng)我在做一個 SAAS 項目時，我面臨的一個挑戰(zhàn)是從沒想到過它是如此的復(fù)雜。在一個銷售歷史頁面中包含了運輸列表，客戶列表，報告和統(tǒng)計數(shù)據(jù)等等。

所有這些列表都有特殊的篩選和排序，有不同的條件，如日期、狀態(tài)、類別等。在做的過程中，我做了專項研究并找到一些好的方法去設(shè)計這些復(fù)雜的情況，今天和大家分享。

一、為什么需要篩選和排序功能

篩選，能以特定的標(biāo)準(zhǔn)幫助聚焦信息。例如，在一個電商網(wǎng)站，一位用戶希望按大小，顏色，價格和品牌等選項更容易篩選出自己想要找的商品。

如果沒有這個篩選控件，用戶可能需要搜索整個列表，這會非常浪費時間并且體驗極差。

在這篇文章中，我將主要研究 PC 端的設(shè)計方法。移動端的下次再寫，保持關(guān)注。

如果你是一位設(shè)計師，你大概率會思考下面這些問題：

1. 篩選控件應(yīng)該放在哪比較合適，頂部欄還是側(cè)邊欄？
2. 當(dāng)用戶在篩選控件中選擇時，頁面要怎么變化？
3. 用戶如何更方便地知道選擇了哪些篩選控件？
4. 應(yīng)該把像“應(yīng)用”“清除”“重置”等按鈕放在什么位置比較好？
5. 如何設(shè)計多標(biāo)準(zhǔn)的復(fù)雜篩選控件？

二、需要理解的基本概念

對于所有類型的篩選控件，有一些共性的概念需要理解。

1）如果什么都沒有勾選的話，等同的意思就是全選了，所有內(nèi)容都會被顯示出來。

一些網(wǎng)站（例如：一些機票預(yù)定網(wǎng)站）會默認(rèn)展示所有選項都被勾選。

篩選復(fù)選框未選中任何內(nèi)容 = 所有都被選擇

2）在大多數(shù)情況下，類別不應(yīng)該通過復(fù)選框進行多次選擇

例如，玩具和食品是完全不同的東西，在同一個列表中顯示是沒有意義的，使用菜單鏈接會更合適一些。

篩選控件不能包含類別，用戶必須先從菜單中選擇類別

3）有兩種方法可以讓用戶使用篩選控件

自動：每次選擇后刷新列表 — 交互式篩選（也稱為 Ajax 重載）

批量篩選控件：選擇多個篩選控件，然后點擊“應(yīng)用篩選控件”或“顯示結(jié)果”按鈕。

這兩種方法都有其優(yōu)缺點。但今天大多數(shù)網(wǎng)站使用第一種方法：交互式篩選（自動刷新內(nèi)容）。

現(xiàn)在我們來談?wù)労Y選控件的不同變體。

三、側(cè)邊欄篩選控件（垂直篩選控件）

側(cè)邊欄篩選控件在大多數(shù)網(wǎng)站中都很常見。下面是一些來自網(wǎng)絡(luò)的例子：

不同領(lǐng)域的側(cè)邊欄篩選控件

下面是一個最簡單的側(cè)邊欄選擇器：

按品牌來的簡單篩選控件

上面的例子顯示，在篩選控件勾選后，只需要有“重置”按鈕，沒有額外的需求。

但如果有很多篩選組（按品牌、尺寸、價格）和一個長復(fù)選框列表，該怎么辦呢？

側(cè)邊欄篩選控件示例

建議不要把全部可用的篩選選項都顯示出來(復(fù)選框或鏈接)，只顯示 5-6 個最重要的復(fù)選框/鏈接，并把其他的隱藏在 “顯示更多” 擴展按鈕下。

另外，在設(shè)計上讓用戶也可以通過點擊它的標(biāo)題來折疊整個群組，如上圖所示。在 Web 開發(fā)術(shù)語中，它被稱為手風(fēng)琴。

一些網(wǎng)站使用滾動來顯示長長的篩選控件選項列表。但是不建議這樣做，體驗會比較差。

四、那么當(dāng)勾選某個選項時，頁面要怎么變化呢？

首先，當(dāng)篩選控件被應(yīng)用時，不要忘記顯示 loading。

（彩云注：例如淘寶的網(wǎng)頁版就是會有頁面的 Loading。但如果內(nèi)容很多時，內(nèi)容少，其實也不一定需要。比如百度網(wǎng)盤中的多選例子。）

自動刷新內(nèi)容

但是交互式篩選(自動刷新頁面)有一個小問題：

當(dāng)用戶想要根據(jù)多個品牌和特定尺寸進行篩選時，每個復(fù)選框都會重新加載內(nèi)容。

讓我們想象一下，用戶想要根據(jù) 10 個條件進行篩選，這意味著 10 次無用的重新加載。每次重新加載都意味著向服務(wù)器發(fā)送請求。那么如何避免無用的重新加載呢？

這里有一個技巧：在每次選擇后顯示 1 秒或更短的假加載。在假加載期間，用戶還可以選擇其他篩選控件。（兼顧了效率和用戶心理）

例如，用戶選擇了一個復(fù)選框，然后在加載期間，他可以選擇另一個復(fù)選框。完成多次選擇后，在 1 秒內(nèi)出現(xiàn)假加載，而不發(fā)送請求以確保用戶沒有選擇任何其他篩選控件。最后將通過發(fā)送請求來應(yīng)用篩選控件。

有些網(wǎng)站更喜歡通過點擊“應(yīng)用”或“顯示結(jié)果”進行批量篩選，也可以避免出現(xiàn)這個問題。

在頁面重新加載之前，讓用戶知道按鈕中顯示的結(jié)果數(shù)量，比如“顯示 12 個結(jié)果”，也是很有幫助的。

手動點擊按鈕應(yīng)用篩選

這兩種選擇各有利弊。但是如今它的第一個版本非常受歡迎：自動刷新內(nèi)容，特別是側(cè)邊欄篩選控件。

以下是一些建議:

1. 讓用戶知道基于該篩選控件總共有多少項可用。(例如找到 10 件物品)
2. 讓用戶能通過點擊“清除所有按鈕”清除所有篩選控件
3. 給用戶顯示已應(yīng)用哪些篩選控件。用戶可能會忘記他/她從側(cè)邊欄應(yīng)用了一些篩選控件，篩選控件隱藏在“顯示更多”鏈接下。有一個 UI 元素叫做“標(biāo)簽”。我們將在頂部顯示應(yīng)用的篩選控件為“標(biāo)簽”。“標(biāo)簽”可以單獨移除。

關(guān)于顯示應(yīng)用的篩選控件，還有一件事要記住:

讓我們想象一下，一些篩選條件是類似的，例如：篩選“座位號碼”和“輪子數(shù)量”兩者都是數(shù)字。

另一個例子：通過“制造國家”和“運輸?shù)絿摇边M行篩選。這兩個列表是相似的。

在這種情況下，重要的是要在每個可移動的“標(biāo)簽”上顯示應(yīng)用篩選控件的標(biāo)題，淘寶也是這么做的。下面是一個例子:

五、單選篩選控件

我們已經(jīng)看到了通過復(fù)選框篩選，用戶可以選擇許多選項。但是如果讓用戶選擇單一選項呢?

我們可以用單選按鈕。例如按產(chǎn)品條件篩選：“新的”、“使用過的”、“退回的”。用戶只能選擇單個選項。

默認(rèn)情況下，我們應(yīng)該為用戶提供查看所有選項的選項。

下面是一個不錯的例子。

六、價格篩選控件

有兩種按價格篩選的方法：手動輸入或拖動的范圍滑塊。

價格篩選控件的界面框架示意

七、頂部篩選控件（水平篩選）

這種篩選控件用于后臺管理控制面板、電商網(wǎng)站和復(fù)雜的數(shù)據(jù)列表。這對用戶體驗設(shè)計師和 Web 開發(fā)人員來說是最具挑戰(zhàn)性的。

選項列表是隱藏的。所以用戶必須打開下拉菜單來查看篩選控件選項。如果你給用戶的選項特別多，這種篩選控件最好。

頂部橫向篩選控件的一些例子

頂部的篩選欄也可以是交互式的(自動刷新內(nèi)容)，或者通過點擊“應(yīng)用”或“顯示結(jié)果”來批量篩選。

在下拉框中，我們可以放置任何 UI 組件：復(fù)選框，單選按鈕或輸入字段或只是菜單列表。

八、基礎(chǔ)篩選控件

通常我們默認(rèn)顯示所有選項。所以下拉按鈕值顯示“任意”或“全部”。

篩選控件

當(dāng)選擇篩選控件選項時，頁面將重新加載(交互式篩選控件)

選中時的篩選控件

在上面的例子中，“品牌”是多個可選擇的復(fù)選框，用戶可以選擇多個選項并關(guān)閉下拉框。

但“條件”部分是單一選擇(菜單列表)。單擊選項后，下拉框?qū)㈥P(guān)閉。

篩選控件中的條目被選擇后

九、高級篩選控件

下面是另一種篩選控件的用戶體驗方法。在選擇按鈕內(nèi)用上標(biāo)簽文本。

頂部的篩選控件

篩選控件的 UX 解決方案

頂部的“標(biāo)簽”可以幫用戶一目了然地看到所有應(yīng)用的篩選控件。因為用戶可能會忘記應(yīng)用了哪些篩選控件。你還應(yīng)該提供一個選項，一鍵刪除整個篩選控件：“重置篩選控件”。

十、帶“所有篩選控件”按鈕的篩選控件欄

如果有很多篩選組呢？對于用戶來說，不需要在頂部看到所有的篩選控件。有時用戶永遠(yuǎn)不會使用某些篩選控件。

只顯示最重要的篩選控件。點擊“所有篩選控件”或“顯示全部”按鈕再打開剩余部分。

篩選控件與顯示所有按鈕

通過“顯示全部”按鈕打開篩選控件側(cè)邊欄

另一種在屏幕中央顯示為模態(tài)窗口的方法。例如：Ebay 和 LinkedIn 使用這種方法:

Ebay 的篩選所有對話框窗口

我們可以將任何組件放在模態(tài)窗口上。例如：下拉框、復(fù)選框等。這是一個例子：

記??！在模態(tài)窗口上顯示所有篩選控件是一個很好的做法。但不要在模式窗口上僅顯示剩余（隱藏）的篩選控件。

為什么？因為如果你在模式窗口上僅顯示一些篩選控件，那么如果用戶單擊“清除篩選控件”或“重置”按鈕會發(fā)生什么？

我們應(yīng)該清除所有篩選控件還是僅清除頂部欄中的“可見”篩選控件。或者我們應(yīng)該只清除模態(tài)上的篩選控件。這是一個有爭議的問題。

十一、帶有搜索和操作按鈕的高級下拉框

當(dāng)用戶打開下拉菜單時，如何關(guān)閉它？

1. 點擊你打開的地方
2. 單擊下拉框的外部區(qū)域

這有時會讓用戶感到困惑。當(dāng)我做一些可用性測試時會發(fā)現(xiàn)有些用戶在打開下拉菜單后不知道如何關(guān)閉它。

另一個問題是：如果你將國家的完整列表顯示為下拉列表，那么很難從 200 個國家的列表中找到和選擇。

以下是我個人的解決方案:

可搜索的下拉篩選列表

在上面的截圖中，你可以看到有一個“重置”按鈕。你也可以根據(jù)情況選擇“取消”或“關(guān)閉”。

如果列表上沒有任何變化，那么“關(guān)閉”按鈕將有意義。如果用戶更改篩選控件列表，那么“重置”比“關(guān)閉”更有用。

另一個價格篩選控件的例子:

頂部篩選欄上帶有價格篩選控件的下拉菜單

十二、顯示應(yīng)用了篩選控件列表的另一種方式

在 ebay 網(wǎng)站上有一個特殊的下拉框，它顯示了所有應(yīng)用的篩選標(biāo)準(zhǔn)列表，稱為“標(biāo)簽”。

Ebay 有下拉菜單來顯示應(yīng)用的篩選控件

這種方法有助于從內(nèi)容中節(jié)省一些額外的空間。

十三、帶日期范圍的篩選控件

對一些應(yīng)用來說，按日期篩選也很重要。比如對于電商網(wǎng)站來說，可能需要有一個管理面板來查看銷售歷史。

如何查看 xx 至 yy 日期之間的所有銷售額。

日期選擇器

這里有一個更好的日期解決方案:首先提供快速選擇選項，如“今天”，“昨天”，“本月”，“上個月”，“今年”和最后一個“自定義周期”。

日期選擇器

從我的可用性研究來看，用戶很容易分別選擇“開始日期”和“結(jié)束日期”，而不是從一個日期選擇框。但你的情況可能不一樣。

另一種方法顯示日期篩選控件在單個下拉菜單快速選擇:

如果你是一名 UX 設(shè)計師，那么你應(yīng)該清楚你的開發(fā)團隊正在使用哪些組件。不要讓它過于復(fù)雜。如果你正在開發(fā)新內(nèi)容，請與前端開發(fā)人員進行交流。

十四、帶有自定義條件的篩選控件

有一些 web 應(yīng)用帶有條件篩選。

這里有一些來自網(wǎng)絡(luò)的例子。

gmail 條件篩選搜索

Airtable 的條件篩選搜索

十五、篩選+搜索

針對特定的搜索關(guān)鍵字應(yīng)用篩選控件是很常見的。搜索功能是一個非常大的話題。

你可以添加一些東西來改善搜索組件的用戶體驗，使用自動建議或顯示最近的搜索歷史作為建議。

在某些情況下，你可以讓用戶在特定組中搜索：

從特定組搜索篩選控件

默認(rèn)情況下，搜索將從數(shù)據(jù)庫中所有匹配的文本中查找。但是你可以選擇只從特定組或類別中查找選項。

十六、排序

排序允許用戶按照特定的順序排列數(shù)據(jù)，例如按字母順序或數(shù)字順序排列。排序不會隱藏或顯示額外的信息。它只是重新排列列表順序。以下是最流行的排序選項：

1. 推薦
2. 按 A-Z 排序
3. 按 Z-A 排序
4. 價格：最便宜放前面
5. 價格：最貴的放前面
6. 按評級
7. 受歡迎
8. 最新

可能還有其他排序選項。

總結(jié)

以上這些就是關(guān)于基礎(chǔ)控件中的篩選控件做的一次研究，匯總了幾乎所有篩選控件可能出現(xiàn)的情況，并對其設(shè)計形式和優(yōu)劣做了分析。

有一些細(xì)節(jié)是自己平時做設(shè)計時被忽略的，專項研究還是蠻有意義，也建議大家嘗試去做。專注在一個點上，把一個簡單的事情搞透，定會學(xué)到很多自己沒注意到的細(xì)節(jié)。

這些研究結(jié)果，仔細(xì)閱讀，相信能應(yīng)用到你正在做的網(wǎng)頁項目中，比如后臺界面設(shè)計中就常常會用到這些篩選控件設(shè)計，希望對你的實際工作提供一些幫助。

歡迎關(guān)注作者的微信公眾號：「彩云譯設(shè)計」