The TCM Home 网站改进方案

借鉴 chinesemedicineatlas.com 的设计理念与内容架构,全面提升我们网站的体系化程度与视觉表现力

2026年8月 · 改进规划

0 借鉴分析总结

深入研究了 chinesemedicineatlas.com 的首页、五行、阴阳、五禽戏、脏腑、经络、五行图谱、运动疗法等核心页面,提炼出以下六大值得借鉴的设计理念:

1. 大号汉字视觉锚点

每个主题用巨大的繁体汉字作为视觉核心(五行、木火土金水、臟、腑、經絡、太極拳、八段錦、五禽戲),强烈的东方文化视觉冲击。

2. 五维交叉映射体系

五行 ↔ 五禽 ↔ 脏腑 ↔ 季节 ↔ 情志,每个概念都与其他概念互联,形成完整的知识网络,而非零散文章。

3. 子导航Tab系统

每个主题页面顶部有专属子导航(如五行:Introduction | Atlas | Profile | Symptoms | Seasons),用户可在相关概念间快速跳转。

4. 交互式五行图谱

SVG交互式五边形图,点击任意元素显示对应脏腑、季节、情志、五味;相生圈(绿色实线)和相克圈(红色虚线)动态展示。

5. 经典引用区块

在关键内容中穿插《黄帝内经》《灵枢》等经典原文,配出处和年代,增加专业权威性和文化深度。

6. 互动自测工具

五行体质测试、阴阳平衡测试、症状检查器等交互工具与理论深度结合,用户参与感强。

1 聚合页面视觉升级

在已有的三个聚合页面(自查、自疗、自愈)上加入大号汉字视觉元素和子导航条,提升体系化观感。

1.1 大号汉字视觉元素

在每个聚合页面的 Hero 区域叠加一个巨大的半透明繁体汉字作为背景视觉锚点:

自学页

求知 · 系统学习

自查页

自查 · 了解体质

自诊页

自诊 · AI分析

自疗页

自疗 · 食疗按压

自愈页

自愈 · 功法修炼

效果示意
Wellness Practices · 自疗

1.2 子导航条

每个聚合页面顶部加一行 Tab 式子导航,点击可快速跳转到页面对应板块:

自查页子导航
自疗页子导航
自愈页子导航

2 五行×五禽×脏腑交互映射图

制作一个 SVG 交互式五边形图,这是整个体系化的核心视觉元素,让用户一眼看到中医知识的互联关系。

交互式五行图谱设计

五个角分别是木、火、土、金、水,点击任意元素显示对应的脏腑、五禽、季节、情志、五味、五体。相生圈(绿色实线箭头)和相克圈(红色虚线箭头)动态展示。

Wood
Fire
Earth
Metal
Water
五行

↑ 点击任意元素展开详情(示意)

五行完整对应表

点击图谱中的任意元素,展示该行的完整对应关系:

五行五禽季节情志五味五体五色
木 Wood
火 Fire小肠
土 Earth长夏
金 Metal大肠皮毛
水 Water鹿膀胱

交互行为设计

点击元素节点:

展开该元素的完整对应关系卡片(五禽、脏腑、季节、情志、五味、五体、五色),并显示与相生/相克元素的关联描述。

悬停相生/相克线:

高亮显示相生或相克关系,弹出说明文字(如"木生火:肝藏血以养心"或"木克土:肝气疏泄以防脾土壅滞")。

3 核心内容页面深化

参考 chinesemedicineatlas.com 的内容深度,深化我们的五禽戏、五行理论、脏腑理论等核心页面。

3.1 五禽戏页面深化

当前问题:内容较浅,缺少五行映射和动作细节。

改进内容:

  • 每种动物加入五行属性、对应脏腑、季节、情志的映射卡片
  • 详细动作分解(起式、过程、收式),配示意图
  • 呼吸方法详解(腹式呼吸、逆腹式呼吸等)
  • 功效与中医理论解释(为什么这个动作能调理这个脏腑)
  • 加入华佗经典引用:「人体欲得劳动,但不当使极尔」
  • 每种动物可点击展开/收起的交互卡片

3.2 五行理论页面深化

当前问题:缺少交互式图谱和相生相克详解。

改进内容:

  • 嵌入交互式五行图谱(第二阶段制作的SVG)
  • 相生循环详解:每一组相生关系的中医原理解释
  • 相克循环详解:每一组相克关系的平衡机制
  • 五行脏腑对应表(嵌入表格)
  • 季节养生与五行的关系
  • 情志与五行的关系(怒伤肝、喜伤心等)

3.3 脏腑理论页面深化

当前问题:缺少脏腑功能系统和交叉映射。

改进内容:

  • 五脏(Zang)和六腑(Fu)的分类说明,配繁体汉字(臟、腑)
  • 每个脏腑的功能系统详解(肝主疏泄、心主血脉等)
  • 脏腑对应表(元素 | 脏 | 腑 | 情志 | 组织 | 官窍 | 季节 | 味道)
  • 脏腑表里关系(肝与胆相表里等)
  • 加入《黄帝内经》经典引用区块

4 经典引用区块 & 知识互联体系

在关键页面加入经典引用区块增加权威性,建立页面间的交叉引用网络。

4.1 经典引用区块

在五禽戏、五行、脏腑、经络等核心页面加入《黄帝内经》等经典引用区块:

"人体欲得劳动,但不当使极尔。动摇则谷气得消,血脉流通,病不得生。"
— 华佗《后汉书·方术传》 · 东汉 · 公元2世纪
"五行者,金木水火土也。更贵更贱,以知死生,以决成败,而定五脏之气。"
— 《黄帝内经·素问》 · 卷第七 · 五运行大论篇第六十七
"心者,君主之官也,神明出焉。"
— 《黄帝内经·素问》 · 灵兰秘典论篇第八

引用区块样式:浅绿背景 + 左侧绿色竖线 + 斜体引文 + 出处和年代

4.2 知识互联交叉引用

在页面内容中建立概念间的交叉引用链接,形成知识网络:

五禽戏页面:

五行页面:

4.3 底部关联导航

每个核心内容页面底部加入关联概念导航卡片,类似 chinesemedicineatlas.com 的底部双卡片设计:

五脏详解

心、肝、脾、肺、肾 — 阴脏,贮藏精气

查看详情 →
六腑详解

小肠、胆、胃、大肠、膀胱、三焦 — 阳腑,传化物

查看详情 →

5 实施优先级

按照效果可见性和依赖关系排序,分三个阶段实施:

预期效果

通过以上改进,The TCM Home 将从"中医知识文章集合"升级为"体系化中医知识图谱":

  • 五大导航栏目形成完整闭环:自学 → 自查 → 自诊 → 自疗 → 自愈
  • 每个聚合页面有明确的视觉标识(汉字)和内容分类(子导航)
  • 五行交互图谱让用户一眼看到中医知识的互联关系
  • 经典引用增加内容权威性和文化深度
  • 交叉引用网络让用户在相关知识间自由穿梭
  • 整体观感从"博客"升级为"专业中医知识库"
📋 Take the Constitution Quiz Discover your TCM body type in 5 minutes 📅 Get Your 7-Day Plan Personalized TCM wellness routine — free ✉️ Join Our Newsletter Weekly TCM tips for balanced living