做過平面的人轉做「網頁視覺設計」，最先撞上的不是美感問題，而是稿子交出去之後開始失控：在自己電腦上排得剛剛好的版面，換一台螢幕就跑掉；滑鼠移上去該有什麼反應沒人講；圖片放得漂亮，頁面卻慢到讓人跳走。網頁的視覺稿不是一張完成品，而是一份給程式實作的規則說明。這篇談的就是這兩者的根本差異，以及視覺稿交給前端時該附帶什麼。
版面不是一張稿，而是一組會伸縮的規則
平面稿的尺寸是固定的，設計時可以把每個元素放在絕對位置上。網頁沒有這件事，同一個頁面會出現在手機直式、平板、筆電與大尺寸螢幕上，寬度是連續變化的。因此網頁視覺真正要決定的不是元素放在哪個座標，而是它在寬度改變時怎麼反應：是等比縮放、維持固定寬度、換行堆疊，還是直接隱藏。實務上至少要出三個代表性寬度的稿，並在稿件上註明中間狀態的處理方式，例如三欄卡片在中等寬度變兩欄、在窄螢幕變一欄。另外要處理的是內容長度的不確定性，標題可能兩個字也可能二十個字，商品可能有六筆也可能只有一筆，設計時要同時考慮字數過多會不會撐破版面、內容太少會不會留下大片空白。這些狀況在平面稿裡不存在，因為文案早就定稿了。
靜態稿看不見的狀態，必須一起設計
網頁是可以互動的，同一個元件在不同狀態下要有不同外觀，這些狀態在靜態視覺稿上完全看不出來，卻是實作時一定會問的問題。按鈕至少要有一般、滑鼠移上、按下、停用四種樣子；連結要區分未讀與已造訪；表單欄位要有預設、聚焦、填寫錯誤與成功的樣式，錯誤訊息要指定顯示位置與顏色。除此之外還有幾種容易被忽略的畫面：資料還在載入時顯示什麼、查詢結果是空的時候版面長什麼樣、內容載入失敗時給使用者看什麼。若這些都沒設計，實作端只能自行決定，最後成品跟提案時看到的差很多，往往就是從這裡開始的。同樣道理，捲動時固定的選單、展開後的手機選單、彈出視窗的遮罩層，也都應該在視覺階段一併定義。
視覺決策會直接變成載入速度
平面設計把圖放大到滿版不會有代價，網頁會。滿版的大圖、多層次的陰影與模糊效果、大量的自訂字體字重、整頁的背景影片，每一項都在增加使用者要下載的資料量與瀏覽器要計算的工作。設計階段就該做的取捨包括：主視覺是否真的需要一張全幅照片、同一頁使用的字體家族與字重數量是否可以收斂、裝飾性圖案能不能用向量而非點陣、動態效果是否只在必要處使用。另外，圖片的裁切比例要在設計時就決定好，若不同區塊各自需要不同比例，實作端就得準備多份圖檔。把速度視為視覺設計的一部分，比事後請工程師想辦法壓縮實際得多，因為多數效能問題的源頭是設計決策，不是實作技術。
螢幕上的可讀性判斷標準跟紙上不同
紙張是反射光，螢幕是直射光，長時間閱讀的疲勞程度不同，因此網頁的行高通常要比印刷品寬鬆，段落寬度也要控制，一行過長會讓眼睛找不到下一行的起點。字級不能只看設計稿上的視覺比例，還要考慮手機上的實際觀看距離與觸控目標的大小，可點擊的區域要留出足夠面積，不能只有文字本身那幾個像素。顏色對比是另一個重點，淺灰字配白底在設計師的高階螢幕上看起來很雅致，在一般手機的戶外環境下可能根本看不清楚。訂定色彩時要一併確認文字與背景的對比是否達到可讀標準，並且不要只用顏色傳達資訊，例如表單錯誤只用紅色標示，對色彩辨識有困難的使用者就接收不到。
視覺稿交付給前端時該附帶的規範
- 間距與尺寸系統：以固定倍數建立一套間距級距，並說明各級距的使用情境，避免實作時每個區塊都要問。
- 字級與行高對照表：列出各層級標題與內文的字級、行高、字重與字距，並標明在窄螢幕下是否改變。
- 色彩定義：給命名而非只給色碼，例如主色、警示色、次要文字色，讓實作端知道該用在哪裡。
- 元件狀態圖：按鈕、輸入框、選單等元件的各種狀態並列呈現，含停用與錯誤樣式。
- 斷點說明：註明版面在哪些寬度改變排列方式，以及各區塊的變化規則。
- 切圖與素材：標誌與圖示提供向量格式，照片註明所需比例與最大寬度，圖示統一命名。
常見問題
視覺稿需要每個頁面都畫嗎？
不需要，但要涵蓋所有版面類型。與其把二十個內容頁都畫一次，不如把首頁、列表頁、內容頁、表單頁與搜尋結果頁各畫一版，並把共用元件抽出來單獨定義。其餘頁面只要說明是由哪些元件組成即可。這樣做不只省時間，也讓整站的一致性建立在元件層級，而不是靠設計師記憶。
設計稿跟做出來的網站有落差，是誰的問題？
多數情況是規範不夠明確，而非任一方失職。落差常出現在稿件沒交代的地方，例如中間寬度的排法、字數過長的處理、互動狀態的樣式。減少落差的做法是設計與前端在開稿前先對一次技術限制，實作中途安排一次共同檢視，並在驗收時以元件為單位逐項核對，而不是等全部做完才一次挑毛病。
手機版可以等桌機版做完再說嗎？
不建議。多數網站的行動裝置流量都不低，而窄螢幕的限制最嚴苛，若最後才處理，往往得刪掉大量內容或硬塞。比較穩的做法是在設計初期就同時思考窄螢幕的資訊排序，先確定哪些資訊必須優先出現，再往寬螢幕擴充。這個順序做對，兩邊的版面通常都會比較乾淨。
視覺稿要不要做成可點擊的原型？
視專案複雜度而定。單純的形象網站用靜態稿加規範說明多半足夠；若流程有多個步驟、有條件分支或表單較複雜，做一份可點擊的原型能提早發現流程問題，也讓決策者比較容易理解。原型的重點是驗證流程順不順，不是把視覺做到完美，太早追求精緻反而拖慢修正速度。
網站上線後視覺還能調整嗎？
可以，而且應該。上線後可以觀察實際使用情形，看哪些按鈕沒人點、哪些段落大家滑過去、哪些表單欄位讓人放棄。這些資訊在設計階段拿不到。調整時建議一次改動範圍明確的一件事並記錄變更，才能判斷成效來自哪個調整，全部一起改會分不清是哪一項起了作用。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
加入京采 LINE 好友相關主題
下一步
如果你正在評估「網頁視覺設計」相關的規劃，可以參考我們的品牌與平面設計服務，或直接與我們聯繫，我們會依你的產業與現況給出務實的建議。