比较与矩阵系统
目的
比较与矩阵系统提供了一种设计详细发现与评估界面的方法论。pricing-table-ui-system处理高级计划层级，data-table-ui-system管理大型数据集，而本系统专注于属性密集型的少量项目比较（通常为2-5个）。它确保用户能够在数十个维度上评估复杂产品或服务时，不会迷失方向、被数据淹没或受困于不响应式布局。
使用场景
- 电商产品对比： 比较电子产品、家电或车辆的技术规格。
- SaaS功能矩阵： 超越高级定价卡，详细分解平台能力。
- 服务比较： 评估不同的保险计划、旅游套餐或教育课程。
- 内部工具： 并排审计不同的系统版本或配置。
何时不该使用
- 高级定价： 对于简单的3层订阅摘要，请使用
pricing-table-ui-system。 - 大型数据集探索： 如果用户需要对数百个项目进行排序和筛选，请使用
data-table-ui-system。 - 单个项目详情： 对于单个产品页面，请使用
article-layout-system或card-ui-system。 - 线性流程： 对于分步流程，请使用
step-progress-system。
输入
- 比较集： 用于评估的2-5个项目。
- 属性分类： 所有需要比较的功能、规格和数据点的分类列表。
- 数据类型： 属性到UI类型的映射（例如，布尔/勾号、数值、评分、文本描述）。
- 选择上下文： 这是一个持续存在的页面，还是一个从产品列表页触发的临时覆盖层？
输出
- 矩阵解剖规范： 行标题（属性）、列标题（项目）和数据单元格的定义。
- 分类框架： 将属性分组为逻辑部分并带有可折叠标题的规则。
- 粘性导航计划： 在垂直和水平滚动期间保持上下文的行为规则。
- 响应式转换图： 矩阵适配移动端的策略（例如，项目交换 vs. 垂直堆叠）。
工作流
1. 构建网格框架
定义矩阵的主轴：
- 列： 表示被比较的项目。
- 行： 表示属性或功能。
- 首列： 左侧的第一列包含属性标签/标题。
2. 分类并分组属性
通过将行组织成逻辑集群来防止“比较疲劳”：
- 部分： 将相关属性分组（例如，“性能”、“连接性”、“保修”）。
- 可折叠性： 允许用户折叠/展开部分，以专注于特定标准。
- 视觉区分： 使用微妙的背景变化或边框来分隔各部分。
3. 标准化数据可视化
对不同数据类型应用一致的视觉语言：
- 布尔值： 使用高对比度的勾号（✓）表示包含，短横线（—）或空状态表示排除。
- 评分： 使用一致的图标尺度（例如，5星）。
- 细节文本： 使用较小、可读的字体大小描述，确保单元格内管理行长度。
- 高亮： 在视觉上区分某一个项目明显优于其他项目的单元格（谨慎使用以保持中立性）。
4. 实现粘性上下文（指路）
确保用户永远不会忘记他们在看什么：
- 粘性列标题： 当用户向下滚动行时，保持项目名称和照片在视口顶部可见。
- 粘性行标题： 对于桌面端宽矩阵，当用户水平滚动时，保持属性标签在左侧可见。
5. 规划移动端适配
矩阵本质上是水平的；适配垂直屏幕：
- “选择器”模式： 每次显示属性列表和1-2个项目，使用下拉菜单或滑动手势切换可见项目。
- “垂直卡片”模式： 将矩阵转换为一系列卡片，为每张卡片重复属性标签（仅推荐用于非常简单的比较）。
决策规则
- 五项法则： 将桌面端并排矩阵的最大项目数限制为5个，以防止水平过载。
- 属性相关性： 仅包含在集合中至少两个项目之间不同的属性。如果每个项目都有相同的值，请考虑将该信息移至共享的“全局功能”部分。
- 标题突出性： 项目标题（第1列、第2列等）应包括产品的小图像，以提供即时视觉识别。
- 行悬停状态： 使用不同的悬停背景来处理整行，以帮助眼睛跨列跟踪。
约束
- 可访问性： 行标题必须使用
scope="row"和scope="col"与单元格正确关联。确保勾号和图标的高对比度。粘性列/行标题不得遮挡单元格或控件下方的键盘焦点指示器（WCAG 2.2 SC 2.4.11）。移动端的任何项目切换器或下拉控件必须满足24x24px的最小目标尺寸（SC 2.5.8）。 - 响应式： 水平滚动必须是故意的（例如，在一个容器内），并且不得破坏全局页面布局。
- 视觉权重： “首列”（属性）应具有略微不同的视觉处理（例如，浅灰色背景或粗体文本），以区别于数据。
常见失败模式
- “丢失表头”问题： 向下滚动长矩阵时忘记哪个项目是哪个。
- 属性过载： 显示50多行但没有分类，使得无法找到特定信息。
- 移动端压缩： 试图将4列挤压到移动端屏幕上，导致文本不可读。
- 歧义符号： 使用用户无法立即理解的自定义图标表示“是/否”。
- 不一致的对齐： 在同一列内混合居中的图标和左对齐的文本。
验证标准
- 项目标题在垂直滚动期间保持在视口顶部粘性。
- 属性被分组为逻辑的、可折叠的部分。
- 数据类型（布尔、评分、文本）使用一致的视觉语言。
- “首列”在视觉上与数据列区分开来。
- 移动端视图提供清晰的比较机制（例如，项目切换）。
- 实现行悬停状态以辅助水平追踪。
- 所有图标和文本满足WCAG AA（4.5:1）对比度要求。
- 粘性标题不会遮挡单元格或控件上的焦点指示器（WCAG 2.2 SC 2.4.11）。
- 移动端项目切换器控件满足24x24px的最小目标尺寸（WCAG 2.2 SC 2.5.8）。