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

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

2018/11/23 评论区

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

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

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

一、筛选的作用

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

有经验的电销同学在电话联系客户时,通常都有自己的小策略,比如先联系近期注册的客户,或者先给等级高的客户打电话等?!干秆 箍梢园镏缦О醋约旱挠畔燃独垂ぷ?,提高转化率。

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

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

复杂多变的筛选条件,为使用系统的用户提供了更加方便灵活的工作方法。

二、筛选——页面布局

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

△ 左右布局

△ 上下布局

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

  • 左右布局能在同一页面即时看到筛选后的结果,而上下布局在筛选条件过多的时候,通常需要滚屏才能看到筛选结果。
  • 左右布局的横向空间比较紧凑,在筛选条件过多的时候,表格本身需要左右滚动,在查阅信息的时候非常不友好。且左右布局下的表格通常长度也在一页的范围内,所以单页的信息密度低,需要频繁翻页。

一个小tip:如果表格字段过多,横向空间比较紧凑,需要左右滚屏的话,我们通?;崴ū硗非凹噶械墓丶畔ⅲɡ缈突彰?,客户ID),方便阅读。同理,如果表格过长,单页需展示的条数很多时,我们也可以锁定表头优化体验。总之,若想优化表单体验,可以多多参考 Excel。

除了上述的两种基本布局外,我们通?;崾褂?tab 来进行辅助。

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

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

三、几种常见的筛选设计

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

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

优点是选择任何筛选条件时都只有一级,不需要跨层级操作。

如果选择了平铺展示的话,可以将筛选条件按逻辑或使用频率分类,让用户对各个筛选条件的位置有预期。

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

保留高频的筛选条件,将复杂的筛选项隐藏在「高级筛选」中。这是一种比较通用的办法。

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

但是在咨询了小伙伴之后,发现有以下几个问题:通用性可能差一点,不同 table 的条件不一样,就要写不同的判断格式的方法(我们在界面上看起来是一张表,但在数据库中是由很多张互相关联的表组成的);不同字段的格式可能是相同的,比如客户ID和订单ID;最后,一般系统已有了全局搜索,这种替代筛选的精准搜索似乎是重复劳动。

3. 默认只展示筛选条件,不展示内容,check后显示内容

默认只展示筛选条件,不展示内容,check后显示内容。如图:

△ 截图来自zoho crm

△ 截图来自网易七鱼

这种设计最大的优点就是省空间。尤其是一些 Saas化的后台系统(简单来说就是对外出售服务的,不是公司内部使用的后台系统),无法针对某类客户做设计,所以筛选项大而全,使用这种设计可以使页面干净高效。

另外,可以记录登录用户的使用习惯,将高频筛选条件显示在顶部?;蛑С质侄髡承?。当然,为每个用户记录不同的筛选也是成本很高的做法了,需要结合具体情况和开发同学沟通清楚再做定夺。

以上三种设计,都可以再附加一个功能——快捷筛选。

4. 快捷筛选

如我们之前所说,一个用户在使用筛选的时候,通常是有固定流程的。如果把这些操作绑定,储存为快捷筛选,可以节约用户很多时间。举个例子,交互如图:

高清大图戳 →?https://share.weiyun.com/55UaCt7

四、筛选的逻辑关系

当筛选的可能性较复杂的时候,我们就需要考虑筛选条件的多种逻辑关系。比如我们在筛选「金额」字段的时候,有多种可能性「大于」「小于」「介于某个区间」等等;在筛选「所属销售」字段的时候,可能「是某人」,「除某人以外」,以及并列选几个人名的情况。

这种情况尤其会出现于需要自定义字段的系统中,在用户自定义字段的时候,就需要为不同的字段类型配置全面的筛选逻辑。例如,对于「数值字段」,对应的逻辑关系可能是「大于」「小于」「介于某个区间」;对于「纯文本字段」,对应的可能是「是」「否」「包含」「不包含」「为空」「不为空」等。

写在最后

虽然这篇文章写的是后台系统的筛选设计,但是to c,甚至说移动端的筛选设计,有很多都是可以借鉴过来的,尤其是在优化体验的时候,想一想我们平时经常用的筛选控件,会有很多新的灵感。

另外,筛选作为表单的一部分,在 Excel中已经有各种各样的用法了。如果觉得自己一头雾水,可以想一下我们在 Excel中通?;嵩趺醋?,也许就豁然开朗了。

以上是对自己在后台系统设计中的一点点总结,欢迎大家一起交流讨论。

图片素材作者:Ramy Wafaa

「筛选功能细节设计」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.bvfyw8.cn/backstage-systematic-screening-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 转场动效 优设大课堂 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 配色 设计师专访 视觉设计 素材下载 设计流程 web前端开发 AI教程 用户体验设计 设计理论 神器下载 字体下载 海报设计 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里