Wireframe 線框稿

用低細節方式規劃畫面結構與資訊順序。

先用一句話理解

用低細節方式規劃畫面結構與資訊順序。

打個比方

像裝潢前先畫平面配置圖，不急著挑油漆顏色。

什麼時候會遇到

需求還不穩、要快速討論流程與版面時。

再往深一點看

Wireframe（線框稿）是用灰階方塊和文字佔位符勾勒出畫面的骨架，目的是在投入設計與開發成本之前，確認資訊架構和操作流程是否合理。Wireframe 刻意省略顏色、品牌和視覺細節，讓討論焦點停在「這個按鈕放這裡對不對」「這段說明文字在哪一步出現」，而不是「顏色好不好看」。它和 prototype 的區別在於：wireframe 是靜態的結構示意，prototype 是可以點擊互動的流程驗證工具；通常先畫 wireframe 確認版面，再做 prototype 驗證使用者流程。在 Figma 裡用低保真度的方式快速畫幾個版本讓團隊討論，遠比直接進入高保真設計再反覆修改省時。

舉個例子

你要設計一個訂房確認頁面，先在 Figma 畫 wireframe：上方一個大方塊代表房間圖片，左欄列出入住日期、訂單資訊，右欄一個大按鈕「確認付款」。團隊討論後發現優惠碼欄位要加在哪，這些討論只需要改幾個方塊，比改完整設計快十倍。

常見誤解

- 跳過 wireframe 直接做精緻 UI，等到開發做了一半才發現流程有問題，要改的地方牽連到已寫好的程式，成本很高。
- Wireframe 畫得太精緻（加了顏色、真實圖片），討論變成對視覺設計的評論，忽略了版面結構和資訊順序才是這個階段要確認的重點。
- 只畫最理想的「正常流程」，沒有規劃錯誤狀態、空資料、手機版的線框稿，開發時遇到這些情況才發現沒有設計依據，只能靠工程師自行決定。