做網站時，很多人第一個想討論的是風格：要簡約還是活潑、主色用什麼顏色、喜歡哪個參考網站。但設計稿做出來之後，最常被要求修改的，往往不是顏色，而是「這段可以往上移嗎」「這裡少了價格」「聯絡按鈕找不到」。
這些其實都是內容和順序的問題，如果在設計之前就先確認，可以省下很多來回。線框圖就是用來做這件事的。這篇說明線框圖是什麼、跟設計稿和原型差在哪、為什麼要先畫，以及怎麼自己畫一張。
線框圖是什麼？
線框圖就像蓋房子前的平面圖。平面圖不會畫出窗簾的花色、牆壁的顏色，只標出客廳在哪、廚房多大、門開在哪裡。格局確定了，再來挑家具和配色。
網頁的線框圖也是一樣，通常只有：
- 灰色方框：代表圖片、影片的位置
- 標題和簡短文字：代表這個區塊要說什麼
- 按鈕：標出要讓客人點什麼、點了去哪裡
- 區塊順序：從上到下，客人會依序看到什麼
刻意不放顏色和正式圖片，是為了讓討論集中在「內容和順序對不對」，而不是被「這個綠色好像太亮」帶走注意力。
線框圖、設計稿、原型差在哪？
做網站的過程中，常會聽到這三個詞。它們是同一個網頁在不同階段的樣子：
| 線框圖 | 設計稿 | 原型 | |
|---|---|---|---|
| 長什麼樣子 | 灰色方框和文字，像草圖 | 有顏色、字型、照片，看起來像完成的網頁 | 可以點擊、滑動，接近真正的網站 |
| 決定什麼 | 放什麼內容、順序怎麼排 | 視覺風格、品牌感 | 操作流程順不順 |
| 修改成本 | 最低，幾分鐘就能改 | 中等 | 較高 |
| 什麼時候用 | 規劃階段 | 設計階段 | 設計後、建置前 |
順序通常是：先有網站地圖（網站有哪些頁面），再畫每一頁的線框圖，確認後做設計稿，最後做成可以操作的原型或直接建置。網站地圖怎麼列，可以參考〈網站要有哪些頁面？〉。
線框圖也有粗細之分，常見的分法是低保真、中保真、高保真三種：低保真只畫版面和導覽，可以用白板或紙筆快速畫；中保真加入註解和比較完整的內容；高保真則接近設計稿，會放上字型、顏色和 Logo。一般品牌網站的規劃，畫到低保真或中保真就很夠用了。
為什麼要先畫線框圖？4 個理由
1. 改起來最便宜
在線框圖上把一個區塊往上移，只要拖一下；在設計稿上移，要重新排版、調整間距；網站做好之後再移，可能牽動整頁的結構。越早發現問題，修改的成本越低。
2. 討論會聚焦在內容
沒有顏色和照片，大家只能討論「這裡要說什麼」「這個順序客人看得懂嗎」，這正是網頁能不能帶來詢問的關鍵。視覺風格留到下一步再談。
3. 提早發現缺了什麼素材
畫線框圖時，每個方框都要寫清楚放什麼。畫到一半就會發現：「客戶評價區塊，我們好像沒有評價可以放」「團隊照片還沒拍」。這些缺口越早知道，越有時間準備，不會等到設計好了才卡住。
4. 讓多位決策者先對齊
公司裡如果有老闆、業務、行銷好幾個人要看網站，各自的期待常常不一樣。先用線框圖確認「首頁要先講服務還是先講品牌故事」，比做完設計稿再推翻省事得多。做網站前要先想清楚哪些問題，可以參考〈做網站前先釐清商業目標〉。
線框圖要用真的內容，不要只放假文字
很多線框圖會用「標題文字標題文字」或一段英文假文字（lorem ipsum）填滿版面，看起來整齊，但會藏住問題。
尼爾森諾曼集團（NN/g）在 2024 年的文章就提到，線框圖裡的假文字容易讓使用者和決策者看不懂，也讓需求和限制拖到後期才被發現；他們強調的是：要讓內容引發回饋，而不是版型。
實際做法很簡單：線框圖上的標題和說明，盡量寫成接近真的版本。例如不要寫「服務介紹」，而是寫「三種方案：一頁式、形象官網、電商網站，各附一句適合誰」。這樣看線框圖的人才能判斷：這句話客人看得懂嗎？這裡放三個方案會不會太多？
文案還沒定稿也沒關係，寫出重點就好。重要的是讓每個區塊「要說什麼」具體到可以討論。
自己畫一張首頁線框圖：5 個步驟
就算之後是請人做網站，自己先畫一張首頁線框圖，也能讓第一次開會更有效率。工具不重要，紙筆、簡報軟體、Figma 都可以。
- 寫下首頁的任務：用一句話說明，客人看完首頁要做什麼。例如「讓客人預約免費諮詢」或「讓客人點進商品頁」。
- 列出客人會問的問題：你是誰？賣什麼？跟別人有什麼不同？價格大概多少？怎麼聯絡？每個問題對應一個區塊。
- 排順序：最重要的放上面。第一屏通常是「一句話說清楚你在做什麼＋一個主要按鈕」，接著是服務、作品或評價、常見問題，最後是聯絡區塊。
- 每個區塊寫出標題和重點：用前面說的方式，寫成接近真的內容；圖片的位置畫方框，寫上「門市外觀照」「三款熱賣商品」這類說明。
- 用手機的比例再畫一次：手機上區塊會變成由上往下一條，左右並排的內容會被拉長。確認手機上前幾屏也看得到重點和按鈕。
畫完之後，拿給一位不熟悉你生意的朋友看，請他說說這個網站在賣什麼、他會點哪裡。說不出來的地方，就是要再調整的地方。
AI 時代，還需要線框圖嗎？
現在用 AI 工具輸入幾句描述，就能直接產生一個看起來很完整的網頁，好像可以跳過線框圖。
但 NN/g 在 2025 年測試 AI 原型工具的文章指出，AI 產出的原型雖然外觀像完成品，實際上多半像未打磨的線框圖：視覺層級、分組、間距常常有問題，也缺乏判斷取捨的能力。他們也建議，展示 AI 原型時要先說明它還沒完成，避免大家太早討論按鈕顏色這類細節。
所以 AI 改變的是線框圖的「畫法」，不是它的「目的」。用 AI 快速產出幾個版面當作討論起點很有效率，但「這一頁要說什麼、什麼順序」這個判斷，還是要由了解生意的人來做。AI 做的網站為什麼容易長得很像，可以參考〈AI 做的網站會很制式嗎？〉。
在 basedot 的流程裡，規劃階段會先列網站地圖和首頁區塊規劃，接著做成可以在手機上直接滑的首頁雛型，讓你在設計還能調整的時候，就先確認內容和順序。完整步驟可以看〈basedot 網站建置流程公開〉。
線框圖常見問題
線框圖一定要用專業軟體畫嗎？
不用。紙筆、白板、簡報軟體都可以，重點是把區塊和內容寫清楚。要給設計師看的話，拍照或截圖就夠了。
每一頁都要畫線框圖嗎？
不一定。首頁和最重要的轉換頁（例如服務頁、商品頁、預約頁）最值得畫。其他結構相似的頁面，可以共用同一種版型。
已經有自己畫的線框圖，找人做網站會比較快嗎？
通常會。有現成的線框圖，設計師可以直接在這個基礎上延伸，規劃和設計的時間都會縮短。一頁式網站約 1～2 週、形象官網約 2～4 週、電商網站約 1～2 個月，有 AI 協作可以再縮短；事先把內容和順序想清楚，是讓時程不拖延最有效的方式之一。
線框圖和 UI 設計是同一件事嗎？
不是。線框圖決定內容和順序，屬於比較前面的規劃；UI 設計處理的是顏色、字型、按鈕這些視覺和介面細節。兩者的關係可以看〈UI 和 UX 是什麼？〉。
結論：先畫骨架，再談長相
線框圖是網頁的骨架草圖，用最便宜的方式，先把「放什麼、怎麼排」決定好。它讓討論聚焦在內容，提早發現缺少的素材，也讓多位決策者在設計之前就先對齊。
不管是自己做網站還是請人做，花一點時間先畫一張首頁線框圖，寫上接近真的內容，用手機比例再看一次，之後的設計和修改都會順很多。
有架設網站的需求，歡迎跟 basedot 網頁設計聯繫。
