B 端設計師，大概都會遇到這樣的表格頁面：

你可能也會經常思考這些問題：

1. 篩選條件的內容和數量太多，怎么精簡？
2. 輸入框內外的字段內容長短不一，排版看上去不整齊怎么辦？
3. 這么多篩選條件，在移動端如何做展示？

盤點了數十款國外優秀的 B 端產品的設計案例之后，我總結出 3 條表格 Filter 的設計優化方法，相信會幫你解決以上問題。

更多表格設計方法：

一、Filter 的優化方法

1. 分清主次，次要內容收起。

主要的、用戶常用的篩選項可以平鋪在 Table 上方；次要的、用戶不一定常用的篩選項可以收起，使用下拉菜單、彈窗或抽屜呈現：

案例 1 收付款產品 Stripe：將幾乎所有的篩選項都收入到表格右上方的 “篩選” 按鈕中。用戶點擊后可以在下拉菜單中進行篩選操作， “篩選” 按鈕上會提示用戶已選中的項目數量：

案例 2 國際匯款產品 Wise：同樣是將幾乎所有的篩選項都收入到表格右上方的 “Fliter” 按鈕中，點擊后可以在抽屜中篩選操作。 “Filter” 按鈕上會也會顯示選擇的項目數量：

案例 3 收付款產品 Paypal：也是將大部分篩選項都收入到右上方的 “Fliter” 按鈕中，按鈕上會也會顯示選中的項目數量，同時表格上方會用標簽顯示用戶選擇的項目內容：

總結來說：使用“篩選”按鈕作為篩選入口 >在下拉菜單 / 抽屜 / 彈窗中進行篩選操作 > 篩選的數量或項目內容顯示在表格上方或按鈕上。這樣做的好處是：

1. 保證頁面的第一感官是簡潔的，不會給用戶造成太多選擇困擾或心理壓力；
2. 內容少，頁面的響應式布局也更易處理。

2. 去掉輸入框，使用伸縮標簽。

國外很多產品的篩選項已經去掉了輸入框，使用可伸縮的標簽（Tag） 樣式代替輸入框。在用戶選擇篩選條件之后，標簽 Tag 會延展變長，展示用戶選擇的內容或數量：

案例 1 Stripe：使用虛線框的標簽 Tag 樣式來承載篩選項。用戶操作選擇后，Tag 會展開呈現已選中內容，虛線外框也會變成實線：

案例 2 Paypal：同樣使用標簽 Tag 樣式來承載篩選項。用戶操作后，Tag 會展開呈現已選中項目，單線外框也會變成藍色填充樣式：

總結來說：使用標簽 Tag 呈現篩選項 > 點擊后展開下拉菜單 > 選擇結果使用標簽擴展呈現。這樣做可以：

1. 盡可能的節約頁面空間，保證頁面簡潔。
2. 減少輸入框長短不一、排版不整齊的問題。

3. 在移動端做一套自適應方案。

很多國外產品在移動端設計上已不限于響應式柵格的解決方案，在移動端并不會沿用 Web 端的設計方案，而是針對移動端設備的特性，調整頁面樣式和布局，給出一套更加適合設備操作的自適應交互方案：

案例 Wise：Web 端的 “Filter” 按鈕，在移動端變為橫向滑動的 Tag 來呈現篩選項目；點擊后使用從底部抽屜來展現詳細的篩選內容：

二、設計實操建議

以上的 3 條趨勢會幫助你解決大部分篩選設計問題。不過如何將它們應用在你的設計實踐中，還取決于以下三點：

1. 用戶對于篩選項的使用頻率
2. 篩選項的數量
3. 篩選項和表格內容之間的互動關系

這些產品及功能所自帶的需求，會影響篩選項的位置關系、布局方式和交互形式，會決定篩選條件的排布順序；是平鋪還是分組展示；是使用抽屜還是彈窗呈現等等。因此在做表格上方篩選條件的優化時，除了跟隨設計趨勢，同樣也要兼顧用戶的使用習慣。

歡迎關注作者微信公眾號：「長弓小子」