恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
效率加速器-筛选排序设计
0.0°
2018-10-30 原创文章 经验/观点 举报 6293 143 214 2

Image title

前言


筛选排序能够减少用户平时的使用 app 的操作成本,提高效率。今天我们从筛选排序的作用说起,结合业务结构的复杂程度分析一下,不同的筛选排序样式适合什么样的业务场景。


目录


1.筛选排序的作用

2.筛选排序的功能组成

3.筛选排序的展现形式

4.总结


Image title


筛选排序最大的作用:提高用户的操作效率!


Image title


用户通过各种筛选维度和 UI 样式的排列组合中选取最优组合,提高用户的筛选操作的效率。


Image title


例如我们需要购买一些商品的时候,如果一一查找费时费力,甚至会放弃购买!但是我们可以通过筛选排序功能,缩小筛选结果的范围区间,帮助用户在筛选结果里快速的找到符合自己心理预期的商品!例如网易严选:


Image title


网易严选通过多维度筛选条件的设置,使得用户可以根据自己的心理预期来进行选择筛选条件,通过筛选会展示符合筛选条件的商品结果,而这时候用户可以在筛选结果中选择自己心仪商品。


Image title


对于筛选功能结构最简单的理解就是:结果控制+内容展示。


Image title


结果控制区通过不同维度的对标签进行筛选选择组合,再通过内容展示区来显示筛选结果的排序,以便用户查看结果。


Image title


筛选排序的展现形式主要分四种:顶部显示、半浮层、侧边浮层、全浮层。


Image title


筛选排序的展现形式在很大程度上取决于自身的业务复杂程度,而不是根据设计者的喜好!


a.顶部显示适合业务结构专一的页面


顶部显示的筛选页面适合业务结构专一的页面,筛选维度较少,筛选结果模糊,并且结果控制区与内容展示区的联系强,不需要二次点击跳转交互,用户可以直观的查看筛选结果。例如人人视频、nice:


Image title


人人视频主要针对业务是海外电视剧,相对于其他视频平台,它的业务更加专一,筛选维度的种类较少,固定在顶部即可,不需要在进行二次点击。而 nice 的好货页面的主要业务针对于潮流运动鞋,潮流具有很很强的“时效性”和“热度”,所以筛选维度较少,仅通过“热度、最新、价格“用户最关心的三个维度即可满足需求。


b.半浮层适合业务结构较为复杂的页面


半浮层适合业务结构较为复杂的页面,在筛选维度上较多,筛选结果较为准确,并且结果控制与内容展示的联系性较强。值得一提的是半浮层的结果控制区的空间大小是相对弹性的,由筛选标签的数量决定的。以摩托迷为例:


Image title


摩托迷的选车业务较为复杂,筛选维度较多,用户需要在“排序、价格、排量”三个重要维度里面进行二次筛选,这样做的优点是能够帮助用户的精准的筛选结果。


c.侧边浮层适合业务结构复杂的页面


侧边浮层适合业务结构复杂的页面,相对于顶部显示和半浮层的使用面积更大,所以筛选维度种类更加全面,当筛选纬度超出屏幕页面高度的时候需要通过上下滑动来选择不同的筛选标签,通过更全面的多维度的筛选结果较为精确,但是侧边浮层的控制层与结果层的联系较弱,需要用户筛选完毕之后返回查看。例如闲鱼和贝壳租房:


Image title


闲鱼和贝壳租房的业务场景复杂,筛选维度详细,需要用户结合交互滑动完成筛选任务的操作,多维度的筛选让结果更加精准,结果更加符合用户的心理预期。


d.全浮层让用户更加专注


全浮层我们可以理解为展开一个新页面,结果控制和内容展示的联系薄弱,但是能够让用户更加专注于当前页面筛选任务的操作,筛选维度更加全面,能够为用户推荐更为精准的筛选结果。例如途家和 WEAR :


Image title


途家和 WEAR 的筛选页面都是全浮层的形式,用户可以更加专注的当前筛选任务的操作,通过多维度复杂的筛选,最终筛选出较为精确的结果。


* 重要常用的选项固定在顶部


重要常用的选项属于用户高频点击使用的筛选维度,将“它”固定在顶部有利于用户快速点击筛选,有效的提高了用户的操作效率,并且不需要用户二次点击,见面了不必要的交互步骤,提高了用户的使用体验。例如小红书和下厨房:


Image title


小红书将“综合、销量、上新、价格”等重要的选项和用户常用的“自营”选项固定在顶部供用户快速选择;下厨房则是把用户常用的蛋糕种类设置成标签的形式供用户快速选择。


Image title


筛选排序设计的形式取决业务场景的复杂程度,而非设计者的喜好。我们可以参考业务结构的复杂属性来作为参考,业务结构简单的话我们可以采取顶部显示或半浮层的形式;而业务结构复杂的我们可以选择侧边浮层和全浮层的形式;重要常用的选项可以固定在顶部,可以提高用户操作效率和用户体验。



参考链接

【JOIN产品实战笔记】市值100万到10000亿的App,都是如何设计筛选功能的?

https://zhuanlan.zhihu.com/p/21784812

筛选与排序的设计逻辑

https://zhuanlan.zhihu.com/p/35418096





更新:2018-10-30

收藏

143人已收藏

  • 15

    作品

  • 764

    粉丝

  • 57

    关注

  • 为何连“阿里、腾讯、美团”等大厂都选择了卡片设计
  • 你必须知道的 5种搜索页面的样式设计
  • 3步极速制定设计风格-思路篇
  • 你必须了解的七大交互心理学

    猜你喜欢

      2018-10-30 原创文章 经验/观点 举报 6293 143 214 2

      效率加速器-筛选排序设计

      0.0°

      你确定要举报效率加速器-筛选排序设计

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年09月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      214
      143
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录