守望者

工作上接触到多个B端产品,设计时几乎都是直接用组件,个性定制的部位比较少。因此有些模块就属于换汤不换药,长期延续一种设计方式,很少去考虑有没有其他的形式会更适合。其中筛选组件就是一个,做了几个相似的筛选组件后,我决定好好分析一下。

 

什么是筛选?

筛选,故名思义就是帮助用户从众多的内容中,快速的定位内容,以及将众多数据分类,讲究的是效率。那么在数据量比较大的后台管理系统,筛选必不可少,它可以通过多个筛选条件进行多维度的寻找。这点单纯的搜索是做不到的。 
 

筛选分类

有人可能会把菜单导航、搜索误认为是筛选,其实这样理解也没有太大问题,导航和搜索都是单一条件的筛选,而筛选是多条件,多维度的查找(也可以单一条件查询)。这里分析的是多条件筛选。我把筛选的形式大致分为以下四种:
 

1、文字输入类

文字输入类的筛选条件是需要自己输入,然后进行查询的。输入框中最好可以有文字输入的提示内容,方便提示用户输入,以及确认输入的类别或格式。同时需要有查询/搜索按钮,来执行筛选。(暂时没找到更加合适的案例,以下图来说明下问题,它是属于输入类和固定选项类混合使用)。

文字输入类适合于筛选选项不确定的情况,筛选选项多样性,无法总结。这样的缺点就是增加了用户的操作成本,但是能够更针对性的查询。

 

2、固定选项类

当筛选选项有限,可以明确的总结分类时,一般采用固定选项类。这种操作起来便捷,降低用户的操作难度。一般情况下需要“搜索/查询”按钮,但是也有的产品是勾选即执行的。如下案例就是多条件选择之后执行筛选,这样做的原因是用户可能还需要选择其他的选项,避免中途执行筛选分散用户注意力。

当然前面提到也有一边选择一边执行筛选的,如下案例。它没有执行筛选的按钮,勾选选项即开始搜索,这样的好处是,用户可以随时根据结果调整自己的筛选选项。
 

3、平铺类

一些产品会采用平铺类的筛选展示,这样做的好处是用户能直接看到选项内容,减少操作步骤提高了用户筛选的效率。但是这样做的时候要注意做好分类,避免选项过多时找不到目标。

 

4、快捷类

最后还有一种筛选形式是快捷选项类。直接勾选之后即可展示自己想要看到的内容。如下案例中。这种筛选形式和平铺类相似,都能够有效提高用户的筛选效率。

不同的是,这种形式通常作为筛选之后的一个补充,即搭配正常筛选,同时执行搜索,筛选出用户想要的结果。

 

划重点

文中总结了四种筛选形式,这四种形式各有自己的特点,我们可以根据自己的产品需要使用合适的形式,但是不一定每种形式单独出现,也可以将它们混合使用。比如第一个案例中,就是文字输入类和固定选项类结合使用,当然也可以将平铺类与快捷选项类结合使用。

 

原文地址:海盐社(公众号)

作者:山竹屁

转载请注明:学UI网 » B端筛选器的小秘密,你们发现了吗?

登录收藏
 
你可能喜欢的:
深耕“用户界面”(上篇)- 界面表现层自查深耕“用户界面”(上篇)- 界面表现层自查
PRD分享:「网易云音乐-登录/注册模块」产品需求文档PRD分享:「网易云音乐-登录/注册模块」产品需求文档
行为召唤:终极生存指南行为召唤:终极生存指南
触摸键盘的设计解析 | 智能化工具产品触摸键盘的设计解析 | 智能化工具产品
十万个为什么设计系列02-内容个性化十万个为什么设计系列02-内容个性化
腾讯动漫8.0——用户为本腾讯动漫8.0——用户为本
苹果绝对不会告诉你表单设计原则:我研究3年后才发现苹果绝对不会告诉你表单设计原则:我研究3年后才发现
从4款主流产品中掌握登录注册流程从4款主流产品中掌握登录注册流程
【新系列】十万个为什么设计-为什么行为召唤按钮的位置在右侧【新系列】十万个为什么设计-为什么行为召唤按钮的位置在右侧
你必须知道的8种金刚区的设计样式你必须知道的8种金刚区的设计样式