10分钟教你如何选择筛选组件

2018-9-7 泥人张 设计理念

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

生活需要筛选,App页面也一样。本文通过案例分析,从筛选组件的样式、使用场景等方面来解析筛选组件在手机端场景的设计。


筛选组件概述

筛选组件的作用是帮助人们在面对大量信息时,通过更高效的筛选方式提升决策效率。广义的筛选组件还包括搜索栏及Tab栏,本文暂不分析。


组件包括筛选按钮与筛选器,筛选器包含类别及各类别下的筛选项。使用频次高低、筛选条件的数量都是决定筛选组件样式的因素。



01


位于 Tab 栏的筛选组件


组件样式

筛选按钮位置:一般位于Tab栏最右侧视觉薄弱区域。


筛选器形式:点击按钮,筛选器以抽屉形式从Tab栏底部向下展开筛选条件,或以浮层形式从屏幕最右侧向左滑出筛选条件。


样式分析

当界面使用Tab栏时,已为内容做了第一层筛选,多数情况下已满足用户对内容的筛选需求。


当筛选类别较多且复杂时,就需要在Tab栏增加筛选组件来提供更详细的筛选能力。而这里的筛选组件较于Tab栏其他条件优先级较低,屏幕右侧为视觉薄弱区域,这也解释了为什么大多数Tab栏的筛选组件都位于最右侧。



案例一

Image title

案例来源于美团App


此页是对美食品类的选择,这里的筛选组件在Tab中是最常见的样式。对于用户而言,选择商家店铺优先考虑地域、美食类别、价格及综合评价,而用餐人数与餐厅服务等只是辅助选择条件。


筛选器使用了抽屉形式,如要选择此样式,建议在筛选条件不多且不超过一屏的场景使用。



案例二

Image title

案例来源于淘宝App


当用户从首页全局搜索后,出现此页。筛选按钮位于二级Tab栏。点击筛选按钮后,由于筛选条件较多,很难一页展示完,用户往往需要上下滑动屏幕查看全部,因此使用右侧浮层展开的形式较适合。



案例三

Image title

案例来源于哔哩哔哩App


全局搜索后,Tab栏默认展开综合tab内容,用户对排序、时长、分区的筛选需求较高,因此直接把筛选类别放在了二级Tab栏,相比通过点击筛选按钮再展开类别的交互方式更简单直白。


点击筛选类别后,筛选器使用抽屉式。此种筛选组件样式一般用于筛选类别较少(不超过4项),筛选项数量不多的场景。



02


底部按钮型筛选组件


组件样式

筛选按钮位置:以按钮或浮层形式固定在界面底部,便于用户操作。


筛选器形式:点击按钮,筛选器以抽屉形式从按钮底部向上展开筛选条件,或以界面浮层形式从底部向上展开筛选条件。


样式分析

使用底部筛选按钮的界面,内容区类别相对单一,通过筛选组件就能满足筛选需求,并对筛选的需求较大。而底部按钮作为常见的按钮形式,用户点击更方便,因此承载筛选组件较合适。


若使用此样式,点击筛选按钮后,筛选器的出现优先考虑从底部向上出现的抽屉式浮层。



案例一

Image title

案例来源于旅游类App Expedia


输入旅游目的地后进入此列表页,用户目的性明确,就是要查看结果。底部的筛选按钮是为了帮助用户更快的筛选结果,方便用户触达。并且筛选条件较多,无法一页展示完,使用了界面浮层的形式。


这里还有2个细节:


1、由于筛选类别较多,手动清除单个筛选条件太过繁琐,于是筛选器底部增加了清除按钮,操作更简便。但底部按钮一般为“确定”操作,“清除”放在底部样式上没有做误操作提示,可能会增加误操作机率。


2、筛选后,筛选按钮处会显示已选择的筛选类别数量,给用户带来良好的使用反馈。



案例二

Image title

案例来源于dribbble


当前页为地点搜索。需要先进行筛选操作,内容区再出现结果。筛选按钮位于底部浮层,筛选类别代替筛选按钮平铺展现,筛选器使用抽屉式从浮层底部向上展开。


此样式一般适合筛选类别较少,并且每个类别的筛选项不多的场景。优点是减少操作步骤,提高用户操作效率。并且可以学习一些体验细节:在筛选器中选择一个选项后,在其筛选类别处同步修改为该选项;筛选项与筛选类别选中状态一致,增加关联度。



03


浮层按钮型筛选组件


组件样式

筛选按钮位置:以浮层按钮的形式位于界面右下方,占用空间较少。

筛选器形式:点击按钮,筛选器以浮层形式为主,或在筛选按钮下方展开筛选条件。


样式分析

浮层型筛选按钮的优点是增大内容区的纵向空间,比底部按钮型筛选组件的层级要弱一些。但当用户需要操作时,它的位置也便于用户点击。

设计时按钮用色需要区别于内容区,内容形式尽量精简直观。若使用案例3中的扇形筛选器,则要求筛选类别为1-2类,筛选项数量少切文案精简。



案例一

Image title

案例来源于dribbble


筛选按钮位于界面右下方紧贴于右侧屏边,浮于被筛选内容上层,滑动屏幕时消失。点击筛选按钮后,从屏幕右侧展开筛选浮层,原筛选按钮变为确认按钮。


此按钮形式最大限度的让出空间留给内容区,且右下角为用户关注薄弱区,这样的位置关系可让用户按需操作。关于筛选器使用右侧浮层前面的案例也提到过,适用于筛选条件较多的场景。并且使用侧边栏形式的浮层与筛选按钮关联性较高,相对符合用户认知。体验细节上可学习的点还有按钮功能的改变,使得体验更便捷。



案例二

Image title案例来源于dribbble


筛选按钮位于界面右下方但没有贴屏边,筛选器以底部分层形式从底部向上展开。这里的筛选条件不多,因此使用了底部分层形式。



案例三

Image title

案例来源于dribbble


筛选按钮形式与上一案例相似,不同的是筛选按钮处直接显示筛选条件,可得知此内容区目前被筛选维度为“30M”。此样式适用于筛选条件为同一维度的场景。


点击按钮后,从按钮下层展开扇形筛选器,滑动选择筛选条件。此种筛选器样式使用场景较局限,多为选择时长或数量,并且单选居多。因此筛选器不需要“确定按钮”,只需放“关闭按钮”即可。这里的筛选器也可根据不同的场景选择其他的形式。



04


举一反三


接下来我们拿个案例练练手。


下图界面中内容区为概览与各监控数据图表,需要设计一个筛选组件对内容区进行不同时段的筛选。


Image title


在设计之前需要确定几个需求:筛选组件的使用频次、筛选类别的数量、筛选项的数量,单复选关系、筛选条件之间的优先级。


进一步明确需求

筛选类别只有时间段1项,筛选数量不固定,为多项,单选关系。当用户进入此页,根据用户使用需求判断“1小时”基本满足用户查看数据的需求,默认展示“1小时”的筛选。因此筛选组件此场景使用“1小时”时段基本满足用户查看数据的需求,可判断用户使用筛选组件的频次不高。


Image title


方案解析

方案一,Tab栏形式

Tab是对整页的筛选,多为不同维度,而这里只有时段一个维度。

Tab所处位置为视觉热点区域附近,但用户对筛选组件的需求并不高,放在此位置占用了概览区空间。


方案二,底部按钮形式

底部按钮位于用户的习惯操作区,放这里使用层级略高,并且会使内容区的整体高度减少。


方案三,浮层按钮形式

位于右下角的浮层按钮在页面中属于视觉薄弱区域,可以使用户浏览时不受按钮影响;但按钮拥有强对比色,在有筛选需求时满足使用需求。

筛选器以时间选择器形式出现,可满足筛选项数量较多的场景。



05


小结


以上内容是我对常见筛选组件的思考,每一种样式都有其优缺点。但我们设计筛选组件的最终目的是帮助用户筛选信息,高效决策。这就需要设计师根据筛选需求、用户习惯等设计符合用户使用场景的操作体验。



本文作者:TXD技术体验团队-喻杰(阿里巴巴视觉设计师)

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务



Powered by emlog 京ICP备12006971号-1 sitemap