SpareBank1设计系统中的过滤功能演进

SpareBank1设计系统中的过滤功能演进

designsystem SpareBank 1's design system and component library. 项目地址: https://gitcode.com/gh_mirrors/desi/designsystem

背景介绍

SpareBank1设计系统是挪威领先银行SpareBank1的内部设计体系，旨在为银行各类数字产品提供统一的设计语言和组件库。在2024年9月，设计系统团队收到了一项关于"过滤功能"的需求建议，这项功能最终通过多选组件(MultiSelect)得到了优雅的解决方案。

需求分析

过滤功能是现代Web应用中非常常见的交互模式，特别是在数据密集型的金融应用中。用户需要通过筛选条件快速定位到目标数据项，这对用户体验至关重要。在银行场景下，典型的过滤需求包括：

• 账户类型筛选(储蓄账户、信用卡账户等)
• 交易时间范围选择
• 交易金额区间过滤
• 交易类别筛选

技术实现路径

设计系统团队评估了多种实现方案后，决定采用多选组件(MultiSelect)作为基础构建块来实现过滤功能。这种选择基于以下技术考量：

1. 组件复用性：MultiSelect本身已经具备选择多个选项的能力，这与过滤功能的多条件选择需求高度契合。

2. 用户体验一致性：使用已有组件可以保持与系统其他部分一致的交互模式，降低用户学习成本。

3. 可扩展性：MultiSelect组件架构可以方便地扩展支持各种过滤场景，包括：

   • 单选过滤
   • 多选过滤
   • 搜索过滤
   • 分类过滤

4. 无障碍支持：设计系统已有的MultiSelect组件已经内置了完善的无障碍支持，这直接继承了过滤功能的可访问性。

实现细节

在具体实现上，设计系统团队对MultiSelect组件进行了以下增强以适应过滤场景：

1. 状态管理：增加了对过滤状态的管理能力，包括已选条件显示和清除功能。

2. 视觉呈现：优化了选中状态的视觉反馈，使过滤条件更加直观可见。

3. 性能优化：针对大数据集的过滤场景进行了渲染性能优化。

4. API扩展：提供了更灵活的API接口，支持开发者自定义过滤逻辑。

应用效果

这一解决方案在SpareBank1的多个产品线中得到应用，包括：

• 网上银行的交易历史页面
• 投资产品的筛选界面
• 客户管理系统的数据表格

用户反馈表明，这种基于MultiSelect的过滤实现既保持了操作的一致性，又提供了足够的灵活性，显著提升了数据查询的效率。

经验总结

这个案例展示了设计系统演进的典型路径：

1. 识别通用需求模式
2. 评估现有组件的能力
3. 通过最小化修改实现最大化的功能覆盖
4. 保持系统的一致性和可维护性

SpareBank1设计系统通过这种方式，既快速响应了业务需求，又避免了组件库的过度膨胀，为大型金融系统的设计体系管理提供了优秀实践。

designsystem SpareBank 1's design system and component library. 项目地址: https://gitcode.com/gh_mirrors/desi/designsystem