筛选是移动端产品里十分高频的交互控件。当页面数据量大、条目繁杂时,筛选功能可以帮助用户快速收缩范围,定位目标内容。兰亭妙微在电商、OTO、教育类项目实践中,梳理了市面上主流筛选控件类型,同时明确每种组件的适用边界,方便设计师做组件选型。
弹窗筛选是非常通用的一类方案,又分为单维度、多维度、多级筛选。 单维度弹窗筛选,大多为单选模式,点击选项即完成筛选并收起面板。适合筛选条件少,一般不超过 5 项,仅需要一个筛选维度,筛选权重中等的场景。适合产品初期快速迭代,用最少成本完成基础筛选能力,把不高频的条件收纳起来,保持页面整体干净。
多维度弹窗筛选,分为下拉弹窗与侧边弹窗两种,支持单选、多选,价格区间这类场景还会搭配输入框。适合单一维度无法满足需求,用户需要同时叠加多个条件的业务。但要控制条件数量,一级筛选项不宜超过 10 个,二级不超过 20 个,避免面板内容过载。
多级弹窗筛选,通过 Tab 切换一级类目,再选择二级甚至更深条件,能够承载 20‑100 个数量较多的筛选项。教育、医疗、电商类目繁多的业务很适合该模式,能够高效组织庞杂的分类信息,但开发实现成本相对更高,项目中更多会以侧边栏形式落地。
横向 Tab 筛选,属于曝光度高的筛选组件,分为分页面、同页面两种。分页面 Tab 相当于预分类,数据提前划分完成,切换 Tab 直接渲染对应内容;同页面 Tab 点击后实时触发筛选运算。Tab 筛选适合筛选权重高、用户切换操作频繁的场景,筛选项建议控制在 2‑5 个。选项过多可以增加横向滑动能力,多余条件也可做折叠收纳。
高级筛选(新页面筛选),点击筛选入口跳转至独立页面。可以承载大量维度、图文说明,适合筛选颗粒度要求高、条件复杂的业务,例如汽车参数筛选等,给足够空间展示完整的筛选逻辑。
组合筛选,是把横向 Tab、弹窗、侧边栏相互结合,在有限手机屏幕内兼顾多维度、多级分类,OTO、电商产品使用较多,能够同时完成多层级条件切换,减少页面来回跳转,提升操作流畅度。
设计师做选型时,没有绝对最优的控件,要结合筛选项数量、筛选权重、用户操作频次、开发成本综合判断。条件少、操作不频繁,优先弹窗收纳;高频反复切换,优先横向 Tab;维度多、分类层级深,选用多级侧边栏或者高级筛选页面;业务复杂的场景,就采用多种控件互相搭配的组合筛选方案。合理的筛选设计,最终目的就是降低用户查找信息的成本。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。