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

一、線框圖的好處：

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

二、繪制線框圖的工具：

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

三、線框圖實(shí)例：

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

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

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

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、線框圖： 另一個(gè)帶色彩的線框圖. By Mattheiu Mingassson of?Activeside Internet Strategies and Consulting.

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

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

五、要避免的問(wèn)題：

• 內(nèi)容太多，重點(diǎn)不突出
• 強(qiáng)調(diào)顏色和設(shè)計(jì)
• 過(guò)多的設(shè)計(jì)細(xì)節(jié)

另外，介紹一個(gè)專門(mén)講線框圖的網(wǎng)站：Wireframe Magazine

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

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