Website 2.0 开发日记（45）

Dr Win Huang 个人页第三屏完成：从“内容重复”转向真正的个人专业页

今天完成了 Dr Win Huang 个人页面第三屏的 Desktop Master。相比单纯完成一个页面，这一屏更重要的意义，是我们重新明确了“诊所首页”和“医生个人页”各自应该承担什么内容。

前面在设计 Dr Win 个人页时，我们一度继续沿用首页的内容逻辑，例如 Clinical Thinking、Clinical Philosophy、Case Studies、Reflections、Precision Diagnosis、Precision Treatment 等。但在实际搭建第三屏时，突然发现这些内容在 Homepage 已经被系统介绍过，而且首页本来就是以 Dr Win 和 Teresa 两个人共同的临床体系为基础。如果个人页再把这些内容重新做一遍，即使换一个标题，本质上仍然是在重复首页。

因此今天重新确定了个人专业页的核心原则：

Homepage 讲诊所；Personal Page 讲这个人。

也就是说，个人页不能再做成一个缩小版 Homepage，而应该回答几个更具体的问题：这个医生是怎样成长起来的？他的临床思路和治疗特点是什么？这些年在专业上真正留下了什么？

基于这个原则，Dr Win Huang 个人页目前形成了更加清楚的三屏结构。

第一屏：成长经历与专业背景

第一屏主要回答“Dr Win Huang 是谁”。

保留临床看诊照片，同时用简短文字概括其医学成长过程：早期医学训练、神经精神科工作经历、随后进入针灸硕士和博士学习、山东省立医院工作，以及来到新西兰后建立 PhD Win Acupuncture Clinic。

原来单独设计的 Professional Journey 第二屏已经取消。成长经历不再做复杂时间轴，而是在第一屏快速交代，让患者在短时间浏览中建立基本信任；如果以后需要详细了解，再进入独立的 Professional Journey 页面。

第二屏：Clinical Reasoning & Approach

第二屏主要回答“Dr Win Huang 是怎样看病和治疗的”。

这一屏不再只是泛泛介绍诊所理念，而是逐渐向 Dr Win 本人独有的临床特点收缩，包括精准诊断、针对性治疗、柔性手法微调，以及经典中药方剂的使用。

这一屏目前已经基本完成。今后如果继续微调，重点不是重新设计，而是让四张卡的文案进一步体现 Dr Win 本人长期形成的诊疗特点，减少与 Homepage 通用 Clinical Philosophy 的重叠。

第三屏：Professional Contributions & Recognition

今天重点完成的是第三屏。

在重新讨论以后，我们放弃了原来的 Knowledge Library 思路，不再重复 Case Studies、Clinical Reflections、Clinical Thinking 等首页已有栏目，而是把第三屏真正变成 Dr Win Huang 的个人专业成果展示。

最终确定四个入口：

Books
展示参与编写、出版或专业生涯中形成的书籍成果。

Academic Articles
展示正式发表的学术论文和专业文章。

Clinical Writing
展示长期临床实践中形成的病例总结、临床思考和专业写作，包括后续可链接到已有系列内容。

Professional Recognition
展示专业任职、社会认可、媒体报道以及具有代表性的专业经历。

这里也进一步澄清了“Professional Recognition”的范围。Dr Win 在山东省立医院工作期间，曾被聘为山东医科大学兼职副教授、山东中医药大学兼职副教授；这些属于正式的专业认可。同时，在新西兰长期临床中，为职业运动员、教练及其他社会知名人士提供治疗，以及公开媒体报道、患者公开评价等，也可以作为社会层面的专业认可资料。

第三屏的视觉设计最终采用：

• Website 2.0 暖米色体系
• 底部淡远山
• 右上少量竹叶
• 四张统一尺寸的卡片
• 每张卡有一张引导图片
• 标题、短说明和 View More
• 不再加入底部引语和署名

这样既保留一定东方医学气质和层次感，又避免整个页面再次变成“大背景图画册”。

卡片图片也已经分别完成：

• Books：书架和中医相关书籍
• Academic Articles：医学期刊和学术文章
• Clinical Writing：临床笔记、病例记录和写作场景
• Professional Recognition：证书、专业任职和认可的视觉场景

施工中继续沿用了 Website 2.0 Phase 2 的“先定规格，再搭建”的原则。Outer Container、Inner Container、标题区、Cards Row、单卡尺寸、图片高度、Divider、正文、Button、Shadow 等均统一设定，再复制母卡生成其余三张。

最终前台效果已经确认：

• 四张卡整体居中
• 左右留白合理
• 四卡高度统一
• 图片、标题、正文、按钮视觉层级清楚
• 底部远山和竹叶能够被看到，但不会干扰内容
• 整屏与 Website 2.0 的整体色彩和视觉语言一致

因此今天正式锁定：

Dr Win Huang Personal Page — Screen 3 / Professional Contributions & Recognition — Desktop Master 完成。

今天最大的收获并不只是第三屏完成，而是进一步明确了 Website 2.0 的信息架构：

诊所首页负责说明“我们是谁、我们怎么做”；医生个人页负责说明“这个人是谁、他怎么形成今天的临床体系，以及他真正留下了什么”。

这个原则后续也将用于 Teresa 的个人页面，避免个人页再次重复 Homepage。

Website 2.0 开发日记（46）

Dr Win Huang 个人页 Desktop 完成：从“个人介绍”到完整专业页面

今天，Dr Win Huang 个人页面的 Desktop 版本基本完成。

这一页前前后后经过了不少调整，但最后形成的结构，比最初的设计更清楚，也更符合 Website 2.0 现在逐渐成熟起来的方向。

这次最重要的变化，不只是完成了一个医生个人页，而是我们真正弄清楚了：

诊所首页和医生个人页，不应该重复讲同样的东西。

首页主要讲的是诊所整体：我们怎么看病、我们的临床理念、Clinical Thinking、Case Studies、Clinical Reflections、Conditions We Treat 等。这些内容本身就是 Dr Win 和 Teresa 两个人共同支撑的。

如果到了个人页，再把 Clinical Philosophy、Clinical Reasoning、Case Studies、Reflections 全部重新做一遍，就会变成“把首页再复制一次”。

所以这次 Dr Win Huang 页面最后重新收敛成了一条真正属于个人的专业路径。

第一屏：Dr Win Huang

第一屏主要回答一个问题：

这个医生是谁？

这一屏保留了一张 Dr Win 面对患者、正在临床交流的照片。

左侧用比较简洁的方式介绍他的医学背景和成长经历，包括早期医学训练、神经精神科工作经历、针灸硕士和博士学习、山东省立医院阶段，以及来到新西兰后建立 PhD Win Acupuncture Clinic。

原来曾经计划单独做一个很大的 Professional Journey 第二屏，后来取消了。

最终发现，成长经历并不需要再做成复杂时间轴。对于大多数患者来说，个人页首先只是快速浏览，几句话已经足够建立基本了解。如果以后有人想深入了解，再进入独立的 Professional Journey 页面即可。

第一屏下面保留：

Explore Professional Journey

作为进一步了解成长经历的入口。

第二屏：Clinical Reasoning & Approach

第二屏主要回答：

Dr Win 是怎样看病、怎样选择治疗方法的？

这一屏最后保留四个方向：

• Precision Diagnosis
• Targeted Treatment
• Gentle Manual Adjustment
• Classical Herbal Medicine

这四项实际上逐渐把 Dr Win 几十年的临床特点梳理了出来。

他不是单纯从某一种治疗方法出发，而是先判断问题到底是什么，再决定适不适合针灸、需要结构性处理、手法调整，还是中药调理。

这一屏也逐渐形成了一个很清楚的个人特色：

先诊断，再选择治疗。

而且并不是把所有患者都放进同一种针灸模式，而是根据功能性、结构性、神经性以及整体体质问题，选择不同的处理方式。

这一屏采用暖色背景、四张统一卡片，不再使用大背景图。

第三屏：Professional Contributions & Recognition

第三屏是今天最重要的重新定位之一。

原来想做 Knowledge Library，但后来发现这会重新回到首页已经有的 Case Studies、Clinical Reflections、Clinical Thinking 等栏目里，信息重复。

所以第三屏最终改成真正属于 Dr Win 个人专业档案的内容：

Books

展示书籍和出版成果。

Academic Articles

展示学术论文和正式发表的专业文章。

Clinical Writing

展示长期临床实践中形成的病例总结、临床思考和专业写作。

Professional Recognition

展示专业任职、学术兼职、社会认可、媒体报道以及其他具有代表性的专业经历。

这一屏最终使用了：

• 暖米色背景
• 底部淡远山
• 右上竹叶
• 四张统一高度和宽度的卡片
• 每张卡一个引导图片
• View More 作为深入入口

图片分别使用了：

• 书架和中医相关书籍
• 学术杂志和论文
• 临床笔记和写作场景
• 专业证书与认可场景

这一屏最终前台效果比较完整，四张卡之间留白、左右边距、按钮位置和整体比例都已经调整到比较稳定的状态。

第四屏：Ready to Discuss Your Condition?

最后一屏没有再使用人物照片，也没有再加入二维码。

这一点也是这次设计逐渐成熟之后的一个决定。

因为第一屏已经有 Dr Win 本人的临床照片，如果最后再重复一张“医生看病”的大图，就会重新变成画册式页面。

所以最后一屏改成一个非常安静的收口：

Ready to Discuss Your Condition?

下面只放一句简单说明：

让患者如果希望 Dr Win 对自己的情况进行评估，并讨论适合的治疗路径，可以直接预约。

最后只有一个主按钮：

Book Appointment

背景采用了温暖自然光的室内空间，没有人物，没有复杂物件，只保留柔和窗帘、木质空间和自然光影。

最终这一屏高度也没有做成大 Hero，而是控制在较短的范围内，让它真正成为页面结束前的一个轻量 CTA。

二维码最终取消。

理由很简单：

用户已经在电脑或手机上打开网站，再放二维码让他拿另一个设备扫描，没有实际必要。

页面最终形成四屏结构

现在 Dr Win Huang 个人页 Desktop 最终形成：

Screen 1 — Who is Dr Win Huang
人物、背景、成长经历。

Screen 2 — Clinical Reasoning & Approach
个人临床思路和独特治疗方法。

Screen 3 — Professional Contributions & Recognition
个人专业成果、写作、出版和社会认可。

Screen 4 — Ready to Discuss Your Condition?
预约收口。

这一页已经不再像最初那样，每一屏都依赖大背景图，也不再像一个“宣传画册”。

现在它更像一个真正的专业个人页面：

先让人认识这个医生，再理解他的临床特点，再看到他这些年留下的专业成果，最后给出一个清楚的预约入口。

关于 Footer

最后一屏之后不再增加完整 Footer。

当前只保留非常轻的版权信息，不再放一个很重的底部区域。

这样页面结束得更干净，也不会破坏最后一屏安静、温暖的收口。

当前状态

Dr Win Huang Personal Page — Desktop Master：完成。

下一阶段不再修改 Desktop 主结构。

后续只做：

Tablet → Mobile → Responsive Testing → Performance Acceptance

今天这一页真正完成以后，也进一步确定了 Website 2.0 一个很重要的页面原则：

首页讲诊所，个人页讲这个人。

这个原则以后也会直接用于 Teresa 的个人页面设计。