第4章：层级关系表达——父子节点缩进、连线样式、展开收起逻辑、层级深度控制

用户场景

产品经理在梳理大型需求树（如电商后台订单管理模块）时，面对超过200个需求节点，需要快速理解父子层级关系。团队成员经常因为节点缩进不统一、连线样式混乱、展开/收起操作不直观而反复沟通，导致需求评审效率低下。

业务问题

• 层级视觉混淆：同一层次的节点缩进不一致，导致父子关系误判；
• 连线语义不明确：使用单一灰度直线连接全部节点，无法区分“包含”“依赖”“可选”关系；
• 展开收起卡顿：深层节点（深度≥5）默认全部展开，画布加载缓慢，且无法按需聚焦；
• 深度失控：需求树嵌套超过7层后，阅读和操作成本指数上升，缺乏深度截断或折叠策略。

用户访谈（关键洞察）

• PM李：“每次评审需求树都要花10分钟解释‘这个节点到底属于哪个父级’，缩进只有两个像素，谁看得清？”
• 开发张：“‘依赖’关系的节点用虚线我能理解，但所有线都是实线，我需要猜这是‘包含’还是‘引用’。”
• 测试王：“我希望只看当前功能点的子需求，其他分支先收起来。但Figma默认全展开，每次都要手动折叠几十个节点。”

需求拆解

需求ID	需求描述	优先级	层级关系要素
R4-1	子节点相对父节点缩进 ≥ 12px，同级节点缩进一致	P0	缩进
R4-2	连线支持3种样式：实线（包含）、虚线（依赖）、点线（可选）	P1	连线样式
R4-3	每个父节点可点击展开/收起子节点，收起时子节点隐藏	P0	展开收起
R4-4	层级深度超过5层时自动折叠深层节点，并提供“展开全部”按钮	P1	深度控制

方案表达（Figma需求树绘制）

在Figma中使用自动布局（Auto Layout）实现响应式缩进：父节点容器设置左侧内边距 12px，每嵌套一层增加 12px。连线通过连接器工具（Connector）配置样式：父→子使用实线 + 圆端点；若为“依赖”关系则改为虚线 + 箭头；“可选”关系使用点线 + 菱形端点。展开/收起通过组件集（Component Set）实现：创建“展开态”和“收起态”两个变体，点击时切换。深度控制使用Figma的“条件可见性”插件或手动分组，超过5层时父节点自动添加“🔒深度折叠”标签，用户可逐级展开。

指标验证

指标名称	目标值	测量方式
父子节点缩进偏差	≤1像素	使用Figma的“间距测量”工具随机抽样20组父-子节点
连线样式正确率	100%	审计所有连接器配置：实线/虚线/点线是否与关系类型匹配
展开收起操作成功率	100%	测试人员对每个父节点执行点击展开/收起，无卡顿或意外跳转
深度≥5自动折叠覆盖率	100%	扫描所有深度≥5的分支，确认已自动折叠或带锁标签
首次评审时间缩短	≥40%	对比旧版需求树（无层级规范）与新版需求树的平均评审用时

验收标准

• 缩进一致性：任意父子节点水平间距为12±1px，同级节点缩进完全相同；
• 连线样式绑定：“包含”关系使用实线（描边色 #3498db）、“依赖”使用虚线（#7f8c8d）、“可选”使用点线（#f39c12），且端点形状正确；
• 展开收起：点击父节点右侧“🔽”图标，子节点全部隐藏/显示，收起状态下不占用画布空间；
• 深度控制：层级深度≥5的分支自动折叠为一个“🔒深度折叠”节点，且该节点可点击展开下一层；
• 无障碍：所有连线、图标、颜色均满足WCAG 2.1 AA级对比度（深色节点内文字#ffffff，背景深色≥4.5:1）。

交付物模板