|
英文原文：http://www.editorial.co.in/wireframes/wireframes.php
當你需要為網(wǎng)站快速創(chuàng)建一個直觀和可用的用戶界面的時候，在寫代碼之前做好設計是基礎。一個普遍的方法就是通過線框圖來展現(xiàn)你的設計，線框圖是一種使用線條為基本元素的繪畫，與藍圖相對，像框圖表現(xiàn)基本的導航和功能塊，比如內(nèi)容、功能等，這些都已經(jīng)進入網(wǎng)站的創(chuàng)建。線框圖的主要原理就是通過歸類每一個頁面上的入口和出口來保證設計的邏輯流程與功能。
可以在紙上畫線框圖，這是最快而且最簡單的方法。如果時間有限，就把布局攝像畫在頁面上，重點表現(xiàn)每一個元素指向何處。
一些人更喜歡用Visio，Adobe Illustrator, Photoshop, Freehand, Fireworks，當然還可以是PowerPoint，Dreamweaver, Adobe Indesign等等。這里列出一些另外的工具，是世界上其他人可能在是用的。在此之前，首先大概了解這些工具都能帶來什么好處：
- 在開發(fā)的前期，線框圖是非常重要的組成部分，它能（影響）用戶的期待，由于對網(wǎng)站了解更多，促進對網(wǎng)站的理解和流程規(guī)劃。
- 在項目進程中，能夠在線框圖的基礎上考慮變更和提出新的需求。使用線框圖可以容易的表達常見的頁面結構和單獨頁面內(nèi)容需要。
- 線框圖多數(shù)情況能夠由于更好的輸出引致更加卓越的產(chǎn)品，因為它在獲得有價值的和準確的輸入方面非常有幫助。
- 線框圖／原型使得評價和對比不同的想法和不同的設計更加容易，更進一步的，他也能更加容易的改進。
- 由于線框圖被審核通過，則會避免因為程序員對代碼的無盡修改而造成的時間和費用的浪費。
Website Wireframes Tools (Web)－－網(wǎng)站線框圖工具
這是一個基于web的工具，用于構建網(wǎng)站的線框圖。線框圖就是一種對網(wǎng)站內(nèi)容的簡單視覺表現(xiàn)形式，節(jié)省開發(fā)者和客戶去設計網(wǎng)站內(nèi)容布局的時間。這個工具可以在幾分鐘內(nèi)構造線框圖，如果需要的話，可以通過email、即時消息或者電話的形式將線框圖預覽地址發(fā)送給他人。即使是不同地方的人也能夠同事看到它，根據(jù)回饋、討論、想法、建議等進行快速的修改。對于我來說兩個非常有用的功能——首先是你可以每次修改的時候建一個信的版本，易于比較，也可以很容易的回到先前的任何一個版本去。第二個是上面說過的，結果可以分發(fā)給其他不同地方的人。
只需提供郵箱新建一個賬戶，就可以免費使用這個工具了！
Oversite (Mac, Win, Linux)
OverSite 提供了控件菜單，用于為網(wǎng)站創(chuàng)建線框圖、概念圖或者軟件原型。OverSite有很多組件和形狀以供選用來創(chuàng)建線框圖。他的拖曳功能很像切蛋糕。另一個我個人非常喜歡的功能就是你可以為你創(chuàng)建的組建添加標注，在耗時較長的開發(fā)中這是非常有用的，也能夠幫助理解情景概念。它有很多圍繞軟件原型的功能。如果你需要使用它創(chuàng)建網(wǎng)站構架，則OverSite能夠自動生成網(wǎng)站地圖表示構架。可以將網(wǎng)站構架和線框圖導出到HTML（也可以導出成PDF格式，當然PDF格式就沒有點擊鏈接功能了）。這個軟件最低35美元，適用mac,window 和linux操作系統(tǒng)。
出處：譯言
責任編輯：bluehearts
上一頁 下一頁 線框圖——原型可視化 [2]
|
第 1 頁 線框圖——原型可視化 [1]
第 2 頁 
