简体繁体 English

有人知道可以导出为代码的模型工具吗？

[英]Does anybody know of a mockup tool that can export into code?

原文 2012-03-04 01:48:41 4 4 xhtml/ user-experience/ mockups/ interface-design/ interaction-design

I want a tool that allows me to design the screens pixel-by-pixel (almost like i took a screencap of the webpage) and gives me the option to export the entire screen into XHTML/CSS. 我想要一个工具来让我逐个像素地设计屏幕（几乎就像我截取了网页的屏幕截图一样），并为我提供了将整个屏幕导出到XHTML / CSS的选项。
Does anybody know of such a tool? 有人知道这样的工具吗？
As a note, I am NOT looking for something like Balsamiq. 需要注意的是，我不是在寻找Balsamiq之类的东西。 I want to create very detailed UIs--NOT wireframes. 我想创建非常详细的UI，而不是线框。

4 个解决方案

You may take a look at ForeUI: http://www.foreui.com/ 您可以看看ForeUI： http ： //www.foreui.com/

You can design the GUI with any fidelity, and define the interaction like a flowchart. 您可以任意保真地设计GUI，并像流程图一样定义交互。 The UI and interaction can be exported to HTML+CSS+Javascript. UI和交互可以导出到HTML + CSS + Javascript。

Axure - mockup tool but very detailed. Axure-样机工具，但非常详细。

Microsoft Sketchflow - haven't tried it, but if I understand correctly it's designed for round-trip-engineering, so it probably does what you want Microsoft Sketchflow-尚未尝试过，但是如果我理解正确，它是为双向工程设计的，因此它可能会满足您的要求

Axure RP is the program that you're looking for. Axure RP是您要寻找的程序。 It allows you to create advanced mockups with the ability to add interaction to it. 它使您可以创建高级模型，并可以向其中添加交互。 You can also export your mockup as a HTML-document to get a full interactive experience looking just like a "real" website. 您还可以将样机导出为HTML文档，以获得像“真实”网站一样的完整交互体验。 If you're a student, you should be able to get a free license. 如果您是学生，则应该可以获得免费许可证。

I've used "Axure RP pro" for every interaction design project I've worked on (and with great results), I would really recommend it. 对于我从事的每个交互设计项目，我都使用了“ Axure RP pro”（并取得了不错的效果），我真的会推荐它。

And no, I'm not working for the company. 不，我不是在公司工作。

I think Axure is probably the closest to what you are after. 我认为Axure可能是您所追求的最接近的产品。 It's designed for the tasks you want whereas the other tools mentioned are more focused on the needs of developers and designers. 它是为您所需的任务而设计的，而提到的其他工具则更着重于开发人员和设计人员的需求。 Is there any specific reason why you are not going with Axure? 您不选择Axure的原因有什么具体原因？ Cost? 成本？

I am using Omnigraffle Professional and I'd like to create prototypes so I am thinking about diving into Axure (I have the Axure RP beta 6.5 installed but barely touched yet) but I'm not sure the cost / benefit is there for me but I do worry about suggesting solutions and then after the first build realising they are not right. 我正在使用Omnigraffle Professional，所以我想创建原型，所以我正在考虑跳入Axure（我已经安装了Axure RP beta 6.5，但是还没有接触过），但是我不确定这对我有好处，但是我确实担心建议解决方案，然后在第一次构建后意识到它们是不正确的。

There are many simple UI/Wireframing tools created by single developers or small teams, but I suspect as you add in complex functionality like the prototyping you get in Axure, the list of options reduces - to a list of one in this case unless there is one I've missed? 由单个开发人员或小型团队创建的许多简单的UI / Wireframing工具，但是我怀疑当您添加诸如在Axure中获得的原型之类的复杂功能时，选项列表会减少-在这种情况下，选项列表会减少，除非存在我错过了吗？

Added: 添加：

http://uxpin.com/ - there is an export feature. http://uxpin.com/-具有导出功能。