Wireframe 線框圖設計入門：網站原型規劃技巧

網站完成後，才發現聯絡入口難找、手機選單層次不清或內容被圖片擠壓，可能需要回頭調整版面。線框圖提供一種提早討論的方式：先呈現內容、位置與路徑，再決定哪些細節值得投入。這些問題不一定都源自少畫線框圖，實際原因仍要依使用情境確認。

線框圖（Wireframe）以簡化畫面表達頁面結構、內容層級與功能位置，讓團隊討論「放什麼、怎麼排、下一步去哪」。它可使用灰階方塊，也可加入必要的真實內容；用途是讓決策更容易檢查與修改，不是把設計提前鎖成不可變更。 延伸可參考網頁設計從零到一的完整指南。

線框圖要解決什麼：讓結構與內容決策提早可見

線框圖的重點在結構與功能，並非單純未完成的視覺稿。可以把它想成溝通空間配置的平面圖，但網站不像灌漿後的牆，佈局仍能修改；線框圖的價值是提早暴露問題與相依關係。

資訊層級、CTA、導覽與手機堆疊順序都可在線框階段討論。越晚發現問題，可能牽動更多內容、視覺與程式，但成本依專案而異；提早討論並不代表必須在這個階段把所有事情永久定案。

簡化的方框通常較容易比較不同排列，但已有成熟元件時，也可能直接用較完整的設計快速調整。選擇哪種產出，應看它能否有效回答目前的問題與支持合作，而不是預設線框永遠最便宜。 延伸可參考UI/UX 設計差異全解析。

先把三個名詞分清楚：Wireframe、Mockup、Prototype

Wireframe、Mockup 與 Prototype 常用來區分產出的重點，而非三個一定依序通過的階段。不同團隊用法可能重疊，開始合作時先說清楚文件要回答的問題。

線框圖可以加上連接與互動成為原型，視覺稿也能接入流程測試。重點是分清楚：這份文件是在討論結構、外觀，還是驗證操作；不用把三者想成不能跨越的固定層級。 延伸可參考UI Prototype 原型設計全解析。

保真度依驗證問題與讀者需要決定

保真度表示模型在相關面向上接近成品的程度。對話對象是考量之一，更重要的是要驗證什麼、已有多少共識，以及哪些細節會影響判斷。客戶也可以看低擬真稿，工程師也可能需要高擬真細節。

低保真：快速比較結構方向

紙筆、白板或簡化方塊都可用來探索佈局。它們適合快速比較與修改，也可以拿給團隊、客戶或使用者討論；先說明哪些內容尚未定案，不必限定只能自己看。

中保真：補足內容、比例與行為

當問題需要更具體的資訊，可補上欄位、相對比例、代表性內容與行為標註。是否維持灰階，取決於顏色會幫助理解還是分散注意力；沒有跨職能合作就必須採中保真的硬規則。

高保真：呈現會影響判斷的細節

若品牌視覺、真實內容或成熟元件會影響決策，可以較早加入。相反地，討論若一直停留在與問題無關的配色，可降低細節並重新說明目的。高保真不專屬客戶，也不代表結構從此不能再改。

線框圖可核對的七類內容

下面七類是檢查起點，依頁面功能保留適用項目。不是每個畫面都有導覽、圖片或表單，也不需要為了湊齊清單新增元件。 延伸可參考網頁版面設計完全攻略。

把適用項目說清楚，才能看出還缺哪些資訊。使用佔位圖時，可選接近實際尺寸與內容的素材，定稿前核對授權與正式裁切；網格與區塊配置也應依內容測試。 延伸可參考Figma 免費圖片外掛、Bento Grid。

標註是線框圖的靈魂：把該交接的資訊寫在圖上

很多人畫線框圖畫得很認真，方框排得整整齊齊，比例也標了，結果一交出去就被開發跟設計問爆：這個按鈕點了去哪、這個表單送出失敗會怎樣、這個區塊在平板上要不要顯示。問題出在他們把線框圖當成「只要畫結構就好」，卻忘了線框圖的第二個身份是溝通文件。結構是給眼睛看的，標註是給接手的人看的，兩者缺一不可。一張沒有標註的線框圖，跟一張有結構卻沒說明的建築圖一樣，看得到長相，卻不知道每一根管線通到哪。

標註可包含連結或動作、適用狀態、內容來源與長度範圍、不同視窗的佈局規則，以及載入優先級。按鈕與表單也要考慮鍵盤焦點；行動版若要隱藏區塊，先確認是否會漏掉主要內容或功能。

簡單行為可寫在旁邊，複雜規則可用編號連到說明。目標是讓決策與未知事項可查，不是讓接手者永遠不用提問；需要技術驗證或仍有爭議的項目，應明確標示。

用擬真內容取代假字：線框圖階段的內容策略

Lorem Ipsum 可用在早期粗略佈局，但未必代表真實標題、商品名稱與段落的長短。進入內容與結構驗證時，應加入代表性內容及長短邊界，避免用過度整齊的佔位文字掩蓋問題。

用接近真實語言、長度和結構的文字，檢查是否溢出、換行或產生不合理留白。解法可能是調整佈局、內容呈現或編輯規則，不必只剩縮短標題與加寬容器兩種選項。

如果專案有文案夥伴，線框圖階段就適合開始合作。設計端提供結構與長度限制，文案端提供標題與段落重點，兩邊一起確認「這一頁要說什麼、怎麼說」，避免到後段才硬塞內容。線框圖不只是設計師的產物，也可作為內容、設計與技術共同對齊的紀錄，提早暴露缺口通常能降低後續返工。

動手畫之前：把資訊架構與使用者旅程先想透

最常見的線框圖失敗，不是畫得不好看，而是畫之前根本沒想清楚「這一頁要服務誰、他要完成什麼事」。直接打開軟體開始拉方框，很容易陷入「把畫面填滿」的陷阱，做出一個什麼都有、但誰都不滿意的頁面。在動筆之前，有三件事必須先有答案。

第一件，你的使用者是誰、他帶著什麼目的來。一個帶著明確比較意圖的人，跟一個只是逛逛的人，需要的頁面結構完全不同。把目標對象想清楚，線框圖才有判斷依據，這部分的完整做法可以參考Persona 人物誌建立指南。第二件，他在這個頁面之前從哪來、之後要去哪。單一頁面很難獨立成立，它一定是某一條旅程裡的一站。把前後頁的來龍去脈畫出來，你才知道這一頁要放什麼入口、什麼出口，顧客旅程地圖能幫你把這條動線看清楚。

同時確認這個頁面在網站中的關係，以及導覽、分類與必要的麵包屑如何幫助定位。網站可有階層，也可有跨分類與任務連結，不一定是一棵嚴格的樹。尚未確定的架構也能透過草圖與測試繼續釐清，不必等所有問題有答案才動筆。 延伸可參考網站架構圖規劃全攻略、設計思考五步驟。

畫線框圖的六步流程

從空白頁到可交接的線框圖，可依六個步驟整理需求、內容、層級、互動、例外狀態與驗證；實際順序可依專案風險與既有設計系統調整。結構已由成熟模板確定的簡單頁面可以縮短流程，涉及新產品或複雜任務時則應保留研究與測試。

1. 列出主要任務：說明服務誰、要完成什麼，也記錄必要的次要任務。
2. 整理內容與優先順序：列出素材、關係與前置資訊，不只把最重要的都塞到頂部。
3. 比較版面方案：用紙筆或工具畫出足以比較的方向，數量依問題決定。
4. 補足代表性內容：加入欄位、比例、長短文字與必要註解，細節以能做決策為準。
5. 檢查不同使用情境：測試目標視窗、內容順序與操作，不把桌機縮小當作完整手機版。
6. 走查與交接：記錄行為、錯誤、未決事項及版本，依需要進行使用者測試。

例如室內設計網站，可把「先看作品分類」與「先看大型輪播」畫成兩個方案，依使用者任務比較。哪個更合適要靠內容與回饋判斷，不能假設所有訪客都只有一種需求，也不能預先承諾草圖省下固定工時。

快速走查可以請未參與設計的人說明頁面用途與下一步，找出資訊層級的疑點。這只是早期線索；一個同事在三十秒內答對，不代表目標使用者已能完成任務，更不能替代正式測試。

依主要使用情境決定先畫手機還是桌機

若主要任務發生在手機上，可先從窄版探索內容排序；桌面工作流程或特殊裝置也可能值得先測。用本站資料與研究決定順序，仍要涵蓋重要的其他情境。

窄版能促使團隊面對空間限制，但桌機不一定只是把手機內容攤開。多欄比較、鍵盤操作與複雜工作區可能需要不同安排；兩種情境應依任務共同驗證。 延伸可參考響應式網頁設計 RWD、Figma 響應式設計教學。

還有兩個手機版細節，建議在線框圖就標進去。一個是觸控目標的大小：點擊範圍太小，容易造成誤觸或點不到。另一個是單手操作的可及性：主要行動是否放在容易觸及的位置，要依頁面捲動、固定導覽與使用情境測試，不能只用「螢幕下半部一定比較好點」當作通則。這些都屬於結構層級的決定，越早標示，設計與開發越有共同依據。

線框圖階段就該埋下的轉換與效能伏筆

線框圖階段可以先討論 CTA、流程與媒體空間，減少後續遺漏。這些工作也能在既有網站持續改善，並非錯過線框階段就無法調整。

一條是轉換動線。你的主 CTA 放在什麼位置、一個頁面上同時存在幾個競爭注意力的按鈕、使用者從進站到完成目標要經過幾個決策點，這些都是線框圖層級的決定。CTA 的設計心理學與擺放策略，CTA 行動呼籲按鈕設計終極指南講得很深入；而把整個頁面的轉換邏輯串起來的系統性做法，Landing Page 轉換率優化全攻略是很好的延伸。在線框圖階段把這些動線畫對，後面的視覺與文案才有施力的地方。

Core Web Vitals 衡量載入、互動反應與視覺穩定，Google 的排名系統會使用這些訊號，但好數值不保證名次。線框圖可標註媒體空間與載入需求，實際 CLS、LCP、INP 仍由正式內容與實作量測。

可為圖片標示適用的比例或響應式規則，並呈現內容層級。這些資訊幫助開發理解預期，但仍需量測是否改善；Search Console 可觀察搜尋與有資料時的體驗指標，站內任務則需其他分析與測試。 延伸可參考排版設計實戰技巧、Google Search Console。

首屏的內容決策也會影響載入感受。LCP 衡量視窗內最大合格內容元素完成繪製的時間；大型首圖或輪播可能成為 LCP 元素，但瀏覽器會依實際渲染結果判定，不是線框圖直接指定。線框圖可以先標示首屏媒體的尺寸、必要性與載入優先級，再由開發端用真實內容和工具驗證，避免把關鍵資訊綁在過大的資源上。

工具挑選：能配合你團隊節奏的，就是好工具

選工具時比較編輯、協作、版本、資料權限與交付方式。下表列的是常見取捨，不是所有工具的固定能力或成本排名。

協作時要能辨認目前版本、留下回饋並保留重要決策。可以用雲端工具，也可用檔案與既有協作流程；選擇取決於權限、資料需求、預算與團隊，不必把多人協作等同一定使用同一款雲端軟體。

如果你是設計新手或在帶小團隊，可以從紙筆起步，中保真以後再進專業軟體。Figma 是常見的協作選擇，Figma 中文完整教學可以帶你從零開始上手；想加速結構排版，也可參考Figma 外掛整理。若要用頁面編輯器同時完成線框圖與實際頁面，要留意團隊是否過早把時間花在顏色與字體，而忽略結構仍待驗證。如果才剛起步，免費 UIUX 自學資源是可用的起點。

五個新手最容易踩的線框圖地雷

以下列出幾種可能讓討論失焦的情況，以及可調整的方法。它們是檢查提示，不是每個專案都要遵守的固定流程。

線框圖可以在專案中持續更新，但不必為了完成文件而打磨無關細節。當目前問題已能用它討論，就安排下一輪測試、視覺或技術工作；新增證據也可以讓結構重新調整。

增加細節前，先問它會不會改變這次的判斷。對圖片辨識或品牌信任的問題，真實視覺可能必要；只討論欄位順序時，簡化畫面可能更適合。依目的控制投入，而不是一律禁止顏色和圖片。

從線框圖走到下一步：交接與行動清單

交接前核對內容、媒體、CTA、互動與響應式規則，並附上未決事項、確認範圍和版本。設計、內容與開發仍應一起檢查可行性；文件的作用是讓討論有共同依據，不是保證後面不會再有問題。

如果你一路讀到這裡，這裡給你一個立刻能做的行動方案，不要等到下次專案才開始：

1. 選一個重要頁面，列出使用者任務與目前不確定的地方。
2. 用紙筆或工具比較足夠的版面方向，加入代表性內容。
3. 用七類內容清單核對適用項目，不為了清單硬加元件。
4. 檢查手機與其他重要視窗的閱讀和操作；CTA 放在使用者有足夠資訊做決定的位置。
5. 找人走查並記錄疑點，必要時讓目標使用者完成任務；不要把限時答題當成唯一過關標準。

線框圖真正能教會你的，不是怎麼畫方框，而是一種紀律：在衝動去做之前，先停下來把「為誰做、做什麼、怎麼排」這幾件事想透。這個習慣一旦養成，受益的不只是設計，連你規劃內容、規劃產品、甚至規劃一個專案的思路都會跟著變清楚。想把這套思路延伸到完整的網頁設計能力上，可以順著網頁設計自學路線圖往下走；如果你正在為自己或公司打造對外的門面，作品集網站設計指南裡的結構觀念，也能套用同一套線框圖方法。工具會換、流行會過，但「先把骨架想清楚再填血肉」這個原則，放諸任何專案都成立。現在就挑一個頁面，拿起筆，畫下你的第一張草圖吧。