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

【问题标题】：What Tool for creating, experiencing new layouts and designs?什么工具用于创建、体验新的布局和设计？
【发布时间】：2012-12-15 03:33:15
【问题描述】：

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

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

不幸的是，这最终花费了很多时间。

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

是否仍然推荐使用 Photoshop 或有其他应该使用的工具？

（我实际上并不想要一个完整的所见即所得。只是为了测试设计和布局）

新年快乐，博多

【问题讨论】：

知道什么对线框网页有好处吗？ HTML/CSS。
@cimmanon 我完全同意，但是你如何处理所有这些小东西，比如边距、阴影、字体、颜色等等。他们总是需要很长时间。
如果网站设计既快速又简单，那么每个人都会这样做。
线框图布局和所有装饰（阴影/颜色/等）之间存在很大差异。铅笔和纸是制作多种布局原型的最快方法。使用 CSS 预处理器（Sass、LESS 等）可以轻松更改所有其他内容。
好的，你能把这个写成答案然后我可以标记它。

【解决方案1】：

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

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

作为一名高级用户体验架构师，我听到并看到人们用 Html 和 CSS 模拟他们正在构建的东西。虽然这可以工作。如果您打算投入时间、精力和金钱来编写代码，您不妨继续构建它。

转到我在Linkedin 上的"User Experience" 群组并在那里提问。你会得到很多答案。

【讨论】：

【解决方案2】：

如果您正在寻找线框图和模型工具。那么您可以使用 Balsamiq 模型

它具有

等功能

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

希望对你有所帮助。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我在 Pidoco 工作。

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

我们有很好的功能，例如：

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

【讨论】：

【解决方案5】：

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

【讨论】：