本文授权转自:长弓小子(ID:changgongxiaozi1314)
B 端设计师,大概都会遇到这样的表格页面:
你可能也会经常思考这些问题:
- 筛选条件的内容和数量太多,怎么精简?
- 输入框内外的字段内容长短不一,排版看上去不整齐怎么办?
- 这么多筛选条件,在移动端如何做展示?
盘点了数十款国外优秀的 B 端产品的设计案例之后,我总结出 3 条表格 Filter 的设计优化方法,相信会帮你解决以上问题。
PART 1
Filter 的优化方法
1. 分清主次,次要内容收起。
主要的、用户常用的筛选项可以平铺在 Table 上方;次要的、用户不一定常用的筛选项可以收起,使用下拉菜单、弹窗或抽屉呈现:
案例 1 收付款产品 Stripe:将几乎所有的筛选项都收入到表格右上方的 “筛选” 按钮中。用户点击后可以在下拉菜单中进行筛选操作, “筛选” 按钮上会提示用户已选中的项目数量:
案例 2 国际汇款产品 Wise:同样是将几乎所有的筛选项都收入到表格右上方的 “Fliter” 按钮中,点击后可以在抽屉中筛选操作。 “Filter” 按钮上会也会显示选择的项目数量:
案例 3 收付款产品 Paypal:也是将大部分筛选项都收入到右上方的 “Fliter” 按钮中,按钮上会也会显示选中的项目数量,同时表格上方会用标签显示用户选择的项目内容:
总结来说:使用“筛选”按钮作为筛选入口 ->在下拉菜单 / 抽屉 / 弹窗中进行筛选操作 -> 筛选的数量或项目内容显示在表格上方或按钮上。这样做的好处是:
- 保证页面的第一感官是简洁的,不会给用户造成太多选择困扰或心理压力;
- 内容少,页面的响应式布局也更易处理。
2. 去掉输入框,使用伸缩标签。
国外很多产品的筛选项已经去掉了输入框,使用可伸缩的标签(Tag) 样式代替输入框。在用户选择筛选条件之后,标签 Tag 会延展变长,展示用户选择的内容或数量:
案例 1 Stripe:使用虚线框的标签 Tag 样式来承载筛选项。用户操作选择后,Tag 会展开呈现已选中内容,虚线外框也会变成实线:
案例 2 Paypal:同样使用标签 Tag 样式来承载筛选项。用户操作后,Tag 会展开呈现已选中项目,单线外框也会变成蓝色填充样式:
总结来说:使用标签 Tag 呈现筛选项 -> 点击后展开下拉菜单 -> 选择结果使用标签扩展呈现。这样做可以:
- 尽可能的节约页面空间,保证页面简洁。
- 减少输入框长短不一、排版不整齐的问题。
3. 在移动端做一套自适应方案。
很多国外产品在移动端设计上已不限于响应式栅格的解决方案,在移动端并不会沿用 Web 端的设计方案,而是针对移动端设备的特性,调整页面样式和布局,给出一套更加适合设备操作的自适应交互方案:
案例 Wise:Web 端的 “Filter” 按钮,在移动端变为横向滑动的 Tag 来呈现筛选项目;点击后使用从底部抽屉来展现详细的筛选内容:
PART 2
设计实操建议
以上的 3 条趋势会帮助你解决大部分筛选设计问题。不过如何将它们应用在你的设计实践中,还取决于以下三点:
1. 用户对于筛选项的使用频率
2. 筛选项的数量
3. 筛选项和表格内容之间的互动关系
这些产品及功能所自带的需求,会影响筛选项的位置关系、布局方式和交互形式,会决定筛选条件的排布顺序;是平铺还是分组展示;是使用抽屉还是弹窗呈现等等。因此在做表格上方筛选条件的优化时,除了跟随设计趋势,同样也要兼顾用户的使用习惯。
文章转载:长弓小子,版权归原作者所有
https://mp.weixin.qq.com/s/8h6XXd8f__rpt9NuVEbeHg
版权声明:“IXDC”所推送的文章,除非确实无法确认,我们都会注明作者和来源,本公众号对转载、分享的内容、陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证,仅供读者参考。部分文章推送时未能与原作者取得联系,若涉及内容或作品等版权问题,烦请原作者联系我们,给出内容所在的网址并提供相关证明资料,我们会核查后立即更正或者删除有关内容!本公众号不承担任何责任,并拥有对此声明的最终解释权。
联系微信:18802086168
联系电话:18802086168
终审 | 吕静
编辑 | 王新荣
点这里,学习更多设计知识!
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.