Pencil

Pencil是一款开源免费的图形用户界面原型设计工具，软件采用javascript与html5构建，提供丰富组件库与多格式导出能力，让设计师与开发者无需专业背景也能高效完成交互原型设计，无需安装复杂依赖即可快速创建网页、桌面及移动应用线框图。

Pencil特色

1、内存智能管理

大型项目开启分页加载机制，仅激活页面占用内存，10页以上文档卡顿率降低70%，适合复杂系统原型设计。

2、万物皆组件库

内置12套官方模板，支持导入自定义svg、png作为组件，社区已共享上千套第三方模板，拖拽即可搭建界面。

3、多格式高清导出

支持png、jpeg、svg、pdf、html五类格式导出，可选当前页或全部页面，导出的svg可直接导入figma继续编辑。

4、页面链接交互

可为按钮、图标设置点击跳转，模拟真实应用流程，演示时点击热点自动切换页面，无需代码即可展示完整交互逻辑。

5、字体全嵌入支持

可将ttf、otf字体文件直接嵌入文档，打开原型时无需对方安装字体，彻底解决跨设备字体丢失问题，保障设计一致性。

6、离线零依赖设计

所有操作本地完成，不连接云端服务器，零数据上传，涉密项目可放心使用，代码开源可审计，安全透明。

Pencil功能

1、矢量绘图引擎

基于canvas2d渲染，支持钢笔、形状、文本、图片基础工具，路径节点可自由编辑，绘制图标与装饰元素精度达像素级。

2、图层与对齐系统

提供置顶、置底、上下移层级操作，支持左对齐、居中、右对齐、等间距分布，批量选中元素一键排版，效率提升3倍。

3、自定义画笔扩展

可安装社区自制的iconfont、流程图、手势等画笔包，无限扩展工具箱，满足游戏、物联网等特殊行业原型需求。

4、文档分页管理

左侧面板可视化管理所有页面，支持拖拽排序、批量复制、跨文档迁移，大型项目结构清晰，团队协作更易分工。

5、html原型打包

导出html时自动生成index导航页，所有资源内联为单文件，发送给客户即可在浏览器打开交互原型，无需安装任何软件。

6、栅格辅助设计

可自定义12或24列栅格系统，元素自动吸附栅格线，确保界面元素对齐规范，响应式布局设计更轻松。

7、快捷键全覆盖

支持ctrl+s保存、ctrl+z撤销、ctrl+d复制、del删除等标准快捷键，符合主流设计软件习惯，上手零学习成本。

Pencil安装步骤

1、在本站下载Pencil安装包。

2、双击.exe安装包，按向导选安装路径、快捷方式等完成安装。

3、按提示装依赖组件，完成后通过快捷图标打开软件即可使用。

Pencil常见问题解答

q：如何导入自制组件?

a：将svg文件放入resources/templates目录，重启后在组件库选择“本地模板”即可加载自定义组件。

q：导出图片模糊怎么办?

a：在导出设置中将dpi调整为300，或使用svg格式无损导出，放大后依旧清晰。

q：能否实现复杂交互动画?

a：Pencil仅支持页面跳转式交互，复杂动画建议在axure或figma中实现后再导入静态截图。

q：启动时白屏无反应?

a：尝试删除用户目录下的.pencil配置文件，或更新显卡驱动至最新版本，旧版驱动可能无法渲染canvas。