線框圖（Wireframe）

線框圖和設計稿有什麼不同？

線框圖是決定「什麼東西放在哪裡」的階段，設計稿則是決定「要呈現成什麼樣子」的階段。線框圖上只有灰色方塊和預留的文字位置，設計稿才會放進顏色・照片・字體。

之所以分成兩個階段，是因為修改的成本不一樣。調整方塊順序只要幾分鐘，但設計稿出來之後才改順序，連照片大小和留白都得重新調整。

站在老闆的角度，看線框圖時覺得沒有顏色、空空的，是很正常的。這個階段只看方塊的順序和大小，風格氛圍的討論留到設計稿階段，意見會整理得清楚很多。

也有些製作公司不另外安排線框圖階段。這時第一版設計稿會同時扮演線框圖的角色，所以拿到第一版設計稿時，建議先確認順序，再看顏色。

線框圖裡面要放哪些內容？

線框圖裡要有頁面清單、每個頁面的區塊順序、按鈕位置，以及頁面之間怎麼連過去的路徑。不需要會畫畫，在方塊裡寫上「主打照片」、「價目表」這類名稱就夠了。

像預約或訂購這種會經過好幾個畫面的流程，最好在畫面之間畫上箭頭。這種把畫面和流程一起畫出來的圖，有時也叫做「Wireflow（線框流程圖）」。

文字位置最好大致配合實際要放的句子長度。原本只留一行的位置，結果塞進五行的介紹，到了設計稿階段版面又會跟著亂掉。

就算是往下捲一頁到底的一頁式網站，線框圖也很有用。因為即使只有一頁，從上往下的順序就是客人瀏覽的路線。

• 頁面清單：像首頁・關於我們・菜單・交通資訊這樣，有哪些頁面、總共幾頁
• 區塊順序：同一頁裡從上到下依序出現什麼
• 行動按鈕：電話・預約・詢問按鈕放在哪裡、出現幾次
• 移動路徑：按下按鈕後會到哪個畫面
• 手機版配置：電腦上左右並排的欄位，在手機上會以什麼順序往下排

線框圖要怎麼自己畫？

只要一張紙和一支筆，30分鐘內就能畫出草稿。順序先定好，第一次和製作公司諮詢的時間就會縮短很多。

圖不用畫得很漂亮。製作公司看的不是畫功，而是「什麼先出現」和「什麼一定要有」。習慣用電腦的話，在簡報軟體裡擺方塊也可以，把紙上畫好的圖拍照傳過去也完全沒問題。

1. 01寫下客人打電話或傳訊息時最常問的5個問題。
2. 02列出能回答這些問題的頁面清單。小店家很多時候一頁就夠了。
3. 03畫一個手機螢幕大小的直長方形，依重要程度從上往下，用方塊填入各個問題的答案。
4. 04決定客人最後要做的動作（預約・打電話・查路線），畫出按鈕方塊。
5. 05截圖其他喜歡的店家網站，寫上「這部分的順序很好」貼在旁邊。
6. 06把畫好的圖拍照傳給製作公司，一起確認有沒有漏掉的資訊。

不同行業的網站首屏順序要怎麼排？

首屏的順序與其說看行業，不如說取決於「客人一進來最想先知道什麼」。同樣是美髮店，預約客多的店和路過走進來的客人多的店，順序就不一樣。

下面的例子只是起點。實際上，依照店裡最常被問到的問題來調整就可以了。

如果很難決定順序，可以把打到店裡的電話記錄一個星期看看。最常被問「開到幾點？」就把營業時間往首屏移，常被問「可以停車嗎？」就把停車資訊往上放。

• 美髮店：主打髮型照片 → 設計師介紹 → 各項服務價格 → 預約按鈕 → 位置・停車
• 手作工坊：主打作品照片 → 課程種類與時間 → 學費 → 報名按鈕 → 學員評價
• 餐廳：招牌菜照片 → 營業時間・公休日 → 菜單 → 團體訂位詢問 → 地圖
• 皮拉提斯・瑜珈：上課氛圍照片 → 課程種類 → 課表 → 體驗課報名 → 老師介紹

手機版線框圖需要另外看嗎？

需要，手機畫面的順序最好另外確認。電腦上左右並排的欄位，到了手機會變成上下堆疊，哪一欄先出現，會讓客人看到的順序完全不同。

Google說明過，建立搜尋索引時主要是以行動版頁面為準。所以從一開始就一起設計，避免重要內容在手機畫面上不見或被藏起來，會比較保險。

看手機版線框圖時，只要確認預約・電話按鈕是不是放在大拇指好按的位置，以及是不是要捲很久才看得到價格。

看手機版線框圖時，也要確認不用捲動就能看到的首屏範圍。首屏裡要同時有店名和這家店是做什麼的，客人才不會馬上離開。

線框圖階段常犯哪些錯誤？

最常見的錯誤是線框圖隨便帶過，到了設計稿才回頭改順序。這樣修改次數和時程都會跟著增加。

另一個是把想放的內容全部塞進首屏。首屏是客人判斷「這裡是不是我要找的地方」的位置，資訊減到3~4項，反而更好讀。

相反地，頁面切得太細也是常見的錯誤。小店家的資訊一旦分散在好幾個頁面，客人在選單之間來回切換時很容易就離開了，所以集中在一頁、上方放快速連結按鈕，很多時候效果更好。

線框圖階段要問製作公司哪些問題？

簽約前或第一次開會時問清楚下面四件事，修改次數和時程就會很明確。

• 有沒有獨立的線框圖階段，還是直接進入設計稿
• 線框圖階段的修改，是否算在總修改次數裡
• 會不會一起提供手機畫面的配置
• 線框圖確定之後再改順序，會怎麼處理