从需求到可点击原型：用 Pencil Project 走通一次完整设计流程
项目地址: https://gitcode.com/gh_mirrors/pe/pencil 接到一个需求，半天内要交出一版可点击的交互原型。如果团队里没有专职设计师，或者只是想在开发前先跟产品对齐界面走向，Pencil Project 就是为这类场景准备的：它是一款免费开源的桌面端 UI 原型设计工具，基于向量画布，用现成的组件库就能快速搭出多页面原型，并导出成 HTML 供评审。本文按"从新建文档到导出交付"的完整时间线，把一次原型设计的实际操作流程走一遍。
它是什么，适合谁
Pencil Project 是一款遵循 GPL-2.0 协议的开源软件，由 Evolus 团队维护，支持 macOS、Windows 和 Linux。文档保存在本地的 .ep 文件中，也可以压缩为 .epz，数据完全留在本机，不依赖任何云端服务。
它的目标用户有两类。一类是刚接触界面设计的新手，内置的 Android.GUI、iOS.GUI 等组件库让"从零画一个界面"变成了"从库里挑组件拼装"；另一类是需要快速出原型的开发者，画完原型直接导出 HTML，就能在浏览器里点着演示给相关人员看。
安装与启动
从源码运行需要 Node.js 14 及以上版本（推荐 LTS）。克隆仓库后依次安装依赖并启动：
git clone https://gitcode.com/gh_mirrors/pe/pencil
cd pencil
npm install
npm start
启动后主界面分为三栏。左侧是组件库面板，按平台分组列出所有可用的图形集合，Android、iOS、Windows、网页基础元素都有现成模板。中间是画布区域，所有绘制、拖拽、对齐操作都在这里完成。右侧是属性面板，选中画布上的任意元素后，可以直接修改它的位置、尺寸、颜色、字体等属性。
一次完整的设计流程
新建文档与页面设置
通过文件菜单新建文档后，会进入页面设置环节。这里需要确定页面的标题、尺寸和背景。标题建议直接写需求名称加日期，方便后续归档；尺寸可以选预设的屏幕规格，也可以自定义宽高。背景可以设为纯色或一张占位图。一个文档里可以包含多个页面，之后每个页面就是一个独立的原型视图。
拖入组件搭建第一屏
在左侧面板里找到 BasicWebElements 集合，把输入框、按钮、文本框依次拖到画布上。拖动组件时按住 Shift 可以保持比例缩放。画布默认开启智能对齐，拖动元素靠近其他元素或页面边缘时会出现参考线，松手即自动吸附对齐，不需要手动输坐标。多页面场景下，左侧的页面树可以用来管理页面的顺序与层级结构。
调整尺寸与样式
选中元素后，右侧属性面板是唯一的调整入口。位置与尺寸支持逐像素输入；填充颜色可以用内置调色板或手动输入色值；文本类元素还能调整字体、字号和行距。仓库在 app/fonts/ 目录下内置了 Google Roboto、Sans、Serif、等宽字体等字体资源，画布内换字体不需要另外安装。
建立页面间的跳转
Pencil 原型的"可点击"来自页面链接：选中一个按钮，在属性面板中把它的链接目标设为文档内的另一个页面，导出后在浏览器里点这个按钮就会跳转到对应页面。做多步流程（比如登录页 → 列表页 → 详情页）时，给每个关键操作元素都设置一个跳转目标，原型就具备了演示价值。
导出交付
完成设计后通过导出对话框选择格式。HTML 是最常用的交付格式，导出物包含页面跳转交互，可以直接发给评审者；PDF 适合打印和归档；单页 PNG 适合放进文档或截图存档。导出模板存放在 app/pencil-core/templates/ 目录，分为 HTML、ODT、Print 三类，其中 HTML/prototype 模板就是为带交互的原型准备的。
高频操作速查
| 操作 | 快捷键 |
|---|---|
| 撤销 / 重做 | Ctrl+Z / Ctrl+Y |
| 复制 | Ctrl+C，粘贴 Ctrl+V |
| 组合选中元素 | Ctrl+G |
| 取消组合 | Ctrl+Shift+G |
| 删除选中元素 | Delete |
| 调整图层顺序 | PageUp / PageDown（加 Shift 跳到最前/最后） |
这些组合都来自画布菜单（Canvas Menu）中注册的实际快捷键，与版本无关，可以直接背下来。
值得留意的进阶能力
几个功能不需要每次都用，但遇到对应场景可以省很多事。
自定义组件库（privateCollection）：如果团队有一组固定的导航栏、卡片样式，可以把它们存成私有形状，之后在任意文档里当普通组件拖用。私有集合的解析与管理逻辑在 app/pencil-core/privateCollection/ 目录，导出格式与官方组件库一致。
颜色对比度检查：属性面板的颜色编辑器可以计算前景与背景色的对比度，用于核对文本是否满足可读性要求。做涉及多主题色的原型时，这一项比肉眼判断靠谱。
手绘与自由图形：画布支持自由绘制任意形状，适合在正式组件之外补一些示意图或批注，压感笔输入也可以直接使用。
常见卡点
依赖安装失败或版本报错：确认 Node.js 不低于 14，旧版本在拉取 Electron 16 相关依赖时容易失败，建议直接升到 LTS。
启动慢或白屏：首次启动需要加载内置字体和组件库，磁盘空间不足或网络代理影响依赖下载都会拖慢过程，给足时间和磁盘余量。
找不到的组件：组件库名称必须和左侧面板里的集合名一致，比如 Android.GUI、iOS.GUI、SketchyGUI，拼写不对会搜不到；更多集合可以通过工具菜单里的 Manage Collections 安装。
导出 HTML 后跳转失效：检查对应元素是否真的设置了链接属性，以及链接目标是否指向同一文档内的页面，而不是外部地址。
下一步建议
与其收藏这份流程，不如现在就动手：用 BasicWebElements 集合画一个两页的登录原型——第一页放账号输入框和密码框，第二页放欢迎信息，把按钮链接到第二页，然后导出 HTML 发到团队群里。这个过程大约二十分钟，走完一遍，本文涉及的三栏界面、组件拖拽、样式调整和页面链接就都过手了。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
