西西软件园多重安全检测下载网站、值得信赖的软件下载站!
西西首页 常用软件 软件下载 安卓软件 游戏下载 安卓游戏 MAC应用 驱动下载 安卓电视
系统工具网络工具媒体工具图形图像聊天工具应用软件编程开发手机软件安卓应用电脑安全字体素材

HTML5可视化设计编辑工具Maqetta

10.0.2 官方最新版
  • HTML5可视化设计编辑工具Maqetta10.0.2 官方最新版
  • 软件大小:86.1M
  • 更新时间:2015-01-05 09:20
  • 软件语言:英文
  • 软件厂商:
  • 软件类别:国产软件 / 免费软件 / 编程工具
  • 软件等级:4级
  • 应用平台:Mac
  • 官方网站:http://maqetta.org/
好评:50%
坏评:50%

装机必备软件

软件介绍

Maqetta是一个开源的HTML5用户界面可视化设计工具。提供了WYSIWYG所见即所得的编辑模式,用户仅仅需要拖曳鼠标即可完成对界面上复杂Widget的布局和摆放。本身这个工具也是采用HTML开发的,所以运行在浏览器上不需要安装额外的插件。 

Maqetta,一个创建桌面和移动用户界面的HTML5设计编辑工具,并同时宣布将项目捐助给开源机构Dojo基金会。

Maqetta已经是开源项目,提供WYSIWYG可视化HTML5用户界面设计功能,仅需简单的拖曳操作,支持桌面和移动用户界面。

Maqetta 应用本身用HTML5/Ajax编写,因此运行在浏览器中无需请求额外的插件或下载。用户可以下载源码,并安装在自己的服务器上,并可自定义源码来满足自己的需求,再回馈到开源项目。

功能详述:

Web 界面原型设计功能介绍

图 1.Maqetta 界面一览

1. 无需安装,直接在浏览器上运行

2. 可从设计面板上直接拖拽控件

3. 调整控件的象素大小及各个属性,可以在属性面板里完成

4. 用户可选所见即所得模式,或是源码编辑模式,或同时开启两种模式进行实时的修改和预览

5. 设计师可以通过 Outline 面板来指定当前状态下某一元素显示与否

图 2. 设计模式和代码模式

1. 按“Split Horizontally”按钮可上下拆分设计模式和代码模式

2. 上下同时显示设计模式和代码模式,为制作调整原型提供了极大的方便,也可以只显示 design-only 模式或是 code-only 模式

图 3. 用 Maqetta 创建 developer-ready 应用

1. 当用户在拖拽控件到画布的同时,Maqetta 会为其添加合适的 HTML 标签,所见

到的页面就是在浏览器上的实际运行结果。

2. 由 Maqetta 生成的代码可以被直接用于开发,旨在做 UI 原型这个阶段,就已经将 CSS 部分的代码完成,极大程度避免再次开发界面工作。

图 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. 控件数据输入和数据绑定

1 .拖动左侧的 TREE 控件到画布上

2 .所有有值的控件都可以通过双击来改变此元素的值。Maqetta 允许开发者使用后台数据源。

图 6.CSS 调整工具

属性面板里提供 CSS 调整工具,可以为元素进行布局,内外边距,背景,边框,字体大小等进行调整。可以为单个元素指定样式,也可以将 CSS 规则应用于多个控件或 HTML 元素。

图 7. 线框图模式

设计师可以通过工具条的“Switch theme”按钮切换当前样式主题,将 MOCKUP 原型以线框图手绘呈现,供团队成员进行 Review, 切换成线框图模式的好处是,将关注点放至功能层面及页面的跳转关系,流程上,而不是样式层面上。

图 8. 添加备注功能

通过工具条上的“Add note”按钮可以为页面添加备注,以作补充说明

图 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. 团队评审和评论功能步骤一

在 New 菜单里选择 New Reivew 子菜单,输入基本信息

图 11. 团队评审和评论功能步骤二

选择需要 Review 的文件

图 12. 团队评审和评论功能步骤三

添加审阅者的 Email 后,按 Publish 按钮,审阅人将收到被邀请参加评审的邮件。

图 13. 团队成员添加评论功能

团队审阅者收到的审阅邮件会附带 URL,点击 URL 后,审阅者可以对 UI 原型进行评论,添加注解。

图 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 样式化举例

通常情况下,调整 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 面板

对于熟悉 JQuery,YUI 的用户来说,也整合了部分控件,极大的方便了设计师。

移动设备界面原型设计介绍

图 17.Maqetta 制作移动设备用户界面

可拖拽 Dojo 1.7 mobile widgets 到移动设备实际尺寸模拟画布上

图 18. 用 Maqetta 制作移动设备用户界面,横向切换

可在不同的手机设备之间切换,放大 / 缩小或横向纵向切换,令人兴奋的是 Preview 4 将加入手机触摸模拟。

Maqetta 功能如下:

WYSIWYG可视化页面编辑    

拖曳式移动UI设计   

设计或源码浏览同步编辑  

对CSS样式的深度支持

总结:

IBM 推出的 Maqetta 是基于浏览器的开源的所见即所得的 HTML5 快速产品原型设计工具,支持 Google Chrome、Mozilla Firefox 3.5+ 和 Mac Safari 5,为用户体验设计师提供了一个可见即可得的可视化编辑环境。它可以在浏览器上直接使用,无需安装任何插件,使得制作界面原型的工作通过简单的拖拽即可完成 , 并支持移动设备用户界面原型开发。Maqetta 联合创作者 Adam Peller 表示,他们希望与社区用户和开源开发者合作,推动基于 HTML5 的用户界面创作工具的开发。

下载页面:https://github.com/maqetta/maqetta/releases

可免费下载使用,可注册或是以临时用户身份“give it a try”,提供教程及文档

新用户可通过教程获得快速的帮助,go to Help->Tutorials

支持的浏览器

目前 Maqetta 可以在 Google Chrome, Firefox 4, Safari 5.1/Mac 上运行

软件截图

HTML5可视化设计编辑工具Maqetta 10.0.2 官方最新版

    其他版本下载

    热门评论

    最新评论

    发表评论 查看所有评论(0)

    昵称:
    表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
    字数: 0/500 (您的评论需要经过审核才能显示)

    下载帮助下载帮助西西破解版软件均来自互联网, 如有侵犯您的版权, 请与我们联系。

    TOP
    软件下载