使用模态框进行批量筛选
为大型企业应用设计筛选器与普通应用有所不同。您不只是处理几个选项,而是数百个选项。让一切直观地融合在一起是一个相当大的设计挑战。
虽然左侧边栏和水平工具栏是筛选器的常见 UI 模式,但在处理数百个筛选器时并不是最佳选择。相反,更好的方法是专门用于批量筛选的模态屏幕。
然而,这种方法仍然存在潜在问题。如何将数百个筛选选项放入单个模态屏幕中?您不能将它们全部垂直堆叠,否则会迫使用户进行过多滚动。唯一的方法是在模态内设计一个导航。
要在模态中添加导航,您必须将左侧的一小部分指定为侧边栏。这个侧边栏是可滚动的,允许用户查看无限数量的筛选选项而不会影响宽度空间。项目数量可以在垂直方向上无限增长,并且有足够的宽度空间来显示多个选项。
您可以选择水平或垂直的芯片堆栈。如果选择水平堆栈,您将有很多垂直空间可供使用,但您可能不需要全部使用。在这种情况下,您可以选择垂直堆栈的芯片。好处是选项更容易点击,并且您可以按字母顺序排列它们以便更快地扫描。
您还应在顶部添加一个搜索字段,以便用户可以快速找到特定的筛选器而不必花费太多时间。模态底部包含一个“应用所有筛选器”和一个“清除所有”按钮。它还指示并在每次筛选器选择后更新将显示的结果数量。用户点击“应用”按钮后,模态将关闭并显示他们的结果。
这种模态设计仅适用于桌面屏幕。对于移动设备屏幕,您必须使用手风琴菜单,因为侧边栏的空间不足。手风琴将筛选器垂直堆叠,用户可以通过点击展开和折叠它们。
如果您想避免手风琴,逐级深入的方法可能效果更好。每个筛选器的选项位于用户必须导航到的单独页面上。这种方法可以避免过多滚动,但缺点是需要多次点击来在屏幕之间来回导航。
管理和显示超过 100 个筛选器并不容易。然而,通过这些设计解决方案,您可以使其适用于您的应用程序。实施这些解决方案将需要大量工作,但对于更优越的用户体验而言是值得的。