控件

一、筛选

B端产品如HRO(Human Resources Outsourcing,人力资源外包)、RPO(Recruitment Process Outsourcing,招聘流程外包)、Internal内部中,筛选的逻辑包括:且关系、或关系、大于、小于等等。

1.筛选的意义包括:帮助用户快速进行数据定位;对数据快速划分,缩短用户寻找时间;满足工作中实际业务场景的筛选。
比如:一个电话销售,想要联系最近注册的用户时,通常会通过筛选来选出最近几天注册过,同时又没有销售跟进的客户,进行一个优先级排布

*筛选和搜索、导航的区别
筛选可以通过多个筛选条件进行多维度的寻找,而导航,搜索智能通过单一条件进行制定筛选。虽然很多搜索支持多维度用空格去进行多字段的关键词搜索,但本质区别不大

2.筛选的类型
a.基础筛选:系统预设好的筛选字段,具有很强的业务和场景需求。筛选逻辑为且,适用于对筛选要求不高的场景下使用。
一般分为四个部分:
筛选条件:只用户可以筛选的范围、筛选项

已选项、备选项
image.png

b.高级筛选:一般含有运算符,同时筛选当中包含条件关系,比如‘且关系’或者‘或关系’。满足更多的用户场景,为用户多条件多字段、多个筛选关系、多个筛选操作提供保障
一般包含以下几类关键词:
筛选关系:筛选条件之间的关系,一般为且、或关系,即且为几个条件的并集,或为几个关系的联集;筛选字段;筛选操作:指筛选字段和筛选值之间的关系,常见筛选操作有:大于、小于、是、否、包含、不包含、为空、不为空等;筛选值:你需要筛选的数值
image.png

3.筛选的布局
a.上下布局

当在筛选器条件少于5个的情况下,最正常使用的是上下布局,符合用户的浏览动线。当筛选器过多的情况下(5-15个),一般会将筛选项进行收折,这样保证筛选整体面积不会太大,同时将用户常用的筛选放在前面,满足用户基本的业务需求和使用场景。
image.png

b.左右布局
在PC端一般是以字段选择进行筛选,就是将用户可以筛选的所有字段全部罗列出来,然后通过勾选,择出你需要筛选的字段,进行筛选器的使用。好处是能够将筛选的所有条件都直接的展示出来,适应很多场景。
image.png

4.筛选的形式
a.平铺型(如淘宝)
一般为用户搜索结果数据量过大,搜索结果与其预期差距过大,用户可以通过筛选对数据的再一次分类,寻找其想要的结果。缺点是需要大面积去展示所有条件。通常以收折的状态,只有在搜索触发后才会完全展开

平铺一般筛选条件少于6个,能够通过1行或者2行去展示筛选项的结果。多用于电商,视频网站,常见于淘宝、京东、腾讯视频pc端。
image.png

b.收折型
常见的简单直接筛选形式,将用户常用的筛选条件通过下拉框的形式进行筛选。每个筛选条件就是一个下拉框,在B端场景中,下拉框对用户来说认知成本低,操作性也较强。缺点是选项收纳,每次要点击才能看到所有选项,尤其是信息多的话过于冗余繁多。
image.png

c.单侧筛选
更通用的筛选形式,通过对你想筛选的字段进行勾选,勾选完成后会出现筛选条件,然后选择筛选字段、筛选操作、筛选值,一般选择完成所有筛选后,还需要点击查询,筛选操作才算完成。优点是节省空间、通用性强。在很多saas系统,paas系统当中,无法针对每个客户进行设计。就要考虑到系统通用性高,做渔网型设计。定制化交还给用户,将大量的筛选条件放置在表单的左侧或者右侧,通过表单纵向空间去承载大量筛选条件。

缺点是常用的几种筛选字段需要通过不断寻找来满足筛选需求,操作麻烦。考虑将筛选顺序支持手动调整顺序。
image.png

d.表头筛选
起源于Excel的筛选形式。点击表单的筛选按钮,可以将表头的筛选字段直接带入,方便用户。通过表头的点击,使用户更快捷进入到自己的筛选条件,在通常情况下表单越左的数据显然越重要,也是使用筛选去筛评率最高的,高频的筛选场景可以得到满足。

缺点是用户第一次进入系统很难理解这种交互形式,如果每个表头都有icon,在默认显示列数多的情况下,影响用户对表头的识别。
image.png

e.弹窗式

点击筛选按钮,展现出筛选弹窗进行筛选,适合在筛选功能在系统中不是很重要的层级。最常见的是Tapd。优点是能够在节省面积的情况下进行复杂的筛选。缺点是弹窗会遮挡一部分的表单数据,其次更多按钮依然存在,筛选条件的添加也相对繁琐。
image.png

5.总结如何选择更合适的筛选
a.使用评率:用户的使用评率和方式直接影响到我们筛选是用普通筛选or高级筛选,也会影响到筛选的形式。
b.满足业务需要:产品未来是想往哪个方向发展,如果想把功能做大,就要考虑筛选的后续扩展性。
c.用户认知成本
B端系统中,最可能预见的就是你给用户设计的路径但用户根本没有往你想的方向去操作(前期用户调研和中期的用户访谈没有做到位),考虑去适当的引导用户。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容

  • 筛选可以说是我使用比较频繁的一种交互形式,比如我点外卖,会选择满减优惠力度大,同时我也可以选择在哪一个价格区间内的...
    越努力越幸运yyy阅读 1,524评论 0 1
  • web端页面测试,最常见的是基本控件的测试,只有了解常见的控件和其测试方法,才能掌握测试要点,避免漏测情况发生。根...
    LP_ProgramLife阅读 412评论 0 1
  • 目录: 一、文本输入框 二、下拉框 三、单选框 四、复选框 五、开关按钮 六、穿梭框 七、日期选择 八、步进器 九...
    四口_1ee阅读 3,906评论 1 11
  • 设置不同的字段类型,会有不同的输入和展示方式。数据表设计视图,打开企业表,点击名称 字段的 类型 ,弹出字段类型配...
    MisShop智能开发平台阅读 2,412评论 0 1
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,520评论 16 22