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. 筛选项和表格内容之间的互动关系

这些产品及功能所自带的需求，会影响筛选项的位置关系、布局方式和交互形式，会决定筛选条件的排布顺序；是平铺还是分组展示；是使用抽屉还是弹窗呈现等等。因此在做表格上方筛选条件的优化时，除了跟随设计趋势，同样也要兼顾用户的使用习惯。

蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

文章来源：优设网 作者：Ant Design 元尧

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

Powered by Froala Editor