Wireframe是什麼？Wireframe 中文稱為線框圖，是用方框、線條與簡單文字標出頁面結構的草圖，用來決定每一頁放哪些內容、依什麼順序排列、導覽與按鈕放在哪裡，刻意先不處理顏色、字體與圖片。做網站前先畫線框圖，是為了在投入視覺設計與程式開發之前，讓業主、設計與工程對「這一頁要做什麼」取得共識；這個階段改動只要重畫幾個方框，等程式寫好再改，成本就高得多。
線框圖要決定的事：結構、層級與功能
線框圖是使用者介面的基本視覺呈現，像蓋房子前的藍圖。它聚焦在下列四件事，並用註解說明互動行為與設計理由：
- 版面配置：頁首、主要內容區、側欄與頁尾的位置。
- 元素位置：標題、按鈕、導覽與各內容區塊分別放在哪裡。
- 內容層級：哪些資訊先看到、哪些放後面，標題與小標如何分組。
- 功能：表單欄位、篩選、搜尋等元件要做什麼，點了會發生什麼事。
顏色、字體與圖片不是線框圖要處理的事。刻意保持簡單，是為了讓審稿的人把注意力放在內容是否齊全、順序是否合理，而不是討論配色。
線框圖、視覺稿與原型設計的差別
這三種設計產出常被混用，差別在於各自要驗證的東西不同：
| 項目 | 線框圖 | 視覺稿 | 原型 |
|---|---|---|---|
| 呈現什麼 | 頁面結構、元素位置與內容層級 | 完成後的顏色、字體、圖片與品牌風格 | 模擬操作流程與互動 |
| 能不能操作 | 多為靜態，高保真版本可能有少量互動 | 靜態 | 可以點擊或由人模擬操作 |
| 主要用途 | 確認內容與結構 | 確認視覺風格 | 測試可用性與流程 |
原型設計不一定要等視覺完成才做。使用者經驗研究機構的說明指出，原型的精細度可以從互動、視覺與內容三個面向分別調整，紙上畫的草圖由人模擬畫面切換，也能做早期測試。選哪一種產出，取決於這一輪要驗證的是結構、外觀，還是操作流程。
低保真與高保真線框圖怎麼選
低保真線框圖是粗略的灰階版面，用佔位方框代表圖片與文字；高保真線框圖則有準確的尺寸與真實內容，有時加上少量互動，接近完成品。可以依專案階段選擇：
- 先用低保真：專案初期要比較幾種排法、還在討論頁面要放什麼時。低保真準備快、容易修改，受測者面對草圖的壓力較小，參與的人也一看就知道還沒定案。
- 再做高保真：結構確定後，要交給設計與工程，或要做使用者測試時。這時要放真實文案與實際欄位，才看得出內容放不放得下。
要避免的是太早做得太精緻：投入的心力越多，越難捨棄不好用的設計；看起來太完整的稿子，也容易被要求直接定案。
做網站前為什麼要先畫線框圖
線框圖的價值，在於把問題提早到修改成本低的階段發現。使用者經驗研究的說法很直接：改程式碼代價很高，改一張紙上的原型卻幾乎不花成本。先畫線框圖可以：
- 對齊需求：業主、設計、工程看同一張圖討論，減少「我以為會有這個區塊」的落差。
- 估算工作量：畫面數、狀態與互動元件清楚後，報價與時程才有依據，計價方式可參考UI 設計報價的計價單位與交付範圍。
- 提早規劃內容：每個區塊由誰撰寫、要不要拍照或準備規格表，動工前就列成清單。
- 先想好手機版：Google 以行動版內容建立索引與排名，並建議採用回應式網頁設計；線框圖同時畫出手機版排列，可以避免手機版漏掉重要內容，或兩個版本的標題與說明不一致。
每一頁線框圖該放的內容
一張可以拿來審的線框圖，建議標出下列項目：
- 頁面目的與目標讀者，寫在圖的上方，審稿時用來判斷每個區塊有沒有必要。
- 導覽與麵包屑，而且各頁的命名、樣式與位置一致。
- 標題層級與區塊分組，用標題與間距把相關內容放在一起。
- 主要行動按鈕的位置與文字，按鈕與連結的樣式要容易辨識，設計細節可參考CTA 按鈕的文案、顏色與位置。
- 表單欄位，每個欄位旁都有清楚的說明標籤。
- 錯誤、空資料、送出成功等狀態，需要使用者處理的回饋要明顯。
- 互動註解：點擊後展開什麼、資料從哪裡來、手機版如何重新排列。
導覽一致、標題分組、欄位標籤與明顯回饋，也是無障礙設計的基本建議，在線框圖階段處理，比上線後再改容易。
誰來審線框圖、該看什麼
審稿時建議讓不同角色各看自己負責的部分：
- 業主或業務：產品與服務資訊是否正確，客戶常問的問題有沒有答案。
- 行銷與 SEO：每頁是否對應明確的搜尋需求，標題層級與內部連結是否合理。
- 設計：閱讀動線與資訊層級是否清楚，手機版是否好操作。
- 工程：功能是否可行、資料從哪裡來、表單要串接到哪裡。
- 客服：常見問題與聯絡方式是否放在容易找到的位置。
審稿時可以拿一個具體任務走一遍，例如「從首頁找到某項產品並送出詢價」，看每一步是否找得到下一個入口。若能請真實使用者用低保真稿試操作，更能看出哪裡讓人卡住。
畫線框圖的常見錯誤
- 一開始就上色排字：審稿焦點轉向配色與字體，結構問題反而沒人討論。
- 只畫首頁：內頁、產品頁、表單頁沒畫，開發時才發現內容不夠或版型不合。
- 整頁假文字：用佔位文字定版，真實文案放進去才發現太長或太短；高保真階段要換成真實內容。
- 沒有手機版：桌機版排得順，手機版卻要捲動很久才看到重點。
- 沒畫狀態與註解：錯誤訊息、空資料、載入中這些畫面沒定義，工程只能自行判斷。
- 沒定版就進下一步：結構還在改就開始做視覺稿，每改一次結構就要重做一次視覺。
常見問題
線框圖要用什麼工具畫？
紙筆、白板或簡報軟體就能畫低保真線框圖；需要多人協作或做可點擊原型時，再改用介面設計軟體。重點是團隊都看得到並能留下意見，工具本身不是關鍵。
線框圖和網站架構圖有什麼不同？
網站架構圖畫的是頁面之間的層級與連結關係，例如首頁底下有哪些分類頁；線框圖畫的是單一頁面內部的區塊配置。建議先定架構，再畫各頁線框圖。
小型形象網站也需要畫線框圖嗎？
建議要，但可以簡化。頁數少時，用低保真線框圖把每頁的區塊與順序畫出來，花的時間不多，卻能在設計前確認內容是否齊全。
線框圖確認後還能修改嗎？
可以，但越晚修改影響越大。結構若要調整，建議在視覺稿開始前提出；進入開發後再改，設計與程式往往都要跟著重做。
原型一定要做到可以點擊嗎？
不一定。紙上原型由人模擬畫面切換，也能做早期測試；要驗證較複雜的流程，或交給工程當作參考時，再做可點擊原型。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
準備做網站或改版時，可以先列出每一頁的目的與要放的內容，再畫成線框圖確認，後續的視覺設計與開發就有明確依據。京采的網頁設計服務在架構與線稿階段先確認頁面清單、資訊層級與版位順序，再進入視覺與內容，並以桌機、平板、手機三個斷點一起設計。想討論你的網站規劃，歡迎與我們聯繫。
