原生的、FOSS GUI 原型设计工具？

Question

作为 Web 开发人员工作的一部分，我花了大量时间制作 UI 原型以向客户展示。这是背后的痛苦，但有时必须这样做。

我见过沙特尔沃思（和设计团队）输出这样的图像：

那是由一种叫做Balsamiq Mockups 的东西制作的……在 Adob​​e Air 之上平衡的东西（糟糕！），售价 79 美元。

我试过了，但它一直在摔倒。我认为这与 Air 而非应用程序本身有关。我的观点是，如果我要花钱买东西，我希望它是本地的。

Answer 1

出于我不明白的原因，它的作者将其编写为 Firefox 插件，但Pencil是一个很棒的 FOSS 原型设计工具。与 Balsamiq Mockups 一样，它带有大量预制组件，可让您快速组装演示屏幕。也像 Balsamiq 一样，您可以在草图中有多个页面，并在它们之间建立链接，让您的程序员和设计师“单击”某些按钮，并了解发生这种情况时会发生什么。

与 Balsamiq 不同，它的默认模拟小部件集看起来像真正的小部件，我担心这会导致程序员盲目模仿他们在屏幕上看到的模型。幸运的是，草图小部件模板已经随 Pencil 发布了一段时间。同样与 Balsamiq 不同——希望对于 Firefox 附加组件来说并不奇怪——Pencil 将其草图导出为 HTML，而不是 Flash/Flex。

我知道 Pencil 看起来很奇怪，因为它是一个 Firefox 扩展，但它实际上工作得很好，并且易于使用。我在意识形态上并不依附于 FOSS，也不介意花 80 美元购买出色的软件，所以我会诚实地说我使用 Balsamiq 而不是 Pencil。我发现 Balsamiq 的一般工作流程和易用性优于 Pencil。但 Pencil 仍然是一个很棒的工具。如果您正在寻找 FOSS 原型制作者，我认为您很难做得更好。启动 Firefox 并查看它。

Answer 2

我个人喜欢在Inkscape（矢量图形绘图程序）中进行 web-ui 原型设计，它使用起来相当简单，并且您可以在制作最终产品时重复使用大部分模型。

Answer 3

试试Glade Interface Designer，一个 GTK/Gnome 界面设计器，通常用于实际应用程序，但同样可以用于原型。

Answer 4

我还建议将 Inkscape 用于模型。您可以从 www.openclipart.org 获得一些股票小部件（应该有人上传更多！）。

我发现它非常方便的地方是标记现有的用户界面...截取应用程序的屏幕截图，插入 Inkscape 并将其放在锁定的图层上，然后在其上的图层上进行绘图以显示您所做的任何更改需要显示。