線框圖與原型怎麼看：視覺定稿前該確認的版面與動線重點

很多客戶第一次拿到線框圖時反應都差不多：「怎麼是黑白的、這麼陽春？」線框圖（wireframe）是刻意做成灰階的版面骨架，先把哪裡放什麼、按鈕擺哪定下來，不糾結顏色字體；互動原型（prototype）則是可點擊的版本，用來驗證流程順不順。 元伸科技 24 年、服務超過 3,000 家企業客戶的經驗裡，能不能在線框階段把結構確認好，幾乎決定了整個專案順不順。

問題是，多數企業主沒被教過「線框圖要看哪裡」。看到灰撲撲的版面，不是草草過關，就是開始問「能不能換成藍色」，兩種都會讓你錯過線框真正的價值。這篇用顧問角度，講清楚定稿前該盯哪幾件事。

線框圖、視覺稿、互動原型，到底差在哪

這三個常被混為一談，但用途完全不同。搞清楚差別，你才知道每個階段該確認什麼、該放過什麼。

簡單記：線框看「對不對」，視覺看「美不美」，原型看「順不順」。 把這三件事擠在同一階段一起確認，是我看過最常見、也最拖垮專案的做法。

為什麼非要在線框階段確認不可

講白一點，這完全是成本問題。

線框圖的本質是「可以隨便改」。設計師把一個區塊從上面拉到下面、把側邊欄拿掉，可能只是幾分鐘的事，因為上面沒有顏色、圖片、精緻排版要重做。但同樣的調整若發生在視覺稿完成後，意義就完全不同：配色要重來、間距要重抓、圖片要重裁，甚至切版工程都得跟著動。

實務上常看到：客戶在線框階段隨口說「都可以」，等視覺稿出來、看到漂亮的成品才反應過來「我的最新消息怎麼藏這麼深」「詢價按鈕怎麼要滑很久才看到」。這時候要改，等於把上好妝的版面打掉重畫，時間費用都翻倍，雙方還容易為了「這算不算當初講好的範圍」起爭執。

所以我會直接跟客戶說：線框階段是你「最便宜的反悔權」，這時候多花半小時認真看，比完稿後再改省下的時間多太多。 想完整理解設計從無到有的流程，可參考網站設計入門指南。

看線框該盯哪四件事

線框圖打開後，眼睛該往哪放？我整理成四個重點，照這順序看就不會漏。

第一，資訊層級。 你最想讓訪客看到的東西，有沒有放在最顯眼的位置？常見的錯是把公司沿革、董事長的話放在首頁正中央，把產品、服務、聯絡方式擠到角落。先問自己：一個第一次來的訪客，三秒內能不能搞懂「你是做什麼的、為什麼該找你」。

第二，瀏覽動線。 想像真實訪客從首頁進來，要怎麼一步步走到「填表詢價」或「下單」？這條路徑有沒有斷掉、繞遠路、卡在哪一頁出不來？動線是網站的骨幹，跟網站導覽列與資訊架構的規劃直接相關，線框階段就是檢查動線最好的時機。

第三，CTA 按鈕位置。 「免費諮詢」「立即購買」「索取報價」這類行動按鈕，在每個關鍵頁面是不是都好找？訪客會不會讀完一段很想行動，卻找不到按鈕？好的線框會讓 CTA 在該出現的地方自然出現。

第四，RWD 折疊行為。 這點最容易被忽略。同一個版面在手機上不是直接縮小，而是會「重新堆疊」：原本左右並排的兩欄，在手機上變成上下排列。所以要確認：手機版哪個區塊先出現、哪個被往下推？折疊順序直接影響手機訪客先看到什麼，而現在多數流量都來自手機。

企業主在這階段最常踩的三個坑

看過夠多案子，會發現大家踩的坑驚人地一致。

坑一：跳過線框，直接要看「美美的視覺稿」。 很多老闆覺得線框沒什麼好看，要設計公司「直接給我看成品」。結果在錯誤的結構上花大錢做精緻設計，等發現結構有問題，已經砸了一堆工，捨不得改也改不動。

坑二：在線框階段糾結顏色和字體。 跟上一坑剛好相反。設計師給灰階就是要你專注結構，你卻一直問「能不能換成企業藍」「標題字能不能大一點」。這些視覺階段再談都來得及，現在糾結只會模糊掉真正該確認的動線與層級。看灰階版面其實是一種訓練：強迫你用結構而非美感做判斷。

坑三：沒有人負責拍板。 一份線框丟到群組裡，業務說要這樣、行銷說要那樣、老闆又有別的想法，最後沒人做最終決定，這是專案拖延的頭號原因。我會建議開始前就講清楚：誰是最終決策者，線框由他簽字確認，確認後就往下走。 沒有這個角色，後面每一步都會反覆。

關於設計流程怎麼走、各階段該交付什麼，可延伸看網頁設計流程指南。

我的建議：用線框對齊共識，再進視覺

串起來，我給客戶的核心建議就一句話：先用線框把「結構共識」談定，再進視覺設計。

這個順序的好處是把「結構爭議」和「美感爭議」分開處理。結構在便宜的線框階段吵完、定案，視覺階段就能單純聚焦在好不好看、像不像你的品牌。對需要客製化規劃的案子來說，這套先骨架後血肉的節奏更重要，可參考客製化網站設計的 UIUX 流程；想了解客製化從需求到上線的完整環節，客製化網頁設計的八個階段也值得一看。

至於互動原型要不要做，判準很簡單：有多步驟流程的就做，純資訊型官網通常不必。 線上預約、會員註冊、結帳這種一步接一步的流程，原型能在開發前就抓出「使用者會不會卡住」；但若只是讓訪客看公司介紹、產品、聯絡方式，把線框動線標清楚通常就夠，不用每個案子都堆高擬真原型墊高成本。

結語：定稿前先把結構談清楚

線框圖不是給你看「漂不漂亮」的，而是讓你在最便宜的階段把結構與動線拍板。根據元伸科技 24 年的經驗，記住這 3 點：

1. 先看對不對，再看美不美：線框確認結構與動線，顏色字體留到視覺階段再談，順序別顛倒。
2. 盯緊四件事：資訊層級、瀏覽動線、CTA 位置、RWD 折疊行為，這四項在線框階段確認最省錢。
3. 指定一個拍板的人：線框由最終決策者簽字確認，沒有這個角色，後面每一步都會反覆。

下次拿到線框圖時，先別急著問顏色，花十分鐘照上面四件事走一遍，你會發現該問的問題完全不一樣。需要有人陪你一起看結構、釐清動線，元伸科技很樂意聊聊。

電話 03-366-1000 ｜
免費諮詢・24hr 回覆