移动端筛选总被吐槽难用？核心交互问题拆解

Hello，这里是Clip设计夹，今天分享的是「移动端筛选交互设计」。

筛选作为B端产品最高频的功能之一，放到移动端却经常被吐槽。不少人把体验差归因于「屏幕小放不下」，但真正影响使用感受的往往是入口难找、状态模糊、操作繁琐这些交互细节。

今天就来拆解移动端筛选的核心问题，看看小屏幕里到底藏着多少可优化的空间，踩对设计节奏～

01移动端筛选有哪些痛点？

为什么移动端的筛选更难做？

首先屏幕太小确实有限制，需要不断滑动屏幕才能查看全部内容，用户很容易迷失方向，同时担心会找不到原来的浏览内容。

其次，「当前有没有生效的筛选条件」也很难感知。页面空间有限，很难把所有的内容看在眼里。而且触控目标通常很小，手指粗一点根本点不中。

另外，在浏览器使用H5页面和使用原生App的体验差距也很大。H5页面的操作体验往往不够流畅，而且浏览器自带的上下栏会跟着滚动忽隐忽现，而原生App能更好地控制用户的操作体验。

02移动端筛选器布局

常见的筛选器布局类型有以下几种：

① 顶部下拉抽屉

筛选器放在页面顶部是最符合用户预期的方式，视线自然会扫到这里，把它嵌在表格的表头行里也很顺理成章。

② 底部上拉抽屉

做底部抽屉的关键，是要让它悬浮在内容之上、始终可见。这样筛选按钮才不会被漏掉，会叠在用户的数据内容上方，而且手指也更容易点击到。

③ 侧边栏浮层

筛选器从侧边滑入的形式，可以让背景中的相关内容更清晰地显示出来。用户仍然能够看到页面左侧的内容，而且这部分内容通常也是最容易辨认的。

这样一来，用户就能保持对页面内容的整体理解，同时不用担心原来的页面结构会被破坏。

④ 全屏筛选

上面三种类型都可以延伸出全屏的筛选体验。这种方式让用户有足够的空间来打开或关闭下拉菜单、浏览所有的筛选条件，在确认无误后再点击「确定」。

全屏模式更适合这类场景：用户明确知道自己要找什么，并且习惯一次叠加多个筛选条件。

03筛选结果怎么拉、什么时候拉？

① 实时筛选（Live-Filtering）

实时筛选就是用户每操作一下筛选器，系统就拉一次新结果。例如勾选一个复选框？拉一次。拖动滑块动一像素？拉一次。改一下日期范围的起始日？拉一次。

▲ 比如Google Fonts就用了实时筛选的方案，只要修改任意筛选条件，结果立刻刷新。

⚠️但移动端通常不推荐用这种方式，因为每次点击都会使整个页面重新刷新，这样可能会导致用户不小心退出筛选界面。

除非你采用后台更新、抽屉保持打开的方案。这样既能给用户即时反馈，又能让用户保持对当前操作环境的清晰认知。但前提是你的数据足够干净，这样才能确保更新过程几乎可以瞬间完成。

② 单个筛选（Per-filter）

单个筛选触发是指关闭下拉框的时候才刷新结果。这种方式体验不错，减少了点击次数，但对性能要求很高。

为此，你需要在每个下拉菜单中加一个「确定」按钮，下拉菜单会关闭并触发页面刷新。

这里还要区分单选和多选的触发逻辑。例如如果某个下拉框只支持单选，那就可以做成：点击一次选中该选项、自动收起下拉框、同时触发页面刷新。这样整个交互流程一步到位，非常顺畅。

③ 批量筛选（Batch filtering）

批量筛选是指在用户完成选择后，才进行一次性数据获取。对于移动端的企业级产品而言，这种做法最为合理。

用户有足够的时间来仔细考虑自己的选择，仔细查看所有选项，然后提交筛选请求。完成选择后点击「确定」按钮，退出筛选界面，从而获取查询结果。

批量筛选更适合目标明确的查找场景，不适合用在用户事先不清楚自己要查找什么的探索式筛选场景中。

04提升筛选交互体验的技巧

这里给大家整理了一些技巧，用来优化产品的移动端筛选体验。

① 渐进式披露

复杂功能的场景中一定要善用可折叠分区和下拉菜单。如果一上来就把所有内容都摊开，用户会刷到头晕，很容易产生信息过载。

▲例如在Shelter Market产品中，所有的筛选器都支持折叠，同时在侧边栏顶部实时回显已选条件。

折叠意味着多一步点击，但移动端的选项之间离得很近，操作起来也很快。不过「确定」按钮必须吸顶或者吸底，始终保持在视野内，最好不要跟随页面滚动，方便用户随时使用。

② 提供快捷筛选

控制下拉菜单的数量防止滥用。如果某个筛选条件只有2-3个固定选项，完全可以做成切换标签/选择器，减少点击层级。

例如，当某个筛选器的选项条件有限时，做成横向切换的tab选项会更高效，减少打开下拉框的操作步骤。

同理，如果是数值范围类的筛选项，可以考虑使用滑块控件，让交互更顺畅的同时还能大幅节省屏幕纵向空间。

但如果数值范围很大，用户很难精准拖到想要的数值，最好加上交互辅助（比如自动吸附到关键数值）。

③ 加速选择过程

尽可能提供「全选」功能。在筛选时通过提供多种选择方式，例如在打车软件中，多种车型一个个勾选会特别麻烦，通过先点击「全选」再取消个别项，能大幅提升勾选效率。

④ 放大点击热区

移动端中把选择项做大能够更好适配手指触控。例如Peloton就把时长选项做成了一行两列排布的大按钮样式，空间利用得很到位，点击起来非常顺手。

⑤ 支持保存预设

让用户能够将自己选择的条件保存为预设筛选，这样他们就可以快速切换到自己想要的筛选内容中。

尤其在批量筛选的场景里，这个功能的价值更高。很多重度用户高度依赖筛选功能，他们非常清楚自己想要什么样的数据、按什么排序。

⑥ 接受原生操作系统

尽可能多用操作系统(iOS、Android)自带的组件。系统本身就自带下拉列表，直接用就可以，别自己重复造轮子。就像不会为了用户打字去手写一套手机键盘一样，自定义下拉框纯纯浪费前端精力，而且自定义的浮层经常和页面其他逻辑打架，反而拖累性能。

这些原生组件的优点在于，它们是由开发操作系统的团队经过精心打磨的。作为用户，我们最常使用的也正是这些组件，我们了解它们的交互方式。而且系统对手势、握持姿势都做了优化，用原生绝对不会出错。

▲例如在Google Fonts中自定义的可滚动下拉框、可拖动输入框，经常和浏览器的滚动逻辑冲突，体验反而打折扣。

最后

在产品设计过程中，记得在细节处多下功夫：适配触控的点击目标、重新打磨数据请求逻辑、充分利用所选移动平台中的各种原生功能。

你对用户和他们的使用场景了解得越透彻，用户的使用体验就会越流畅！

来源 | Clip设计夹（ID：ClipppDesign）

作者 | 赵壹 ; 编辑 | 虾饺

内容仅代表作者独立观点，不代表早读课立场