什么工具用于创建，体验新的布局和设计？

Question

我正在使用Backbone，node，jQuery等开发WebApp。

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

不幸的是，最后这个时间非常昂贵。

所以我决定与一些编辑器一起开发设计，然后将这个设计作为CSS重写。我已经读过这是一种常见的做法，大多数人都使用photoshop完成这项任务。

是否仍然推荐使用Photoshop，还是应该使用其他工具？

（我实际上并不想要一个完整的WYSIWYG。一般来说只需测试设计和布局）

欢呼和新年快乐， 博多

Answer 1

简短的回答没有。我知道没有一种工具可以让您轻松地在代码中构建布局，而不是像Dreamweaver，Aptana等完整的WSIWIG解决方案。

对于测试设计，您通常会构建线框，例如您从Balsamiq看到的线框。还有其他工具，Axure，Pencil等。搜索线框软件。

作为一名高级用户体验设计师，我听说并看到人们模拟他们在Html和CSS中构建的内容。虽然这可行。如果您打算花时间，精力和金钱来编写代码，那么您可以继续并构建它。

转到Linkedin上的"User Experience"小组，在那里问问题。你会得到很多答案。

Answer 2

如果您正在寻找Wireframing和Mockup工具。那么您可以使用 Balsamiq Mockups

它具有

等功能

1. 低Fi草图线框

2. 点击型原型

3. UI Components＆amp;图标

4. 导出为PNG或PDF等

您可以从Balsamiq Mockups Here

获取更多详细信息

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

Answer 3

您可以试用ForeUI（http://www.ForeUI.com/），它允许您直观地构建布局并将您的设计导出为HTML5模拟。您也可以手动修改生成的代码以满足您的需求。

http://www.foreui.com/store/

提供了一些有趣的例子

Answer 4

我在为Pidoco工作。

这是一家位于柏林的德国公司，我们开发了一个在线原型制作工具。

我们有很好的功能，如：

交互式原型 协作和邀请 iOS应用程序模拟移动原型（Android即将推出） 您可以从30天的免费试用开始，然后计划从每月9美元开始。

Answer 5

以下是模型工具的完整列表： http://c2.com/cgi/wiki?GuiPrototypingTools