Pencil 开源原型设计工具指南如何 10 分钟做出第一个界面线框图【免费下载链接】pencilDEPRECATED: Multiplatform GUI Prototyping/Wireframing项目地址: https://gitcode.com/gh_mirrors/pen/pencil需要向客户演示一个新界面的大致布局或者向同事解释页面结构时用办公软件手动画图往往最慢。Pencil 是一款开源、跨平台的 GUI 原型设计与线框图工具适合产品、开发和设计师在没有付费软件的情况下在本地快速搭出可导出、可分享的界面原型。一分钟认识 PencilPencil 的定位是一句话把想法画成界面图再导出给开发或客户看。它运行在 Firefox 引擎XULRunner之上设计文件保存在本地不依赖云服务。特点说明免费开源GPLv2 协议无订阅、无功能解锁内置组件库12 个预置 Stencil 集合按钮、文本框、流程图符号等见 app/content/pencil/stencil/多格式导出SVG、HTML、ODT、PDF 打印等代码位于 app/content/pencil/exporter/跨平台支持 Windows、Linux、macOS也可打包成 Firefox 扩展数据本地化设计稿是本地.ep文件可纳入 Git 管理不适合的人群需要高保真视觉设计精细渐变、动效、像素级还原的用户。Pencil 强项是线框图和低保真原型不是替代 Photoshop 或 Figma 做视觉稿。环境准备与安装 ⚙️ 前提Linux 用户需要 Firefox 4 或 XULRunner 4Windows 与 macOS 安装包自带运行环境。git clone https://gitcode.com/gh_mirrors/pen/pencil cd pencil/build ./build.sh linux # 按平台替换为 win32 / mac / xpi各平台差异如下构建脚本为 build/build.sh平台构建命令说明Linux./build.sh linux产物在Outputs/Linux/用xulrunner Outputs/Linux/application.ini启动Windows./build.sh win32需先装 curl 与 NSIS生成安装包macOS./build.sh mac生成Pencil.app拷入应用程序目录即可Firefox 扩展./build.sh xpi生成.xpi后在 Firefox 中安装构建细节与发布流程见仓库根目录的 README.md。10 分钟做出你的第一个界面原型任务搭一个包含标题、输入框和按钮的简单登录页线框。按上表启动 Pencil通过 File 菜单新建文档。在左侧组件面板选择Android.GUI或Common集合从其中拖出矩形、文本框、按钮等形状到画布拖拽操作依赖 Firefox 事件机制若拖不动见后文常见坑。选中元素后在右侧属性面板修改填充色、边框和文字把输入框改成单行文本样式。用选择工具拖动手柄调整位置与大小让三个元素大致对齐对齐参考线会自动吸附。File 菜单保存得到.ep设计文件之后所有修改都在这个文件上进行。用导出向导Export Wizard选一种格式输出给开发看选 SVG需要发给客户在线预览选 HTML。上图来自仓库内 ODT 导出模板的示例文档标题、描述区、分步骤的插图与说明文字结构清晰适合把设计说明连同线框一起交付。深入 4 个核心能力 组件库Stencil系统内置 12 个组件集合覆盖 Android、iOS、Windows XP、GTK、流程图、基础 Web 元素、涂鸦风SketchyGUI等场景每个集合是一个目录加Definition.xml。典型场景做移动端原型时直接从 Android.GUI 拖系统级控件。目录app/content/pencil/stencil/。多格式导出与模板SVG 导出保留矢量便于二次编辑HTML 导出可交互预览ODT 模板导出适合图文文档。导出模板可替换模板目录app/content/pencil/templates/每种格式对应一个 exporter 文件位于 app/content/pencil/exporter/。私有形状与组件收藏常用组件可保存为私有形状形成自己的小库团队共享后能保证风格统一。相关代码app/content/pencil/privateCollection/图形定义解析在 app/content/pencil/definition/。自定义组件开发想扩展自己的组件库比如某个行业专用符号官方提供了完整的开发教程docs/source/stencil-dev/从第一个形状、九宫格切图到交互行为都有分步示例。效率速查表 ⌨️按键作用CtrlN新建文档CtrlO打开设计文件CtrlS保存当前文档CtrlZ / CtrlY撤销 / 重做CtrlC / CtrlX / CtrlV复制 / 剪切 / 粘贴选中元素CtrlA选中画布全部元素Delete / Backspace删除选中元素使用建议导出前先确认导出范围是全部页面还是当前页多页文档导出 SVG 时建议逐页处理把高频组件右键加入收藏减少在集合里翻找的时间复杂页面按功能区域分组并命名导出和回改都更容易定位常见坑速查 ️现象原因解决启动提示 XULRunner 未找到Linux 构建未内置运行时安装 xulrunner4或用firefox --app application.ini启动新版 Firefox 下拖拽组件无效拖放行为被新版 Firefox 限制改用 xulrunner 独立版或--app模式启动Native GUI 集合形状不加载、导不出该集合存在已知缺陷暂时避免使用改用 Common、Android.GUI 等集合Pencil v3 的文件无法打开v3 与本 fork 文件格式不兼容先备份数据团队内统一使用同一版本学习路径 仓库内文档按角色分了两条线组件开发者从 docs/source/stencil-dev/tutorial/ 的分步教程入手想深入代码再读 docs/source/developers/api.rst 的 API 参考。版本变更历史见 CHANGELOG.md排查某个修复是哪个版本时很有用。结语建议的第一步按上面的命令构建并启动 Pencil新建一个文档把今天正在讨论的某个页面用 10 分钟画成线框并导出为 HTML。画完之后你就清楚这套工具能否进入你的日常工作流了。【免费下载链接】pencilDEPRECATED: Multiplatform GUI Prototyping/Wireframing项目地址: https://gitcode.com/gh_mirrors/pen/pencil创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
