如果你曾和一些網站設計公司討論過全新設計或重新設計的網站專案，你應該會有相當高的機會在討論的過程中聽過「 Wireframe 」這個名詞。「 Wireframe 」是指單純用非常基本的線框來呈現網站或 App 的版面設計，沒有顏色、沒有圖片，甚至在某些情況中，也沒有文字。
那為什麼使用這些線條框架來設計後續的版面是重要的呢？為什麼我們不能跳過這些步驟直接用一些好的圖文和好看的細節來完成設計？當剛開始一個全新的設計專案時，讓進度看起來很快是很容易的，但某些必要的步驟對於專案最後的成功卻是重要的。
下列幾點是為何 Wireframe 在網站設計過程中是一個明確且重要的步驟：

- Wireframe 可以創造出階層

當剛開始一個網站設計專案，你手邊會有一長串的要素和內容需要被包含進網站中，當你從「 Wireframe 」著手，設計人員會依此規劃出一系列包含必要元素與內容的頁面，進而在視覺上帶來階層性。通常當客戶看到這些 Wireframe 頁面，也可以比較容易的去辦別哪些元素的重要性是更高的。它也許會來來回回調整個幾次，但當你們最後將 Wireframe 定案時，網站將會有一個架構伴隨著被每個頁面與元素被明確定義好的階層性。

- Wireframe 可以協助定義特點與功能

如同先前提及，在開始網站設計專案時，通常都會有一長串的要素和內容需要被包含到設計考量中，而 Wireframe 可以幫助設計人員決定哪個頁面需要包含什麼特點，而這些特點的功能與元素又是什麼。
我們常會聽到客戶提到要一個 Blog 或是行事曆，但光是 Blog 或行事曆就可以有很多種外觀樣式與功能。畫出 Wireframe 可以幫助客戶與設計團隊更明確的定義出哪一種 Blog 或行事曆是更適合他們的目標使用者的。

- Wireframe 可以透過版面的討論決定使用者體驗

當略過了 Wireframe 的步驟，設計人員會容易專注在一些可以讓網站看起來更好看的小細節上，而遺漏掉易用性與功能性。當在評估著顏色、圖像和一些視覺設計細節時，設計人員幾乎只關注在版面的視覺元素上。
但設計人員關注的焦點，應該是放在如何透過設計帶來最好的使用者體驗。伴隨著以使用者為中心的設計架構，設計人員才有機會設計出兼具視覺美感與功能性的網站。

- Wireframe 可以節省時間

更動 Wireframe 上的版面設計一定比更動直接進入視覺設計階段的版面來得容易。當專案隨著 Wireframe 把版型與各特點的基本功能確定下來，設計人員就可以全心進入視覺設計，並減低日後大幅度變動的可能性。

- 「 Wireframe 」創造出次序

直接進入視覺設計階段很容易讓專案變得混淆。當設計人員手上有一長串的需求要考量，設計人員很容易就會忘了一些項目或是把一些項目放在錯的位置，或甚至將其實不需要的製作特點也給包含進來。而 Wireframe 可以為這些混亂帶來先後次序，當一天結束後，設計人員將會有一份可靠的版型來進行後續的視覺設計，而且更重要的是，參與的人員會都會因此有更進一步的共識。
Wireframe 可以減輕後續在視覺設計階段可能發生的頭痛問題。目前已有不少 Wireframe 的規劃工具，像是 balsamiq 或 sketch。一般而言，設計人員會用 Photoshop 或是 Illustrator 來作最後的 Wireframe ，但有時最傳統的鉛筆反而是最好用的工具。