267 lines
10 KiB
Markdown
267 lines
10 KiB
Markdown
# 社区节点轻量关系地图设计
|
|
|
|
日期：2026-06-22
|
|
状态：待用户复核
|
|
当前分支：`codex/graph-community-node-visual-design`
|
|
视觉稿：`designs/graph-community-node-map/Community Node Map Prototype.html`
|
|
|
|
## 目的
|
|
|
|
这份设计用于优化 llm-wiki 图谱里“进入社区后”的节点呈现。
|
|
|
|
当前社区内节点更像一组大卡片，卡片体积偏大、节点挨得近，社区背景色块又强化了被框住的感觉。用户进入社区后，本来想看清“这个社区内部有哪些知识点、谁和谁有关”，却容易先看到一片拥挤的卡片。
|
|
|
|
本次目标不是重做整个图谱，也不是重新定义社区、边或右侧抽屉，而是把社区内部的视觉层级改成一张轻量关系地图：
|
|
|
|
**社区里默认看地图，悬停临时看关系，点击固定看内容。**
|
|
|
|
## 强范围边界
|
|
|
|
本次只聚焦于图谱里的社区节点设计，具体是：用户已经进入某个社区后，社区内部节点、线、标签、社区底色，以及节点悬停/点击后的关系聚焦表现。
|
|
|
|
本次不改：
|
|
|
|
- 全局图谱的默认呈现、路由、性能策略和 Sigma 全局规则。
|
|
- 对话、会话列表、知识库创建、消化、检索、导入导出等非图谱功能。
|
|
- 社区入口规则，例如从全局如何选择社区、如何进入社区。
|
|
- 右侧面板的信息结构和内容层级。
|
|
- 现有关系类型、置信度、权重这些图例概念的含义。
|
|
- 节点真实数据、知识库文件结构和图谱构建流程。
|
|
|
|
允许的联动只有两类：
|
|
|
|
- 用户点击社区内节点时，沿用现有机制更新右侧面板里的节点内容。
|
|
- 为了让社区内线条表现正确，可以读取并复用现有边字段：关系类型、置信度、权重、节点类型和节点连接关系。
|
|
|
|
任何超出以上范围的体验调整，都应另开设计，不混进本次实现。
|
|
|
|
## 已确认现状
|
|
|
|
代码和图例里已经存在三套边信息表达，本次必须继续沿用：
|
|
|
|
- 关系类型：实现 / 依赖 / 衍生 / 对比 / 矛盾，用线的颜色表达。
|
|
- 置信度：原文 / 推断 / 待确认，用线的虚实表达。
|
|
- 联系强弱：用线的粗细和透明度表达。
|
|
|
|
当前实现已有“选中节点后相关边优先”的基础，但还没有把社区内节点明确分成一度、二度和无关三层，也没有把悬停和点击统一成同一套聚焦逻辑。
|
|
|
|
因此本次设计不推翻原来的边图例，而是在社区视图里补上更清楚的关系距离规则。
|
|
|
|
## 方案选择
|
|
|
|
对比过三种方向：
|
|
|
|
1. 轻量关系地图：节点像地图坐标点，默认留白多、线很细；聚焦时一度关系清晰，二度关系很淡。
|
|
2. 聚焦星图：点中节点后把它变成中心，周围关系强烈围绕它呈现。
|
|
3. 社区知识岛：强化社区边界感，让节点像散落在一个岛上的知识点。
|
|
|
|
采用方案 1：轻量关系地图。
|
|
|
|
原因：
|
|
|
|
- 它最能解决“卡片大、挤、不美观”的问题。
|
|
- 它保留当前视觉稿里已经被认可的空间感。
|
|
- 它不会把社区背景变成新的视觉负担。
|
|
- 它能自然承接现有边图例，而不是发明一套新说明。
|
|
|
|
## 默认视觉状态
|
|
|
|
进入社区后，画面不再铺满节点卡片，而是一张轻量关系地图。
|
|
|
|
节点像散开的坐标点，有明显留白和空间感。普通节点保持小点形态，重点节点才默认显示名字。重点节点包括社区核心节点、结构上更重要的节点、搜索命中、已固定节点，以及当前选中节点。
|
|
|
|
社区底色保留，但只作为很淡的氛围提示。它说明“你正在这个社区里”，不作为硬边界，也不限制节点位置。节点可以在视觉上更自由地分布，避免被一整块背景色压住。
|
|
|
|
线在默认状态下很细、很安静，只提示社区内部存在关系，不抢节点层级。默认状态不强调所有边的完整解读，只有用户悬停或点击节点时，关系才进入可读状态。
|
|
|
|
节点颜色继续区分节点性质，例如主题、实体、来源、对比或综合类节点。颜色必须克制，不和边的颜色抢语义。
|
|
|
|
## 标签策略
|
|
|
|
默认只显示重点节点标签。
|
|
|
|
普通节点默认不显示名字，只保留可见点位。鼠标悬停或节点被聚焦时，才显示对应标签。这样社区第一眼是地图，而不是文字墙。
|
|
|
|
标签显示必须稳定：
|
|
|
|
- 悬停时标签出现，但节点本身不能因为标签出现而移位。
|
|
- 标签不应撑大节点的命中区域。
|
|
- 标签应优先避开核心节点和高亮线，不让关键关系被遮住。
|
|
- 标签过长时截断，不把画面横向撑开。
|
|
|
|
## 悬停与点击
|
|
|
|
悬停和点击使用同一套关系聚焦逻辑。
|
|
|
|
区别只在于：
|
|
|
|
- 悬停是临时聚焦，鼠标移走后恢复。
|
|
- 点击是固定聚焦，会保持住，并同步更新右侧面板。
|
|
|
|
当没有固定选中节点时，鼠标放到某个节点上，地图立即进入临时聚焦：
|
|
|
|
- 当前节点最清楚。
|
|
- 一度相关节点清楚显示。
|
|
- 当前节点到一度节点之间的线清楚显示。
|
|
- 二度相关节点保留很淡的背景感。
|
|
- 无关节点和无关线退到几乎不可见。
|
|
- 鼠标移走后恢复默认地图。
|
|
|
|
点击某个节点后：
|
|
|
|
- 使用同样的聚焦视觉。
|
|
- 该聚焦状态固定。
|
|
- 右侧面板显示该节点内容。
|
|
- 点击另一个节点时切换固定聚焦。
|
|
- 点击社区画布空白处时，取消固定聚焦，回到默认地图。
|
|
|
|
当已经有固定选中节点时，再悬停其他节点：
|
|
|
|
- 临时展示悬停节点的关系。
|
|
- 鼠标移走后回到已固定节点的聚焦状态。
|
|
- 不因为悬停改写右侧面板内容。
|
|
|
|
## 关系距离规则
|
|
|
|
以当前被悬停或点击的节点作为焦点节点。
|
|
|
|
一度相关节点：
|
|
|
|
- 与焦点节点直接相连。
|
|
- 直接连线清晰可见。
|
|
- 节点标签优先显示。
|
|
- 节点透明度和点尺寸略高于默认。
|
|
|
|
二度相关节点：
|
|
|
|
- 与一度节点相连，但不直接连接焦点节点。
|
|
- 只保留很淡的背景存在感。
|
|
- 默认不显示标签。
|
|
- 二度连线通常不完整呈现，只作为极淡的延伸提示。
|
|
|
|
无关节点：
|
|
|
|
- 与焦点节点没有一度或二度关系。
|
|
- 退到几乎不可见，但不制造画面跳变。
|
|
- 默认不显示标签。
|
|
- 无关节点之间的线隐藏或接近不可见。
|
|
|
|
这里的“一度 / 二度”按现有图谱边关系计算，不引入新的语义数据。
|
|
|
|
## 线条表达
|
|
|
|
线条继续遵守现有图例：
|
|
|
|
- 颜色表示关系类型。
|
|
- 虚实表示置信度。
|
|
- 粗细表示联系强弱。
|
|
|
|
聚焦状态下，一度直接连线应最清楚。它既要保留颜色和虚实语义，也要通过粗细让强关系更容易被看见。
|
|
|
|
二度关系可以保留轻微线索，但不能抢一度关系。无关线默认隐藏或极淡。
|
|
|
|
默认状态下，社区内部所有线都应更克制，避免整张社区图变成线团。只有悬停或点击后，用户才需要读具体关系。
|
|
|
|
## 右侧面板
|
|
|
|
地图只负责表达关系，右侧面板负责承接内容。
|
|
|
|
社区地图里的节点不再展开大卡片，也不显示正文摘要。节点旁边最多显示名字。正文、摘要、路径、相关页面、节点详情继续放在右侧面板里。
|
|
|
|
点击节点会更新右侧面板，这是允许的现有联动。悬停节点只做地图内临时关系预览，不更新右侧面板。
|
|
|
|
## 社区底色
|
|
|
|
社区底色应变得更轻。
|
|
|
|
它的作用是提示当前社区，而不是圈住节点。视觉上更像一层淡淡的纸面水洗背景，而不是一块实心区域。
|
|
|
|
当节点进入聚焦状态时，社区底色应进一步退后，让当前节点和一度关系成为主视觉。
|
|
|
|
## 状态优先级
|
|
|
|
同一时间最多有一个固定焦点节点。
|
|
|
|
视觉优先级从高到低：
|
|
|
|
1. 当前悬停节点。
|
|
2. 当前固定选中节点。
|
|
3. 一度相关节点和直接连线。
|
|
4. 二度相关节点。
|
|
5. 默认重点节点。
|
|
6. 普通节点。
|
|
7. 无关节点和无关线。
|
|
|
|
如果存在固定选中节点，悬停其他节点时可以临时盖过固定焦点；悬停结束后恢复固定焦点。
|
|
|
|
## 空状态和边界情况
|
|
|
|
社区没有边：
|
|
|
|
- 节点仍按轻量地图显示。
|
|
- 默认只显示重点标签。
|
|
- 悬停节点时只强调该节点本身，并提示暂无直接关系。
|
|
|
|
节点只有一度、没有二度：
|
|
|
|
- 一度关系正常高亮。
|
|
- 不强行制造二度背景。
|
|
|
|
节点连接过多：
|
|
|
|
- 一度节点可以全部参与高亮，但标签仍按重要性控制。
|
|
- 线条可按权重区分强弱，避免全部同等抢眼。
|
|
|
|
关系类型或置信度缺失：
|
|
|
|
- 关系类型缺失时走默认关系色。
|
|
- 置信度缺失时走默认实线。
|
|
- 不因为缺字段破坏社区地图整体可读性。
|
|
|
|
## 体验验收
|
|
|
|
实现完成后，进入社区的第一眼必须更像关系地图，不像卡片墙。
|
|
|
|
必须满足：
|
|
|
|
- 默认状态有留白，有空间感，节点不挤。
|
|
- 普通节点是轻量点位，不是大卡片。
|
|
- 只有重点节点默认显示标签。
|
|
- 社区底色很淡，不压住节点。
|
|
- 默认线条细、轻，不形成线团。
|
|
- 悬停节点时，关系立刻变清楚。
|
|
- 点击节点时，关系固定，并更新右侧面板。
|
|
- 鼠标移走后，悬停关系自动收回。
|
|
- 点击空白处后，固定关系取消。
|
|
- 一度关系清楚，二度关系很淡，无关内容退后。
|
|
- 线的颜色、虚实、粗细与图例一致。
|
|
- 标签出现和消失时，节点不移位。
|
|
- 不改变全局图谱、对话、知识库流程或其他非社区图谱功能。
|
|
|
|
## 验证建议
|
|
|
|
实现时至少验证以下场景：
|
|
|
|
1. 进入一个有 10 个以上节点、关系较密的社区，确认默认状态不是卡片墙。
|
|
2. 悬停一个核心节点，确认一度关系清晰、二度很淡、无关线隐藏或极淡。
|
|
3. 鼠标移走，确认画面恢复默认状态。
|
|
4. 点击节点，确认聚焦固定并更新右侧面板。
|
|
5. 固定节点后悬停另一个节点，确认只是临时预览，移走后回到固定节点。
|
|
6. 点击空白处，确认取消固定聚焦。
|
|
7. 检查图例里的关系类型和置信度，与画布线条颜色和虚实一致。
|
|
8. 检查长标签、密集节点、无边节点，确认节点不会因为标签出现而移位。
|
|
9. 回到全局图谱，确认本次改动没有改变全局图谱行为。
|
|
|
|
## 后续不在本次做
|
|
|
|
以下内容不进入本次社区节点视觉优化：
|
|
|
|
- 全局图谱重新设计。
|
|
- 移动端专项布局。
|
|
- 新增关系类型或置信度体系。
|
|
- 新的右侧面板结构。
|
|
- 自动社区总结。
|
|
- 图谱数据构建流程调整。
|
|
- 新增完整键盘漫游。
|
|
- 新增 Agent 提问入口。
|