借鉴 chinesemedicineatlas.com 的设计理念与内容架构,全面提升我们网站的体系化程度与视觉表现力
深入研究了 chinesemedicineatlas.com 的首页、五行、阴阳、五禽戏、脏腑、经络、五行图谱、运动疗法等核心页面,提炼出以下六大值得借鉴的设计理念:
每个主题用巨大的繁体汉字作为视觉核心(五行、木火土金水、臟、腑、經絡、太極拳、八段錦、五禽戲),强烈的东方文化视觉冲击。
五行 ↔ 五禽 ↔ 脏腑 ↔ 季节 ↔ 情志,每个概念都与其他概念互联,形成完整的知识网络,而非零散文章。
每个主题页面顶部有专属子导航(如五行:Introduction | Atlas | Profile | Symptoms | Seasons),用户可在相关概念间快速跳转。
SVG交互式五边形图,点击任意元素显示对应脏腑、季节、情志、五味;相生圈(绿色实线)和相克圈(红色虚线)动态展示。
在关键内容中穿插《黄帝内经》《灵枢》等经典原文,配出处和年代,增加专业权威性和文化深度。
五行体质测试、阴阳平衡测试、症状检查器等交互工具与理论深度结合,用户参与感强。
在已有的三个聚合页面(自查、自疗、自愈)上加入大号汉字视觉元素和子导航条,提升体系化观感。
在每个聚合页面的 Hero 区域叠加一个巨大的半透明繁体汉字作为背景视觉锚点:
求知 · 系统学习
自查 · 了解体质
自诊 · AI分析
自疗 · 食疗按压
自愈 · 功法修炼
每个聚合页面顶部加一行 Tab 式子导航,点击可快速跳转到页面对应板块:
制作一个 SVG 交互式五边形图,这是整个体系化的核心视觉元素,让用户一眼看到中医知识的互联关系。
五个角分别是木、火、土、金、水,点击任意元素显示对应的脏腑、五禽、季节、情志、五味、五体。相生圈(绿色实线箭头)和相克圈(红色虚线箭头)动态展示。
↑ 点击任意元素展开详情(示意)
点击图谱中的任意元素,展示该行的完整对应关系:
| 五行 | 五禽 | 脏 | 腑 | 季节 | 情志 | 五味 | 五体 | 五色 |
|---|---|---|---|---|---|---|---|---|
| 木 Wood | 虎 | 肝 | 胆 | 春 | 怒 | 酸 | 筋 | 青 |
| 火 Fire | 猿 | 心 | 小肠 | 夏 | 喜 | 苦 | 脉 | 赤 |
| 土 Earth | 熊 | 脾 | 胃 | 长夏 | 思 | 甘 | 肉 | 黄 |
| 金 Metal | 鹤 | 肺 | 大肠 | 秋 | 悲 | 辛 | 皮毛 | 白 |
| 水 Water | 鹿 | 肾 | 膀胱 | 冬 | 恐 | 咸 | 骨 | 黑 |
点击元素节点:
展开该元素的完整对应关系卡片(五禽、脏腑、季节、情志、五味、五体、五色),并显示与相生/相克元素的关联描述。
悬停相生/相克线:
高亮显示相生或相克关系,弹出说明文字(如"木生火:肝藏血以养心"或"木克土:肝气疏泄以防脾土壅滞")。
参考 chinesemedicineatlas.com 的内容深度,深化我们的五禽戏、五行理论、脏腑理论等核心页面。
当前问题:内容较浅,缺少五行映射和动作细节。
改进内容:
当前问题:缺少交互式图谱和相生相克详解。
改进内容:
当前问题:缺少脏腑功能系统和交叉映射。
改进内容:
在关键页面加入经典引用区块增加权威性,建立页面间的交叉引用网络。
在五禽戏、五行、脏腑、经络等核心页面加入《黄帝内经》等经典引用区块:
引用区块样式:浅绿背景 + 左侧绿色竖线 + 斜体引文 + 出处和年代
在页面内容中建立概念间的交叉引用链接,形成知识网络:
按照效果可见性和依赖关系排序,分三个阶段实施:
通过以上改进,The TCM Home 将从"中医知识文章集合"升级为"体系化中医知识图谱":