很多人講到「網站設計流程」，腦中浮現的往往是整個網站上線的時程表，甚至包含網域申請、主機設定這些工程端跟行政端的工作。但如果只聚焦在「設計」這個工種本身，流程其實有一套自己的邏輯，跟時程管理、驗收標準是不同層次的事。這篇文章要拆解的，是設計師從第一次跟客戶碰面，到把視覺稿交到工程端手上為止，中間實際經歷的每一個階段，讓你在跟設計團隊溝通時，知道自己現在卡在流程的哪一段、該給什麼樣的回饋才有效。
需求訪談與設計簡報怎麼進行
設計流程的第一步不是打開軟體畫圖，而是需求訪談。設計師需要先搞清楚幾件事：這個網站是給誰看的、品牌現在想傳遞什麼調性、有哪些頁面是一定要有的、有沒有既有的品牌識別素材可以延用。這場訪談通常不會只問「你想要什麼顏色」這種表面問題，而是透過一連串提問，把客戶心中模糊的想像，轉換成可以被畫出來的方向。
訪談結束後，設計師通常會整理出一份設計簡報，把口頭討論的內容轉譯成明確的設計語言：目標受眾的輪廓、品牌調性關鍵字、必須避開的視覺元素、可以參考的競品或同業網站、既有的商標與字體規範。這份簡報是後續所有設計決策的依據，如果這一步做得不夠扎實，後面每個階段都容易出現「這不是我要的」這種來回拉扯。
值得注意的是，這個階段談的是設計方向的共識，不是預算跟時程的協商。很多專案容易把這兩件事混在一起討論，導致訪談失焦，最後既沒有談清楚設計方向，也沒有真正解決時程安排的問題。把設計簡報跟時程規劃分開處理，兩邊都會進行得比較順利。
資料蒐集：從mood board到參考網站的整理方法
設計簡報確定方向後，下一步是資料蒐集，最常見的工具就是mood board（情緒板）。設計師會蒐集色彩、質感、排版風格相近的圖片與網站畫面，把抽象的調性關鍵字轉換成具體可見的視覺線索，讓客戶在還沒看到任何草稿之前，就能對「大概會長什麼樣子」有初步共識。
參考網站的蒐集也是同一個邏輯，但重點不在於「抄多漂亮的網站」，而是拆解對方在資訊排列、色彩配置、互動細節上做了什麼選擇，跟這個品牌的調性是否吻合。比較有經驗的做法，是把蒐集到的參考網站依照色系、排版風格、互動元素分類整理，讓客戶清楚看到每一類選項的優缺點，而不是丟一堆連結請客戶自己挑。
這個階段結束時，通常會產出一份簡短的方向確認文件，列出最終選定的色彩傾向、排版邏輯、參考網站清單，經客戶確認後才會進入線框稿製作，避免後續因為方向認知不同，導致線框稿或視覺稿重來。
線框稿階段在決定什麼
線框稿（wireframe）是把資訊架構具體化的階段，處理的是「內容怎麼排列」的問題：哪些內容要放在第一屏、區塊出現的先後順序、導覽列的結構、按鈕跟表單放在哪裡。這個階段刻意不處理顏色跟字體，通常用灰階或簡單線條呈現，目的是讓討論聚焦在邏輯上，而不是被視覺喜好干擾。
很多客戶在看線框稿時，第一反應是「這個顏色不好看」，但線框稿階段其實還沒有顏色決策，這時候如果焦點跑掉，很容易讓真正該討論的資訊順序、動線邏輯被忽略。設計師在這個階段的工作，某種程度上也包含引導客戶把注意力放在對的問題上。
線框稿定案後，代表整個網站的骨架已經確立：使用者從進站到完成目標動作（例如填表單、聯絡我們）的路徑已經被規劃出來。這份骨架會直接影響下一階段視覺稿的發揮空間，所以線框稿階段的討論品質，往往決定了後面修改輪次會不會拉得很長。
視覺稿：把線框稿轉換成品牌質感
視覺稿（high-fidelity mockup）是把黑白線框稿套上真正的品牌外衣：色彩系統、字體階層、圖片風格、留白節奏、按鈕跟互動元件的樣式，全部在這個階段定案。這是整個設計流程中最容易讓客戶「有感」的一步，因為畫面終於開始長得像最終網站的樣子。
實務上，設計師通常不會把每一個頁面都畫成獨立的高擬真稿，而是先完成幾個代表性頁面（例如首頁、一個內頁範本），把視覺語言確立下來，再依這套語言延伸到其他頁面。這樣做的好處是可以更快看到整體風格的樣子，也比較容易在早期發現方向需要調整的地方。
視覺稿完成後，通常會整理成一份可互動或可瀏覽的檔案，讓客戶可以完整走過每個頁面的樣子，而不是只看單張圖片。這個階段的重點是品牌質感跟資訊架構的結合，不涉及網域、主機這些跟工程或營運相關的安排。
修改輪次與回饋機制怎麼設計比較有效率
設計稿完成後進入修改階段，這通常是整個流程中最容易卡關的地方。常見的問題不是設計師改得不夠好，而是回饋機制混亂：今天業務提一個意見、明天老闆又提另一個意見，兩邊意見還互相矛盾，設計師夾在中間，改來改去卻沒有真正收斂。
比較有效率的做法，是把所有內部關係人的意見統整成一份，在同一輪回饋裡一次提出，而不是分批零散地丟給設計師。回饋內容也盡量具體，指出是哪個區塊、哪個元素的問題，而不是籠統地說「感覺怪怪的」，這樣設計師才能精準修改，而不是靠猜測。
多數設計流程會預先約定修改輪次的次數，例如線框稿跟視覺稿各有固定的修改次數，超出這個範圍再另外討論。這不是為了限制客戶的意見，而是讓雙方對於「什麼時候該收斂定案」有共同的預期，避免流程無止盡地拖下去。
交付格式給工程端：讓視覺稿順利落地
視覺稿定案後，設計流程還有最後一步，就是把稿件轉換成工程端能夠讀懂、能夠實作的交付格式。這通常包含間距與尺寸的標準化、色彩與字體的規範化命名、圖片與圖示素材的匯出、以及不同螢幕尺寸下的版面呈現方式說明。
除了靜態畫面，還需要標註互動狀態，例如按鈕在滑鼠移過、點擊、停用時分別長什麼樣子，表單欄位在輸入錯誤時如何提示。這些細節如果沒有清楚交付，工程端很容易憑自己的理解去補，做出來的成品就會跟設計稿有落差。
一份完整的交付檔案，某種程度上就是設計師跟工程師之間的溝通語言，減少「畫面做出來跟設計稿不一樣」的來回修正。這個階段做得扎實，後續開發過程中因為設計認知落差而重工的機率就會大幅降低。
常見問題
Q1：需求訪談跟設計簡報是同一件事嗎？ 不完全一樣。需求訪談是蒐集資訊的過程，設計簡報則是把訪談內容整理、轉譯成可執行的設計方向文件，兩者是前後接續的關係。
Q2：線框稿階段可以先討論顏色嗎？ 不建議。線框稿的重點是資訊架構跟動線邏輯，太早討論顏色容易讓討論失焦，通常會建議把色彩相關的意見留到視覺稿階段再提出。
Q3：修改輪次大概要抓幾輪比較合理？ 這跟專案複雜度有關，沒有固定答案，但多數流程會在一開始就跟客戶約定好輪次上限，讓雙方對「什麼時候該定案」有共同認知，會比完全沒有限制來得順利。
Q4：視覺稿定案後還可以調整嗎？ 定案後仍可以調整，但通常會被視為額外的變更，建議在視覺稿確認前，盡量把所有相關人員的意見都蒐集齊全，減少定案後才發現問題的情況。
如果你正在跟設計團隊討論網站設計流程，卻不確定目前收到的線框稿或視覺稿是否合理，或者想先了解自己網站目前在設計面有哪些地方可以優化，歡迎透過免費網站健診服務，讓專人幫你檢視現況。我們也提供全台免費到府諮詢，如果你想當面把想法講清楚、當場討論設計方向，都歡迎預約，用不強迫推銷的方式，陪你把設計流程想清楚。