使用免费/免费工具在GNU / Linux上创建网站线框

#1 楼

更新：似乎不再开发原始工具（2013-09年的最新版本）。 @ wb9688提到有一个分叉：https://github.com/prikhi/pencil

更新2：@nradk表示已不再维护该分叉。 https://github.com/evolus/pencil是另一个分支，“正在积极开发中，实际上是对旧版本的重写”。


铅笔（许可证：GPLv2）是“ GUI原型制作工具”，可以作为GNU / Linux（*），Microsoft Windows和Mac OS X的独立工具以及
Firefox附加组件（**）。

（*）它包含在Arch Linux和Fedora的软件存储库中（作为pencil）。

（**）Firefox Mozilla托管的附加组件似乎已过时（当前是2009年的1.0.6版本），而Pencil下载页面上托管的当前版本（当前是2013年的2.0.5版本）。


我使用Pencil作为Firefox插件。它将打开一个新窗口（没有Firefox镶边，它具有自己的菜单栏等）。有时，速度会变慢（例如，当我重新排列图形时），但是这可能是我的旧PC造成的。

图形被称为“形状集合”或“模板”。它附带了一些用于不同界面（包括Web）的集合。可以导入其他图形。以下是我制作的一个示例线框，以了解其中包含的一些图形：



可以导出线框，包括PNG，HTML，PDF，SVG和ODT 。关于HTML（“单个网页”）导出的一件好事是，您可以添加链接到其他模型（包含在同一Pencil文档中）的超链接，即，您可以模拟用户交互。

#2 楼

虽然Inkscape并不是主要的线框图工具，但它倾向于用于开源圈子中的线框和模型，例如GNOME和Elementary都使用它。 （类似地，在专有世界中，UX设计人员倾向于使用通用矢量设计工具，例如Sketch和Figma。）

如果您要寻找入门组件，则取决于您所使用的平台正在设计。


对于GNOME和basic，我建议从其设计存储库中的svg开始（上面的链接）。
对于Web和移动，您可以找到各种网络上的开源线框套件。 Inkscape可以导入AI文件，但是不幸的是，许多工具包仅适用于Sketch。您可以使用专有的Web应用程序Figma上传Sketch文件，然后将其导出为SVG以便在Inkscape中使用。

#3 楼

也许您可能会考虑使用Mockplus一段时间。它可以帮助您为手机和网络创建出色的原型/线框。


通过它，您可以将图像（PNG和GIF）或html导出到涉众，以表达您的想法和设计。
对于应用程序项目，您甚至可以通过扫描由项目生成的QR码在智能手机上对其进行预览。
它同时支持Windows和Mac。
完全可视化了Mockplus中的交互式设计，即所见即所得。通过简单的拖放即可轻松构建交互式原型。它具有多个触发命令，例如旋转，调整大小等。以及一组预先设计的组件，包括弹出面板，堆栈面板，滚动框，滑动抽屉和图像轮播，使您可以更快，更轻松地创建完全的交互。