HTML5可视化设计⼯具：Maqetta
⼀个创建桌⾯和移动⽤户界⾯的 HTML5 设计编辑⼯具使⽤简介
2011 年 4 ⽉，IBM 公司在 IBM Impact 2011 上⾯发布了 Maqetta，⼀个创建桌⾯和移动⽤户界⾯的 HTML5 设计编辑⼯具，并同时宣布将项⽬捐助给开源机构 Dojo 基⾦会。Maqetta 提供WYSIWYG 可视化 HTML5 ⽤户界⾯设计功能，仅需简单的拖曳操作，⽀持桌⾯和移动⽤户界⾯。本⽂主要针对 Maqetta 的功能使⽤上作简单的介绍。
简介
Maqetta 是由 Dojo 基⾦会提出的开源技术 , 提供所见即所得的⼯具 , 它允许⽤户体验设计师(UXD) ⽤简单的拖拽来创建实时的 UI 原型。⽤户可以下载源码，并安装在⾃⼰的服务器上，并可⾃定义源码来满⾜⾃⼰的需求，再回馈到开源项⽬。
Maqetta 应⽤本⾝⽤由 HTML5/Ajax 所编写，因此运⾏在浏览器中⽆需请求额外的插件或下载。Maqetta 的主要设计⽬标之⼀是建⽴为开发⼈员准备的 UI 原型，提⾼从页⾯设计师将原型转交给开发⼯程师的⼯作效率。由 Maqetta 创建的⽤户原型界⾯可以递交给开发⼯程师直接转换成实际出品，减少重新开发的⼯作量，促进在整个开发⽣命周期⾥，最⼤程度保存表现层资源，如 CSS 样式。
回页⾸
功能概述
1. WYSIWYG 可视化页⾯编辑
2. 通过拖拽实时建⽴ UI 原型
3. 设计和源码浏览同步编辑
4. 对 CSS 样式深度⽀持，可扩展 CSS 主题和插件 widget
5. 原型符合 html5,css3 标准，可直接交付使⽤
6. 提供 web-based 的评论功能，可供团队成员 review
7. 可⽀持最初的线框图设计和详细的象素级别最终设计
8. ⽀持移动设备⽤户界⾯原型设计，可模拟真实设备⼤⼩
回页⾸
下载或试⽤ Maqetta 及资源
官⽅⽹址：
google 讨论组：le/group/maqetta-users(Maqetta ⽤户 )
le/group/maqetta-devs(Maqetta 开发者 )
手机上可以打html与css的appGitHub ( 开源库，问题跟踪 )
可免费下载使⽤，可注册或是以临时⽤户⾝份“give it a try”，提供教程及⽂档
可免费下载使⽤，可注册或是以临时⽤户⾝份“give it a try”，提供教程及⽂档
新⽤户可通过教程获得快速的帮助，go to Help->Tutorials
新⽤户可通过教程获得快速的帮助，go to Help->Tutorials
回页⾸
⽀持的浏览器
⽬前 Maqetta 可以在 Google Chrome, Firefox 4, Safari 5.1/Mac 上运⾏
回页⾸
功能详述
Web 界⾯原型设计功能介绍
图 1.Maqetta 界⾯⼀览
图 1.Maqetta 界⾯⼀览
1. ⽆需安装，直接在浏览器上运⾏
2. 可从设计⾯板上直接拖拽控件
3. 调整控件的象素⼤⼩及各个属性，可以在属性⾯板⾥完成
4. ⽤户可选所见即所得模式，或是源码编辑模式，或同时开启两种模式进⾏实时的修改和预览
5. 设计师可以通过 Outline ⾯板来指定当前状态下某⼀元素显⽰与否
图 2. 设计模式和代码模式
图 2. 设计模式和代码模式
1. 按“Split Horizontally”按钮可上下拆分设计模式和代码模式
2. 上下同时显⽰设计模式和代码模式，为制作调整原型提供了极⼤的⽅便，也可以只显⽰design-only 模式或是 code-only 模式
图 3. ⽤ Maqetta 创建 developer-ready 应⽤
图 3. ⽤ Maqetta 创建 developer-ready 应⽤
1. 当⽤户在拖拽控件到画布的同时，Maqetta 会为其添加合适的 HTML 标签，所见
到的页⾯就是在浏览器上的实际运⾏结果。
2. 由 Maqetta ⽣成的代码可以被直接⽤于开发，旨在做 UI 原型这个阶段，就已经将 CSS 部分的代码完成，极⼤程度避免再次开发界⾯⼯作。
图 4. 通过”download as ZIP”功能导出到 Eclipse/RAD
图 4. 通过”download as ZIP”功能导出到 Eclipse/RAD
1. 此处的⼏个按钮⽤于导出⽂件从 Maqetta 到 Eclipse/RAD，其中第⼀个按钮”Download Entire Workspace”⽤于导出整个⼯作项 , 在弹出的对话框中可以定义导出选项。第⼆个按钮
”Download Selected Files”⽤于仅导出所选择的⽂件 , 第三个按钮”Modify Libraries”允许重新配置 Maqetta ⼯作空间来匹配 Eclipse/Rad 的⽂件夹结构。
2. 点击 File ⾯板的第⼀个按钮后，将出现对话框，你可以选择是否包含 Dojo 压缩⽂件，或重新配置与 Elipse/RAD 相符的路径。如果包含 Dojo，你可以解压缩到服务器上，浏览器将正确显⽰ HTML ⽂件。
图 5. 控件数据输⼊和数据绑定
图 5. 控件数据输⼊和数据绑定
1 ．拖动左侧的 TREE 控件到画布上
2 ．所有有值的控件都可以通过双击来改变此元素的值。Maqetta 允许开发者使⽤后台数据源。图 6.CSS 调整⼯具
图 6.CSS 调整⼯具
属性⾯板⾥提供 CSS 调整⼯具，可以为元素进⾏布局，内外边距，背景，边框，字体⼤⼩等进⾏调整。可以为单个元素指定样式，也可以将 CSS 规则应⽤于多个控件或 HTML 元素。
图 7. 线框图模式
图 7. 线框图模式
设计师可以通过⼯具条的“Switch theme”按钮切换当前样式主题，将 MOCKUP 原型以线框图⼿绘呈现，供团队成员进⾏ Review, 切换成线框图模式的好处是，将关注点放⾄功能层⾯及页⾯的跳转关系，流程上，⽽不是样式层⾯上。
图 8. 添加备注功能
图 8. 添加备注功能
通过⼯具条上的“Add note”按钮可以为页⾯添加备注，以作补充说明
图 9. 利⽤ State 功能创建可交互的页⾯原型
图 9. 利⽤ State 功能创建可交互的页⾯原型
1. Maqetta 给视觉设计师提供了⽆需编程也能创建强⼤的交互页⾯原型的机会，如图所⽰，点击New 按钮
2. 弹出对话框，名为 Add new task
3. 在 States ⾯板中可以定义页⾯显⽰状态此例中有⼀个默认的 Normal 状态和两个⾃定义的Add Task 和 Task Added 状态
4. ⽤户可通过此处 Add state 和 Remove state 按钮来⾃定义页⾯状态，此例中 Add Task 状态被选中，设计师可以通过为 Add 按钮设置 onclick 事件来切换到不同的页⾯状态
5. 设计师可以在 Outline ⾯板⾥，点击控件元素前的“眼睛”图标来决定是否显⽰。本例中，在Add Task 状态下，所有层都显⽰，但 MultiSelect ⽆需显⽰。这和 photoshop ⾥的图层概念是相类似的，对于视觉设计师⽽⾔是相当熟悉的。
图 10. 团队评审和评论功能步骤⼀
图 10. 团队评审和评论功能步骤⼀
在 New 菜单⾥选择 New Reivew ⼦菜单，输⼊基本信息
图 11. 团队评审和评论功能步骤⼆
团队评审和评论功能步骤⼆
选择需要 Review 的⽂件
图 12. 团队评审和评论功能步骤三
图 12. 团队评审和评论功能步骤三
添加审阅者的 Email 后，按 Publish 按钮，审阅⼈将收到被邀请参加评审的邮件。
图 13. 团队成员添加评论功能
图 13. 团队成员添加评论功能
团队审阅者收到的审阅邮件会附带 URL，点击 URL 后，审阅者可以对 UI 原型进⾏评论，添加注解。
图 14. ⽀持 CSS 主题编辑
图 14. ⽀持 CSS 主题编辑
⽀持⾃定义 CSS 主题，选择页⾯上的控件，然后在属性⾯板⾥⾃定义。⽤户可以保存更新的主题 CSS ⽂件，然后在项⽬团队之间共享，使得公司内部规范他们⾃⼰的界⾯外观。
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 样式化举例
图 15. ⽤ Maqetta 对 Dojo widgets 样式化举例
通常情况下，调整 Dojo widgets 是⾮常耗时的，需要研究 Dojo 的 CSS ⽂件结构及规则，但Maqetta 提供的⼯具，使对 Dojo widgets 的调整变得容易和快速。如在某些特定的情况下，需要对 Dojo 按钮调整成⼀个固定宽度 (8em)，我们可以在画⾯上选择需要定制的这个按钮，在属性⾯板顶部，指定⼀个⾃定义的 CSS 类，例如（login_button）应⽤在此按钮上，然后在打开Layout 属性，进⾏详细的设置界⾯，为 Width 设置值为 8em, 所有适⽤于此元素 width 的 CSS 样式规则将被呈现，此时选择第⼀个单选按钮，告诉 Maqetta 在 app.css ⽂件中新建⼀个新的CSS 类名为 login_button, 值为 8em 的类 , 则之前的规则将被加⼊到 app.css，代码如下：
#heme .login_button.dijitButton .dijitButtonNode{width:8em;}
需要注意的是，Maqetta 会⾃动为 HTML 的 BODY 元素加上 MyApp 这个 ID，此 ID 的作⽤就是使新的样式具有较⾼的优先级，因为 ID 选择器⽐ CLASS 和标签选择器优先级别⾼。
图 16. 加⼊ JQuery UI, YUI ⾄ widgets ⾯板
对于熟悉 JQuery,YUI 的⽤户来说，也整合了部分控件，极⼤的⽅便了设计师。
移动设备界⾯原型设计介绍
图 17.Maqetta 制作移动设备⽤户界⾯
图 17.Maqetta 制作移动设备⽤户界⾯
可拖拽 Dojo 1.7 mobile widgets 到移动设备实际尺⼨模拟画布上
图 18. ⽤ Maqetta 制作移动设备⽤户界⾯，横向切换
图 18. ⽤ Maqetta 制作移动设备⽤户界⾯，横向切换
可在不同的⼿机设备之间切换，放⼤ / 缩⼩或横向纵向切换，令⼈兴奋的是 Preview 4 将加⼊⼿机触摸模拟。
回页⾸
问题与局限
⼀些较为重要的控件⽬前还不够完整，与 Dojo 控件结合得较好 , 对其它的流⾏的 JavaScript 框架的⽀持不够完整。随着产品的不断升级 , 将进⼀步丰富控件。由于直接通过浏览器使⽤ , 在⽤户量较⼤时 ,
性能⽅⾯还有待进⼀步优化。产品设计上还需要更为“傻⽠”⼀点 , 更为易⽤些。在试⽤过程中 , 要考虑突然断线等问题 , 但⽤户可⾃⾏选择是否下载载择 .ascript 见即所得的产品到本机使⽤。使⽤过程中感觉稳定度不够，机⽬前还存在⼀些 BUG, 可通过讨论组了解更多。⿎励⼤家⾃由的贡献，探索，为产品的不断完善提供更多的帮助。
回页⾸
总结
IBM 推出的 Maqetta 是基于浏览器的开源的所见即所得的 HTML5 快速产品原型设计⼯具，⽀持Google Chrome、Mozilla Firefox 3.5+ 和 Mac Safari 5，为⽤户体验设计师提供了⼀个可见即可得的可视化编辑环境。它可以在浏览器上直接使⽤，⽆需安装任何插件，使得制作界⾯原型的⼯作通过简单的拖拽即可完成 , 并⽀持移动设备⽤户界⾯原型开发。Maqetta 联合创作者 Adam Peller 表⽰，他们希望与社区⽤户和开源开发者合作，推动基于 HTML5 的⽤户界⾯创作⼯具的开发。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。