線框圖（wireframe）是一個畫面或頁面的簡單規劃，在加入顏色、字體和圖片之前，先說明甚麼內容放在哪裏。它列出頁面結構：有哪些內容、先後次序如何、畫面上有哪些按鈕和表格欄位，以及用戶怎樣進入下一步。由於不涉及視覺風格，討論可以集中在頁面是否好用。
線框圖包括甚麼，不包括甚麼
- 版面和層次：頁面的主要區域，例如頁首、導覽、主要內容和頁尾，以及哪些資訊最顯眼。
- 內容區塊：標題、文字、圖片、清單和表格，多數以灰色方框或簡單標籤表示。
- 操作：按鈕、連結、選單和表格欄位，以及每一項的用途。
- 註解：說明規則的簡短備註，例如「只向已登入會員顯示」或「必填欄位」。
最終的顏色、字體、相片和文案，會在結構確定後的視覺設計階段處理。
線框圖、視覺設計稿和原型
三者經常被混用，但一般各有所指：
- 線框圖：低細節的結構和內容規劃，可以是鉛筆草圖，也可以是簡單的電子版面。
- 視覺設計稿（mockup）：靜態的視覺設計，展示畫面最終的樣子，包括品牌顏色、字體和圖片。
- 原型（prototype）：可點擊或可互動的版本，讓人試行一段流程，例如由產品頁走到結帳。原型可以用線框圖製作，也可以用完成的設計稿製作。
審閱用的原型並不是可運作的產品。如果想驗證一個產品構思是否值得開發，可參考 MVP 是甚麼。
委託製作網站或 App 時，線框圖有甚麼用
- 及早有共同的畫面：老闆、員工和開發商可以對着同一個畫面討論，不必各自解讀文字需求。
- 修改成本較低：在線框圖上移動方框只需幾分鐘；到設計和開發後才改，可能牽涉多個畫面、程式碼和測試。
- 範圍更清楚：列出所需畫面和狀態，有助在報價或開發前看清範圍、發現遺漏的頁面。
怎樣審閱線框圖
審閱時，應該代入想完成一件事的用戶，而不是評分外觀：
- 用真實任務走一遍：例如「客戶預約下星期二的服務」或「員工更新訂單狀態」，確認每一步都有對應畫面和清楚的下一步。
- 盡量用真實內容：示範文字可能掩蓋問題，例如較長的產品名稱或中英對照文字，未必放得進預留位置。
- 手機版和桌面版都要看：不少客戶會用手機瀏覽，應查看主要頁面在小屏幕上的排列。
- 留意不順利的情況：表格填錯、搜尋沒有結果、時段已滿或付款失敗時，畫面會怎樣？
以下為說明用例子：一間小型補習中心想提供網上報讀課程。線框圖包括課程列表、課程詳情頁、報名表格和確認畫面。審閱時，中心發現缺少「課程已滿」的畫面，家長也無法一次為多於一名子女報名。兩項都在視覺設計前補上，不必等到測試才發現。
常見誤區
- 太早評論外觀：線框圖本來就應該簡單，對顏色的意見留待視覺設計階段。
- 只批核首頁：表格、預約、結帳和帳戶等承載業務流程的頁面，通常最需要細看。
- 缺少註解：只有版面而沒有規則和行為說明，開發人員日後可能有不同理解。
- 以為簽收後永遠不變：新資料仍可能令計劃改變，應與開發商事先講好之後的修改如何處理。
應向設計或開發團隊確認甚麼
- 哪些畫面和用戶流程會製作線框圖？細節程度如何？
- 主要畫面會否有手機版和桌面版？
- 線框圖會否包括錯誤、空白和權限等狀態？
- 開發前會否提供可點擊的原型試用？
- 包括多少輪審閱？簽收後的修改如何處理？
到項目後期，同一批流程可以在 Staging 環境中檢查，並透過用戶驗收測試確認。如想了解 technine.io 如何處理用戶旅程、畫面結構和可點擊原型，可瀏覽我們的 UI/UX 及產品設計服務。
常見問題
小型網站需要線框圖嗎？
視乎網站而定。簡單的資訊網站可能只需要主要頁面的草圖；如果網站有表格、預約、付款、會員區或與其他系統連接，線框圖就更有用，因為這些畫面的規則和步驟容易被誤解。
我可以自己畫線框圖嗎？
可以。紙上草圖或簡報軟件中的方框都有助說明需要，開發商可再整理成正式線框圖並提出建議。
線框圖就是最終設計嗎？
不是。線框圖確定的是結構和內容。之後視覺設計會加入品牌、字體和圖像，開發人員再根據確認的設計稿和註解進行開發。