【生意多】-免费发布分类信息
当前位置: 首页 » 新闻 » 教程 » 正文

HTML5 可视化设计工具:Maqetta

放大字体  缩小字体 发布日期:2020-06-11 18:33:50    浏览次数:7
导读

  developerWorks 中国 正在向 IBM Developer 过渡。 我们将为您呈现一个全新的界面和更新的主题领域,并一如既往地提供您希望获得的精彩内容。  Maqetta 是由 Dojo 基金会提出的开源技术 , 提供所见即所得的工具 , 它允许用户体验设计师 (UXD) 用简单的拖拽来创建实时的 UI 原型。用户可以下载源码,并安装在自己的服

  developerWorks 中国 正在向 IBM Developer 过渡。 我们将为您呈现一个全新的界面和更新的主题领域,并一如既往地提供您希望获得的精彩内容。

  Maqetta 是由 Dojo 基金会提出的开源技术 , 提供所见即所得的工具 , 它允许用户体验设计师 (UXD) 用简单的拖拽来创建实时的 UI 原型。用户可以下载源码,并安装在自己的服务器上,并可自定义源码来满足自己的需求,再回馈到开源项目。

  Maqetta 应用本身用由 HTML5/Ajax 所编写,因此运行在浏览器中无需请求额外的插件或下载。Maqetta 的主要设计目标之一是建立为开发人员准备的 UI 原型,提高从页面设计师将原型转交给开发工程师的工作效率。由 Maqetta 创建的用户原型界面可以递交给开发工程师直接转换成实际出品,减少重新开发的工作量,促进在整个开发生命周期里,最大程度保存表现层资源,如 CSS 样式。

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

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

  2. 点击 File 面板的第一个按钮后,将出现对话框,你可以选择是否包含 Dojo 压缩文件,或重新配置与 Elipse/RAD 相符的路径。如果包含 Dojo,你可以解压缩到服务器上,浏览器将正确显示 HTML 文件。

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

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

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

  1. Maqetta 给视觉设计师提供了无需编程也能创建强大的交互页面原型的机会,如图所示,点击 New 按钮

  4. 用户可通过此处 Add state 和 Remove state 按钮来自定义页面状态,此例中 Add Task 状态被选中,设计师可以通过为 Add 按钮设置 onclick 事件来切换到不同的页面状态

  5. 设计师可以在 Outline 面板里,点击控件元素前的“眼睛”图标来决定是否显示。本例中,在 Add Task 状态下,所有层都显示,但 MultiSelect 无需显示。这和 photoshop 里的图层概念是相类似的,对于视觉设计师而言是相当熟悉的。

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

  支持自定义 CSS 主题,选择页面上的控件,然后在属性面板里自定义。用户可以保存更新的主题 CSS 文件,然后在项目团队之间共享,使得公司内部规范他们自己的界面外观。

  通常情况下,调整 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,代码如下:

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

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

  一些较为重要的控件目前还不够完整,与 Dojo 控件结合得较好 , 对其它的流行的 Javascript 框架的支持不够完整。随着产品的不断升级 , 将进一步丰富控件。由于直接通过浏览器使用 , 在用户量较大时 , 性能方面还有待进一步优化。产品设计上还需要更为“傻瓜”一点 , 更为易用些。在试用过程中 , 要考虑突然断线等问题 , 但用户可自行选择是否下载载择 .ascript 见即所得的产品到本机使用。使用过程中感觉稳定度不够,机目前还存在一些 BUG, 可通过讨论组了解更多。鼓励大家自由的贡献,探索,为产品的不断完善提供更多的帮助。

 
关键词: html5编写工具
(文/小编)
打赏
免责声明
• 
本文为小编原创作品,作者: 小编。欢迎转载,转载请注明原文出处:http://www.31duo.com/news/show-260780.html 。本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们。
 

(c)2016-2019 31DUO.COM All Rights Reserved浙ICP备19001410号-4

浙ICP备19001410号-4