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

更多控件設計干貨：

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

當我在做一個 SAAS 項目時，我面臨的一個挑戰是從沒想到過它是如此的復雜。在一個銷售歷史頁面中包含了運輸列表，客戶列表，報告和統計數據等等。

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

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

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

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

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

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

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

二、需要理解的基本概念

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

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

一些網站（例如：一些機票預定網站）會默認展示所有選項都被勾選。

篩選復選框未選中任何內容 = 所有都被選擇

2）在大多數情況下，類別不應該通過復選框進行多次選擇

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

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

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

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

批量篩選控件：選擇多個篩選控件，然后點擊“應用篩選控件”或“顯示結果”按鈕。

這兩種方法都有其優缺點。但今天大多數網站使用第一種方法：交互式篩選（自動刷新內容）。

現在我們來談談篩選控件的不同變體。

三、側邊欄篩選控件（垂直篩選控件）

側邊欄篩選控件在大多數網站中都很常見。下面是一些來自網絡的例子：

不同領域的側邊欄篩選控件

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

按品牌來的簡單篩選控件

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

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

側邊欄篩選控件示例

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

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

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

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

首先，當篩選控件被應用時，不要忘記顯示 loading。

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

自動刷新內容

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

當用戶想要根據多個品牌和特定尺寸進行篩選時，每個復選框都會重新加載內容。

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

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

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

有些網站更喜歡通過點擊“應用”或“顯示結果”進行批量篩選，也可以避免出現這個問題。

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

手動點擊按鈕應用篩選

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

以下是一些建議:

1. 讓用戶知道基于該篩選控件總共有多少項可用。(例如找到 10 件物品)
2. 讓用戶能通過點擊“清除所有按鈕”清除所有篩選控件
3. 給用戶顯示已應用哪些篩選控件。用戶可能會忘記他/她從側邊欄應用了一些篩選控件，篩選控件隱藏在“顯示更多”鏈接下。有一個 UI 元素叫做“標簽”。我們將在頂部顯示應用的篩選控件為“標簽”?！皹撕灐笨梢詥为氁瞥?。

關于顯示應用的篩選控件，還有一件事要記住:

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

另一個例子：通過“制造國家”和“運輸到國家”進行篩選。這兩個列表是相似的。

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

五、單選篩選控件

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

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

默認情況下，我們應該為用戶提供查看所有選項的選項。

下面是一個不錯的例子。

六、價格篩選控件

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

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

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

這種篩選控件用于后臺管理控制面板、電商網站和復雜的數據列表。這對用戶體驗設計師和 Web 開發人員來說是最具挑戰性的。

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

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

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

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

八、基礎篩選控件

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

篩選控件

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

選中時的篩選控件

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

但“條件”部分是單一選擇(菜單列表)。單擊選項后，下拉框將關閉。

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

九、高級篩選控件

下面是另一種篩選控件的用戶體驗方法。在選擇按鈕內用上標簽文本。

頂部的篩選控件

篩選控件的 UX 解決方案

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

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

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

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

篩選控件與顯示所有按鈕

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

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

Ebay 的篩選所有對話框窗口

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

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

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

我們應該清除所有篩選控件還是僅清除頂部欄中的“可見”篩選控件?；蛘呶覀儜撝磺宄B上的篩選控件。這是一個有爭議的問題。

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

當用戶打開下拉菜單時，如何關閉它？

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

這有時會讓用戶感到困惑。當我做一些可用性測試時會發現有些用戶在打開下拉菜單后不知道如何關閉它。

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

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

可搜索的下拉篩選列表

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

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

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

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

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

在 ebay 網站上有一個特殊的下拉框，它顯示了所有應用的篩選標準列表，稱為“標簽”。

Ebay 有下拉菜單來顯示應用的篩選控件

這種方法有助于從內容中節省一些額外的空間。

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

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

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

日期選擇器

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

日期選擇器

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

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

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

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

有一些 web 應用帶有條件篩選。

這里有一些來自網絡的例子。

gmail 條件篩選搜索

Airtable 的條件篩選搜索

十五、篩選+搜索

針對特定的搜索關鍵字應用篩選控件是很常見的。搜索功能是一個非常大的話題。

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

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

從特定組搜索篩選控件

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

十六、排序

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

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

可能還有其他排序選項。

總結

以上這些就是關于基礎控件中的篩選控件做的一次研究，匯總了幾乎所有篩選控件可能出現的情況，并對其設計形式和優劣做了分析。

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

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

歡迎關注作者的微信公眾號：「彩云譯設計」