在这个由 3 部分组成的系列文章的第一篇文章中，将介绍这个在浏览器上运行的免费开源项目， 使设计师能够拖放一组丰富的小部件来构建生动的 UI 模型。在第 1 部分中，将了解 Maqetta 的主要功能和特性，同时原型化一个实际的">移动应用程序。
Maqetta 是一个免费的开源可视编辑工具，它使得设计丰富的 HTML5 用户界面变得更为简单有趣。UI 设计师可以使用 Maqetta （不需要使用插件或下载就可以在浏览器中运行）为桌面和移动应用程序构建运行的原型。只需要将小部件拖放到设备画布上，就可以生成一个生动的 UI 模型，然后将该 UI 原型提供给开发人员进行代码编写。
Maqetta 和 Dojo Foundation
Maqetta 最初由 IBM 创建，作为一个开源项目在 2011 年 4 月赠予 Dojo Foundation。在拥有 Dojo 的自由和商业友好的开源许可的条件下，可以使用 Maqetta。Maqetta 通常几个月更新一次，自从公开发布后就一直持续更新。2012 年下半年发布的版本支持主要 UI 改造以及显著的性能增强。
体重跟踪器应用程序的 UI 设计
移动用户界面通常由一系列屏幕或者称之为视图 的面板构成，视图随用户导航到应用程序的各个部分来回切换。图 1 中的流程图显示了 4 个将包含应用程序以及用户交互导航流的视图。
流程图中的实线箭头代表前进导航，虚线箭头代表后退导航，后退到前一视图。每个视图上的标签代表我们使用 Maqetta 创建视图时将要分配给该视图的 ID。
图 1. 体重跟踪器应用程序的流程图
放大该图
4 个应用程序视图如下所示：
mainView 是用户发布应用程序时显示的第一个视图。它包含一个呈现用户输入体重的数字列表。单击列表中的任何一个数字，下一视图 detailsView
就会出现。另外，用户可以单击应用程序顶部的加号（+）按钮添加一个新体重。 detailsView 显示了与给定条目相关的属性（比如，体重、输入日期以及备注）。单击 Date 条目就会让 detailsView_Date 视图出现。单击 Notes 条目会让 detailsView_Notes 视图出现。单击 Home 按钮会让用户回到 mainView 视图。 detailsView_Date 允许用户使用一个旋转轮来设置体重条目的日期。这是一个导航终点，因为在这里，用户惟一能够到达的地方就是 detailsView 视图。在应用程序标题处单击 Details，用户将会返回 detailsView 视图。 detailsView_Notes 允许用户在形式自由的文本区域输入任何与体重条目相关的备注。这也是一个导航终点，因为用户从这里能够到达的惟一地方就是返回 detailsView 视图。在应用程序标题处单击 Details，用户将会返回 detailsView 视图。
尽管体重跟踪器的设计可能比较复杂，但您可以使用 Maqetta 直观地创建一个 UI 模型，而不需要编写任何代码。您只需要拖放一些小部件然后编辑一些属性即可。
在云中发布 Maqetta
如果在阅读本文的同时跟随我们的指导来构建应用程序，您会从本文中获益更多。Maqetta 很容易入门，而且是免费的：
使用 Chrome、Firefox 或 Safari 最新版本浏览 Maqetta.org。 单击 Launch Maqetta 按钮。 如果您已经有一个帐户： 输入您的邮件地址和密码。 单击 Log In。 如果您没有帐户： 单击页面底部的 Register 按钮。 在 Create an Account 页面，输入您的邮箱地址然后单击 Sign up。 注意包含链接的邮件，您可以通过该链接确认注册，只需在收到邮箱时单击链接。 请求得到确认之后，输入您的邮件地址和密码，然后单击 Log In。