一、線框圖的好處：

讓項目組成員在初期就可以對網站有個清晰明了的認知

能激發設計師想象力，使其在創作過程中有更多發揮空間

給開發者提供一個清晰的架構，讓他們知道他們需要編寫的功能模塊

讓每個頁面的跳轉關系都變得清晰明了

很容易的改變頁面布局

二、繪制線框圖的工具：

手繪：紙、筆

流程圖或思維導圖工具：Visio、Mindmap、MindManager

原型繪制軟件：Balsamiq、Axure

圖形軟件：Photoshop、Illustrator

HTML工具：Dreamweaver

三、線框圖實例：

1、簡單紙面原型：這是Broad Reach Retail Partners網站的簡單紙面原型

2、低保真的HTML原型：沒加任何風格的網站內容陳列

3、低保真的布局原型：界面布局線框圖，由Jesse Bennett-Chamberlain設計

4、線框圖原型：A preliminary mockup of a social conferencing tool built on Tiddlywiki for use at Le Web 3. The notes to accompany it are at tiddleleweb.tiddlyspot.com. Wireframe byPhil Hawksworth.

5、線框圖原型：This one is based on advanced use of a blog publishing system (WordPress). ByMattheiu Mingassson or Activeside Internet Strategies and Consulting.

6、線框圖：A wireframe for the Embrace Pet Community, by Jesse Bennett-Chamberlain of31Three.

7、線框圖： A wireframe with color and images. Author page wireframe by Bokhandel.

8、線框圖： 另一個帶色彩的線框圖. By Mattheiu Mingassson of Activeside Internet Strategies and Consulting.

四、最佳范例要點：

簡單設計

灰度模式展現：灰度有助于把注意力集中在產品功能層面和布局層面，如果直接加圖片和顏色，容易讓人陷入對色彩細節的判斷中忽略掉功能層面更本質的東西。

線框圖用網站地圖串聯起來

專注于理想結果

等同于真實分辨率尺寸

一開始就計劃好內容和元素

五、要避免的問題：

內容太多，重點不突出

強調顏色和設計

過多的設計細節

另外，介紹一個專門講線框圖的網站：Wireframe Magazine