網站設計 vs. 網頁設計的差異與選擇指南｜別再被報價單牽著走

很多團隊只拿到一張漂亮首頁稿，上線後才發現轉換沒起來、手機版卡卡、要改字還得排期。其實是把「網站設計（整站策略/體驗）」跟「網頁設計（單頁視覺/版面）」混在一起了。

一開始定義錯，UX 沒做、內容策略缺席、RWD 不完整、追蹤沒設，錢花了、時間過了，流量來了卻沒成交。

以下我用實戰角度，拆清兩者差異、示範 AIDA 佈局、給你採購決策樹、預算區間、里程碑、KPI 與驗收清單。看完你就知道該找誰、問什麼、怎麼驗收。

觀念先對齊：網站設計 vs. 網頁設計

網站設計關心整體的定位、體驗、內容、功能與營運；網頁設計聚焦單頁的版面與視覺。就像「都市規劃」vs「街區美化」，層級不同但都重要。

把 AIDA 放進整體網站架構

• Attention：首屏鉤子（一句話價值 + 主 CTA）
• Interest：信任模組（Logo、案例、媒體認證）
• Desire：差異化與解法（功能模組、比較表、FAQ）
• Action：明確 CTA（試用/填單/加 LINE/預約）

品牌識別 vs. UI 系統：別只套模板

拉出 Design System（字體階層、色彩、間距、元件狀態與斷點），讓品牌的人設與網站的衣櫃一致，維運才不會越做越亂。

UX 研究與內容策略

• 關鍵字地圖：交易型 / 問題型 / 比較型 → 做成漏斗
• 用戶旅程：陌生 → 了解 → 評估 → 採購，對應 CTA
• 資訊架構：卡片分類法整理選單與段落

RWD 與效能（Core Web Vitals）

• 行動優先：拇指友善、點擊區距、字級與對比
• 首屏影像壓縮、延遲載入；控制動畫不過量
• LCP < 2.5s、INP < 200ms、CLS < 0.1（指標方向即可）

開發與 CMS 選型

WordPress＝好維護；Headless＝彈性與速度。

重點是模組化區塊、權限、多語，並把 SEO 基礎（結構化資料、站內連結、Meta/OG）列為必備。

追蹤與成效量測

• GA4 事件（表單、CTA、滾動、出站）
• 像素與轉換 API、熱圖/錄屏（Hotjar/Clarity 類）
• 兩週回看漏斗：流量 → 互動 → CTA → 表單 → 有效名單

預算與報價（新台幣參考）

• 落地頁：3–12 萬
• 中小企業官網：20–80 萬
• 整站策略 + 客製功能：80–250 萬以上

重點：交付清單寫清楚（頁數、模組、圖像量、SEO、追蹤、教育訓練、保固），沒寫的通常不包含。

最常見的 8 個坑

• 只看首頁稿就簽約
• 沒有可點擊原型與 Design System
• RWD 只是縮，不是好用
• 內容策略與追蹤缺席
• 驗收僅憑主觀，無清單
• 上線無保固與版控
• SEO 基礎未納入需求
• 缺 SLA 與變更管理

採購決策重點

• 要快轉換：高轉落地頁 + 內容引流（懂文案/轉換的 UI/前端）
• 要品牌升級：網站設計全案（UX/內容/SEO/開發全併）
• 要功能平台：工程與整合能力為先（API/權限/資料庫）

範例分享

有一個家具電商，第一版只看首頁就上線：行動慢、PDP 無篩選、不能自行改價、GA4 沒事件。

重做後用戶訪談發現大家只看「尺寸/材質/交期/售後」，重排 PDP、加比較表，首屏放 LINE 詢價，並把 KPI 寫進合約。

兩個月表單轉換率由 0.3% → 2.4%，LINE 諮詢 +3.1 倍。

專案里程碑、SLA 與驗收清單

• Kickoff → 研究/IA → 低保真 → 高保真 → 前後端 → 內容 → 追蹤 → 上線/保固
• SLA：回應時效、修正圈數、故障回復、保固項目
• 驗收（精選）：五斷點、對比度、圖片壓縮、表單驗證、404/500、SEO 基礎、GA4 事件

KPI 設定：把美感變結果

• A：曝光與首屏 CTA 點擊
• I：頁停留、捲動深度、內文 CTR
• D：比較/收藏/加入清單
• A：表單完成、加 LINE、有效名單

常見問題（FAQ）

最後小總結一下

多數專案卡在「定義不清」：把整站策略當成單頁設計處理，結果漂亮但不會賣。先對齊 AIDA 與內容路徑，再用 RWD 與事件追蹤把每一步量化，你才看得到「哪裡漏、怎麼補」。

本篇給了決策樹、預算區間、KPI 與驗收清單，目的不是做更花的版面，而是讓品牌的人設、設計系統與轉換節奏對齊。先做一次免費網站健檢，把真正的卡點找出來，才是省時省錢的開始。

行動清單（今天就能做）

• 把首頁首屏改成一句話價值＋明確 CTA
• 補三段信任模組（Logo → 案例 → 評語）
• 加比較表與 FAQ，回答「為什麼選你」
• CTA 放首屏、段落中與頁尾三處