會去查網頁設計流程圖的人，通常有兩種：一種正準備發包，想先知道整件事會怎麼走；一種已經開工了，卻搞不清楚現在做到哪一步、下一步該等誰。流程圖本身不難畫，難的是知道每個階段要產出什麼文件、誰該簽核，以及哪一步過了之後再回頭改就要付出額外代價。這篇把網站專案從需求訪談到上線後收尾的階段拆開，說明各階段的具體產出物與業主必須確認的節點。
流程圖真正的用途，是標出球現在在誰手上
多數專案延誤不是因為做得慢，而是因為沒人知道現在卡在誰身上。設計師以為在等業主回饋，業主以為稿子還在修，兩邊各等一週就過去了。一張有用的流程圖，每個節點都要寫清楚三件事：這個階段做什麼、結束時交出什麼、由誰確認才算通過。
另一個常被忽略的用途是估時間。把流程攤開之後會發現，工期裡有相當比例是等待業主提供素材與回覆意見的時間，不是製作時間。如果合約只寫總工期而沒有標出業主端的責任期限，最後延期的責任就會全部推到廠商身上，雙方都不好受。所以流程圖上最好連業主端的作業一起畫進去，例如文案提供、商品資料整理、金流帳號申請。
需求訪談與網站架構圖是最該花時間的兩個階段
需求訪談要問的不是想要什麼風格，而是這個網站要解決什麼問題：目標客群是誰、他們進站後最可能想找什麼、你希望他們做什麼、內部誰負責後續維護。這個階段的產出物應該是一份需求整理文件，內容包含網站目標、必要功能清單、參考方向與明確的排除項目。寫下不做什麼，往往比寫下要做什麼更能省掉後面的爭議。
接下來是網站架構圖，也就是把所有頁面依層級排出來，標明每一頁的性質是靜態頁、列表頁還是詳細頁。架構定了，選單怎麼分、後台要開哪些內容類型、網址結構怎麼規劃才會跟著定案。架構如果拖到設計稿都畫完才確認，等於整批版面要重排，這是後期大改最常見的起點。
設計稿到前端切版之間要交接哪些東西
設計階段通常先出首頁，確認調性與配色之後再展開內頁。這裡要提醒的是，確認首頁不等於確認全站，內頁的表格、列表、表單、文章內文樣式都需要另外定義，否則切版時就會出現設計稿沒畫過的狀況，只能臨時決定。
交接給前端時，除了設計檔本身，還需要幾樣東西：可以取用的圖片原檔與去背素材、字體的名稱與字重、各種互動狀態的樣子（滑過、點選、停用、錯誤），以及在不同寬度下版面該怎麼變化的說明。這幾樣缺一項，前端就得自己猜，猜錯了又是一輪來回。切版完成後應該進行一次比對驗收，看的是間距、字級、狀態是否與設計一致，而不只是看起來像不像。
這幾個節點一旦確認就不該回頭改
不是每個階段都同等重要。下面這幾個節點的共通點是，往後每一階段的工作都建立在它們之上，改動的成本會沿著流程一路放大。業主在這幾關要看得比平常更仔細。
- 網站架構：頁面層級與網址結構定了才畫版面，事後增減整個層級等於重排選單與所有內頁。
- 功能清單：會員、金流、多語系、後台權限這類功能牽動整體架構，中途追加通常不是加一頁而已。
- 設計調性：首頁確認後展開內頁，此時再說想換整體風格，等於前面的設計工時全部重來。
- 內容格式：文章與商品的欄位定義決定後台結構，資料匯入之後再改欄位，要連同已輸入的內容一起處理。
- 網域與主機：上線環境要在測試前就確定，臨時更換會影響信箱、憑證與轉址設定。
這不代表確認後完全不能調整，而是要有共識：這類變更屬於範圍變更，需要重新評估工期與費用，而不是算在原本的修改次數裡。把這件事寫進報價單與合約，遠比事後爭執誰該吸收成本要好。
上線不是終點，測試與搬移的收尾工作
測試階段常被壓縮成上線前一天匆匆看一遍，這是很多問題的來源。比較完整的測試至少要涵蓋：主要瀏覽器與手機上的版面檢查、所有表單的送出與收信、內部連結是否都通、搜尋與篩選功能是否正確、以及後台編輯權限是否符合預期。
搬移上線本身也是一個獨立階段，牽涉網域指向、憑證安裝、舊網站的網址轉址、以及搜尋引擎驗證與網站地圖提交。如果是改版而非全新網站，舊網址的對應表要在上線前就準備好，否則原本累積的搜尋流量會落到錯誤頁面上。上線後還要留一段觀察期，處理實際使用後才會冒出來的細節，並完成後台操作教學與備份機制的交接。
常見問題
一個網站專案通常會分成幾個階段？
階段數量沒有標準答案，取決於功能複雜度與雙方分工。常見的切法是需求訪談、架構規劃、視覺設計、前端切版、程式開發、內容上稿、測試驗收、搬移上線這幾段。功能單純的形象網站可以把開發與切版合併，含會員或金流的專案則往往要把開發再拆得更細，並安排獨立的整合測試期。
業主端要準備的東西，最好在哪個階段給齊？
文案、圖片、商品資料這類內容，理想上要在設計階段開始前就大致到位，至少要有代表性的樣本。用假文字排版看起來都很順，換成真實內容才會發現標題太長、圖片比例不對。等到切版完成才給素材，版面通常得再調一輪，工期也就跟著往後推。
修改次數該怎麼約定比較合理？
建議依階段約定，而不是給一個全案的總次數。例如設計階段提供幾輪修改，每輪由業主彙整意見一次提出，而不是零星傳訊息。同時要區分修改與變更：在既定架構內調整屬於修改，推翻已確認的架構或追加功能屬於變更，需要另行評估。講清楚之後雙方都比較好抓時間。
沒有流程經驗的業主，怎麼判斷廠商的流程是否可靠？
看兩件事就大致有數。第一是對方會不會在報價前先問你的目標與現況，只問你要幾頁的報價通常還沒理解需求。第二是流程中有沒有明確的產出物與確認點，能說出每個階段結束時你會拿到什麼文件的廠商，代表流程是真的在跑，而不是照著感覺做。
上線之後流程就結束了嗎？
不算結束。上線後還有內容持續更新、系統與外掛的安全性更新、備份機制的例行檢查，以及依照實際使用狀況做的調整。建議在交付時就把後續維護的範圍、聯絡方式與回應時間講清楚，並確認網站的帳號、網域與主機權限都在自己手上，避免日後要換人接手時卡住。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
加入京采 LINE 好友相關主題
下一步
如果你正在評估「網頁設計流程圖」相關的規劃，可以參考我們的網頁設計服務，或直接與我們聯繫，我們會依你的產業與現況給出務實的建議。