1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

新人来收!后台系统的「筛选设计」基础知识科普

时间:2020-06-30   分类:设计管理    作者:网络   来源:网络整理   点击:131

新人来收!后台系统的「筛选设计」基础知识科普 本文来自九分网络

九分网络

编者注:由于我们的疏忽,未经@智铭桑 授权就用了他的插画(https://dribbble.com/shots/4946856-Designer-s-Rhapsody)作为Banner 图,经沟通已取得作者谅解。再次向作者表达歉意:对不起。 本文来自九分网络

筛选可以说是我们日常生活中使用最多的交互之一了,看电影时选择喜欢的类型,外出吃饭时选择附近的商圈,网购时选择合适的价格区间等等。这些筛选无不帮助我们提高了使用的效率。 九分网络

与to c产品不同,后台系统中,筛选条件往往更多,并伴随着复杂的逻辑关系。更重要的是,to c产品中的筛选往往是对搜索结果的进一步优化,而后台系统的筛选是工作流程中必不可少的一环,发挥着非常重要的作用。

本文来自九分网络

一、筛选的作用

我用几个比较典型的场景来描述后台系统中「筛选」发挥的作用吧。

本文来自九分网络

有经验的电销同学在电话联系客户时,通常都有自己的小策略,比如先联系近期注册的客户,或者先给等级高的客户打电话等。「筛选」可以帮助电销同学按自己的优先级来工作,提高转化率。

www.9fen.net

客服同学需要找到在操作中遇到困难的客户并给予帮助,可通过筛选出近三天内有注册行为,但无后续操作的客户,电话联系提供帮助。

copyright 9fen.net

另外,如果系统内没有任务模块的话,「筛选」可以临时顶替一下。例如,组长下达指令「拨打1个月内注册,但无投资行为的客户」,电销同学便可筛选出对应的客户来拨打电话。 内容采集来自9fen.net

复杂多变的筛选条件,为使用系统的用户提供了更加方便灵活的工作方法。 本文来自九分网络

二、筛选——页面布局

筛选的页面布局可简单地分为左右布局和上下布局,如图:

九分网络

新人来收!后台系统的「筛选设计」基础知识科普

本文来自九分网络

本文来自九分网络

△ 左右布局

copyright 9fen.net

新人来收!后台系统的「筛选设计」基础知识科普 本文来自九分网络

内容采集来自9fen.net

△ 上下布局

内容采集来自9fen.net

我们在考虑筛选页面的布局时,通常与整个网站的布局保持统一即可。但是两种布局仍有一些微妙的差距:

九分网络

左右布局能在同一页面即时看到筛选后的结果,而上下布局在筛选条件过多的时候,通常需要滚屏才能看到筛选结果。 本文来自九分网络

左右布局的横向空间比较紧凑,在筛选条件过多的时候,表格本身需要左右滚动,在查阅信息的时候非常不友好。且左右布局下的表格通常长度也在一页的范围内,所以单页的信息密度低,需要频繁翻页。 本文来自九分网络

一个小tip:如果表格字段过多,横向空间比较紧凑,需要左右滚屏的话,我们通常会锁定表头前几列的关键信息(例如客户姓名,客户ID),方便阅读。同理,如果表格过长,单页需展示的条数很多时,我们也可以锁定表头优化体验。总之,若想优化表单体验,可以多多参考 Excel。

copyright 9fen.net

除了上述的两种基本布局外,我们通常会使用 tab 来进行辅助。

内容采集来自9fen.net

例如某些高频使用的筛选条件(可以理解为分类),我们可以单独提出来,作为 tab 设计在表格上方。如图: copyright 9fen.net

新人来收!后台系统的「筛选设计」基础知识科普 九分网络

copyright 9fen.net

tab设计可以根据实际情况,放置在不同的位置。

内容采集来自9fen.net

三、几种常见的筛选设计

1. 所有筛选条件平铺展示

内容采集来自9fen.net

所有筛选条件平铺展示,最简单粗暴的做法,问题也很明显,看起来非常冗余,不利于快速定位目标。这种设计通常只适合应用于后台权限系统做的比较精细,每个角色可见的筛选条件比较少的情况下。 www.9fen.net

优点是选择任何筛选条件时都只有一级,不需要跨层级操作。 本文来自九分网络

如果选择了平铺展示的话,可以将筛选条件按逻辑或使用频率分类,让用户对各个筛选条件的位置有预期。 内容采集来自9fen.net

2. 保留高频的筛选条件,将复杂的筛选项隐藏在「高级筛选」中

本文来自九分网络

保留高频的筛选条件,将复杂的筛选项隐藏在「高级筛选」中。这是一种比较通用的办法。 内容采集来自9fen.net

关于这个我有一个脑洞。我曾经设想,针对「账号ID」「手机号」「身份证号码」这类的精准筛选的条件,统一做成一个搜索。根据输入的格式去匹配字段,再在字段内进行筛选。这样可以将几个筛选条件整合为一个,节约了空间,(某种程度上来说)提升了体验。 本文来自九分网络

标签: 优设 后台产品设计 入门 后台系统 筛选功能 筛选设计

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----