設計實務

線框圖 wireframe 是什麼？做電商網站前的第一張草圖

2026年8月9日・ViewInternet 編輯部

很多人以為做網站就是找設計師把畫面弄漂亮，其實在漂亮之前，還有一個常被跳過卻很關鍵的步驟——畫線框圖。線框圖英文叫 wireframe，是一張刻意不談顏色與美感的黑白骨架圖。它決定了每個區塊放什麼、擺哪裡、誰先誰後。這一步做不好，後面畫得再美都是在錯的結構上塗脂抹粉。這篇用最白話的方式，把線框圖講清楚。

線框圖到底是什麼

線框圖是網站正式進入視覺設計前的一張結構草圖。它用方框、線條與簡單的文字，把一個頁面該有的元素通通排出來——標題放上面、主圖佔多大、賣點分幾塊、按鈕擺哪個位置、下面接評價還是接推薦商品。整張圖通常只有黑白灰，沒有真正的照片，也沒有品牌色，因為這個階段要專心處理的是結構與順序，而不是好不好看。

刻意拿掉顏色與美感，其實是線框圖最聰明的地方。當一張圖已經很漂亮時，大家看的都是配色與字型，很難有人願意去質疑「這個區塊是不是根本不該放這裡」。線框圖故意長得樸素，逼所有人把注意力放回真正重要的問題——這一頁要幫客人完成什麼、資訊的先後順序合不合理、動線順不順。

線框圖和設計稿差在哪

線框圖和設計稿是兩個不同階段的東西，常被混為一談。設計稿是上了色、放了真圖、套了品牌字型的完整畫面，看起來就接近最終成品。線框圖則是它的前一步，只處理骨架。用蓋房子來比喻，線框圖是結構圖與隔間規劃，設計稿是貼了磁磚、選好家具、打好燈光的實景。你不會在還沒決定隔間前就先挑窗簾顏色，做網站也是同樣道理。

先畫線框圖的最大好處是改動成本低。在黑白骨架階段要把某個區塊往上移、或是砍掉一個沒必要的欄位，動幾條線就好。但如果同樣的調整發生在已經完稿的設計稿上，往往要重排整個畫面、重切圖、重對齊，耗掉好幾倍的時間。把該吵的結構問題在線框圖階段吵完，正式設計才會又快又順。這也是完整電商網站設計流程裡不可省的一環。

電商為什麼一定要先畫線框圖

電商頁面的區塊特別多，主圖、賣點、規格、尺寸表、評價、運費說明、加入購物車按鈕全都要塞進來，而且每一塊的先後順序直接影響會不會有人下單。如果沒有先用線框圖把順序排好，很容易做出一種頁面——東西全都有，但客人滑到一半就找不到重點，也不知道下一步該按哪裡。線框圖的價值就是在花大錢做設計之前，先用最便宜的方式把這條動線驗證一遍。

線框圖也是團隊溝通的共同語言。老闆、設計師、工程師與行銷對「首頁該長怎樣」腦中各有一張圖，光用嘴講永遠對不齊。把線框圖攤在桌上，大家指著同一張圖討論「這個活動banner要不要這麼大」「評價是不是該往上搬」，才不會等到設計稿都完成了才發現方向根本不同。想理解單一頁的區塊順序怎麼安排，可以延伸看商品頁設計這條說服動線。

一張好用的線框圖要做到哪些事

好的線框圖不追求精緻，但要把該講清楚的講清楚。第一是層級分明，用方框大小與位置就能看出誰是主角、誰是配角，主圖與主按鈕一眼就跳出來。第二是內容具體，標題欄位不要只寫「標題文字」，而是放上接近真實的字句，這樣才驗得出實際內容長度會不會撐爆版面。第三是動線完整，從進頁到按下購買，每一步該出現什麼、往哪裡去，都能在圖上走得通。

第四是手機版一起畫。電商七成以上是手機流量，只畫電腦版的線框圖等於漏掉主場。手機螢幕窄，區塊要重新排隊，哪些收進選單、哪些直接露出，都得在線框圖階段就想清楚。第五是留白有規劃，就算是黑白骨架，也要標出區塊之間該有的呼吸空間，免得正式設計時大家把版面塞到滿。這幾件事顧到，線框圖才真的省時間，而不是多一道無用的手續。

沒有設計底子也能畫的做法

線框圖不需要美感，所以沒設計背景的人也畫得出來。最土法煉鋼的方式就是拿紙筆，把一頁分成上中下，一個區塊畫一個方框、寫上要放什麼，先求把順序排出來。想更整齊一點，可以用免費的線上白板或簡報軟體，用現成的方框與文字排版，改起來也快。重點從頭到尾都不是畫得多好看，而是逼自己把每一頁的目的與順序想過一遍。

如果你正打算做新站或改版，卻不知道從哪裡下手，先別急著找人套版型。ViewInternet 電商裝修師的官網設計與改版服務，每一案都從線框圖開始——先把你這門生意最該突出的東西、客人最在意的疑問、以及下單的關鍵動線，用黑白骨架一頁一頁排清楚，確認結構對了才進視覺。把想改的頁面傳給我們，先幫你把骨架盤一遍。