WellChina Docs

主题

WellChina 导航栏与首页 UX 设计方案 ​

产品经理出品 | 2026-03-17 | AIS-93

一、导航栏重新设计 ​

1.1 现状分析 ​

当前 Navbar 包含 5 个主链接 + 1 个 CTA：

[WellChina]  Hospitals  Procedures  Cities  Guides  Compare  [Contact]

问题：

  • /pricing 价格看板已上线但导航栏无入口（仅 Footer 有 "Price Overview"）
  • 链接数量已达 5 个，继续增加会导致桌面端拥挤
  • 功能间缺乏逻辑分组，用户难以快速定位
  • Compare 是低频工具类功能，与 Hospitals/Procedures 等浏览类并列显得不协调

1.2 设计方案：分组导航 ​

新导航结构（桌面端）：

[WellChina]  Hospitals  Procedures  Pricing  Cities  Guides  [Compare]  [Contact]

具体调整：

变更说明理由
新增 Pricing在 Procedures 和 Cities 之间插入价格对比是核心差异化功能，用户关注度高，必须在主导航展示
Compare 改为图标按钮使用 Scale 图标 + 文字，视觉上与普通链接区分Compare 是工具类功能，非浏览类，应有不同的视觉权重
保持 Contact 为 CTA 按钮不变转化入口必须突出
Admin 不在导航展示完全不在公开导航中出现管理后台仅内部使用，通过直接输入 /admin URL 访问即可

链接顺序逻辑：

  1. Hospitals — 核心浏览（找医院）
  2. Procedures — 核心浏览（找手术）
  3. Pricing — 决策辅助（看价格）
  4. Cities — 辅助浏览（选城市）
  5. Guides — 知识辅助（看指南）
  6. Compare — 工具类（对比医院）

这个顺序遵循用户决策漏斗：发现 → 了解价格 → 选择地点 → 学习准备 → 深度对比。

1.3 桌面端实现细节 ​

navLinks 更新为：
[
  { key: 'hospitals', href: '/hospitals' },
  { key: 'procedures', href: '/procedures' },
  { key: 'pricing', href: '/pricing' },        // 新增
  { key: 'cities', href: '/cities' },
  { key: 'guides', href: '/guides' },
  { key: 'compare', href: '/compare' },
]
  • Compare 链接样式建议：添加 Scale 图标前缀，使用略带背景色的 pill 样式（rounded-full bg-neutral-100 px-3 py-1），视觉上暗示"这是一个工具"
  • 若链接过多导致拥挤（测试 1024px 宽度断点），可将 Compare 移到 Contact 按钮旁边作为次要按钮

1.4 移动端导航调整 ​

移动端菜单保持全量链接，但分组展示：

┌─────────────────────────┐
│  Hospitals               │
│  Procedures              │
│  Pricing          ← NEW  │
│  Cities                  │
├─────────────────────────┤  ← 分隔线
│  Guides                  │
│  Compare Hospitals       │
├─────────────────────────┤
│  [Contact Us]  (按钮)    │
└─────────────────────────┘

实现： 在移动端菜单中，将 navLinks 分为两组（浏览类 vs 工具类），中间用 border-t 分隔。

1.5 涉及文件与改动 ​

文件改动
src/components/layout/Navbar.tsx更新 navLinks 数组，添加 pricing；移动端菜单添加分组分隔
messages/en.jsonnav 下新增 "pricing": "Pricing"
src/components/layout/Footer.tsx无需改动（已有 Pricing 链接）

二、首页内容重组 ​

2.1 现状分析 ​

当前首页 section 顺序：

  1. Hero（搜索 + Trust badges）
  2. Popular Procedures（手术卡片网格）
  3. Featured Cities（城市卡片网格）
  4. Trust Bar（4 个信任指标）
  5. CTA（Contact 咨询）

问题：

  • 价格对比（核心卖点）在首页完全没有入口
  • 医院对比工具在首页没有入口
  • Hero 搜索已经很突出，无需再调整
  • 缺少"如何使用 WellChina"的引导流程

2.2 重组方案 ​

新首页 section 顺序：

1. Hero（不变）
   ↓
2. Popular Procedures（不变，微调）
   ↓
3. 💰 Price Comparison Highlight（新增）
   ↓
4. Featured Cities（不变）
   ↓
5. 🔧 Quick Tools Bar（新增）
   ↓
6. Trust Bar（不变）
   ↓
7. CTA（不变）

2.3 Section 详细设计 ​

Section 1: Hero（保持不变） ​

当前 Hero 设计已经很好：

  • 搜索框突出，HeroSearch 带自动补全
  • Trust badges 清晰
  • 视觉层次分明

唯一微调： 将 ctaLabel（"Get Started"）的含义更明确，改为 "Search" 以匹配搜索框的功能。

保持现有卡片网格不变，但在底部的 "View All Procedures →" 旁边，增加一个次要链接：

View All Procedures →    |    Compare Prices →

"Compare Prices →" 链接到 /pricing，给用户一个从手术浏览到价格对比的自然过渡。

实现： 在 page.tsx 的 procedures section 底部，增加一个 /pricing 链接。

Section 3: Price Comparison Highlight（新增） ​

这是最重要的新增 section，位于 Procedures 和 Cities 之间。

设计：

  • 浅色背景条（bg-gradient-to-r from-green-50 to-blue-50），与其他 section 形成对比
  • 标题："Save 60–85% vs US Prices"
  • 展示 3-4 个代表性手术的价格对比（中国 vs 美国）
  • 每个对比项为一行：手术名 | 中国价格 | 美国价格 | 节省百分比
  • 底部 CTA 按钮："View Full Price Dashboard →" 链接到 /pricing

数据来源： 从 DB 取 savingsPct 最高的 3-4 个手术，结合 INTL_PRICES 硬编码数据展示。或者简化为静态数据（因为首页已有 fallback 模式）。

建议静态实现（简单可靠）：

tsx
const PRICE_HIGHLIGHTS = [
  { name: 'Dental Implant', china: '¥4,000–15,000', us: '$3,000–5,000', save: '70%' },
  { name: 'LASIK Surgery', china: '¥8,000–20,000', us: '$3,000–5,000', save: '65%' },
  { name: 'Full Body Checkup', china: '¥3,000–12,000', us: '$1,500–3,000', save: '80%' },
  { name: 'IVF Treatment', china: '¥25,000–60,000', us: '$12,000–17,000', save: '65%' },
]

布局：横向表格式（桌面），纵向卡片式（移动端）。

无需调整，当前设计良好。

Section 5: Quick Tools Bar（新增） ​

在 Cities 和 Trust Bar 之间，新增一个工具快捷入口条。

设计：

  • 单行横排，3 个卡片
  • 每个卡片：图标 + 标题 + 一句话描述 + 箭头链接
┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐
│  🔍 Compare       │  │  💰 Price         │  │  📖 Guides        │
│  Hospitals        │  │  Dashboard        │  │                   │
│  Compare up to 3  │  │  See all prices   │  │  Visa, payment,  │
│  hospitals side   │  │  with US/EU       │  │  booking & more  │
│  by side          │  │  comparison       │  │                   │
│  [Compare Now →]  │  │  [View Prices →]  │  │  [Read Guides →] │
└──────────────────┘  └──────────────────┘  └──────────────────┘

链接目标：

  • Compare Hospitals → /compare
  • Price Dashboard → /pricing
  • Guides → /guides

实现： 使用现有的 Card + CardBody 组件即可。

Section 6: Trust Bar（保持不变） ​

当前 4 项信任指标设计良好，无需调整。

Section 7: CTA（保持不变） ​

"Need personalized advice?" + Contact 按钮，保持不变。

2.4 涉及文件与改动 ​

文件改动
src/app/page.tsx新增 Price Comparison Highlight section；新增 Quick Tools Bar section；Procedures section 底部加 Pricing 链接
messages/en.jsonhome.sections 下新增翻译 key：price_highlight、price_highlight_cta、quick_tools

三、具体实现建议与优先级 ​

P0（必须做，首次发布） ​

#改动文件工作量
1Navbar 新增 Pricing 链接Navbar.tsx, messages/en.json10 分钟
2首页新增 Price Comparison Highlight sectionpage.tsx30 分钟

理由： 价格对比是 WellChina 的核心差异化卖点，必须在导航和首页都有明确入口。

P1（应该做，紧随其后） ​

#改动文件工作量
3首页新增 Quick Tools Bar sectionpage.tsx20 分钟
4Procedures section 底部加 Pricing 链接page.tsx5 分钟
5移动端菜单分组展示Navbar.tsx15 分钟

理由： 完善首页信息架构，让用户能发现所有已建成的功能。

P2（可以做，视排期） ​

#改动文件工作量
6Compare 链接使用 pill 样式区分工具类Navbar.tsx10 分钟
7Hero CTA 文案从 "Get Started" 改为 "Search"messages/en.json2 分钟

四、不在本次范围内（Non-goals） ​

  • Admin 入口：不在公开导航添加，继续通过直接 URL 访问
  • 搜索框样式调整：HeroSearch 当前已足够突出
  • Footer 重构：Footer 结构合理，已包含 Pricing 链接
  • About 页面入口：About 是低优先级页面，保留在 Footer 即可
  • i18n/中文翻译：属于 Phase 3 工作，本次不涉及

五、架构影响评估 ​

本次改动均为前端展示层调整，不涉及：

  • 数据库 schema 变更
  • API 端点变更
  • 认证/权限变更
  • 第三方依赖新增

改动集中在 3 个文件：Navbar.tsx、page.tsx、messages/en.json，风险极低。

WellChina 内部文档 · 基于 VitePress

© 2026 WellChina