分享此网站可得100G教程,联系小洁领取点击这里给我发消息

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

APP设计 学UI设计 57次浏览 0个评论

筛选组件概述

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

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

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

 

01—位于 Tab 栏的筛选组件

组件样式

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

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

 

样式分析  

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

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

 

案例一

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

案例来源于美团App

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

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

 

案例二

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

案例来源于淘宝App

当用户从首页全局搜索后,出现此页。筛选按钮位于二级Tab栏。

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

 

案例三

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

案例来源于哔哩哔哩App

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

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

 

02—底部按钮型筛选组件

组件样式

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

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

 

样式分析

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

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

 

案例一

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

案例来源于旅游类App Expedia

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

这里还有2个细节:

  1. 由于筛选类别较多,手动清除单个筛选条件太过繁琐,于是筛选器底部增加了清除按钮,操作更简便。但底部按钮一般为“确定”操作,“清除”放在底部样式上没有做误操作提示,可能会增加误操作机率。
  2. 筛选后,筛选按钮处会显示已选择的筛选类别数量,给用户带来良好的使用反馈。

 

案例二

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

案例来源为dribbble设计师稿

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

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

 

03—浮层按钮型筛选组件

组件样式

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

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

 

样式分析

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

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

 

案例一

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

案例来源为dribbble概念稿

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

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

 

案例二

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

案例来源为dribbble设计师稿

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

 

案例三

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

案例来源为dribbble设计师稿

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

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

 

04—举一反三

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

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

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

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

 

进一步明确需求

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

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

 

方案解析

方案一,Tab栏形式

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

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

 

方案二,底部按钮形式

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

 

方案三,浮层按钮形式

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

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

05—小结

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

 

原文地址: TXD技术体验设计(公众号)

作者: 戚月


推荐:查看最受欢迎的设计导航网站 → http://www.xueuisheji.com

交流:结交更多有才华的设计师?请加入UI设计QQ群 ,与设计师交流设计。

喜欢 (0)
[关注:设计军团]
分享 (0)
关于作者:
学UI设计网专业的UI设计师交流、学习与展示的平台。我们将打造中国最专业的UI设计交流平台,为UI设计师做最好的职业生涯一站式服务,提高UI设计乃至互联网设计的行业价值!