HTML5可視化設(shè)計編輯工具M(jìn)aqetta

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

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

Maqetta已經(jīng)是開源項目，提供WYSIWYG可視化HTML5用戶界面設(shè)計功能，僅需簡單的拖曳操作，支持桌面和移動用戶界面。

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

功能詳述：

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

圖 1.Maqetta 界面一覽

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1 ．拖動左側(cè)的 TREE 控件到畫布上

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

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

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

圖 7. 線框圖模式

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

圖 8. 添加備注功能

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

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

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

2. 彈出對話框，名為 Add new task

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

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

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

圖 10. 團(tuán)隊評審和評論功能步驟一

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

圖 11. 團(tuán)隊評審和評論功能步驟二

選擇需要 Review 的文件

圖 12. 團(tuán)隊評審和評論功能步驟三

添加審閱者的 Email 后，按 Publish 按鈕，審閱人將收到被邀請參加評審的郵件。

圖 13. 團(tuán)隊成員添加評論功能

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

圖 14. 支持 CSS 主題編輯

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

CSS 樣式編輯代碼片斷

 { 
  "widgets": { 
    "TextBox": { 
      "appliesTo": [ 
        "dijit.form.TextBox" 
      ], 
      "states": { 
        $all": { 
          "selectors": { 
            ".claro .dijitTextBox": [ 
              "$std_10" 
            ] 
          }, 
          "query": { 
            "classes":".dijit .dijitReset .dijitLeft .dijitTextBox" 
           } 
         }, 
         "Focused": { 
           "selectors": { 
             ".claro .dijitTextBoxFocused": [ 
               "$std_10" 
             ] 
           }, 
           "query": { 
             "classes":".dijit.dijitReset.dijitLeft.dijitTextBox" 
           } 
         }, 
         "Hover": { 
           "selectors": { 
             ”.claro .dijitTextBoxHover": [ 
               "$std_10" 
             ] 
           }, 
           "query": { 
             "classes": ".dijit.dijitReset.dijitLeft.dijitTextBox" 
           } 
        } 
      } 
    } 
  } 
 }

圖 15. 用 Maqetta 對 Dojo widgets 樣式化舉例

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

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

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

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

對于熟悉 JQuery,YUI 的用戶來說，也整合了部分控件，極大的方便了設(shè)計師。

移動設(shè)備界面原型設(shè)計介紹

圖 17.Maqetta 制作移動設(shè)備用戶界面

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

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

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

Maqetta 功能如下：

WYSIWYG可視化頁面編輯    

拖曳式移動UI設(shè)計   

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

對CSS樣式的深度支持

總結(jié)：

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