日志
UI设计-筛选功能选择类型的总结
2019-04-16 10:21
筛选是资源聚合类APP中不可缺少的功能，可帮用户快速、精准地找到需要内容信息，根据资源分类形式的不同有多种筛选类型，并且不同的筛选类型还可以进行自由组合，让复杂的内容信息更容易被筛选出来。
目录 1. 横向tab式筛选 2. 标签筛选 3. 下拉筛选 4. 底部筛选 5. 抽屉式筛选 1. 横向tab式筛选 这是最常见的筛选样式，属于一级筛选。通常出现在导航栏或者是导航栏目的下方，根据分类层级的多少有4种展现形式。 一个层级
 两个层级分类
 交互细节
2. 标签筛选 是一种辅助筛选样式，通常位于某一分类标题下方，或者跟tab筛选和下拉筛选搭配使用，有4种表现形式 ① 内容分类标签，充当内容入口。产品设定的内容分类，分类层级较高，且内容之间无交集，当触发操作的时候，会跳转页面进行内容展示。  ② 大分类下的子筛选条件，分类层级比较低，当用户触发操作时，内容在当前页面进行展示。  ③ 筛选页面，多维度的筛选条件以列表的形式进行排布，标签是单一维度下的多种分类，可横滑操作，这种方式可以帮助用户快速进行多维度的内容筛选。筛选的结果直接展示在筛选条件下方，最常出现在视频类APP内做电影、电视筛选；马蜂窝游记中也使用了这种分类形式。  3.下拉筛选 通常是在一个大的分类下做具体选择的时候使用，这种筛选样式可以承载1~3级分类层级。 单一层级 分类以列表的形式展示在页面中，当分类字段少且分类较多的时候也可以排2~3列进行展示。 两个层级 有三种排布方式
 三个层级 一级分类为tab形式展示在最上面，二三级为左右排布形式。  交互细节
 备注：下拉筛选通常是多维度组合在一个栏目上展示，通常应用在电商、外卖等内容分类层级比较多，且层级内的分类也比较多的场景里 4. 底部筛选 某一具体内容需要通过多个筛选维度辅助筛选时使用，比如XX-XX的火车票展示列表、马蜂窝的地图酒店筛选。这种筛选通常能承载1~2级的筛选层级，每种层级下的分类目都不能过多，是一种比较简单轻便的筛选过程 单一筛选层级 ① 与下拉筛选筛选一样都是以列表的形式展示在筛选内容 两个筛选层级 ① 直接以栏目标题加列表内容的形式排列。 ② 左侧为一级分类信息展示区，右侧为二级分类信息展示区  交互细节 处于页面的底部导航栏的位置 当用户出发操作的时候，内容从下往上弹出展示。 5. 抽屉式筛选 电商平台应用较多的分类形式，通常是有两个分类层级，一、二级的分类类目都比较多，默认情况下，如果分类特别多时可以只展示第一层级信息，用展开收起辅助用户浏览二级类目信息。 交互细节
 总结 本文主要讲述了5种内容筛选种类：tab筛选、标签筛选、下拉筛选、底部筛选和抽屉式筛选，选择何种筛选类型跟内容分类层级和分类数量相关，所以设计之前要先了解产品的分类及数量，有助于选择更适合用户使用的筛选样式。 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设、平面设计服务。 阅读全文 |
下一篇： 交互设计定律-大白话解析席克定律
上一篇： 做10年UX才能明白的9个道理