什么工具可以创建、体验新的布局和设计？

Question

我正在用Backbone、node、jQuery等开发WebApps。

在我刚开始的时候，我使用Twitter Bootstrap进行设计。然后我开始使用自己的设计，这是我用Chrome插件Stylebit创建的，它允许实时修改CSS。

不幸的是，这在最后是非常耗时的。

因此，我决定在一些编辑器的帮助下开发这个设计，然后将这个设计手工重写为CSS。我读到过这是一种常见的做法，大多数人使用photoshop来完成这项任务。

photoshop是否仍被推荐使用，或者是否有其他工具可以使用？

(实际上我并不想要一个完整的所见即所得。只是用来测试总体设计和布局的东西)

干杯，新年快乐，博多

Answer 1

简而言之，不是。据我所知，没有一个工具可以让你轻松地在代码中构建布局，而不是像Dreamweaver、Aptana等这样的完整的WSIWIG解决方案。

为了测试设计，您通常会构建线框，就像您在Balsamiq看到的那样。还有其他的工具，如Axure、铅笔等。搜索一下线框软件。

作为一名资深的UX架构师，我听说和看到人们用Html和CSS模拟他们正在构建的东西。而这是可行的。如果您打算投入时间、精力和金钱来编写代码，那么您最好继续构建它。

转到我在Linkedin上的"User Experience"群，在那里问问题。你会得到一大堆答案。

Answer 2

如果您正在搜索线框和模型tools.Then，您可以使用Balsamiq Mockups

​

​

它有像这样的特性

1. 低保真草图Wireframes
2. Click-Through原型
3. UI组件和图标
4. 导出为PNG或PDF等

您可以从获取更多详细信息

我希望这能对你有所帮助。

Answer 3

您可以尝试使用ForeUI (http://www.ForeUI.com/)，它允许您以可视方式构建布局并将设计导出到HTML5模拟。您还可以手动修改生成的代码以满足您的需求。

​

​

http://www.foreui.com/store/上提供了一些有趣的示例