SpareBank1设计系统中的GroupCard组件设计解析

SpareBank1设计系统中的GroupCard组件设计解析

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

组件背景与需求分析

在SpareBank1设计系统的实际应用场景中，多个业务团队（包括boligreisen、PM Oversikt和PM Betaling等）都提出了对GroupCard组件的强烈需求。这种组件主要用于将多个相关卡片信息以分组形式展示，提升用户界面的组织性和信息密度。

设计形态与变体

根据各团队提交的设计方案，GroupCard组件主要呈现以下几种形态：

1. 基础分组卡片：由多个卡片垂直堆叠组成，视觉上形成一个整体单元，通常带有统一的边框和间距控制。

2. 带操作按钮的分组：在基础分组卡片的基础上，增加了操作按钮区域，方便用户对整组卡片执行统一操作。

3. 信息密集型分组：特别适用于财务类应用场景，如支付历史、定期协议等，卡片内包含多个数据字段和状态指示。

技术实现考量

实现GroupCard组件时需要考虑以下技术要点：

• 间距系统：需要与现有设计系统的间距规范保持一致，确保卡片间的垂直间距既保持视觉关联性又具备足够可读性。

• 边框处理：组内卡片通常采用共享边框设计，首尾卡片需要特殊处理圆角，中间卡片则保持直角连接。

• 交互状态：需要考虑整组悬停、单个卡片悬停以及操作按钮反馈等多种交互状态的设计规范。

• 响应式布局：确保在不同屏幕尺寸下，分组卡片的布局能够自适应调整。

应用场景扩展

从各团队提交的需求可以看出，GroupCard组件具有广泛的应用潜力：

• 房地产服务中的房源比较
• 财务概览中的多账户展示
• 支付管理中的交易历史列表
• 协议管理中的批量操作界面

组件标准化建议

基于多方需求，建议GroupCard组件实现时考虑以下特性：

1. 支持自定义卡片数量
2. 提供紧凑型和宽松型两种间距模式
3. 内置支持操作按钮区域
4. 提供多种边框样式选项
5. 支持动态内容加载状态

这种组件的标准化将显著提升SpareBank1设计系统在复杂数据展示场景下的适用性，同时减少各业务团队的重复开发工作。

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