Pencil教程–输出HTML格式

Pencil一般是不能输出HTML格式的原型文件的,最常见的输出格式就是图片格式,不过Pencil有支持HTML格式输出的功能,只不过需要安装输出模板。Pencil支持输入PNG、PDF、ODT、DOC、HTML等格式,每种格式输出都要安装输出模板,否则就只能截图留存了。安装过输出HTML的模板之后,Pencil也就可以输出HTML原型了,再加上Pencil本身支持内部链接,这样就可以在一定程度上模拟AxureRP的效果了,本文介绍Pencil输出HTML格式原型的方法。

首先需要安装HTML格式的输出模板,这个模板可以到Pencil的官网下载,下载地址:http://pencil.evolus.vn/en-US/Downloads/Templates.aspx,这里提供了一些别人制作的模板下载,要下载Type: Exporting to HTML类型的模板才可以哦,下载下来是一个.zip的安装包,然后打开Pencil界面,选择Tools>>Manage Export Template打开模板编辑器。

?

在选择Install New Template安装新模板之前,上面的Templates for一定要先选择为Exporting to HTML Documents,否则也不生效,下拉的其他选项是关于其他导出格式的,这样选择好之后,再安装新模板就可以了,这里以left panel形式的为例介绍。

模板安装好之后就可以用来导出了,打开一个之前设计好的Pencil文件,选择菜单Document>>Export Document打开导出编辑框,选择Single web page,然后next,其他的分别是各种导出格式的选项。

?

下一步是选择需要导出的页面文件的,Pencil文件以TAB页区分不同的标签页,这个步骤可以选择导出哪些标签页,这里有一点需要注意的就是TAB标签页的命名需要是数字或者字母,不支持中文,否导出来会是乱码。

?

第三步就是设置具体的导出属性了,先是选择用哪个模板来导出,这里选择left panel,再设置导出文件的存储路径即可,中间的那个选项是提示是否需要带链接导出的,Pencil里面可以设置内部链接到其他的标签页,这里选择是。

?

这样点Finish完成之后就导出好了,可以去存储路径下看,找到index.html文件,打开就是Pencil输出的html格式原型文件了,可见左侧是缩略图导航,右侧是主体内容显示,因为我们勾选了带链接导出,所以点击那个超链接可以访问到页面2,也可以通过左侧的导航切换。输出的HTML页面展示取决于模板的风格,因此有兴趣的童鞋可以尝试自己做模板。

?

基本上就是这样了,这样可以实现简单的交互,Pencil也就不那么呆板了,有交互总比单看图片强一些。

《原型设计》微电子杂志? 点此订阅

点此查看演示

点此下载源文件

点此下载常用pencil输出模板



无觅相关文章插件,快速提升流量

“Pencil教程–输出HTML格式”6 条评论

commenter

在将pencil的html格式文件上传到网上浏览的时候,需要注意更改其引导文件index.html,将其中图片路径的%5C改为/,否则图片会显示不出来,在本地访问是可以的,需要注意。

commenter

用这款东西的时候 还真不理解什么叫原型设计。。。只是把它当作是一般的思维导图来用而已。。。哈哈哈

commenter

2011-12-07补充常用pencil输出模板的下载资源

小咪 | 2011-12-27 14:13 |
commenter

我按你说的方法试了,可是不行啊,在install new template那一步,无法读取下载的模板。。。。。。难道因为我是windows?

小咪 | 2011-12-27 14:43 |
commenter

已经搞定

commenter

请问小咪 你是怎么导入的