问题描述
作为Web开发人员的一部分，我花了一些时间来做UI原型来向客户展示。这是背后的痛苦，但有时必须要做。
我见过Shuttleworth(和设计团队)抽出这样的图像：
这是由名为Balsamiq Mockups的东西制成的……在Adobe Air(yack！)之上取得平衡并且售价79美元。
我已经尝试过，但它一直在摔倒。我认为这与Air有关，而不是应用程序本身。我的观点是，如果我付出了某些代价，我希望它是原生的。
最佳解决方案
由于我没有开始理解的原因，它的作者已将其编写为Firefox插件，但Pencil是一款出色的FOSS原型制作工具。与Balsamiq Mockups一样，它配备了大量预制组件，可让您快速将演示屏幕放在一起。也像Balsamiq一样，你可以在草图中有多个页面，并在它们之间建立链接，允许程序员和设计师使用”click”某些按钮，并了解发生这种情况时应该发生什么。
与Balsamiq不同，它的默认模拟小部件集看起来像真正的小部件，我担心会导致程序员盲目地模仿他们在屏幕上看到的模型。值得庆幸的是，草图小部件模板已经与Pencil一起分发了一段时间。与Balsamiq不同的是 – 并且希望Firefox add-on-Pencil将其草图导出为HTML而不是Flash /Flex。
我知道铅笔看起来很奇怪，因为它是一个Firefox扩展，但实际上效果非常好，而且是easy-to-use。我不是在意识形态上依赖FOSS而且不介意花80美元购买优秀的软件，所以我会诚实地说我使用Balsamiq而不是铅笔。我发现Balsamiq的一般工作流程和ease-of-use优于铅笔。但是铅笔仍然是一个很棒的工具。如果你正在寻找一个FOSS原型，我认为你很难做得更好。启动Firefox和go check it out。
次佳解决方案
我个人喜欢在Inkscape(矢量图形绘图程序)中进行web-ui原型设计，它使用起来相当简单，你可以在制作最终产品时重复使用大部分模型。
第三种解决方案
尝试Glade Interface Designer，一个GTK /Gnome接口设计器，通常用于实际应用，但同样可以用于原型。
第四种方案
我还建议使用Inkscape进行模型化。您可以从www.openclipart.org获取一些库存小部件(有人应该上传更多！)。
我发现它非常方便用于标记现有的UI …获取应用程序的屏幕截图，插入到Inkscape并将其放在锁定的图层上，然后在其上的图层上绘制图形以显示您的任何更改需要表现出来。