界面原型設計工具(2)

1.WireframeSketcher是一個Eclipse 插件,用於創建線框圖,界面模型和UI原型。

項目正式開發前創建原型可以幫助用戶和開發者理解系統,使用WireframeSketcher在Eclipse中創建能夠更好的集成進入你的項目開發流程。

WireframeSketcher 如何工作?它提供了一個pre-drawn,text-driven 預製圖,文本驅動的widgets,能夠展現通用UI界面,你可以拖拽他們進入編輯器迅速畫出你的界面。界面用XML存儲。


650) this.width=650;" src="http://img1.51cto.com/attachment/201305/142819168.png" title="1-1.png" />

2.

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

650) this.width=650;" src="http://img1.51cto.com/attachment/201305/142831148.jpg" title="2-1.jpg" />



3.fluidIA是一個在線的但是可以下載的富用戶界面原型設計工具。它基於面向對象的理念,可以讓你快速完善。它設計的基本思想是團隊中的任何成員,無論 是設計師還是工程師都可以自由的設計自己的原型。最近fluidIA的更新稍微慢了點,但是它仍是一個非常優秀的線框圖工具。

650) this.width=650;" src="http://img1.51cto.com/attachment/201305/142842720.jpg" title="3-1.jpg" />



4.linux下原型設計工具JustProto是一個在線的網站及桌面應用的原型設計工具,它能讓你用高效的方式來處理重要的信息流,能讓你的項目進程更加簡單、快速和高效。

你能在JustProto上找到每個項目(任何規格)的詳細說明,並可以立即處理項目中的功能改進、bug修復或評論信息。它能讓項目中的所有人都對項目進展瞭如指掌,並讓每個人在工作的同時也對項目提出自己的寶貴意見。

不管你是藝術家、項目經理、客戶、網頁工程師還是市場負責人,都能在這裏找到你想要的東西。看來使用JustProto除了能做好原型設計外,還能很好的管理項目進度。

JustProto是一項收費應用,三種不同的方案收費分別爲19美元/月、59美元/月、99美元/月,你可以按照自己的需求來選擇合適的方案,並且不管哪種方案,都提供30天的免費試用期哦!

650) this.width=650;" src="http://img1.51cto.com/attachment/201305/142854626.jpg" title="4-1.jpg" />



5.linux下的Mockup 是一款手繪風格的產品原型設計工具,在短短的幾分鐘內,用戶可以創建一個模型。採用 Vala 語言開發。

650) this.width=650;" src="http://img1.51cto.com/attachment/201305/142908787.jpg" title="5-1.jpg" />

應用程序使用從工具條中拖放對象到虛線帶白色區。
ubuntu 用戶安裝,官方PPA(支持ubuntu Precise/Quantal/Raring)

sudo add-apt-repository ppa:mockup-team/releases
sudo apt-get update
sudo apt-get install mockup



6.WEB在線流程圖設計器 GOOFLOW

這是一個用來在瀏覽器上設計流程圖的WEB UI組件,基於Jquery開發。可用來設計各種引擎的流程圖、邏輯流圖,數據流圖,或者是設計某個系統中需要走流程的功能應用。用戶體驗經本人的不斷改良後使得操作界面很容易上手,不僅二次開發人員可用,最終用戶也能用。

特點:

 跨瀏覽器,可兼容IE7--IE10, FireFox, Chrome, Opera等幾大內核的瀏覽器,且不需要瀏覽器再加裝任何控件。 (IE7-IE8時,使用VML;IE9以上,FF,OPERA,CHROME,SAFARI上使用SVG)

 多系統兼容性、可移植性:由於只包括前臺UI,因此二次開發者可很方便將本插件用在任何一種需要流程圖的B/S系統應用上,流程圖的詳細實現邏輯完全交於後臺程序開發者自己實現;對於後臺,只要能返回/接收能被本插件解析的JSON格式數據即可.所以本插件可用於不同的服務器語言建立的後臺上.

 跨領域:流程圖設計器不止用在電信領域,在其它需要IT進行技術支持的領域中都有重大作用.


以下從純技術實現層面具體描述:
 頁面頂部欄、左邊側邊欄均可自定義;
 當左邊的側邊欄設爲不顯示時,爲只讀狀態,此時的視圖區可當作是一個查看器而非編輯器。
 側邊工具欄除了基本和一些流程節點按鈕外,還自定義新的節點按鈕,自定義節點都可以有自有的圖標、類型名稱,定義後在使用可可在工作區內增加這些自定義節點。
 頂部欄可顯示流程圖數據組的標題,也可提供一些常用操作按鈕。
 頂部欄的按鈕,除了撤銷、重做按鈕外,其餘按鈕均可自定義點擊事件。
 可畫直線、折線;折線還可以左右/上下移動其中段。
 具有區域劃分功能,能讓用戶更直觀地瞭解哪些節點及其相互間的轉換,是屬於何種自定義區域內的。
 具有標註功能,用橙紅色標註某個結點或者轉換線,一般用在展示流程進度時。
 能直接雙擊結點、連線、分組區域中的文字進行編輯
 在對結點、連線、分組區域的各種編輯操作,如新增/刪除/修改名稱/重設樣式或大小/移動/標註時,均可捕捉到事件,並觸發自定義事件,如果自定義事件執行的方法返回FALSE,則會阻止操作。
 具有操作事務序列控制功能,在工作區內的各種有效操作都能記錄到一個棧中,然後可以進行撤銷(undo())或重做(redo()),像典型的C/S軟件一樣。

650) this.width=650;" src="http://img1.51cto.com/attachment/201305/142925103.jpg" style="float:none;" title="6-1.jpg" />

650) this.width=650;" src="http://img1.51cto.com/attachment/201305/142925320.jpg" style="float:none;" title="6-2.jpg" />



發佈了26 篇原創文章 · 獲贊 6 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章