- 登入
- 註冊
Wireframe 是什麼？線框圖教學、範例、工具與網站規劃流程
內容目錄
顯示
Wireframe 中文常翻成「線框圖」或「線框稿」。它不是把正式網站畫得比較醜，也不是只給設計師看的草圖，而是在投入視覺設計與開發前，用低成本確認頁面結構、內容優先順序、功能與操作流程。
一份有效的 Wireframe 會回答：這頁要讓誰完成什麼事，第一眼先看到什麼，按鈕會帶去哪裡，手機版如何重排，以及缺資料、載入中或輸入錯誤時要顯示什麼。先把這些問題說清楚，配色、字體與圖片才有正確的落點。
先說結論：Wireframe 是網站開工前的結構決策圖
Wireframe 的核心不是畫得漂亮，而是讓團隊用一張可討論的圖，對齊頁面目標、資訊層級、元件位置與使用流程。簡單頁面可以用紙筆，跨頁流程可用 FigJam 或 Miro，介面元件較多時可用 Figma Design、Balsamiq 或 Whimsical。工具不是成敗關鍵，是否依真實內容與需求做決策更重要。
如果需求已穩定，團隊也有成熟設計系統，部分常見頁面可以直接進入較高擬真度設計；但這不是省略思考，而是把既有元件與已驗證模式當成線框決策的基礎。
定義與實務參考：Figma：What is wireframing?；Balsamiq：Rapid Wireframing（查證 2026-08-02）
Wireframe 範例：同一個網站如何轉成桌機版與手機版
以下是自製的服務型網站首頁線框圖。灰階區塊只代表資訊角色，不代表最後的配色與圖片。桌機版把主文案、行動按鈕與情境圖並排，手機版則先保留主訴求與主要操作，再把其他內容改成單欄。
桌機版：並排呈現主訴求與情境
手機版：依優先順序改成單欄
☰
這張圖仍不足以交付開發。正式 Wireframe 應再標註按鈕去向、導覽行為、內容來源與表單欄位，以及桌機與手機版的差異。線框圖負責把問題顯性化，不是用灰色框假裝需求已經完成。
Wireframe、Mockup、Prototype 有什麼差別？
這三個名詞在不同團隊可能有重疊。為了避免會議裡各說各話，本文採用下列工作定義，專案開始時也應把預期交付物寫清楚。
| 產物 | 主要回答 | 常見內容 | 適合驗證 |
|---|---|---|---|
| Wireframe 線框圖 | 內容與功能怎麼排 | 區塊、層級、元件、註解與流程 | 需求、資訊架構與操作順序 |
| Mockup 視覺稿 | 正式畫面看起來如何 | 顏色、字體、圖片、間距與品牌樣式 | 視覺方向與品牌一致性 |
| Prototype 原型 | 操作起來如何 | 可點擊連結、狀態切換、轉場與流程 | 任務流程、互動與可用性 |
擬真度和產物類型也不是完全相同的軸。Wireframe 可以從紙筆草圖進展到包含真實文案、元件與部分互動的高擬真版本；Prototype 也可能只用簡單方框測流程。比名稱更重要的，是團隊知道這一版要做哪個決定。
差異參考：Figma：Wireframe vs. mockup；Balsamiq：Specifying Interaction（查證 2026-08-02）
低、中、高擬真 Wireframe 怎麼選？
低擬真：先談方向，刻意避免視覺細節
低擬真 Wireframe 常用紙筆、白板或簡單方框，適合快速比較不同資訊架構。它的優點是修改成本低，也不容易讓討論被顏色與圖片帶走。缺點是內容過於抽象時，利害關係人可能看不出真實長度與操作限制。
中擬真：加入真實內容、格線與元件
中擬真版本會放入較準確的欄寬、標題層級、按鈕文字、表單欄位與真實文案。多數網站專案在這一層就能有效確認範圍，因為內容太長，欄位缺漏，手機版順序等問題會開始浮現。
高擬真：接近正式元件，但仍聚焦結構
高擬真 Wireframe 可能使用設計系統元件、精確尺寸與可點擊流程。它適合產品邏輯複雜，或團隊已有成熟元件庫的情境。不過一旦加入品牌色與正式圖片，討論很容易轉向視覺稿；應明確標示這一輪究竟在審結構、互動，還是視覺。
一張可交付的 Wireframe 應包含什麼？
- 頁面目標：使用者來到這一頁，主要任務是什麼。
- 資訊層級：主標題、摘要、證據、功能、價格與 CTA 的先後順序。
- 元件與內容：導覽、卡片、表單、表格、圖片，以及盡量接近真實長度的文案。
- 互動註解：點擊後去哪裡，選單如何展開，錯誤與成功如何回饋。
- 狀態：空資料、載入中、權限不足、輸入錯誤、完成與失敗。
- 響應式差異：桌機、平板與手機的順序、收合、隱藏與固定操作。
- 內容來源：哪些由人工編輯、資料庫、第三方服務或使用者輸入提供。
不建議整頁都放 Lorem ipsum。假字會隱藏中文標題過長，按鈕文案太模糊，以及價格或法規文字無處安放等問題。若正式內容尚未完成，至少放入接近真實長度的暫定文案，並標出負責人與待確認項目。
Wireframe 工具怎麼選？8 種做法比較
| 工具／做法 | 適合情境 | 主要優點 | 使用提醒 |
|---|---|---|---|
| 紙筆與白板 | 初期發想與現場工作坊 | 速度快，修改成本低 | 完成後要整理成可追蹤版本 |
| PowerPoint 與 Keynote | 不熟設計工具的團隊 | 上手門檻低，方便簡報 | 元件與跨頁流程管理較弱 |
| Figma Design | 介面設計與可點擊原型 | 元件、範本、多人協作與原型 | 先約定檔案結構與審稿狀態 |
| FigJam | 前期工作坊、流程與協作白板 | 範本、圖表與多人協作 | 正式介面與原型應進入 Figma Design 等工具 |
| Balsamiq | 刻意維持草圖感的需求討論 | 低擬真元件清楚，適合快速迭代 | 正式視覺仍需進入其他階段 |
| Miro | 工作坊、流程圖與跨頁規劃 | 白板空間大，可把流程和線框放一起 | 大型畫布要建立命名與區域規則 |
| Whimsical | 流程圖與 Wireframe 快速整合 | 元件簡潔，支援協作與 AI 起稿 | AI 結果仍要逐項核對需求 |
| Wireframe.cc | 快速畫單頁簡易線框 | 操作簡單，能快速開始 | 複雜元件與設計系統需求較不適合 |
工具官方入口：Figma Wireframe Tool、FigJam、Balsamiq、Miro、Whimsical、Wireframe.cc（查證 2026-08-02）
各平台的免費額度、協作人數、匯出格式與 AI 功能可能調整。正式採用前，應依使用當下的官方方案確認，不要只根據舊文章或搜尋摘要決定。
Wireframe 製作教學：從需求到可交付版本的 7 個步驟
第 1 步：先寫頁面目標與使用者任務
不要從「首頁要放什麼」開始，先寫「誰在什麼情境下，要完成什麼事」。例如訪客要在手機上比較方案並提出詢問，這會直接影響價格資訊、信任證據與 CTA 的順序。
第 2 步：盤點內容、功能與限制
列出必要內容、資料來源、表單欄位、登入權限、法規文字與技術限制。若網站有既有內容，可先整理網站架構與頁面清單，再決定哪些資訊屬於這一頁。
第 3 步：先畫使用流程，再畫單一頁面
購物、預約、註冊與詢價通常跨越多個畫面。先用方框與箭頭畫出起點、判斷、成功與失敗路徑，再進入各頁線框。這種把線框畫面與簡化流程圖結合的做法常稱為 Wireflow，可避免單頁看似完整，串起來卻缺少回上一頁或錯誤處理。
概念來源：Nielsen Norman Group：Wireflows（原文發布 2016-12-04，查證 2026-08-02）
第 4 步：從低擬真版本比較兩至三種結構
用相同內容試畫不同排列，例如主 CTA 放首屏或案例後方，方案先比較價格或先解釋差異。不要把第一個想法直接做精緻；低成本比較多個方向，才能看出選擇背後的取捨。
第 5 步：換成真實文案，補齊必要狀態
把假字換成真實標題、方案名稱、按鈕與欄位，並補上空資料、載入、錯誤、成功與權限狀態。設計常在理想資料下成立，真正上線後卻被三行標題、缺圖商品或錯誤訊息撐破。
第 6 步：重排手機版，不只把桌機版縮小
手機版要重新判斷閱讀順序、手指可操作範圍、固定 CTA、表格呈現與導覽收合。桌機三欄卡片通常會變成單欄，但優先卡片未必還應排第一。也要確認鍵盤彈出時，表單與錯誤提示仍看得到。
第 7 步：用任務審稿，記錄決策後再交付
審稿時不要只問「喜不喜歡」，改用具體任務走一次：訪客能否找到價格、理解差異並完成詢問？把每則意見標成需求、內容、互動或視覺問題，決定採用與否，記錄版本與負責人。確認後再進入 Mockup、Prototype 或網站製作。
AI Wireframe 工具適合做什麼？
Miro 與 Whimsical 等工具已提供從提示文字產生線框初稿的功能。AI 適合把空白畫布快速變成可批評的第一版，也能協助產生常見頁面結構；除非團隊明確提供並逐項驗證，不能假設 AI 已完整掌握商業規則、內容量、權限、法規與例外狀態，因此不能把生成結果直接當成已確認需求。
- 提示中寫清楚使用者、頁面目標、必要區塊、主要 CTA 與裝置。
- 生成後逐項核對內容來源、按鈕去向、錯誤狀態與手機版順序。
- 不要把客戶個資、未公開商業資料或機密文件直接貼進未核准的服務。
- 把 AI 當成提案者，需求負責人仍要對最後決策與交付範圍負責。
功能來源：Miro AI Wireframe；Whimsical AI Wireframes（查證 2026-08-02）
Wireframe 常見 8 個錯誤
- 還沒寫頁面目標，就直接照競品首頁拼區塊。
- 過早加入配色、照片與陰影，審稿焦點容易轉向美感。
- 整頁使用假字，沒有驗證繁體中文的真實內容長度。
- 只畫理想狀態，漏掉空資料、載入、錯誤與權限不足。
- 只畫桌機版，最後才把三欄硬塞進手機畫面。
- 單頁畫得完整，跨頁操作卻沒有入口、返回或完成狀態。
- 沒有註解互動與資料來源，開發可能只能依畫面推測需求。
- 收集很多零散意見，沒有版本、決策人與驗收條件。
什麼情況可以省略低擬真 Wireframe？
已有成熟設計系統，頁面模式被反覆驗證，內容與需求也很清楚時，團隊可以直接使用現成元件組成較高擬真版本。例如只是在既有文章模板增加一個已定義的內容區塊，重畫紙本草圖的資訊增益可能有限。
若屬全新服務、跨部門流程、複雜表單、權限邏輯或重要轉換頁，或手機版資訊需要重新排序，省略 Wireframe 通常只是把決策延後到成本更高的設計與開發階段。判斷基準不是專案大小，而是需求不確定性與修改代價。
Wireframe 交付前檢查表
- 每一頁都有明確目標、主要使用者與主要 CTA。
- 標題、按鈕、欄位與關鍵內容已使用接近真實的文字。
- 跨頁入口、返回、成功與失敗流程可以完整走一次。
- 空資料、載入中、錯誤與權限狀態都有處理方式。
- 桌機與手機版的順序、收合與固定操作已分別確認。
- 互動、內容來源、技術限制與待確認項目都有註解。
- 審稿意見有決策結果、負責人與版本，不只留在聊天室。
- 團隊已確認下一階段是視覺稿、原型，還是直接製作。
內文精華總結
- Wireframe 是確認頁面結構、內容優先順序、功能與流程的決策圖。
- Wireframe、Mockup 與 Prototype 的界線可能因團隊而異，交付前要先定義用途。
- 低擬真適合比較方向，中擬真適合驗證真實內容，高擬真適合既有元件與複雜流程。
- 工具可依紙筆、Figma、Balsamiq、Miro、Whimsical 與 Wireframe.cc 等情境選擇。
- 有效線框圖要處理手機版、跨頁流程、錯誤狀態與真實文案，不只排列灰色方框。
網站規劃延伸閱讀
想把 Wireframe 變成可維護的正式網站？
Wireframe 有助於降低溝通成本，真正上線還要把內容、響應式版面、視覺系統、速度、SEO 與後續維護接起來。秒站提供可直接調整的網站基礎，適合先用實際頁面驗證架構，再逐步完成品牌內容。
想確認手上的 Wireframe 能否落成網站？可用 LINE 聯絡 @site-now。
重點整理
Wireframe 中文是什麼？
Wireframe 中文常翻成線框圖或線框稿，是在視覺設計與開發前，用簡化畫面確認頁面結構、資訊層級、功能、互動與使用流程的規劃產物。它不等於正式視覺稿，也不只是把網站畫成灰階。有效的線框圖還會標示按鈕去向、資料來源、錯誤狀態，以及桌機與手機版如何重排，讓內容、設計與開發能先對齊需求。
Wireframe、Mockup、Prototype 有什麼差別？
本文把 Wireframe 定義為結構與流程圖，Mockup 定義為加入顏色、字體、圖片與品牌樣式的視覺稿，Prototype 則是可操作，可測試流程的原型。不同團隊的用詞可能重疊，因此專案開始時應先約定每個交付物要回答的問題。擬真度和產物類型也不是同一個維度，Wireframe 可以很精確，Prototype 也能只用簡單方框測試流程。
做網站一定需要 Wireframe 嗎？
不一定。若已有成熟設計系統與固定頁面模式，內容與需求也很清楚，可以直接用既有元件組成較高擬真版本。若屬全新服務、複雜表單、跨頁流程或重要轉換頁，或是手機版需要重新排序，先做 Wireframe 通常能降低後期修改成本。
一張 Wireframe 要包含哪些內容？
至少應包含頁面目標、資訊層級、真實或接近真實的內容、主要元件、按鈕去向、互動註解、資料來源、空白與錯誤狀態，以及桌機和手機版差異。複雜任務還要補上跨頁流程，說明使用者從哪裡進入，如何返回，成功與失敗時看見什麼。交付時也應標出待確認項目、版本、負責人與下一階段，避免開發可能只能依畫面推測需求。
Wireframe 用什麼工具畫？
初期發想可用紙筆或白板，不熟設計工具可用 PowerPoint 或 Keynote。需要介面元件與可點擊原型可用 Figma Design；前期工作坊與流程整理可用 FigJam。刻意維持低擬真可用 Balsamiq，工作坊與流程規劃可用 Miro 或 Whimsical，簡單單頁也可用 Wireframe.cc。
低擬真、中擬真與高擬真 Wireframe 怎麼選？
低擬真適合快速比較方向，中擬真適合用真實內容與較準確的元件確認範圍，高擬真適合已有設計系統或互動較複雜的情境。應依這一輪要做的決定選擬真度，不是越精緻越好。若要討論資訊架構，保持草圖感可避免焦點被配色帶走；若要驗證內容長度、表單欄位與元件狀態，中擬真通常更容易暴露問題。
Wireframe 手機版可以直接縮小桌機版嗎？
不建議。手機版要重新決定內容順序、導覽收合、表格呈現、固定 CTA、手指操作範圍與鍵盤彈出後的畫面。桌機的三欄通常會變單欄，但哪一欄先出現仍要依使用者任務判斷。也要確認長標題、錯誤提示與輸入欄位不會超出畫面，主要操作容易觸及，表格在窄螢幕上仍能閱讀，而不是只把桌機畫面等比例縮小。
AI Wireframe 可以直接交給設計或開發嗎？
不宜直接交付。AI 能快速產生常見頁面初稿，但除非團隊明確提供並逐項驗證，不能假設 AI 已完整掌握專案的真實內容、商業規則、權限、法規與例外狀態。生成後仍要逐項核對按鈕去向、資料來源、錯誤狀態、手機版順序與驗收條件。使用提示時要寫清楚使用者、頁面目標、必要區塊、主要 CTA 與裝置，也不要把客戶個資、未公開商業資料或機密文件貼進未核准的服務。
Wireflow 是什麼？
Wireflow 把線框畫面與簡化流程圖結合，用來呈現使用者操作後，畫面或狀態如何改變。它通常用箭頭連接可操作位置與下一個畫面，也能呈現同一頁因為互動而產生的內容、確認訊息或錯誤變化。Wireflow 適合說明跨步驟任務與動態介面，但不等同於能實際點擊操作的完整 Prototype。
