繪制一個線框圖是你在制作一個網(wǎng)站前必須要經(jīng)歷的過程。線框圖能夠幫助你合理的組織并簡化你內(nèi)容和元素，是網(wǎng)站內(nèi)容布局的基本視覺表現(xiàn)方式，是網(wǎng)站開發(fā)過程中一個重要的步驟。

一、線框圖的好處：

讓項目組成員在初期就可以對網(wǎng)站有個清晰明了的認(rèn)知
能激發(fā)設(shè)計師想象力，使其在創(chuàng)作過程中有更多發(fā)揮空間
給開發(fā)者提供一個清晰的架構(gòu)，讓他們知道他們需要編寫的功能模塊
讓每個頁面的跳轉(zhuǎn)關(guān)系都變得清晰明了
很容易的改變頁面布局

二、繪制線框圖的工具：

手繪：紙、筆
流程圖或思維導(dǎo)圖工具：Visio、Mindmap、MindManager
原型繪制軟件：Balsamiq、Axure
圖形軟件：Photoshop、Illustrator
HTML工具：Dreamweaver

三、線框圖實例：

1、簡單紙面原型：這是Broad Reach Retail Partners網(wǎng)站的簡單紙面原型

2、低保真的HTML原型：沒加任何風(fēng)格的網(wǎng)站內(nèi)容陳列

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

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 by Phil Hawksworth.

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

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

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

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

四、最佳范例要點(diǎn)：

簡單設(shè)計
灰度模式展現(xiàn)：灰度有助于把注意力集中在產(chǎn)品功能層面和布局層面，如果直接加圖片和顏色，容易讓人陷入對色彩細(xì)節(jié)的判斷中忽略掉功能層面更本質(zhì)的東西。
線框圖用網(wǎng)站地圖串聯(lián)起來
專注于理想結(jié)果
等同于真實分辨率尺寸
一開始就計劃好內(nèi)容和元素
五、要避免的問題：

內(nèi)容太多，重點(diǎn)不突出
強(qiáng)調(diào)顏色和設(shè)計
過多的設(shè)計細(xì)節(jié)
另外，介紹一個專門講線框圖的網(wǎng)站：Wireframe Magazine

本文縮略翻譯自Using Wireframes to Streamline Your Development Process，疏漏和錯誤之處，還望批評指正

轉(zhuǎn)載注明：http://elya.cc/product/588.html