5 分钟跑通 Pencil：免费开源原型与线框图工具完整指南

5 分钟跑通 Pencil免费开源原型与线框图工具完整指南【免费下载链接】pencilDEPRECATED: Multiplatform GUI Prototyping/Wireframing项目地址: https://gitcode.com/gh_mirrors/pen/pencilPencil 是一款开源免费的跨平台 GUI 原型设计工具用于快速制作线框图和中高保真界面原型适合需要快速验证想法的产品经理、做界面布局沟通的 UI/UX 设计师以及开发前想确认界面效果的工程师。它完全本地运行不依赖云端设计文件保存在自己的电脑上Windows、Linux、macOS 均可使用。本文按装起来 → 用起来 → 导出去 → 懂原理 → 会扩展的路径带你完整走一遍 Pencil 原型工具的使用流程。先把 Pencil 跑起来三平台安装与构建Pencil 基于 Mozilla 的 XUL 桌面框架所以运行它需要 XULRunner 或 Firefox 内核环境。 环境要求一览平台运行依赖构建依赖LinuxXULRunner 4 或 Firefox 4 或 Pale Moon 25无构建脚本自带逻辑Windows安装包已内置 XULRunnercurl拉取运行时、NSIS打安装包macOS压缩包已内置 XULRunnercurl拉取运行时Firefox 扩展Firefox 本体无获取源码git clone https://gitcode.com/gh_mirrors/pen/pencil cd pencil 只想拿最新代码快速体验可以加--depth 1只克隆一次提交省掉大量历史体积。按平台构建⏱️ 约 5 分钟 | 难度★★☆所有平台共用同一个构建入口 build/build.sh传不同参数即可cd build ./build.sh linux # Linux 可执行文件 tar.gz 包 ./build.sh xpi # Firefox 扩展 .xpi 文件 ./build.sh mac # 生成 Pencil.app ./build.sh win32 # 生成 Windows 安装 exe产物统一放在build/Outputs/目录。Linux 用户构建完直接xulrunner Outputs/Linux/application.ini即可启动macOS 用户把Pencil.app拖进 Applications 目录Windows 用户双击Outputs/里的安装 exe。本节要点运行依赖核心是 XULRunner 或 Firefox 内核Windows/macOS 官方包已内置Linux 需自行确认一条./build.sh 平台命令覆盖所有构建目标产物在build/Outputs/想快速体验可以走 Firefox 扩展路线./build.sh xpi后用 Firefox 直接打开 xpi第一次使用从线框图到多页原型的实操路径启动后主界面由五个区域组成顶部菜单栏与工具栏、左侧组件库面板Collections、中央画布、右侧属性面板。以下按一次真实设计流程走。第 1 步选对组件集合左侧面板内置了多套 stencil 组件库Common基本图形与文本、Flowchart流程图符号、SketchyGUI手绘风 UI、iOS GUI 与 iOS Wireframe移动端、Android GUI、Windows XP GUI、Basic Web Elements网页元素、Annotation标注箭头等。做 App 原型选 iOS GUI做后台管理选 Common 加 Annotation 即可。第 2 步拖拽与布局把组件从面板拖到画布。画布默认启用网格8px 格可在 默认配置 中调整并且默认开启对象吸附object snapping拖动时会自动对齐邻近元素这对保持线框图整齐很有帮助。第 3 步编辑属性单击选中图形右侧属性面板出现该组件的全部可调属性文本内容、字体、填充颜色、边框、阴影等。每个集合的组件暴露哪些属性取决于它的定义文件不需要记忆。第 4 步批量整理按 Ctrl 多选后Shape 菜单提供一整套对齐与均布工具左/中/右对齐、顶/中/底对齐、等宽等高、水平等距、垂直等距以及组合/取消组合。做网格状 UI 时等宽 等高 等距三连是最常用的组合。第 5 步多页管理一个 .ep 文档包含多个页面页面管理、页面备注都有独立对话框适合把完整的产品流程按页拆分。 常用操作速查撤销/重做默认支持 20 级撤销删除元素Delete 或 Backspace 均可复制粘贴默认粘贴到原位置便于快速排布⚠️ 一个已知的坑在较新版本的 Firefox 里把 stencil 从组件库拖到画布会失灵。解决办法是用 Pale Moon、XULRunner 或旧版 Firefox或者用firefox --app /path/to/application.ini方式启动。本节要点按设计目标先选组件集合再动手拖拽效率最高网格 对象吸附默认开启配合 Shape 菜单的批量对齐可快速排布整齐界面新 Firefox 下拖拽组件失灵是已知问题换 XULRunner 启动方式即可绕过导出SVG、HTML、ODT 到 PNG 怎么选导出入口在菜单栏的 Export 分组支持多种格式选择逻辑很简单格式适用场景说明PNG截图式交付可选导出当前选区或整页SVG交给开发继续编辑矢量输出推荐仅含单页的文档导出HTML浏览器里直接看生成静态网页方便发给不装 Pencil 的人ODT需要文档化交付基于模板生成 OpenDocument 文档Print打印走打印管线输出各格式的导出逻辑分散在 exporter/ 目录svgExporter.js 管矢量、webPageExporter.js 管网页、odtExporter.js 管 ODT其余还有打印与 Office 转换导出器。模板定制HTML、ODT、Print 三套导出模板位于 templates/每套包含 XSLT 转换规则和 CSS 样式。想改导出结果的外观比如 ODT 的版式、HTML 的背景直接改对应模板目录里的 XSLT 和 CSS 即可无需动 JavaScript。上面配图就是 ODT 模板渲染出的分步教程文档版式。⚠️ 两个注意点SVG 导出对多页文档只会使用第一页的尺寸建议单页单文件ODT 等 Office 格式依赖外部转换器uno/unoconv本机装好 LibreOffice 才能顺利转换本节要点按交付对象选格式开发给 SVG、非 Pencil 用户给 HTML/PNG、正式文档给 ODT导出外观定制走 templates/ 下的 XSLT CSS改模板不改代码SVG 建议单页导出Office 格式依赖本机 LibreOffice 转换器它是怎么跑的底层实现简述了解一点内部结构排障和定制时会省力很多这里点到为止。界面层主窗口 mainWindow.xul 用 XUL 描述整个界面骨架颜色选择器、字体编辑器等交互控件用 XBL 写在 bindings/ 下每个编辑器一个 .xbl .css 文件逻辑层核心 JavaScript 在 common/ 里pencil.js 是总入口controller.js 管命令分发io.js 管输入输出画布实现在 canvasHelper/ 目录组件系统这是 Pencil 最有意思的部分。每个组件集合的 Definition.xml 里一个Shape声明属性Color、PlainText、Font、Bool 等类型Behaviors把属性值绑定到 SVG 元素改属性就改图形p:Content存放真正的 SVG 内容Shortcut则通过覆写默认属性值生成同形状的变体比如带阴影的 Label持久层.ep 文档的读写由 xmlDocumentPersister.js 负责本质是带元信息的 XML 组件定义、行为脚本、9-slice 缩放这些细节官方 stencil-dev 文档有从零到完整的教程后面进阶资源会指到位置。本节要点界面用 XUL/XBL 搭建业务逻辑集中在 common/ 的 JavaScript 中组件 属性声明 行为绑定 SVG 内容理解了这个三元组就能看懂所有 stencil文档是 XML 化的 .ep 文件导出与加载都围绕它展开常见问题与修复症状把组件拖到画布没反应原因较新 Firefox 对 stencil 拖拽的兼容性问题已知问题解法改用 XULRunner 或 Pale Moon 运行或执行firefox --app /path/to/application.ini启动症状Native GUI 组件集合加载或导出异常原因该集合存在已知的加载/导出缺陷解法暂时避开 Native 集合改用 SketchyGUI 或 iOS GUI 等内置集合症状构建脚本失败原因缺依赖——Windows/macOS 构建需要 curl 拉取 XULRunner 运行时Windows 打安装包需要 NSIS解法装齐 curl 与 NSIS 后重跑./build.sh 平台Linux 端确认 XULRunner 或 Firefox 已安装症状ODT/Office 导出报错原因缺少 uno 转换器或未装 LibreOffice解法安装 LibreOffice导出时走 uno 转换路径本节要点拖拽失灵与 Native 集合异常都是已知问题有明确的绕过方式构建失败先查 curl 与 NSIS 这两个最易缺的依赖多数故障都能通过换运行环境或装依赖解决不必改源码进阶自定义组件、文档与生态资源自定义组件库Pencil 的扩展性核心就是 stencil 集合。开发一套组件库需要写 Definition.xml属性与行为、准备图标 PNG、用内置编辑器画 SVG 内容。完整路径在 stencil-dev 教程 里按 firstshape第一个形状、ninepatch9-slice 缩放、objectsnap吸附点、shortcuts变体的顺序读从零到能发布一个组件集合。本地构建文档cd docs pip install -r requirements.txt make html文档基于 Sphinx本地产物在docs/build/。结构上分三块stencil-dev/ 面向组件开发者developers/ 面向代码贡献者含 API 说明maintainers/ 面向打包维护者。社区与版本说明社区贡献过 Android Lollipop、Bootstrap、Material Design Icons、Bootstrap Glyph Icons 等额外 stencil 集合见 README 的 Extra Stencil Collections 一节版本变动记录在 CHANGELOG.md⚠️ 本仓库标注 DEPRECATED它是 Pencil v2 的活跃分支后续工作重心已转移到由 Evolus 开发的 Pencil v3且 v3 文件格式与 v2 不兼容——升级前务必备份 .ep 文件本节要点组件库扩展是 Pencil 最强的定制点stencil-dev 教程可完整走通开发流程文档用 Sphinx 构建分组件开发、API、维护者三条线迁移到 Pencil v3 前先备份数据两代文件格式不互通【免费下载链接】pencilDEPRECATED: Multiplatform GUI Prototyping/Wireframing项目地址: https://gitcode.com/gh_mirrors/pen/pencil创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考