属性与特征系统 是做什么的？
目的
属性与特征系统提供了一种为单个实体（例如产品规格、房产特征、用户详细信息）设计并构建“键：值”元数据对的方法论。
虽然 data-table-ui-system 处理多项目比较，但本系统专注于单个对象属性的内部层级和空间组织。
它确保关键元数据可进行快速扫描、在视觉上与叙述文本区分开来，并在不同视口宽度下保持结构完整性。
使用场景
- 产品规格： 在产品详情页面（PDP）上展示尺寸、材料和技术细节。
- 房产列表： 组织房产特征（卧室、浴室、面积、建成年份）。
- 用户资料： 显示账户元数据（注册日期、角色、订阅状态）。
- 交易/审计日志： 展示单个事件或订单的具体属性。
- 项目概览： 在页头或侧边栏中汇总项目元数据。
何时不应使用
- 多项目比较： 当用户需要跨多行比较属性时；请使用
data-table-ui-system。 - 叙述性内容： 用于长篇描述或故事；请使用
article-layout-system。 - 全局导航： 用于站点范围结构；请使用
site-navigation-system。 - 交互式表单： 当主要目标是数据录入时；请使用
form-design-system。
输入
- 属性清单： 要展示的键（标签）和值（数据）列表。
- 数据类型矩阵： 判断值是字符串、数字、布尔值、图标还是链接。
- 优先级排序： 哪些属性是“主要”（高可见度）的，哪些是“次要”（详细/隐藏）的。
- 布局上下文： 此列表将位于侧边栏、主内容列还是弹窗中？
输出
- 列表结构规范： 定义标签（键）和值的关系（大小、字重、颜色）。
- 对齐矩阵： 根据容器宽度决定水平或垂直堆叠的规则。
- 分组策略： 将大型属性集分类到子部分的方法。
- 语义蓝图： 将属性映射到HTML描述列表（
<dl>）结构。
工作流程
1. 分类并分组属性
对于超过5-7个属性的实体，将它们分组到逻辑类别中（例如“尺寸”、“性能”、“合规性”）。 这可以减轻认知负担，让用户能快速跳转到相关细节。
2. 选择布局模式
根据可用水平空间和属性密度选择模式：
- 水平（并排）： 标签在左，值在右。适合宽容器和短标签。
- 垂直（堆叠）： 标签在上，值在下。适合窄容器（侧边栏、移动端）和长值。
- 网格（多列）： 属性排列成2或3列网格。适合高密度的“快速浏览”统计。
3. 建立视觉层级
区分“键”和“值”：
- 标签（键）： 使用柔化颜色、较小字号或全大写样式，表明它是一个描述符。
- 值（数据）： 使用更高对比度的颜色、更粗的字重或更大的字号，确保实际数据是主要视觉焦点。
- 分隔： 使用细微的分隔线或一致的垂直节奏（
--space-s到--space-m）来分隔各对。
4. 定义对齐与可扫描性
- 水平对齐： 对于并排布局，将标签左对齐。如果标签长度变化很大，可以考虑固定宽度标签列，为值创建一个干净的垂直“轴线”。
- 对齐方式： 在宽容器中避免“极端对齐”（标签在左端，值在右端），因为这会使眼睛移动距离过大。保持它们紧密配对。
5. 规划响应式变换
属性列表是UI中的“变形金刚”：
- 堆叠切换： 从水平（桌面端）过渡到垂直（移动端），以防止文本重叠或极端换行。
- 网格折叠： 多列网格应在较小屏幕上折叠成1或2列。
决策规则
- “轴线”规则： 在水平列表中，各值应共享一条垂直对齐线（轴线），以便眼睛扫描数据时无需跳跃。
- 空值： 永远不要留空白值。使用“—”或“无”来确认该属性是故意留空的，而非系统错误。
- 图标使用： 仅当图标能提供即时的语义区分时才使用（例如，尺寸使用“尺子”图标）。如果图标增加视觉噪音而无明确性，则避免使用。
- 密度逻辑： 对于一般资料使用“标准”密度（16px间距），对于技术规格和仪表板使用“紧凑”密度（8px间距）。
约束
- 可访问性： 使用HTML
<dl>（描述列表）元素确保语义正确性（<dt>用于标签，<dd>用于值）。这确保了屏幕阅读器能传达各对之间的关系。 - 对比度： 标签和值都必须满足WCAG AA对比度标准（4.5:1）。即使标签是“柔化”的，也必须保持可读性。
- 响应式： 列表绝不能溢出视口。文本换行必须优雅处理，而不破坏列表的“轴线”。
常见失败模式
- “值/标签模糊”： 使标签和值在字重和颜色上看起来完全相同，使得列表无法扫描。
- 极端对齐： 将值推到宽屏幕的最右边缘，使它们与标签分离。
- 滥用表格： 对单个对象的属性列表使用
<table>，这会增加不必要的标记开销，并且更难实现响应式样式。 - 不一致的对齐： 在同一列表中混用水平和垂直堆叠，而没有明确的逻辑分隔。
- 缺少空状态： 留空某个属性，让用户疑惑数据是在加载还是确实缺失。
验证标准
- 标签和值通过字重、大小或颜色在视觉上区分开来。
- 属性使用
<dl>、<dt>和<dd>进行语义标记。 - 列表在移动视口上从水平堆叠转换为垂直堆叠。
- 大型属性集被分组到逻辑子类别中。
- 对齐为数据值创建了清晰的垂直“轴线”。
- 定义了缺失属性的空状态（例如“—”）。
- 所有文本的对比度比例均满足WCAG AA标准。