Formbricks卡片组件新增宽版布局支持

背景介绍

Formbricks作为一款开源的用户调研工具，其卡片组件(Cards)是展示问题和收集用户反馈的重要界面元素。在实际使用过程中，许多用户反馈现有的卡片布局在展示矩阵类问题(Matrix Questions)时空间较为局促，导致选项显示不完整或拥挤，影响了用户体验和数据收集效果。

技术实现方案

开发团队针对这一需求提出了优雅的解决方案：为卡片组件新增宽窄两种布局模式，让用户可以根据问题类型自由选择最适合的展示方式。

窄版布局(默认)

窄版布局保持现有的max-w-lg样式，宽度约为32rem(512px)，适合大多数常规问题的展示。这种布局在保持界面整洁的同时，也能确保良好的可读性。

宽版布局(新增)

宽版布局采用max-w-2xl样式，宽度约为42rem(672px)，比窄版增加了约31%的显示空间。这种布局特别适合以下场景：

• 矩阵类问题(包含多个选项和评分维度)
• 选项文字较长的选择题
• 需要并排显示多个元素的复杂问题类型

实现细节

在技术实现上，开发团队采用了以下策略：

1. 配置化设计：通过新增布局设置选项，用户可以在卡片配置中选择"宽版"或"窄版"布局，保持系统的灵活性。

2. 响应式设计：两种布局都保持了良好的响应式特性，在不同屏幕尺寸下都能自动调整，确保移动设备上的可用性。

3. 渐进式增强：对于现有用户，默认保持窄版布局，确保向后兼容；新用户则可以根据需求自由选择。

4. 视觉一致性：宽版布局在增加宽度的同时，保持了与窄版一致的视觉风格和间距系统，确保整体UI的一致性。

用户体验优化

这一改进带来了多方面的用户体验提升：

1. 信息展示更完整：矩阵问题的行标签和列选项可以完整显示，减少截断情况。

2. 操作更便捷：宽版布局为触控设备提供了更大的点击区域，降低误操作率。

3. 数据质量提升：清晰的选项展示有助于用户做出准确选择，提高收集数据的准确性。

4. 布局选择自由：用户可以根据问题类型灵活选择最适合的布局方式，而不是被迫接受单一方案。

总结

Formbricks通过为卡片组件增加宽版布局支持，有效解决了矩阵类问题展示空间不足的痛点。这一改进体现了开发团队对用户反馈的快速响应能力和以用户为中心的设计理念。通过提供布局选项而非强制改变，既满足了特定场景的需求，又保持了系统的灵活性和一致性，是UI组件设计的一个典范。