App设计体系之筛选

263天前发布

原创文章 / UI / 教程
渐渐见减减简 原创,如需商业用途或转载请与渐渐见减减简联系,谢谢配合。

App设计体系之筛选

筛选的作用是让用户在众多内容的界面中更快的找到目标内容,而内容越多,筛选条件可能也会越多,无法全部一起显示,需要考虑哪些筛选项要先“隐藏起来”(不展示在第一层级中),哪些筛选项要“显现出来”(展示在第一层级中)。


1、“隐藏起来”

在淘宝的搜索结果界面需要点击界面右侧的筛选按钮,才会出现展现更多的筛选项。

“藏起来”的标准:当有大量筛选项,且大多数用户使用产品时并不需要筛选,或者筛选项使用频次不高时,一般考虑将筛选项“藏起来”。



2、“显现出来”

氧气的搜索结果界面将尺码和类型直接“显现出来”,即使筛选项占据屏幕空间的40%,而买贴身衣物尺寸,罩杯和胸围是必选,品牌等非必选项就集合在一起且“隐藏起来”。

“露起来”的标准:筛选项为必选项,用户使用频次较高则应该“显现出来”。


3、综合说明

为了进一步说明什么该“隐藏”何时该“显现”,以商城app为例。

销量- - -用户从众消费

价格- - -买实惠的给自己,送最贵的给姑娘

返现商品- - -有优惠

新品- - -为了给新上线的商品一些流量的入口

品牌- - -只用某个牌子

香调- - -中意某种味道

以上几点是用户搜索香水的最核心的消费决策点,在首屏顶部“显现出来”,用户通过最少的操作实现目标筛选,在筛选抽屉中的筛选项的优先级远不如首屏中的筛选项高。适合专业用户去探索发现。品牌这个筛选维度也只显示八个筛选项,点击“查看全部”后才显示该维度的所有筛选项,毕竟,选项多会让用户恐惧,必须有所取舍。

小结:如果筛选项不多,可全部直接展示出来;如果筛选项多,那就把使用频次高的筛选项直接放在首屏(展现出来),而剩余筛选项统一整合到一个容器中(隐藏起来)。



4 常见UI样式与交互细节


4.1 筛选抽屉


4.2 横栏式筛选


4.3 标签式筛选 


4.4 表单筛选


4.5 全屏

在筛选的过程中,按钮中会实时显示筛选结果数,让用户知道筛选结果,能避免因筛选结果数为0而造成挫败感。



5、实际应用

不同类型的App适用不同类型的筛选控件


5.1 电商类

电商类产品的筛选器都是以抽屉的形式从tab栏展开筛选条件,表现形式分为以下两种形式:


5.2 视频类


5.3 旅游类


5.4 模块选择


5.5 特别的筛选



31
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息