產品需求文件 (PRD) - 周孟翰醫師個人形象網站建置案

1. 專案概述 (Project Overview)

1.1 背景與目的

本專案旨在為 新店高美泌尿科診所院長 周孟翰醫師 打造一個具備「高質感」、「私密安心」與「專業權威」的個人品牌網站。 有別於一般醫療網站的冰冷或傳統診所的制式感，本站參考 Bewell 診所 的視覺語彙，以 優雅暖沙色 與 沈穩鐵灰/深藍 為基調，強調醫師在微創手術（如 UroLift, Rezūm）的高端專業形象，並透過真實的衛教文章建立醫病信任。

1.2 核心目標 (Success Metrics)

1. 品牌質感升級：透過雜誌般的排版與細緻的配色，傳遞「下半身的守護者」之專業與溫暖。

2. 精準資訊傳遞：完整呈現醫師豐富的學經歷、五大主治項目專長。

3. 看診導流轉化：清楚引導病患至「新店高美泌尿科診所」看診，提供明確的地圖與門診時間。

4. 極致效能與 SEO：利用 Astro 架構達成 Google Lighthouse 效能 95+ 分，透過「零 JS」策略確保秒開體驗，極大化 SEO 自然排序優勢。

2. 視覺設計規範 (Design Specifications)

設計風格：Premium Warmth (優雅暖調)。結合 Serif (襯線體) 的知性與簡約的版面留白，營造類似高級健檢中心或精品雜誌的氛圍。

2.1 配色方案 (Color Palette)

2.2 視覺元素與排版

• 字體策略：標題使用 Serif (襯線體)（如 Noto Serif TC），內文使用 Sans-serif (黑體)。

• 大氣排版：Hero Section 使用巨大的 "UROLOGY" 浮水印作為背景裝飾。

• 圖片處理：醫師形象照採用 遮罩 (Masking) 或 去背合成 處理，融入背景，而非生硬的矩形照片。

• 圖標風格：極簡線條 (Line Icons) 搭配金棕色底塊。

3. 網站架構與內容規劃 (Content Architecture)

3.0 全站導覽列 (Global Navigation)

• 固定方式：Sticky Header（頁面捲動後固定於頂部），背景轉為半透明模糊 (Backdrop Blur) 以確保閱讀性。
• Logo 區域：
  • 顯示文字：Dr. Chou (上排) / UROLOGY CLINIC (下排小字)。
  • 點擊行為：回到首頁頂部。
• 選單項目 (Menu Items)：
  1. 關於醫師 (Anchor: #about)
  2. 主治專長 (Anchor: #expertise)
  3. 衛教專欄 (Anchor: #blog 或 Link: /blog)
  4. 門診資訊 (Anchor: #clinic)
• CTA 按鈕：
  • 文字：「預約掛號」
  • 樣式：醒目的 Primary Color 按鈕。
  • 行為：連結至門診資訊區塊或直接外連掛號系統。
• Mobile 行為：
  • 漢堡選單 (Hamburger Menu) 開啟側邊抽屜 (Drawer)。
  • 點擊連結後自動收合選單。

3.1 首頁 (Home / Hero Section)

• 背景：溫暖米白 + "UROLOGY" 大字浮水印。

• 文案：

  • Headline: "周孟翰 醫師"

  • Sub-headline: "新店高美泌尿科診所 院長"

  • Slogan: "讓難以啟齒的煩惱，變成輕鬆自在的日常"

  • Intro: "在診間，沒有尷尬的提問，只有專業的傾聽。我們致力於透過細膩的溝通與精準的治療，協助您卸下心理負擔，重拾自信與舒適的生活步調。"

• CTA：預約門診 (Anchor to Clinic Info)。

• 視覺：醫師半身專業形象照。

3.2 關於醫師 (Resume / Profile)

• 資料來源：個人單頁履歷_周孟翰_20260111_更新版.pptx

• 左欄：經歷與學會

  • 專業經歷：三總體系完整歷練、教育部部定講師等 9 項經歷。

  • 專業醫學會：TUA, TAASM, TCS 會員。

• 右欄：學歷與證照

  • 學歷：國防醫學院學士、台科大博士候選人。

  • 證照：外科專科、泌尿科專科、達文西手術認證、性傳染病專家醫師。

3.3 主治專長 (Expertise)

• 資料來源：主治項目_網站建置.docx

• 呈現方式：五大類別卡片，搭配對應 Icon。

  1. 排尿困擾與攝護腺 (頻尿、攝護腺肥大...)

  2. 私密健康與性傳染病 (菜花、HPV、包皮手術...)

  3. 微創治療與手術 (UroLift, Rezūm, 雷射結紮...)

  4. 男性性功能與荷爾蒙 (不舉、早洩、更年期...)

  5. 一般泌尿疾病 (結石、疝氣、感染...)

• Call to Action：引導不確定症狀的病患預約諮詢。

3.4 門診資訊 (Clinic Info)

• 診所名稱：新店高美泌尿科診所。

• 地理資訊：

  • 地址：新北市新店區二十張路5號1樓。

  • 功能：Google Maps 導外連結。

• 聯絡資訊：電話 (待補)、Email。

• 門診時刻表：以表格呈現早/午/晚診次 (需確認實際診次)。

• 掛號按鈕：前往線上掛號系統 (External Link)。

3.5 衛教專欄 (Blog System)

本模組分為 首頁預覽區塊、文章列表頁 與 單篇文章頁 三個層級，旨在建立專業知識庫並引導 SEO 流量。

A. 首頁最新文章 (Home Preview Section)

• 顯示邏輯：自動抓取發布日期最新的 3 篇文章。
• 版面設計：
  • Desktop：三欄式卡片橫向排列。
  • Mobile：垂直堆疊或橫向滑動 (Carousel)。
• 卡片元素：
  • 封面圖：固定比例 (如 16:9)，若無圖片則顯示帶有品牌色的 Placeholder (Logo 水印)。
  • 分類標籤 (Tags)：如「攝護腺肥大」、「微創手術」（對應 主治項目 Word 檔中的分類）。
  • 發布日期：格式 YYYY.MM.DD。
  • 標題：限制行數（如 2 行），溢出顯示 ...。
  • 摘要：自動擷取文章前 60 字。
• 互動：區塊右上方或下方設有明顯的 「查看更多文章 (View All)」 按鈕，連結至 /blog。

B. 文章列表頁 (Blog Index Page - /blog)

• 功能：展示所有衛教文章的獨立頁面。
• 篩選機制：頂部設置分類標籤篩選器 (Filter)，例如：#排尿困擾、#私密健康、#微創手術、#性功能。
• 分頁/載入：採用 Infinite Scroll (無限捲動) 或 Load More 按鈕，每次載入 9-12 篇文章。
• 視覺風格：延續首頁的卡片設計，保持一致性。

C. 單篇文章頁 (Single Post Page - /blog/[slug])

• 資料來源：Markdown / MDX 檔案 (由 攝護腺肥大.docx 等原始檔轉檔)。
• 閱讀體驗：
  • 側邊欄 (Sidebar)：顯示「醫師簡介小卡」與「門診預約按鈕」，提升轉換率。
  • 目錄導覽 (TOC)：文章長度較長時，自動生成側邊錨點目錄 (Table of Contents)。
  • 相關文章：文末推薦 2-3 篇同分類文章。
• Call to Action：文末固定顯示「預約諮詢」區塊。

技術實作備註 (Technical Implementation):

• 路由結構:
  • 首頁: pages/index.astro (使用 getCollection fetch limit(3))
  • 列表頁: pages/blog/index.astro
  • 內頁: pages/blog/[...slug].astro
• 資料結構 (Content Collections):

  const blogCollection = defineCollection({
    schema: z.object({
      title: z.string(),
      date: z.date(),
      tags: z.array(z.string()),
      image: z.string().optional(),
      excerpt: z.string(),
      draft: z.boolean().default(false),
    }),
  });
  

3.6 頁尾 (Footer)

• Logo / Brand Name。

• 快速連結 (Quick Links)。

• 聯絡摘要 (Contact)。

• Copyright 宣告。

4. 功能需求 (Functional Requirements)

4.1 前台功能 (Frontend)

4.2 後台功能 (CMS - Keystatic)

4.3 SEO 與社群分享設定 (Non-Functional)

5. 技術架構 (Technical Architecture)

本專案採用 Astro 作為核心框架，旨在解決傳統 SPA 網站載入過多不必要 JavaScript 的問題，確保在行動網路上也能瞬間載入。

5.1 核心堆疊 (Core Stack)

• Framework: Astro v5 (Static Site Generation mode)。
• Styling: Tailwind CSS v3.4+ (LTS) (Utility-first CSS)。
• Icons: Lucide React。
• Hosting: Cloudflare Pages (Global CDN)。

5.2 效能與架構策略 (Performance Strategy)

• Zero JavaScript by Default (預設零 JS)：
  • 全站頁面預設皆編譯為 純靜態 HTML，瀏覽器無需下載、解析或執行龐大的 JavaScript Bundle 即可顯示內容。
  • 效益：大幅降低 TTFB 與 FCP，確保「秒開」體驗。
    • TTFB (Time to First Byte)：透過 Cloudflare 邊緣節點，伺服器回應時間極短。
    • FCP (First Contentful Paint)：瀏覽器無需等待 JS 下載與執行，使用者能瞬間看到畫面內容。
• Island Architecture (群島架構)：
  • 僅針對「需要互動」的區塊（如：手機版漢堡選單、輪播圖）進行 Partial Hydration (局部活化)。
  • 實作：使用 React 元件開發互動區塊，但設定 client:visible 或 client:media 指令，確保其餘靜態內容不載入任何 JS 程式碼。
• 圖像優化自動化 (Image Optimization)：
  • 使用 Astro 內建 <Image /> 元件處理所有靜態圖片。
  • 次世代格式：自動將 JPG/PNG 轉檔為 WebP 或 AVIF，縮減 80% 以上檔案大小。
  • CLS 防護：自動計算並預留圖片長寬空間，防止圖片載入時發生「版面位移 (Layout Shift)」。
  • Lazy Loading：預設延遲載入視窗外的圖片，節省頻寬。

5.3 SEO 優勢 (Technical SEO)

• Server-Side Rendered HTML：爬蟲能直接讀取完整 HTML，無須等待 JS 執行，對 Google 排名極為友善。
• Core Web Vitals：針對 LCP, FID, CLS 三大指標進行架構級優化。

5.4.1 後台管理與安全性 (CMS Workflow)

• 系統核心：採用 Keystatic (Git-based CMS)，資料直接儲存於 GitHub Repository。
• 登入入口：
  • 網址路徑：/keystatic (例如：dr-chou.com/keystatic)。
  • 隱藏機制：不在前台顯示後台入口連結。
• 身分驗證 (Authentication)：
  • 機制：採用 GitHub OAuth 進行驗證。
  • 流程：使用者點擊登入 -> 跳轉至 GitHub 授權頁面 -> 驗證成功後返回後台。
• 權限控制 (Authorization)：
  • 白名單制：僅有被加入此 GitHub Repository 的 Collaborator (協作者) 才能登入並進行寫入操作。
  • 安全性：非授權人員即使知道後台網址，無法通過 GitHub 驗證，因此無法修改任何內容。
• 發布流程：
  • 醫師在後台編輯完畢按「儲存」 -> 系統自動 Commit & Push 至 GitHub -> Cloudflare Pages 偵測到更新 -> 自動觸發重新部署 (Re-build) -> 約 1-2 分鐘後前台更新。

6. 待確認事項 (To-Do List)

1. 診所電話：需確認新店高美診所的正式預約電話。

2. 線上掛號連結：需取得診所掛號系統的確切 URL。

3. 門診時刻表：需提供正確的醫師看診時段（週一至週六的早午晚診分配）。

4. 形象照片：需提供醫師的高解析度去背半身照 (PNG 格式佳)，以利製作 Hero Section 的遮罩效果。