首页
UI设计正文内容

如何处理超过 100 个选项的筛选器

2024年10月11日
阅读时长 2 分钟
阅读量 8
如何处理超过 100 个选项的筛选器

使用模态框进行批量筛选

为大型企业应用设计筛选器与普通应用有所不同。您不只是处理几个选项,而是数百个选项。让一切直观地融合在一起是一个相当大的设计挑战。

虽然左侧边栏和水平工具栏是筛选器的常见 UI 模式,但在处理数百个筛选器时并不是最佳选择。相反,更好的方法是专门用于批量筛选的模态屏幕。

然而,这种方法仍然存在潜在问题。如何将数百个筛选选项放入单个模态屏幕中?您不能将它们全部垂直堆叠,否则会迫使用户进行过多滚动。唯一的方法是在模态内设计一个导航。

在模态中添加导航

要在模态中添加导航,您必须将左侧的一小部分指定为侧边栏。这个侧边栏是可滚动的,允许用户查看无限数量的筛选选项而不会影响宽度空间。项目数量可以在垂直方向上无限增长,并且有足够的宽度空间来显示多个选项。

您可以选择水平或垂直的芯片堆栈。如果选择水平堆栈,您将有很多垂直空间可供使用,但您可能不需要全部使用。在这种情况下,您可以选择垂直堆栈的芯片。好处是选项更容易点击,并且您可以按字母顺序排列它们以便更快地扫描。

您还应在顶部添加一个搜索字段,以便用户可以快速找到特定的筛选器而不必花费太多时间。模态底部包含一个“应用所有筛选器”和一个“清除所有”按钮。它还指示并在每次筛选器选择后更新将显示的结果数量。用户点击“应用”按钮后,模态将关闭并显示他们的结果。

在移动设备上的显示效果

这种模态设计仅适用于桌面屏幕。对于移动设备屏幕,您必须使用手风琴菜单,因为侧边栏的空间不足。手风琴将筛选器垂直堆叠,用户可以通过点击展开和折叠它们。

如果您想避免手风琴,逐级深入的方法可能效果更好。每个筛选器的选项位于用户必须导航到的单独页面上。这种方法可以避免过多滚动,但缺点是需要多次点击来在屏幕之间来回导航。

管理和显示超过 100 个筛选器并不容易。然而,通过这些设计解决方案,您可以使其适用于您的应用程序。实施这些解决方案将需要大量工作,但对于更优越的用户体验而言是值得的。

免责声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

相关文章

在 Figma 中使用自动布局的技巧
2024年11月21日20:43
本文分享了在 Figma 中使用自动布局构建响应式组件的技巧,重点介绍了“固定”、“填充”、“拥抱”等大小选项的应用。文章通过实例展示如何创建组件,并在设计过程中逐步测试其响应性,确保最佳的可扩展性和稳定性。通过调整组件和布局设置的顺序,设计师可以更有效地利用自动布局工具。
设计更好的文本输入控件的 8 个技巧
2024年11月17日10:35
本文分享了设计用户输入表单中文本输入控件的8个实用技巧:不要将标签用作占位符,避免使用过长的标签,清晰传达输入要求,不要在控件内使用占位文本,使用适当的输入控件,仅标记可选字段,调整输入控件宽度,使用视觉指示和文本突出显示错误。这些技巧有助于创建直观、用户友好的输入表单,提高产品的可用性和用户体验。
登录表单用户界面设计指南
2024年11月14日21:09
本文探讨了设计简单、极简登录表单的方法,包括层次结构条带的应用和网格间距的定义。通过详细的设计步骤,强调用户界面的逻辑分组和字体选择,确保对比度检查以提高易用性。同时,提供了一些可能的改进建议,帮助设计师展示对细节的关注。
如何处理超过 100 个选项的筛选器
2024年10月11日18:00
在模态中添加导航,通过侧边栏和堆栈设计,使用户可以轻松浏览数百个筛选选项。在移动设备上,使用手风琴菜单或逐级深入的方法来处理筛选器。这些设计解决方案可以提升用户体验,尽管实施需要大量工作。
设计下拉菜单的 10 个最佳实践
2024年09月10日20:20
本文分享了设计下拉菜单的10个最佳实践,包括避免过长菜单、不要在仅有2个选项时使用下拉菜单、禁用无效选项、避免过于明显的选项使用下拉菜单、限制多级菜单等。此外,还提到了设计清晰的视觉设计、考虑移动设备适配、组织选项顺序、提供搜索功能和设置默认选择。通过遵循这些实践,可以提高产品的可用性和用户体验。
UI 设计技能等级与被雇佣关系的分析
2024年07月04日21:34
通过观察500份初级UI设计师作品集,发现达到第四级及以上的设计师更容易被雇佣。关键因素包括可读性、布局、颜色、对比度、字体选择等。从第一级到第五级的设计水平有明显差异,第四和第五级的设计更受欢迎。设计师需要注意间距、字体选择、结构等细节。第五级设计要求严格遵循8点网格、一致的间距和清晰的结构。练习和努力是提升设计水平的关键。