網站專案走到一半才發現「這不是我想要的」，通常不是因為設計師畫錯，而是因為確認的順序錯了。很多業主是在看到完整視覺稿的那一刻，才第一次認真思考頁面上要放什麼，於是版面已經排好了，內容卻還在變；等到切版動工了，又想把某一個區塊挪到上面去。這篇談的網頁設計流程，刻意把範圍縮在「設計端」這一段，不談訪談、內容產製或上線驗收，也不談專案管理的里程碑，只談從線框稿到切版交付這四道關卡：每一關在做什麼、業主要確認什麼，以及為什麼一旦確認過就不宜再回頭。
為什麼網頁設計流程要從線框稿開始，而不是從配色開始
設計工作如果從配色與風格開始，很容易變成一場品味討論。大家對藍色或灰色都有意見，卻沒有人先問「這一頁到底要讓訪客做什麼」。線框稿存在的意義，就是把這個問題強制提前。
線框稿是把顏色、字體、照片都拿掉之後的頁面骨架，通常只有灰階方塊與文字。它刻意做得不好看，因為它要討論的是結構：哪一段先出現、哪一段後出現、每一段要放多少資訊、行動呼籲擺在哪裡。當畫面上沒有漂亮的照片可以分散注意力，大家才會真正討論內容。
把流程從線框稿展開的另一個好處是修改成本。在線框稿階段把一個區塊搬到上面去，可能只要幾分鐘；等到視覺稿完成、甚至切版之後再搬，牽動的是整頁的視覺平衡與程式結構。越前面的階段，改動越便宜。
第一關線框稿：確認的是資訊順序，不是美感
線框稿這一關，業主要看的東西其實很具體。不是「好不好看」，而是幾個可以回答是或否的問題：
- 資訊順序：訪客最想知道的事，是不是放在最前面。
- 區塊用途：這一塊是要說服人、要提供資料、還是要引導行動。
- 行動呼籲：詢價、下載、撥號這些入口，有沒有出現在該出現的地方。
- 內容量級：這一區預計放三段文字還是一張表格，現在的框有沒有留夠空間。
- 手機版順序：桌機上並排的兩欄，在手機上哪一欄會先出現。
這一關也是最適合把內容現況攤開來談的時候。如果某個區塊規劃了好幾則客戶推薦，但實際上一則都拿不出來，現在調整還來得及。線框稿確認之後才發現內容湊不出來，後面的視覺稿就會被迫留白或硬塞。
一個實務上的建議：線框稿階段就把主要頁面的實際文案草稿放進去，即使只是粗胚。用假文字排出來的版面，往往在真文字進場之後整個走樣，標題長度尤其是常見的地雷。
第二關視覺稿：先定一頁代表頁，再往外擴散
視覺稿是把線框稿加上顏色、字體、照片與間距之後的樣子。這一關的作法通常不是一次畫完所有頁面，而是先挑一到兩頁最具代表性的頁面做完整設計，確認風格方向之後，再把同一套語彙擴散到其他頁面。
代表頁怎麼挑？一般會挑首頁，加上一個內容最複雜的內頁，例如產品內頁或服務說明頁。只看首頁很危險，因為首頁往往是最特殊的一頁，它的視覺手法未必能套用到資訊密度高的內頁上。
業主在這一關要確認的是風格與調性：色彩給人的感覺對不對、字體的個性合不合、照片的風格是不是你拿得出來的那一種、整體的疏密感是否符合品牌。要特別注意照片這一項。如果視覺稿用的是示意圖庫的照片，而你實際上只有現場隨手拍的照片，最後成品的落差會非常大，這件事要在這一關就講開。
比較不建議在這一關才討論「這個區塊要不要移到上面」。那是線框稿的題目，在視覺稿階段重提，等於把前一關的結論推翻，整頁的節奏都要重來。
第三關設計系統：色彩、字級與元件規範怎麼定下來
代表頁通過之後，設計不是直接往下畫每一頁，而是先把規則整理出來，這就是設計系統。它不是一份很玄的文件，內容通常相當務實：
- 色彩：主色、輔色、強調色、文字色、背景色各是哪幾個，什麼情況用哪一個。
- 字級：標題、副標、內文、註解各用多大，行高與字距怎麼配，手機上如何縮放。
- 間距：區塊之間、段落之間、元件內部的留白規則。
- 元件：按鈕有幾種樣式、表單欄位長什麼樣、卡片與列表的版型、圖片的比例規則。
- 狀態：滑鼠移過去、按下去、欄位填錯、內容為空的時候，各自長什麼樣。
設計系統的價值要到後面才會顯現。有了它，網站的第三十頁跟第一頁看起來會是同一個網站；日後你自己在後台新增頁面時，也知道該用哪一種樣式。沒有它，每一頁都是獨立創作，網站上線一段時間之後就會變成一個風格拼盤。
業主在這一關要確認的重點，是這套規則你自己用不用得起來。例如卡片圖片規定為某種固定比例，那你日後上傳的產品照就必須裁成那個比例；如果你的產品照形狀差異很大，這個規則就要調整。把未來的使用情境講出來，比單純看規範漂不漂亮重要得多。
第四關標註與切版交付：設計稿離開設計師之前要補齊什麼
設計稿要交給前端切版之前，還有一段常被壓縮的工作：標註與交付整理。這一段做得好不好，直接決定切出來的成品跟設計稿像不像。
需要交付的東西通常包含幾類：所有頁面的桌機與手機版設計稿、間距與字級的標註、圖片與圖示的切圖或向量原始檔、字體檔案或字體來源說明、互動行為的說明，例如選單怎麼展開、輪播怎麼切換、表單送出之後顯示什麼，以及各種狀態的畫面。
最容易漏掉的是狀態與極端情況。標題特別長的時候怎麼斷行、產品只有一筆時列表長什麼樣、表單填錯時錯誤訊息出現在哪裡、圖片沒有上傳時顯示什麼。這些在設計稿上都是空白，但在真實網站上每天都會發生。事先講清楚，切版時就不必臨場發揮。
業主在這一關其實不太需要評斷美感，而是確認清單有沒有缺漏，以及自己手上該給的素材是不是都給齊了。字體授權尤其容易卡住：設計稿上用的字體，如果沒有網頁使用的授權，上線時就得換掉，整體視覺可能因此改變。
每一關確認過了，為什麼不宜再回頭改
網頁設計流程在設計端的每一關，都是往下一關的地基。線框稿決定內容順序，視覺稿決定風格，設計系統決定規則，標註決定實作細節。回頭改一關，上面疊的東西都要跟著動。
舉例來說，在設計系統確定之後才想把主色換掉，聽起來只是換個顏色，實際上按鈕、連結、標題、圖示、狀態色全部都要重新調整對比，每一頁都得檢查一次。又例如切版開始之後才想把某個區塊移位，前端已經寫好的結構與樣式要拆改，手機版的排序也要重排。
這不是說設計流程不能改，而是改動應該回到它所屬的那一關去談。如果你發現真正想改的是資訊順序，那就要意識到這是線框稿層級的變更，時程與費用都會受影響；廠商如果直接答應在視覺稿上硬改，反而要小心，因為結構問題並沒有被真正解決，只是被遮起來。
要降低回頭改的機率，最有效的方法是在每一關確認時，讓真正有決定權的人到場。很多回頭改都源自同一個情境：前面幾關都是承辦人在看，主管到最後一刻才第一次看到成品。
常見問題
可以跳過線框稿，直接看視覺稿嗎
可以，小型專案有時會這樣做，但風險是把結構與美感的討論混在一起。如果要跳過，建議至少先把每一頁的內容大綱與區塊順序用文字條列確認，讓結構的決策仍然先發生。
視覺稿可以修改幾次才合理
這沒有標準答案，通常會在合約裡約定輪次。比較重要的是修改的性質：同一關內的調整是正常的，跨關回頭推翻前一關的結論則應該視為變更。事先把這個界線談清楚，比爭論次數有用。
網頁設計流程走完，網站就會有好的搜尋表現嗎
設計流程能做到的是讓結構清楚、標題階層合理、頁面速度不被素材拖垮，這些是基礎條件。真正的搜尋表現還取決於內容品質與長期經營，通常需要數個月才看得出變化，也沒有人能保證排名。
設計稿交出去之後，我還拿得到原始檔嗎
這要看合約怎麼寫，不是預設會給。如果你希望日後能自行修改或更換配合的團隊，請在簽約前就把設計原始檔、切圖素材與字體授權的歸屬寫進文件，不要等到專案結束才提。
把設計端的四關拆開來看，你會發現業主真正需要投入時間的地方集中在前兩關。線框稿與視覺稿確認得越紮實，後面的節奏就越穩；反過來說，前面含糊帶過的部分，後面一定會用更高的代價回來找你。
如果你正在規劃改版，想先知道現有網站在結構與速度上有哪些問題，創昇SEO 提供免費的網站健檢，也可以安排全台到府說明。我們會把看到的狀況據實整理給你，讓你在跟設計團隊討論時，手上有具體的依據。