十個徹底免費的網頁原型（線框圖）工具

 

 

 

　　網頁的線框圖是很是直觀、可是也沒什麼技術上難點的東西。只須要你大概描出頁面上須要的一些元素，好比頭部、導航、頁腳等等，最多再就是一些交互、內容區域什麼的。但這對於任何網絡應用的開發都是很是重要的。固然有不少種方法能夠作這件事情，最簡單的就是拿起紙和筆，可是在這篇文章中，咱們要介紹的是一些很是高效好用的在線原型工具，而且他們徹底免費。

Lumzy 快速原型工具

使用Lumzy你能夠爲你的應用建立原型圖，還能添加一些交互事件。有了它，你能夠建立彈出框，交互的頁面導航，添加外部連接等等。他對於團隊協做設計和交流提供了一個很好的平臺，並且他徹底免費。

Mockup Builder 殺手級的原型工具

MockupBuilder最近才發佈，很值得期待。他有很是多的功能：UI模型，交互的線框圖，頁面佈局，客戶端原型甚至站點地圖和屏幕導航。

固然，對於與客戶和團隊成員交流也是很是強大的。而且，他所有免費。

Tiggr協做製做原型圖

Tiggr的思想是給你須要作成最終稿的全部資源。你能夠設計不少的元素，而後分享，其餘的協做用戶會幫你製做相應HTML/CSS代碼，以達到最快生成。花10秒鐘註冊，你就能享用這個免費的東東了。

Frame Box輕量級原型在線製做

FrameBox並無多麼特別的特點。你能夠拖放、設置大小、複製粘貼這些UI組件，可是他的特點在於你能夠很是輕鬆的經過它的拖拽很容易就完成你的原型製做。想要用這個輕量級的免費的工具，也須要註冊一下。

SimpleDiagrams 免費版(Adobe Air App)

simplediagrams是一個很是小巧的Adobe Air程序，經過他你能夠很是輕鬆的實現本身的想法。拖拽組件，添加圖片或者便籤，導出PNG圖都是他的特點，經過添加一些小功能就能實現一個很是不錯的原型圖。

iPhone MockupiPhone原型製做

在iPhone Mockup裏面你可使用鉛筆模式，也可使用圖表模式的編輯器。無論你選擇什麼，功能都是同樣的，均可以很簡單很方便的生成iPhone上的應用原型。你也能夠分享給別人，就算你更改了設計，別人經過那個連接也同樣能夠看到。

fluidIA

fluidIA是一個在線的可是能夠下載的富用戶界面原型設計工具。它基於面向對象的理念，可讓你快速完善。它設計的基本思想是團隊中的任何成員，不管是設計師仍是工程師均可以自由的設計本身的原型。最近fluidIA的更新稍微慢了點，可是它還是一個很是優秀的線框圖工具。

Pencil ProjectFireFox插件

Pencil Project是一個原型界面設計的Firefox插件，經過它內置的模板，你能夠建立可連接的文檔，並輸出成爲HTML文件、PNG、OpenOffice文檔、Word文檔、PDF。還有什麼可說的呢？這麼優秀的插件，是每一個設計師和開發人員必備啊。

CogToolWin MAC下應用程序

CogTool是一個強大原型生成工具，他與別的工具還有一些不一樣，他能夠對你的設計自動根據人類認知模型進行評估。你能夠經過一些圖標啊按鈕啊圖片，生成一個描述，而後點擊評估的按鈕，他就會對你的設計進行人類認知模型的評估，他會告訴你通常人須要多久才能理解你的意圖。CogTools有不少用戶引導的文檔，還有不少教程，論壇上也能讓你很快的成長起來。

Prototype Composer

Prototype Composer可讓你在真正的代碼編寫以前就看到網站是如何運行的。之前的那些無數的文字入口，複雜的數據結構以及技術含量不低的UML圖，這個工具可讓你很方便的協做完成一個看起來能運行的程序。
社區版本是免費的，他可讓你以用戶定義的一個項目作一個樣例程序。

DUB – DENIM（跨平臺應用程序）

DENIM是一個跨平臺的桌面程序。他本身的介紹是爲早期網站設計提供幫助的非正式工具。
他有不少理念來自於紙筆設計原型。你能夠快速的畫出草圖，保證重要的功能優先。可是跟紙筆的草圖不一樣的是，他還能夠有交互和動畫。