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

標籤：

 

　　網頁的線框圖是非常直觀、但是也沒什麼技術上痛點的東西。只需要你大概描出頁面上需要的一些元素，比如頭部、導航、頁尾等等，最多再就是一些互動、內容地區什麼的。但這對於任何網路應用的開發都是非常重要的。當然有很多種方法可以做這件事情，最簡單的就是拿起紙和筆，但是在這篇文章中，我們要介紹的是一些非常高效好用的線上原型工具，並且他們完全免費。

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是一個跨平台的傳統型程式。他自己的介紹是為早期網站設計提供協助的非正式工具。
他有很多理念來自於紙筆設計原型。你可以快速的畫出草圖，保證重要的功能優先。但是跟紙筆的草圖不同的是，他還可以有互動和動畫。

 

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