Pinapps
首发于Pinapps
筛选与排序的设计逻辑

筛选与排序的设计逻辑

在周刊的第 98 期,我们曾讨论过列表页的设计。作为产品设计中非常重要的功能模块之一,几乎所有的产品都会涉及到。

列表页的本质上是为用户提供一系列同类信息的展示,当然也不仅仅止于此。从最终目的的角度来看不仅是提供信息的展示,还需要让用户方便、快速的找到自己感兴趣的信息。

为了帮助用户在海量的信息中快速定位,通常我们会提供一些工具来进行辅助,而这其中最重要的就是筛选与排序功能。所以,这次周刊我们就来一起聊聊筛选和排序的设计逻辑。

筛选与排序解决什么问题

相对之前介绍过的几个 Pattern,筛选(Filtering)和排序(Sorting)的目的更加的明确。通过这两个功能的组合使用来帮助用户快速找到自己感兴趣的信息。

不过筛选、排序都只是一类功能的称呼,并不是只要加上这两块内容就能对用户产生实质性的帮助,更多的还是需要对当前所服务的领域的理解以及对业务特性的辅助。

随着互联网的发展,这两个功能的使用也越来越被用户所了解。从设计形式上来看并没有特别大的差异,所以这次的分析我们将更着重于功能内部的部分。

从 Web 到 App

筛选与排序其实早在 web 时代就已经被大量的使用,结果集上方和左侧的功能区域已经成为标准设计方式(如下图的 eBay)。

下图左是大概 9 年前的 eBay 客户端,筛选、排序部分的设计并没有过多的考虑,只是遵循当年的 iOS 设计指导。对比如今的设计(其余三张图),我们可以发现设计的框架上并没有太大变化,但形式和内容则有非常大的变化。

在两个版本的对比中,有一个很大的变化是承载筛选排序功能的面板由之前的下级页面改为了侧边浮层的形式。在周刊的第 100 期「页面的信息展示逻辑」中我们也提到过,这是看似变化并不太大的设计其实已经彻底改变了用户的感知。

侧边模态浮动层就像 web 界面中被折叠的一部分,在用户需要的时候“翻”出来,在使用体验上降低用户的复杂度。

筛选排序功能的基本框架

我们找几款产品的列表页来进行一下对比。大家在功能的基本框架实际上都是一致的,只是在“如何做筛选、排序”上大家存在会有一些差异。而这些差异很多是因为业务的特性所产生的,我们会在后面进行展开。

类似的案例有很多,这里不一一展开。但借由这些案例设计我们可以得到一个列表页上的基本框架,界面分为控制和结果两部分,通过控制功能的组合来改变下方的结果和排列方式。

在框架部分,我们还需要考虑面板的设计。产品中功能面板部分的设计基本上可以归为半浮层、侧边浮层以及全页面浮层三种形式。

当然,我们不能仅从设计层面来看待这三种形式,如何进行选择其实和业务的类型也有着较大的关联。

而与前几期讨论的 Pattern 一样,我们也需要对筛选与排序功能从设计上进行一些分层。从基础体验到业务特性,将每一个环节的设计述求和思考剥离开,避免搅在一起影响对设计的思考与判断。

以上是 Design System 系列的第 12 期的节选内容,在接下来的全文内容中(付费部分)我们将继续对筛选排序的设计形式及设计关注点的分层进行实际案例的展开分析。

加入 PinDesign 会员,获取本期主题「筛选与排序的设计逻辑」的全文内容及本系列前 2 期周刊的赠送,年付会员将获得 Design System 系列所有(01~12)文章的赠送。

Design System 是 PinDesign 周刊的一个新系列,基于「Design Systems」的理念对产品的系统性设计的经验总结。希望将自己的感受和经验分享给大家,辅助大家的阅读。

点击领取 PinDesign 会员计划 50 元优惠券

Design System 系列已更新:

5key:什么是 Design Systemzhuanlan.zhihu.com图标5key:Design Systems 02 - 什么是 Design Principleszhuanlan.zhihu.com图标5key:Components 与 Patterns 究竟有什么区别zhuanlan.zhihu.com图标5key:你该为产品设计怎样的气质zhuanlan.zhihu.com图标5key:Design System 中的 Design Tokenzhuanlan.zhihu.com图标5key:Design Pattern 实例 - 用户通知与中断zhuanlan.zhihu.com图标5key:Design Pattern 组合实例 - 列表页设计思考zhuanlan.zhihu.com图标5key:Design Pattern 划分方式是对设计的逻辑思考zhuanlan.zhihu.com图标5key:Design Pattern - 页面的信息展示逻辑zhuanlan.zhihu.com图标5key:换个角度谈表单设计zhuanlan.zhihu.com图标5key:购物车的设计逻辑zhuanlan.zhihu.com图标

点击下方链接,了解 PinDesign 会员计划详细信息:

PinDesign 互联网产品设计周刊wap.youzan.com

文章被以下专栏收录

    我推荐的不仅仅是apps,更是一种态度。 偶尔我也会聊聊和 apps 相关的设计,请保持关注! 微信搜索「Pinapps」