官网主导读页「03 理关系」展示一张五人轻漫画入口卡，进入 人物关系预览.html。关系页采用大观园互动地图已经确定的“左边主体、右边档案”方式。点击人物时保留关系图，右边显示身份、直接关系、依据章回和一个阅读问题；手机上改为纵向分组，不把一整张大图缩小成看不清的文字。
首版按学生的阅读问题分三个视图，三个视图内部都按同一套代际层排列：
每个视图的横层由上到下固定为“本图第 1 代（贾代善、贾代化同辈）→第 2 代（贾政同辈）→第 3 代（宝玉同辈）→第 4 代（贾兰同辈）”。本图未画贾演、贾源等更早祖辈，序号只是当前图的起点，不是整个家族的绝对代数。王、薛、林家人物按婚姻及亲缘所在层级对齐，不归入贾氏字辈。同辈可以年龄悬殊，例如贾珍与胞妹惜春；李纨与贾珠同层，贾兰在下一层；贾蓉比贾珍低一层。手机上每代一条色带，色带内按房支折行，下一代始终从下一条色带开始。
用户提供的小红书图片启发“按府、按房、按代分层”和把容易认错的关系单独讲清楚；本站的排版、人物形象、文案与交互重新设计，不直接搬用附图人物头像或截图。
| 内容 | 原文核对 | 页面处理 |
|---|---|---|
| 贾代善与贾母；贾赦、贾政、贾敏三支 | 程甲本第 2 回 | 根部先放夫妻，再分长房、二房、贾敏一支。 |
| 贾赦、邢夫人、贾琏 | 第 2 回、第 3 回 | 只画贾赦→贾琏的父子线；邢夫人只与贾赦画婚姻线，不推定为贾琏生母。 |
| 贾政、王夫人、赵姨娘与子女 | 第 2 回、第 55 回 | 王夫人所生贾珠、元春、宝玉；赵姨娘所生探春、贾环。赵姨娘标“妾室”，不画成正妻。 |
| 贾敏、林如海、林黛玉 | 第 2 回 | 黛玉通过母亲贾敏连到贾母，不并入贾政子女。 |
| 王夫人、薛姨妈、薛宝钗 | 第 4 回 | 王夫人与薛姨妈画姐妹线，两位母亲各连自己的孩子。 |
| 宁国府主干 | 第 2 回 | 只画宁公一支→贾代化→贾敬→贾珍→贾蓉，并另注贾惜春为贾珍胞妹；不接到贾母的荣府子女树下。 |
| 宝玉与宝钗婚姻 | 第 97 回 | 首版默认不画这条线，避免刚开始阅读就揭示后四十回情节。以后做阅读进度开关时再显式显示。 |
“姑表兄妹”“姨表姐弟”属于按上代亲缘推得的称谓；页面用路径解释，不把它们伪装成两人之间的直接血缘边。人物关系数据采用“人物 ID + 关系类型 + 身份方向 + 依据章回”的结构，后续新增婚姻、主仆或故事联系时仍需分别标示。
五人漫画面孔沿用 五人面孔对照-轻漫画-v1.png 的人物辨识设计；关系图的 28 人与主导读页的妙玉均已分别绘制半身像，详见人物图鉴。卡片展示发顶、完整脸部、颈部与胸前衣襟，点击后在右侧显示更大画像。原文能确定的年龄、辈分、身份优先遵守；具体长相、衣饰和颜色是本站的视觉设计，不当作原著给出的确定信息。早期旧版古风人物像没有混入这一页。
下一层可分别加入“四大家族联姻”“大观园主仆”“诗社与故事联系”。这些关系应放在可切换的主题里，不能与亲生父母线共用一种线型。涉及后四十回的关系要随阅读进度揭示。
找 3–5 位高中生，不解释图例，让他们完成三件事并记录卡住的位置：① 找宝玉与黛玉为何是姑表兄妹；② 说出王熙凤为何在荣府理家、她属于哪一房；③ 从宁府到荣府，判断两边是同一条父子线还是同宗两支。若任务仍需靠猜颜色和相邻位置完成，就先改关系表达，再扩人物数量。
