输出为html格式,Pencil教程--输出HTML格式 | IT民工 or IT精英

最新推荐文章于 2022-07-20 16:25:01 发布

芰荷神明子

最新推荐文章于 2022-07-20 16:25:01 发布

阅读量367

点赞数

文章标签： 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页面展示取决于模板的风格，因此有兴趣的童鞋可以尝试自己做模板。