網頁設計流程全解析：七個階段、各階段交付物與驗收點

一句話回答：一個網站專案走七個階段：需求溝通 → 報價簽約 → 資料準備 → 設計稿 → 切版製作 → 測試驗收 → 上線移交。每個階段都有「交出什麼、你要準備什麼、怎麼驗收」三件事。流程搞清楚的好處很實際：你知道錢花在哪一段、哪一段改最便宜、以及出了狀況該找誰。這篇把七個階段逐一拆開。

為什麼先懂流程再談報價

同樣的「做一個網站」，流程走到哪、每步交出什麼，各家團隊差很多。先懂流程，你在比價時才能比到同一個基準上——否則 A 家報價含內容整理、B 家不含，數字卻被放在同一張表上比較，一定比出錯的結論。價錢本身的組成與拆法在網頁設計報價那篇講，這篇只講流程怎麼走。

階段一：需求溝通

做什麼：把「網站要拿來幹嘛」講清楚。目的（形象、詢價、電商、內容）、目標訪客是誰、要哪幾頁、有沒有參考網站、預算區間與期望工期。

你要準備：一張簡單的需求清單。不用專業術語，寫白話就有效：「我是做什麼的、客戶是誰、我希望訪客看完做什麼、我看過哪個網站覺得對味」。

驗收點：雙方對需求清單達成一致（回信確認也算）。這一步偷懶，後面每一步都在還債——多數「做出來不是我要的」問題，根源都在這裡。

階段二：報價與簽約

做什麼：把需求翻成範圍：幾頁、什麼功能（表單、多語系、後台、金流）、修改幾次、工期、付款節點、上線後維護怎麼算。

你要準備：決定優先序。預算有限時，先做哪些頁、哪些功能放二期——這個取捨你比設計公司更該做決定。

驗收點：報價單上的每一項對得上需求清單；特別確認「不含什麼」——主機、網域、圖片拍攝、文案撰寫、後續修改，哪些在裡面哪些沒有，白紙黑字。

階段三：資料與內容準備

做什麼：文案、圖片、Logo、產品資料、聯絡方式、案例素材的收集與整理。

你要準備：這是業主這邊工作量最大的一段，也是最常拖工期的一段。務實的做法：先給七成資料就開工，剩下的邊做邊補，比等湊齊一百再開始快。

驗收點：資料清單勾完，缺件有補件時程。

階段四：設計稿

做什麼：先出首頁方向，再展開內頁。重點不是「好不好看」，而是資訊層級（訪客五秒內知道你在做什麼）、行動呼籲放哪、手機排版方向。

你要準備：回饋要具體。「標題換成我們的服務名」比「不夠大氣」有用一百倍。看不懂設計稿時，就拿七個角度問它（詳見網頁風格與排版的基本功篇）。

驗收點：此階段改動成本最低，值得認真改；一旦進入製作，同樣的改動成本翻數倍。確認稿簽下去之前，把猶豫都講出來。

階段五：切版與製作

做什麼：設計稿變成真的網頁——版面、後台、表單、基本 SEO 設定、CMS 讓你能自己改內容。

你要準備：測試用的收信信箱、要串的第三方（地圖、分析、社群）、後台帳號開給誰。

驗收點：表單實測寄信有收到、各瀏覽器與手機實看、後台改一則內容試試。這一步的驗收是「功能點得到」，不是「感覺」。

階段六：測試驗收

做什麼：上線前的全面檢查。用清單，不用感覺：

• 連結逐頁點（尤其表單、按鈕、頁尾）
• 表單寄信＋收信＋垃圾郵匣都看
• 手機實機打開（不是縮小瀏覽器視窗）
• 文字校對：電話、地址、錯字、死字
• 速度感受：4G 手機開首屏
• 瀏覽器：Chrome/Safari/Edge 各看一次

你要準備：把清單分給不同同事看，一個角度看不完。完整的上線前檢查項目可以對照網頁設計指南裡的清單。

階段七：上線與移交

做什麼：正式開站。同時移交：網域與主機權限、後台帳號、備份、操作說明、維護責任劃分。

你要準備：想清楚維護怎麼辦——自己養、簽維護約、還是出問題才找人。三者的差異在「出事時多久有人管」，這是上線後才發現就會很痛的一題。選設計公司階段的把關清單在網頁設計公司挑選清單，簽約前用得上。

常見的坑（以及怎麼避）

• 需求只說「參考某某站」。參考可以，但要講「要它的哪一段、為什麼」。目的不明，後面全歪。
• 設計稿階段不做決定。拖到製作完才大改，是最貴的改法。
• 資料拖到最後才給。工期延誤的第一名原因，通常不是設計公司。
• 用感覺驗收。雙方對「好」的想像不同，唯有清單能收斂。
• 沒談維護。上線後更新、備份、出問題找誰，簽約時談比出事時談便宜。
• 把報價當總價。主機、網域、後續修改含不含，問清楚再比價。

整個流程要多久

看規模：幾頁的公司官網，順利的話數週；內容多、功能複雜、資料來回慢的專案，數月都正常。決定進度的往往不是技術，是「資料準備」和「設計稿確認」兩段的往返速度。你把這兩段抓緊，工期就抓緊了大半。流程走順之後，下一步才是把網站往「帶來詢價」的方向優化——需要有人一起評估你的案子怎麼走這條路，天問網路做這類工作，聯絡我們說明你的階段與需求即可。