英文原文：smashinghub，翻譯：雷鋒網
線框圖是一個視覺化的導圖，可以用其來詮釋出一個網站的龍骨，同時也可以稱其為一個頁面的示意圖或螢幕的藍圖。線框圖非常容易建立和進行有必要的修改。幫助設計師以低成本且高效率來進行迭代設計。
為了對線框圖進行更好的設計與修改，我們會選擇一些優秀的工具，當然少不了的就是Axure、MockFlow以及Balsamiq Mockups等。
在設計初期，你可以在紙上或白板上繪製基本的草圖，來幫助完成一些使用者介面和任務流程概念。這些型別的線框圖可以很好滿足小型的專案，使你可以直接開始進入到開發的階段。但是，對於大多數的專案，我們就必須藉助一些設計軟體的幫助，如Adobe Illustrator，Visio或OmniGraffle。
這些線框圖具有非常高的價值，因為它們便於修改，也可以使設計團隊更容易的在專案中進行溝通和管理。
一個線框圖成品所顯示的網頁佈局樣板
為了做出一個優秀的線框圖和網頁草稿，我們可以考慮從以下10個優秀的工具中做出選擇，幫助你進行網頁頁面創作、線框圖草圖設計：
Axure是一款非常適合設計師的工具，它能夠建立線框圖、設計流程圖、進行互動設計、自動輸出網站原型、自動輸出word格式規格檔案。擁有現成的部件包括按鈕，表單域，形狀和動態元素，您可以選擇在一個自己熟悉的環境下進行編輯，甚至你可以建立自己的自定義widget庫。
感興趣的童鞋可以試著學習使用一下
Windows版：http://axure.cachefly.net/AxureRP-Pro-Setup.exe
MAC版：http://axure.cachefly.net/AxureRP-Pro-Setup.dmg
Axure6.5漢化語言包下載地址：http://www.axure.us/283/
MockFlow是一款很優秀的工具，類似於 Axure ，不過它是一款完全基於Web瀏覽視窗的產品原型製作工具，可以幫助你對自己的軟體使用者介面以及在網頁重構時進行設計和實時協作。它配備了大量的內建元件和圖示，如按鈕（Button）、圖片（Image）、文字皮膚（Text Panel）、下拉式選單（Droplist）、進度條（ProcessBar）等等。
使用Balsamiq Mockups就像是進行數碼繪畫，但有略有不同。你可以輕易的進行調整和重新編排，最終的結果就像是一幅賞心悅目的塗鴉，除了真實的紙筆，目測它是最方便的工具了。軟體帶有75個預置控制可供選擇，你可以用它設計出一個超級簡單的對話方塊。也可以用它設計出任何一個成熟的應用程式，無論是一個簡單的網站，還是一個富網際網路應用都可以用它來完成。
作為一款免費的Firefox外掛，這款工具具備一些關鍵的功能，如內建的模板，支援多頁檔案，以及多個匯出選項。雖然簡單但是非常實用，適合繪製一些簡單的介面（這當然不包括那些愛好用wrod繪製高達的軟體使用者）。
這是一個完全基於Web的設計工具，有很多實用的功能，包括讓各個專案可以進行拖放以及便於對整個設計進行規塊化管理。同時它也支援實時協作。
這個工具也是基於Web，可以把多個版面編排在一起，以幫助你連線多個實體模型。（在這裡提一下，開發這個工具的是一男一女兩個印度人）
這是一個很酷的線上繪圖工具，可讓你繪製不同型別的圖表，如網站地圖，線框，UML圖和網路圖。
ProtoShare是一個十分便捷的線上原型製作工具，側重於團隊協作。團隊成員可以通過這個工具對工作進行審查，並及時提供反饋，對線框圖或內容進行建議.
iPlotz是一個很棒的工具，可以讓你快速允許您為網站和應用軟體快速的建立可點選的原型，導航，頁面排版和線框圖。
這是一個Mac OS的應用程式，擁有的各種工具，可以讓你建造出優秀線框模型、繪製圖表、流程圖、組織結構圖以及插圖。如剛才所言，我們需要注意，OmniGraffle只支援蘋果的裝置，在其主頁頁面就有提供下載。
編後語：在國內，未親自試用過的軟體，其下載連結不敢隨便提供。如果針對這些軟體，大家有更好的資源，也希望大家可以提供一些，互相交流。