跨平台免费开源原型设计软件 - 「Pencil」内建网站、 App 原型设计图库

我虽然不曾担任过开发网站、应用软件的设计师,但是也曾经从内容编辑、创作者的角度,参与过一些网站、 App 规划的讨论,那时候为了比较清楚的表达自己期待中的「图形使用者界面(GUI)设计样貌」,除了有时手绘草图外,也曾经利用「原型设计工具(GUI prototyping tool )」来绘制出网站和 App 的原型草稿。

当然,因为上述原因,我的需求比较没有那麽专业,对我来说简单易用,可以表达出脑中概念就够了。

而今天,就要来介绍一款可以解决我自己问题,相信也能解决你的问题的「原型设计软体」:「 Pencil 」,这是一款单机软体,免费开源,可以免费商业使用,并且同时支援 Windows、 Mac 与 LInux 平台!

「 Pencil 」已经可以算是一款老牌的原型设计软体,从早期的 Windows 电脑软体界面开始,慢慢加入了网页原型设计功能,近几年也增加了手机 App 开发的模型。

与时俱进,让「 Pencil 」可以做出网站或 App 的示意草图、流程图、互动设计,并且目前软体本身都还有在持续更新。
2017-8-28pencil1

作为一款 GUI 原型设计软体,「 Pencil 」内建了各种设计元素,包含网页图示、电脑软件图、手机 App 图库等。

只接从左方的图库拖曳,就可以把各种元素拖曳到右边的编辑区,进行整合排列。

2017-8-28pencil2

但还是可以看到「 Pencil 」有些图库有点老旧,例如 Android 与 iOS 的图库都还是旧版介面。

这时候,「 Pencil 」除了可以让你自己汇入图库外,还能线上下载更多图像元素。打开最左下方的「图库按钮」,选择要「 Install from Repository 」。

2017-8-28pencil3

在线上图库中,就有像是 Android 比较新版的介面元素可以选择。

2017-8-28pencil4

除了利用「 Pencil 」建立网页、 App 的原型画面外,他也支援利用超连结建立操作互动流程。

例如我可以在一个按钮上设定「 Link To 」,然后指定当点击这个按钮后,要开启到第二的原型设计页面。

2017-8-28pencil5

「 Pencil 」还支援导出各种档桉格式,从简单的图片、 PDF ,到可以互动操作的 HTML 网页格式。

2017-8-28pencil6

如果我导出成网页 HTML 档桉,那麽我就可以在浏览器中打开这个应用程式原型,并且根据我前面设计的「超连结」,进行互动操作的测试。

2017-8-28pencil7

除了网站与 App 原型设计图外,「 Pencil 」也支援画流程图,这也是在应用程式开发过程中需要的,先画出这个应用的互动与资料架构。

2017-8-28pencil8

最后,在绘製流程图或设计原型草图时,可以利用「 Pencil 」内建的大量免费美工图库,透过搜寻关键字,找到自己需要的图示,用到自己的设计中,当作填充材料或示意图。

2017-8-28pencil9

作为一款免费、开源,且跨平台的单机软件,「 Pencil 」能够满足原型设计的基本需求,功能简单好上手,在绘製网站原型草图、 App 原型草图、网站架构流程图时方便易用

而且还支持导出成图档、 PDF 与 HTML 网页,并且可以让我们在 HTML 网页上测试互动操作流程,说不定对你来说,也能帮你画出有点专业的原型草图。

官方网站: http://pencil.evolus.vn/

这里有很多志趣相同的人,可在这里与他们联系