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 及资源

官方网址:http://maqetta.org

google 讨论组:http://groups.google.com/group/maqetta-users(Maqetta 用户 )

http://groups.google.com/group/maqetta-devs(Maqetta 开发者 )

GitHub.com ( 开源库,问题跟踪 )

可免费下载使用,可注册或是以临时用户身份“give it a try”,提供教程及文档
可免费下载使用,可注册或是以临时用户身份“give it a try”,提供教程及文档Tutorials” src=”http://www.html5dw.com/data/attachment/portal/201306/12/194134smhlo7flwliwkfmt.gif” width=580 height=458>

支持的浏览器

目前 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 样式编辑代码片断

图 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,代码如下:

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

需要注意的是,Maqetta 会自动为 HTML 的 BODY 元素加上 MyApp 这个 ID,此 ID 的作用就是使新的样式具有较高的优先级,因为 ID 选择器比 CLASS 和标签选择器优先级别高。

图 16. 加入 JQuery UI, YUI 至 widgets 面板
图 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 的用户界面创作工具的开发。