Maqetta是一個(gè)開(kāi)源的HTML5用戶(hù)界面可視化設(shè)計(jì)工具。提供了WYSIWYG所見(jiàn)即所得的編輯模式，用戶(hù)僅僅需要拖曳鼠標(biāo)即可完成對(duì)界面上復(fù)雜Widget的布局和擺放。本身這個(gè)工具也是采用HTML開(kāi)發(fā)的，所以運(yùn)行在瀏覽器上不需要安裝額外的插件。?

Maqetta，一個(gè)創(chuàng)建桌面和移動(dòng)用戶(hù)界面的HTML5設(shè)計(jì)編輯工具，并同時(shí)宣布將項(xiàng)目捐助給開(kāi)源機(jī)構(gòu)Dojo基金會(huì)。

Maqetta已經(jīng)是開(kāi)源項(xiàng)目，提供WYSIWYG可視化HTML5用戶(hù)界面設(shè)計(jì)功能，僅需簡(jiǎn)單的拖曳操作，支持桌面和移動(dòng)用戶(hù)界面。

Maqetta 應(yīng)用本身用HTML5/Ajax編寫(xiě)，因此運(yùn)行在瀏覽器中無(wú)需請(qǐng)求額外的插件或下載。用戶(hù)可以下載源碼，并安裝在自己的服務(wù)器上，并可自定義源碼來(lái)滿(mǎn)足自己的需求，再回饋到開(kāi)源項(xiàng)目。

Web 界面原型設(shè)計(jì)功能介紹

圖 1.Maqetta 界面一覽

1. 無(wú)需安裝，直接在瀏覽器上運(yùn)行

2. 可從設(shè)計(jì)面板上直接拖拽控件

3. 調(diào)整控件的象素大小及各個(gè)屬性，可以在屬性面板里完成

4. 用戶(hù)可選所見(jiàn)即所得模式，或是源碼編輯模式，或同時(shí)開(kāi)啟兩種模式進(jìn)行實(shí)時(shí)的修改和預(yù)覽

5. 設(shè)計(jì)師可以通過(guò) Outline 面板來(lái)指定當(dāng)前狀態(tài)下某一元素顯示與否

圖 2. 設(shè)計(jì)模式和代碼模式

1. 按“Split Horizontally”按鈕可上下拆分設(shè)計(jì)模式和代碼模式

2. 上下同時(shí)顯示設(shè)計(jì)模式和代碼模式，為制作調(diào)整原型提供了極大的方便，也可以只顯示 design-only 模式或是 code-only 模式

圖 3. 用 Maqetta 創(chuàng)建 developer-ready 應(yīng)用

1. 當(dāng)用戶(hù)在拖拽控件到畫(huà)布的同時(shí)，Maqetta 會(huì)為其添加合適的 HTML 標(biāo)簽，所見(jiàn)

到的頁(yè)面就是在瀏覽器上的實(shí)際運(yùn)行結(jié)果。

2. 由 Maqetta 生成的代碼可以被直接用于開(kāi)發(fā)，旨在做 UI 原型這個(gè)階段，就已經(jīng)將 CSS 部分的代碼完成，極大程度避免再次開(kāi)發(fā)界面工作。

圖 4. 通過(guò)”download as ZIP”功能導(dǎo)出到 Eclipse/RAD

1. 此處的幾個(gè)按鈕用于導(dǎo)出文件從 Maqetta 到 Eclipse/RAD，其中第一個(gè)按鈕”Download Entire Workspace”用于導(dǎo)出整個(gè)工作項(xiàng) , 在彈出的對(duì)話框中可以定義導(dǎo)出選項(xiàng)。第二個(gè)按鈕 ”Download Selected Files”用于僅導(dǎo)出所選擇的文件 , 第三個(gè)按鈕”Modify Libraries”允許重新配置 Maqetta 工作空間來(lái)匹配 Eclipse/Rad 的文件夾結(jié)構(gòu)。

2. 點(diǎn)擊 File 面板的第一個(gè)按鈕后，將出現(xiàn)對(duì)話框，你可以選擇是否包含 Dojo 壓縮文件，或重新配置與 Elipse/RAD 相符的路徑。如果包含 Dojo，你可以解壓縮到服務(wù)器上，瀏覽器將正確顯示 HTML 文件。

圖 5. 控件數(shù)據(jù)輸入和數(shù)據(jù)綁定

1 ．拖動(dòng)左側(cè)的 TREE 控件到畫(huà)布上

2 ．所有有值的控件都可以通過(guò)雙擊來(lái)改變此元素的值。Maqetta 允許開(kāi)發(fā)者使用后臺(tái)數(shù)據(jù)源。

圖 6.CSS 調(diào)整工具

屬性面板里提供 CSS 調(diào)整工具，可以為元素進(jìn)行布局，內(nèi)外邊距，背景，邊框，字體大小等進(jìn)行調(diào)整?？梢詾閱蝹€(gè)元素指定樣式，也可以將 CSS 規(guī)則應(yīng)用于多個(gè)控件或 HTML 元素。

圖 7. 線框圖模式

設(shè)計(jì)師可以通過(guò)工具條的“Switch theme”按鈕切換當(dāng)前樣式主題，將 MOCKUP 原型以線框圖手繪呈現(xiàn)，供團(tuán)隊(duì)成員進(jìn)行 Review, 切換成線框圖模式的好處是，將關(guān)注點(diǎn)放至功能層面及頁(yè)面的跳轉(zhuǎn)關(guān)系，流程上，而不是樣式層面上。

圖 8. 添加備注功能

通過(guò)工具條上的“Add note”按鈕可以為頁(yè)面添加備注，以作補(bǔ)充說(shuō)明

圖 9. 利用 State 功能創(chuàng)建可交互的頁(yè)面原型

1. Maqetta 給視覺(jué)設(shè)計(jì)師提供了無(wú)需編程也能創(chuàng)建強(qiáng)大的交互頁(yè)面原型的機(jī)會(huì)，如圖所示，點(diǎn)擊 New 按鈕

2. 彈出對(duì)話框，名為 Add new task

3. 在 States 面板中可以定義頁(yè)面顯示狀態(tài)此例中有一個(gè)默認(rèn)的 Normal 狀態(tài)和兩個(gè)自定義的 Add Task 和 Task Added 狀態(tài)

4. 用戶(hù)可通過(guò)此處 Add state 和 Remove state 按鈕來(lái)自定義頁(yè)面狀態(tài)，此例中 Add Task 狀態(tài)被選中，設(shè)計(jì)師可以通過(guò)為 Add 按鈕設(shè)置 onclick 事件來(lái)切換到不同的頁(yè)面狀態(tài)

5. 設(shè)計(jì)師可以在 Outline 面板里，點(diǎn)擊控件元素前的“眼睛”圖標(biāo)來(lái)決定是否顯示。本例中，在 Add Task 狀態(tài)下，所有層都顯示，但 MultiSelect 無(wú)需顯示。這和 photoshop 里的圖層概念是相類(lèi)似的，對(duì)于視覺(jué)設(shè)計(jì)師而言是相當(dāng)熟悉的。

圖 10. 團(tuán)隊(duì)評(píng)審和評(píng)論功能步驟一

在 New 菜單里選擇 New Reivew 子菜單，輸入基本信息

圖 11. 團(tuán)隊(duì)評(píng)審和評(píng)論功能步驟二

選擇需要 Review 的文件

圖 12. 團(tuán)隊(duì)評(píng)審和評(píng)論功能步驟三

添加審閱者的 Email 后，按 Publish 按鈕，審閱人將收到被邀請(qǐng)參加評(píng)審的郵件。

圖 13. 團(tuán)隊(duì)成員添加評(píng)論功能

團(tuán)隊(duì)審閱者收到的審閱郵件會(huì)附帶 URL，點(diǎn)擊 URL 后，審閱者可以對(duì) UI 原型進(jìn)行評(píng)論，添加注解。

圖 14. 支持 CSS 主題編輯

支持自定義 CSS 主題，選擇頁(yè)面上的控件，然后在屬性面板里自定義。用戶(hù)可以保存更新的主題 CSS 文件，然后在項(xiàng)目團(tuán)隊(duì)之間共享，使得公司內(nèi)部規(guī)范他們自己的界面外觀。

CSS 樣式編輯代碼片斷

圖 15. 用 Maqetta 對(duì) Dojo widgets 樣式化舉例

通常情況下，調(diào)整 Dojo widgets 是非常耗時(shí)的，需要研究 Dojo 的 CSS 文件結(jié)構(gòu)及規(guī)則，但 Maqetta 提供的工具，使對(duì) Dojo widgets 的調(diào)整變得容易和快速。如在某些特定的情況下，需要對(duì) Dojo 按鈕調(diào)整成一個(gè)固定寬度 (8em)，我們可以在畫(huà)面上選擇需要定制的這個(gè)按鈕，在屬性面板頂部，指定一個(gè)自定義的 CSS 類(lèi)，例如（login_button）應(yīng)用在此按鈕上，然后在打開(kāi) Layout 屬性，進(jìn)行詳細(xì)的設(shè)置界面，為 Width 設(shè)置值為 8em, 所有適用于此元素 width 的 CSS 樣式規(guī)則將被呈現(xiàn)，此時(shí)選擇第一個(gè)單選按鈕，告訴 Maqetta 在 app.css 文件中新建一個(gè)新的 CSS 類(lèi)名為 login_button, 值為 8em 的類(lèi) , 則之前的規(guī)則將被加入到 app.css，代碼如下：

#myapp.mytheme .login_button.dijitButton .dijitButtonNode{width:8em;}

需要注意的是，Maqetta 會(huì)自動(dòng)為 HTML 的 BODY 元素加上 MyApp 這個(gè) ID，此 ID 的作用就是使新的樣式具有較高的優(yōu)先級(jí)，因?yàn)?ID 選擇器比 CLASS 和標(biāo)簽選擇器優(yōu)先級(jí)別高。

圖 16. 加入 JQuery UI, YUI 至 widgets 面板

對(duì)于熟悉 JQuery,YUI 的用戶(hù)來(lái)說(shuō)，也整合了部分控件，極大的方便了設(shè)計(jì)師。

移動(dòng)設(shè)備界面原型設(shè)計(jì)介紹

圖 17.Maqetta 制作移動(dòng)設(shè)備用戶(hù)界面

可拖拽 Dojo 1.7 mobile widgets 到移動(dòng)設(shè)備實(shí)際尺寸模擬畫(huà)布上

圖 18. 用 Maqetta 制作移動(dòng)設(shè)備用戶(hù)界面，橫向切換

可在不同的手機(jī)設(shè)備之間切換，放大 / 縮小或橫向縱向切換，令人興奮的是 Preview 4 將加入手機(jī)觸摸模擬。

WYSIWYG可視化頁(yè)面編輯 ???

拖曳式移動(dòng)UI設(shè)計(jì) ??

設(shè)計(jì)或源碼瀏覽同步編輯??

對(duì)CSS樣式的深度支持

IBM 推出的 Maqetta 是基于瀏覽器的開(kāi)源的所見(jiàn)即所得的 HTML5 快速產(chǎn)品原型設(shè)計(jì)工具，支持 Google Chrome、Mozilla Firefox 3.5+ 和 Mac Safari 5，為用戶(hù)體驗(yàn)設(shè)計(jì)師提供了一個(gè)可見(jiàn)即可得的可視化編輯環(huán)境。它可以在瀏覽器上直接使用，無(wú)需安裝任何插件，使得制作界面原型的工作通過(guò)簡(jiǎn)單的拖拽即可完成 , 并支持移動(dòng)設(shè)備用戶(hù)界面原型開(kāi)發(fā)。Maqetta 聯(lián)合創(chuàng)作者 Adam Peller 表示，他們希望與社區(qū)用戶(hù)和開(kāi)源開(kāi)發(fā)者合作，推動(dòng)基于 HTML5 的用戶(hù)界面創(chuàng)作工具的開(kāi)發(fā)。