赞助商
立即赞助

如何设计更高效的筛选器?来看网易设计师的总结!

UI设计3年前 (2021)更新 流光
2.2K 0 0

网易UEDC – 谢晓聪 :如何设计更高效筛选器,提高用户的决策效率?

一、生活中的筛选

在常生活中我们常常跟各式各样的「筛选器」打道。比下面个场尤为常见,当你身处一个图书,想找某一你很需要的书时,你怎么办?

如何设计更高效的筛选器?来看网易设计师的总结!

个时通常通以下两种途径来决问题:

  • 精准查找——通过电脑检索,找到目标。
  • 模糊查找——通书架类目分类,找到目标。

然,这里电脑类目标识整找书的行径中就充当了筛选器的功能。活中还很多诸如此类的应用场景,比如超市购、查字典行场景。

如何设计更高效的筛选器?来看网易设计师的总结!

△ 某超市架

二、为什么需要筛选器

筛选器的本质帮人们提升决策效率。据全2012调研结果显示,每人每天平均70选择。然每选择又可能会面对的选择对象,这时人们的决策本就会随平行信息时的发展与日俱增。

何帮助人们在面对大量选择对象时提升决策效率,就成为筛选设计的抓手,也就是我们所说的设计机点。

三、移动设备上的筛选器

大量数据集合需要根据不同用户的不同需求来进行滤,也叫做筛选。筛选依赖用户的选择标准,从而细化搜索结果或者一组大型对象结果。常见的筛选器设计包括:

  • 直列式筛选器(Onscreen Filter)
  • 抽屉/折叠式筛选器(Filter Drawer)
  • 列表筛选(Filter Form)

如何设计更高效的筛选器?来看网易设计师的总结!

述三类筛选器的设思几乎涵盖了市场绝多数的应用案例,不同类型之间的筛选器用于不同的使用场景,下面我们可以分辨看看各类型的场景应用。

四、直列式筛选器

与页面的元素排序逻辑以及展示方式类似,屏幕直接显示对象结果或者对象列表。通过设 tab 按钮筛选目标对象。Google 度都采用单排横向式。

如何设计更高效的筛选器?来看网易设计师的总结!

△ Google

如何设计更高效的筛选器?来看网易设计师的总结!

△ 度

当我对关键词进行检索,以在此基础上对结果进行内容类型的筛选, Google 的筛选器点击最右的「搜索工具」时,额外展示出一列新的筛选条辅助进一步的筛选。

如何设计更高效的筛选器?来看网易设计师的总结!

△ Google Play 报亭

Google Play 报采用了双排筛选条,根据用户感兴趣检索词匹配出「内容相关」以及「媒体相关」两类筛选偏好。

这类的筛器会紧跟检索入口,这样更于户解方的单 tab 元素是基于检索键词而进行过滤的。根据格式塔定律的接性原则,相邻的元素系会更容易户解他们之间的联作。

如何设计更高效的筛选器?来看网易设计师的总结!

△ SXSW 和 Feed a fever news

SXSW 提供了一双排不同维度的筛选器,Feed a Fever news reader 运用了一个超简的组排筛选器,通过描述+被描述的对象(筛选器)来建立起一个清晰易懂的概念模型。

五、抽屉式筛选器

CNN 新闻采取的是抽屉/折叠式筛选器,通过一个 handle 来提示筛选器的入,用户通过点击可以将被折叠/收起的筛选器浮层展示出来。

如何设计更高效的筛选器?来看网易设计师的总结!

△ CNN NEWS

拥熟且稳固的分类/类目体系的内平台合这种抽屉式的筛选器浮层,可以将完整的类目完全曝光,并且常驻底部的 handle,可以效的避免曝光衰减的状况。

六、列表式筛选器

作全球的线旅游公司 Expedia,采用了列表式的筛选器。但 Expedia 一点的非常好,就筛选器展时给用户预匹配的结果数。

如何设计更高效的筛选器?来看网易设计师的总结!

△ Expadia

在右图中,下方有一个常驻的 bar,上面展示根据目前的筛选项组合匹的结果数量,样能证用户在筛选器展开的状态下依能感到结果页的结果范围,确用户不用担心因为筛出来的结果太少或没有而反复展开或收筛选器。

如何设计更高效的筛选器?来看网易设计师的总结!

△ Trip advisor 左为早期版,右为17年12月份的版

在早期些 app 上会采用话框筛选,比如说 Trip Advisor,现在他们也开始采用列表筛选。

在此结构基础上还有组合设计方式,通过单直列式+列表式,如携程,这样更适于较为复杂的筛逻辑,并且可将频的筛项作为预期设计前曝光在单的直列式筛项中。

如何设计更高效的筛选器?来看网易设计师的总结!

△ 携程

总结

在做列表式筛器时,尽量保持项列表短,避免过多的手势滑。考虑一个更长或多择过滤项过滤形式。要过设计筛器,一个简单的屏幕筛器或折叠筛器通就足够了。

如何设计更高效的筛选器?来看网易设计师的总结!

在设计筛器的过程中我们要记住我们的核心目标是帮助户建立一个简单易的概念模来户的决策效率。

欢迎关注作者「网易UEDC」的公众号:

如何设计更高效的筛选器?来看网易设计师的总结!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

当你提到用户体验(以下简称UX)时,我们会立马与APP、Web相关联。特别是在讲到UX设计师这个岗位时,它可能会让你觉得这是一...
用户体验
网易UEDC – 姜永超 :习惯了浅色界面的设计?本文将带你了解深色界面的设计,聊聊深色界面下的设计细节,使你设计的深色界面...
UI 设计
权限获取页面是我们在启动APP进入主页面相对来说遇到的第一个交互的页面,设计好权限获取页面就是打动用户的第一步,更好的请...
产品设计
这篇文章来自于 Invision 出品的书籍,围绕规划、设计、构建和实现设计系统的实践经历来指导读者,其中包含了经验丰富专家的...
UI
我们需要做有依据、有逻辑、有理念的设计,需要发散思维、整合创意、严谨输出,让设计经得起推敲。 2018年春节已远去,一直...
品牌
网易UEDC – 朱子健、蒋蕊遥 :良好的交互规范可以很好的帮助企业、团队提高产出,保证用户体验。 一. 规范很重要 规范和秩序...
交互规范
58UXD:表单是收集用户信息的方式。如果你的产品需要收集大量用户信息来完成为其提供的服务,那么在用户进行信息输入的过程中...
实战案例
在一个公司或者团队里,设计方案判断出现分歧时,到底谁说了算?想必,每个设计师都遇到过这个问题,甚至被这个问题所困扰。 ...
优秀设计师