1. <meter id="jtglz"></meter>
        <input id="jtglz"><label id="jtglz"></label></input>

          1. <var id="jtglz"><acronym id="jtglz"></acronym></var>
          2. 等等

            筛选是资源聚合类APP中不可缺少的功能,可帮用户快速、精准地找到需要的内容信息,根据资源分类形式的不同有多种筛选类型,并且不同的筛选类型还可以进行自由组合,让复杂的内容信息更容易被筛选出来,那今天我们就来了解一下这些常用的筛选类型,并且分析各自的特点及交互细节。

            目录

            1. 横向tab式筛选

            2. 标签筛选

            3. 下拉筛选

            4. 底部筛选

            5. 抽屉式筛选

             

            1. 横向tab式筛选

            这是最常见的筛选样式,属于一级筛选。通常出现在导航栏或者是导航栏目的下方,根据分类层级的多少有4种展现形式。

            一个层级

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

             

            两个层级分类

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

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

            交互细节

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

             

            2. 标签筛选

            是一种辅助筛选样式,通常位于某一分类标题下方,或者跟tab筛选和下拉筛选搭配使用,有4种表现形式

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

             

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

             

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

             

            3.下拉筛选

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

            单一层级

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

             

            两个层级

            有三种排布方式

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

             

            三个层级

            一级分类为tab形式展示在最上面,二三级为左右排布形式。

             

            交互细节

            • 放在内容信息的上面,对下方内容进行控制;
            • 当触发筛选条件时,筛选栏目直接定位在导航栏下方;
            • 有2~3种信息层级的筛选,结果通常取得是不同信息之间的交集,所以需要在筛选中向用户展示筛选结果数量,帮助用户判断是否调整筛选条件 ;如图左
            • 我们也可以选择在筛选结果页展示筛选标签,用户可以在当前页面删除部分标签,以查看更多的内容信息;如下图

            备注:下拉筛选通常是多维度组合在一个栏目上展示,通常应用在电商、外卖等内容分类层级比较多,且层级内的分类也比较多的场景里。

             

            4. 底部筛选

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

            单一筛选层级

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

             

            两个筛选层级

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

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

            交互细节

            处于页面的底部导航栏的位置

            当用户出发操作的时候,内容从下往上弹出展示。

             

            5. 抽屉式筛选

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

            交互细节

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

             

            总结

            本文主要讲述了5种内容筛选种类:tab筛选、标签筛选、下拉筛选、底部筛选和抽屉式筛选,选择何种筛选类型跟内容分类层级和分类数量相关,所以设计之前要先了解产品的分类及数量,有助于选择更适合用户使用的筛选样式。

             

            原文地址:海盐社(公众号)
            作者:小火焰

            转载请注明:学UI网 » 筛选功能类型的选择,看这里~

            登录收藏
             
            你可能喜欢的:
            你真的懂移动端的导航吗?你真的懂移动端的导航吗?
            Feed流中容易被忽略的图片适配知识Feed流中容易被忽略的图片适配知识
            做UI设计,为什么你总是没有思路做UI设计,为什么你总是没有思路
            分享功能知多少分享功能知多少
            UI设计师如何助力PM的原型图UI设计师如何助力PM的原型图
            搜索展开页常见的四种状态搜索展开页常见的四种状态
            详解APP设计中的四大要素详解APP设计中的四大要素
            巴甫洛夫反应巴甫洛夫反应
            APP中图标的类型那么多,到底该怎么准确运用?APP中图标的类型那么多,到底该怎么准确运用?
            ?
            五分快三技巧