聊一聊常用的内容筛选功能

前段时间,我们公司在做筛选功能时,对于筛选类型的选择,UI、交互、产品之间有不同的意见;既然有分歧就说明没有一套有效的选择依据,所以通过查看资料,并整理各类APP筛选样式进行总结分析,用来辅助大家更准确地选择合适的筛选样式。

目录:

筛选的定义

筛选类型分析

筛选的定义

筛选是资源类、电商类等资源聚合类APP中不可缺少的功能,用来帮助用户快速、精准的找到自己需要的内容信息,根据资源内容层级数和单个层级分类数有多种筛选类型,今天我们就来看看这些常用的筛选类型具有哪些特点。

筛选类型分析

1. 横向tab筛选

这是最常见的筛选样式,根据分类多少有4种展现形式。

一个层级:

  • 分类2~5个:所有类目都可以直接在tab栏目上展示出来,用户可快速地在各个分类之间进行切换;
  • 分类大于5个:所有类目以相同的间距进行横向排布,引入横滑操作,方便用户浏览被隐藏的分类信息;有些产品也会在栏目右侧增加下拉操作,点击后下拉展示所有的分类,用户可对所有分类进行直观的浏览;

两个层级分类

  • Tab 栏目上只展示推荐内容或者用户自己选择的内容

当内容分类有两个层级且分类比较多的时候,产品会根据用户的喜好推荐几种分类在tab上进行展示;右侧有筛选操作,点击后在一个页面里展示所有的分类。之所以选择页面进行分类展示,是因为用户在这个页面可以自主选择增减推荐栏目内分类,并且可以调整展示的顺序,而页面可以承载更丰富的操作形式。


交互细节:

  • 用户在不同的类目间进行切换的时候,筛选内容在当前页面刷新展示;
  • 不同的tab分类可以通过横滑进行切换;
  • 通常放在内容信息的上面,对下方的列表内容进行控制;
  • 当触发筛选条件时,筛选栏目直接定位到导航栏下方。

2. 标签筛选

是一种辅助筛选样式,通常跟tab筛选和下拉筛选搭配使用,有3种表现形式

① 内容分类标签,充当内容入口。产品设定的内容分类,分类层级较高,且内容之间无交集,当用户触发操作时,会跳转页面进行内容展示。


② 大分类下的子筛选条件,分类层级比较低,当用户触发操作时,内容在当前页面进行展示。

③ 筛选页面,以列表的形式进行排布,单维度可以横滑操作,这种方式可以帮助用户在各个分类之间快速进行多维度的内容筛选。筛选的结果展示在筛选条件下方,最常出现在视频类APP内做电影、电视筛选;马蜂窝游记中也使用了这种分类形式。

3. 下拉筛选

通常是在一个大的分类下做具体选择的时候使用,这种筛选样式可以承载1~3级分类层级,但每个层级里的分类种类较少的时候可以选择这种筛选形式

单一层级:

分类以列表的形式展示在页面中,当分类字段少且分类较多的时候也可以排2~3列进行展示。

应用场景:分类内容较少,通常可以一屏展示出来,方便用户快速定位筛选内容;

两个层级:

有三种排布方式

  • ①直接以栏目标题加列表内容的形式排列。适用于两个层级分类都较少,或需要用户进行操作(比较输入框、滑块)的场景使用。
  • ② 左侧为一级分类信息展示区,右侧为二级分类信息展示区,可以通过左侧的一级分类控制右侧的二级分类。适用于两个层级分类都比较多的情况使用。
  • ③ 上面为tab式的一级分类,下面是二级分类内容的展示。适用于一级分类较少,二级分类较多的场景使用。

三个筛选层级:
一级分类为tab形式展示在最上面,二三级为左右排布形式。 eg. 指的是全城分类下方内容。

交互细节:

  • 放在内容信息的上面,对下文的列表内容进行控制;
  • 当触发筛选条件的时间,筛选栏目直接定位到导航栏下方;
  • 在2~3种信息层级筛选中,结果通常取得是不同信息之间的交集,所以需要在筛选中向用户展示筛选结果数量,帮助用户判断是否调整筛选条件,减少用户筛选过后,回到主页发现没有筛选内容,又重新筛选的情况发生 ;如下图
  • 我们也可以选择在筛选结果页面展示筛选标签,当用户发现内容过少的时候,可以在当前页面删除部分标签; 如下图

备注:
如果是非常复杂的产品内容,比如电商,会将多种筛选维度(排序、特殊类目、)放置在一个筛选栏目上,通常应用在电商类等内容分类层级比较多,且层级内的分类也比较多的场景。

4. 底部筛选

某一具体内容需要通过多个筛选维度辅助筛选时使用,比如XX-XX的火车票展示列表、马蜂窝的酒店筛选。这种筛选通常能承载1~2级的筛选层级,每种层级下的分类目都不能过多,是一种比较简单轻便的筛选过程

单一筛选层级:

① 与下拉筛选筛选一样都是以列表的形式展示在筛选内容

两个筛选层级:

① 直接以栏目标题加列表内容的形式排列。

② 左侧为一级分类信息展示区,右侧为二级分类信息展示区


交互细节:

  • 处于页面的底部导航栏的位置
  • 当用户出发操作的时候,内容从下往上弹出展示。

5. 抽屉式筛选

电商类平台应用较多的分类形式,通常是有两个分类层级,一、二级的分类类目都比较多,默认情况下,如果分类特别多时可以只展示第一层级信息,用展开收起辅助用户浏览信息。

交互细节:

  • 因为筛选的分类比较多,且通过展开收起会将已选择的内容遮挡上,所以我们需要以一种方式将已筛选的条件展示出来,方便用户及时调整。eg.马蜂窝将所有用户选择的内容都放置在最前面,而京东选择在栏目上方展示出来。
  • 显示有多少个符合筛选条件的内容,帮助用户决策筛选条件是否合理。

总结:

本文主要讲述的是常见的内容筛选种类及应用场景和交互细节分析,选择何种筛选样式跟内容层级和分类数量相关,所以设计之前要了解产品的分类及数量,有助于我们设计出更适合用户使用的筛选样式。

海盐社(公众号)

作者:小火焰

(0)

相关推荐

  • Excel常用技巧:[6]如何启用筛选功能

    excel的筛选功能是我们经常用到的,它的一个比较方便的用处就是有助于统计.下面介绍一下如何设置筛选功能 操作方法 01 打开excel,选择要设置筛选功能的列,此处假设要对性别一列启用筛选功能 02 ...

  • EXCEL筛选功能有什么用?EXCEL如何设置筛选?

    EXCEL筛选可以方便我们分类查找表格的内容,也可以方便我们分类打印.那么EXCEL筛选功能有什么用?EXCEL如何设置筛选?下面小编就为大家详细介绍一下,一起来看看吧! EXCEL筛选有什么用? 下 ...

  • 筛选功能类型的选择,看这里~

    筛选是资源聚合类APP中不可缺少的功能,可帮用户快速.精准地找到需要的内容信息,根据资源分类形式的不同有多种筛选类型,并且不同的筛选类型还可以进行自由组合,让复杂的内容信息更容易被筛选出来,那今天我们 ...

  • Excel筛选功能应用

    每次考试结束后,老师总要对学生的成绩来一番挑挑拣拣,现在有了电脑,这一切完全可以交给Excel来完成,很多简单的查询应用完全可以用Excel的筛选功能实现。 图1是一份学生成绩登记表,我们就以此为例, ...

  • 利用"TCP/IP筛选"功能限制服务器的端口

    对于个人用户来说,您可以限制所有的端口,因为您根本不必让您的机器对外提供任何服务;而对于对外提供网络服务的服务器,我们需把必须利用的端口(比如WWW端口80、FTP端口21、邮件服务端口25、110等 ...

  • wps表格如何使用筛选功能

    在wps表格中使用筛选功能的方法: 新建一个临时表册,录入一些数据,作为试验用. 2将标题行选中,点表格顶上菜单中的"筛选". 3这时在每个标题右侧出现一个小倒三角. 4首先,让我 ...

  • Win10怎么设置TCP/IP筛选功能?Win10系统设置TCP/IP筛选功能的方法

    TCP/IP也就是我们口中所说的TCP/IP协议,升级Win10系统后,很多伙伴由于对操作不熟悉,不知道该如何设置TCP/IP筛选,下面小编就给大家带来Win10系统设置TCP/IP筛选功能的方法,一 ...

  • excel中的数据筛选功能如何使用呢?

    Excel办公软件是每个办公人员的必备工具之一, Excel功能是非常强大的.但是,如何让它灵活运用,就得那操作人员对它的了解,今天小编来与大家分享如何使用Excel中的筛选功能. 步骤 本篇文章,小 ...

  • excel表格筛选怎么使用?如何设置筛选功能?

    办公软件大家都会经常用到,常用的表格处理软件就是excel表格,相信大家对填写表格都驾轻熟路 ,而有时候一些excel上面会有很多不同类型的东西需要筛选以便更能方便寻找,那么那么excel表格筛选怎么 ...