开源免费的原型设计工具Pencil：快速绘制低保真线框图与可点击演示

画原型图这事大多数人一上来就奔着 Axure、Sketch、墨刀这类重型工具去了。但如果你只是想快速验证一个交互想法、画一套低保真线框图、做个能点击的演示 Demo那些工具要么安装包大得吓人要么试用期限卡得难受要么一开就要注册登录。我第一次用到 Pencil 是在一个需要临时出一个可交互原型的下午——当时电脑上没有任何原型软件网速还不太好不想装在线协作工具硬是用 Pencil 从下载到完成演示只花了不到一小时。这篇文章就系统讲讲 Pencil 这个开源设计工具的使用方法包括下载安装、工作区拆解、原型制作、交互跳转、导出交付和进阶技巧给正在找轻量原型方案的设计师或者产品经理一条可以直接照做的路径。1. 先搞清楚 Pencil 到底是什么别和 Apple Pencil 混淆1.1 Pencil 项目的“血统”与定位这里说的 Pencil全称是 Evolus Pencil一个开源的原型图绘制工具托管在 SourceForge 和 GitHub 上国内外很多老设计师都用它画过早年的线框图。它跟 Apple Pencil、触控笔没有任何关系也不是画插画的软件而是专门用来快速画 UI 草图、线框图、流程图和简单交互原型的桌面应用。它的核心优势就四个字轻、快、免、跨。轻是指安装包很小Windows 版几十 MB 级别快是指启动速度基本秒开画一个页面拖几个控件就行免是指完全免费、开源没有授权费也没有试用期限制跨是指 Windows、macOS、Linux 都有对应版本甚至在早期还可以作为 Firefox 插件运行。对经常需要在不同电脑间切换的场景来说这个特性很实用——装个绿色版就能开工不用等 IT 部门审批。1.2 它适合什么场景不适合什么场景用了一年多 Pencil我的感受是它最适合三类工作第一类是早期低保真原型产品经理快速画给开发看逻辑不需要高保真视觉第二类是课堂教学和文档配图画一个示意图说明页面结构第三类是简历作品集里放一套线框图展示需求分析能力。不适合的场景也很明确需要复杂交互动效、需要真实视觉保真度、需要多人实时协作的项目这些需求会让 Pencil 有些吃力。它不是万能的但确实解决了一个很实际的问题——当你想在三分钟内把脑子里的页面结构变成一张能给别人看的图时Pencil 比打开一套全家桶工具要快得多。1.3 和主流原型工具的一次“摆数据”对比维度PencilAxure RPSketch墨刀价格开源免费收费/试用收费订阅免费版/收费安装体积小较大较大在线/客户端上手成本低中高中低协作能力本地文件需插件/协作需插件云端协作交互深度页面跳转级高级交互需插件中等这张表只是参考关键还是看场景。如果一个临时项目只需要做一次性演示我不会为了它去下载一个几百 MB 的软件Pencil 就够了。但如果是个持续迭代的商业项目可能还是得回到专业工具上。2. 下载安装与启动跨平台支持和最容易被忽略的细节2.1 从官网拿安装包的正确姿势搜索“pencil官网设计工具”就能找到 Evolus Pencil 的官方项目主页。下载时需要注意版本选择Windows 用户优先选 .exe 安装包macOS 用户选 .dmg 文件Linux 用户根据发行版选 .deb 或 .tar.gz。官方站点同时提供 32 位和 64 位版本现在绝大多数电脑都建议选 64 位性能更好。装完之后第一次启动看到的是一个深灰色主窗口。有人抱怨说界面看起来土土的像十年前的软件。确实Pencil 的美观度不如现代原型工具但它的界面布局非常清晰用过一两次就能记住所有功能区在哪。如果你需要经常换电脑使用还可以把 Portable 版本放到 U 盘里插上就能跑配置文件也会保留在 U 盘目录下。2.2 早期 Firefox 插件模式与独立版的区别这里有一个容易让人困惑的地方Pencil 的老版本是作为 Firefox 插件提供的安装方式是打开 Firefox 然后添加扩展但新版已经发展出独立的桌面应用不再依赖浏览器。如果你在网上看到“在 Firefox 里装 Pencil”的教程多半是比较老的文章了。目前建议直接使用独立版维护更积极功能也更完整不用考虑浏览器兼容问题。如果你下载的版本在启动时提示缺少 Java 运行时也不用慌。Pencil 的某些编译版本是基于 Java 的装一个 OpenJDK 或 Oracle Java 运行时就能解决。我自己遇到过一次在 Linux Mint 上打不开的情况检查日志才发现是缺 Java 环境装上重启就正常了。2.3 启动黑屏、界面空白的常见处理如果你打开 Pencil 之后发现画布区域是空的或者菜单栏点了没反应先别急着卸了重装。第一步检查显卡驱动Pencil 的渲染依赖系统图形环境老电脑容易出显示问题第二步切换窗口缩放比例高分屏下如果缩放比例超过 150%部分版本会出现界面错位第三步重置配置文件把用户目录下的 .pencil 文件夹改名备份重启软件看是否恢复正常。这三步基本能解决我在不同电脑上遇到的 80% 的启动问题。特别是第三步Pencil 的配置文件偶尔会因异常退出而损坏删除后软件会自动重建默认配置很多疑难杂症就这么治好了。3. 工作区拆解七块区域的“角色分工”与我的使用习惯3.1 左侧控件面板素材的货架打开 Pencil 后左边是控件面板里面按照“基础控件、表单控件、图表控件、流程图控件、移动端控件”等分类把常用的矩形、椭圆、文本框、按钮、下拉列表、复选框全部排好了。这个面板就是你的素材货架画原型的过程本质上就是从货架上拿素材摆到画布上再调整大小和位置。我在实际项目中很少直接用默认分类因为默认分类里控件太多找起来要花时间。我的做法是把自己常用的控件拖到一个自定义分组里比如把“页面标题栏”“搜索框”“商品卡片”“底部 Tab”放在一起这样画电商或内容类产品时效率能快一倍。这个自定义分组可以导出成 .xml 文件换电脑时导入回去非常方便。3.2 顶部工具栏与右侧属性面板改样式的核心阵地顶部工具栏负责最常用的操作选择、缩放、对齐、排列、组合、取消组合。右侧属性面板则负责精细调整控件的 x、y 坐标宽度高度边框粗细填充颜色字体字号透明度圆角半径等。这两个区域配合工作区的逻辑是先在画布上点选一个控件再到右侧属性面板里改参数。大多数人画原型只改大小和文字其实属性面板里还有几个值得深挖的点圆角半径可以做圆角按钮透明度可以模拟遮罩层和弹窗旋转角度可以随手画斜向的标签。利用这些基础属性就算不靠高级控件也能画出不少有质感的元素。3.3 页面管理器的另一层用途结构地图右侧还有一个“页面”管理器常用的功能是管理多个页面但它的深层用途是当项目变大时充当结构地图。比如一个后台管理系统有十几个页面我会按模块命名登录、首页、列表页、详情页、设置页。这样不光是画布在展示页面整个信息架构也一清二楚。交付给开发时对方可以直接照着页面名称写路由。3.4 我一直在用的几个工作区调整技巧刚装 Pencil 默认的画布是空白一片的建议先设置页面尺寸。在属性面板里找到“页面”相关设置填好宽度和高度常见的是 375×812手机竖屏和 1366×768网页。还有一个容易被忽略的选项是“显示网格”打开之后拖控件对齐会方便很多完事再关掉就行。另外用快捷键 Ctrl 加号减号快速缩放画布Ctrl 0 回到 100%Ctrl 2 适应整个页面。这些快捷键看起来不起眼实际画复杂页面时能省下大量来回切换鼠标滚轮的时间。4. 从零开始做第一个页面原型拖拽之外的三个关键习惯4.1 新建项目与页面命名先搭骨架再填肉打开 Pencil 后选择“文件 - 新建”创建一个项目然后在页面管理器中新建页面。我强烈建议先像写目录一样把需要的页面全部建好哪怕内容是空的也比边画边加页面更高效。因为当你画到登录页时潜意识里就会想到下一页是什么提前建好页面能帮助梳理用户流程。页面命名尽量用“模块_业务_状态”的格式例如“商品_列表_空状态”“商品_列表_加载失败”“订单_详情_已完成”。这样看起来非常规整导出 HTML 演示时页面的跳转关系也一目了然。4.2 控件拖放与属性修改从“画上去”到“画准确”画第一个按钮的过程很简单从左侧拖一个矩形到画布双击输入文字“登录”然后在属性面板里把圆角调到 4px填充色改成品牌蓝字体颜色改成白色。这个过程任何工具都一样Pencil 的不同之处在于它没有“一键美化”的能力所以你必须自己想清楚每个细节这个按钮是有边框还是没有悬浮状态要不要做文字间距是多少也正因为如此用 Pencil 画的线框图往往比用高保真工具做出来的更有“讨论感”——因为不够精致大家会更关注信息和逻辑而不是颜色好不好看。这其实是低保真原型该有的样子。4.3 对齐与分布一张图是否专业的分水岭很多新手画完页面元素之间的间距肉眼看着差不多但一导出图片就露馅。Pencil 提供了对齐工具在选中多个控件后顶部工具栏会出现左对齐、水平居中、右对齐、垂直居中等选项。分布工具则能让选中的三个按钮之间的间距完全一致。我的习惯是每次画完一组控件不做下一步操作之前先按一下对齐和分布。这样后期调整会轻松很多因为如果一开始就是乱的后面改位置会越改越乱。如果你希望多个控件等宽等高也可以在属性面板里统一宽度值。4.4 分组与图层命名重建时的救命稻草画布上的元素多了以后如果不分组挪动一个区域就会牵一发动全身。Pencil 支持将多个控件选中后组合成一个组组合之后就像一个整体容易拖拽、缩放。更重要的是命名图层。每当我在一个页面里放了超过 20 个元素就会认真给每个图层起名字比如“顶部导航栏”“筛选按钮组”“商品卡片_01”。这样做有两个好处第一后面做交互跳转时能准确选中对应控件第二如果别人接手你的文件看到层层命名清晰的图层树不用问你就能明白哪里是什么。这个习惯一开始会觉得繁琐但当你需要重新复用一个页面结构时会发现分组和命名省下的时间远超命名本身的花费。5. 让原型“动起来”页面跳转、演示模式与交互的真相5.1 超链接交互用最简单的方式做可点击 DemoPencil 的交互能力不像 Axure 那样强大但它支持最核心的“页面跳转”式交互。操作方式是我特别喜欢的简单模式选中一个按钮在右侧属性面板里找到“超链接”相关属性选择你要跳转的页面就行。这样点击演示时点击按钮就会跳到目标页。这种交互方式适合以下场景验证用户操作流程是否顺畅给开发讲页面流转逻辑给领导演示一个完整功能的“假”实现我实际测试过页面只要不超过 30 个这种跳转方式完全够用。5.2 演示模式的启动方式与高效播放技巧在 Pencil 中按“演示”按钮或使用快捷键即可进入全屏演示模式。在全屏演示时鼠标移动到可点击的热区会变成手型点击后页面跳转。如果想返回上一页可以用键盘上的方向键或按快捷键不需要重新进入编辑模式。演示模式下还有一个容易被忽视的功能键盘上的左右方向键可以在页面之间切换。这比做超链接还快适合你在开需求评审会时临时跳到自己想展示的页面上。如果想把演示链接发给异地同事看Pencil 也支持把整个项目导出成 HTML别人用浏览器打开后同样可以点击跳转完全不需要安装软件。5.3 交互的边界Pencil 做不到什么以及绕过方案Pencil 不支持状态机、条件判断、变量和动态面板所以复杂交互就别指望它了。比如做个登录页校验、做个购物车数量增减这些都做不了。但也不必因此放弃绕过的思路是把一个流程拆成多个独立页面通过页面跳转来模拟不同状态。例如要模拟一个“登录成功后进入首页”的效果我会建一个登录页、一个中间 loading 页、一个首页按钮的跳转地址指向 loading 页loading 页的自动跳转设置指向首页。虽然不能自动化但演示给开发看“登录成功”和“登录失败”的分支还是可以靠多个页面手工跳转实现。这种分层跳转的思路其实比硬做一个完整可交互系统更清晰。6. 导出与交付不同格式的取舍都在这了6.1 导出 PNG最常用的交付格式在 Pencil 中可以把当前页面导出为 PNG 图片。如果你想要整张图不被截图工具裁掉直接在导出选项里选“当前页面”而不是“选择区域”就能得到一张完整页面截图。导出 PNG 时还有分辨率选项如果需要高清大图可以调高分辨率适合放进文档或 PPT 里。我导出 PNG 最常用的场景是发到工作群或邮件里开发或领导不需要打开文件直接看图片就能理解。如果你的页面很宽很长PNG 会变成一张长图这时建议分段导出即把内容分成几个区域分别导出然后在文档里拼接效果更清晰。6.2 导出 PDF适合多页面线性阅读当一套原型有十来个页面时导出成 PDF 是最好的交付方式之一。Pencil 的 PDF 导出会把所有页面按顺序输出阅读者用 PDF 阅读器翻页即可。这在评审会上尤其好用不用连电脑演示直接投屏 PDF 就行也不会出现演示模式里的点击误跳。PDF 导出还有个隐藏功能是矢量属性在 PDF 里放大不会模糊。这对开发写需求文档很有用可以直接放大查看某个按钮的边距细节。6.3 导出 HTML一个真正“能点”的原型Pencil 支持导出可交互的 HTML 包。导出后会生成一个包含多个文件的文件夹双击 index.html 就能在浏览器里打开点击设置了超链接的控件就能跳转。这个功能最大的价值是跨平台、零依赖——任何设备、任何浏览器都能直接运行不需要安装 Pencil。导出 HTML 的注意点导出前务必让每一页都设置好页面尺寸否则浏览器里显示的页面可能错位导出后不要把文件夹里的文件单独拿走必须整个文件夹一起发否则资源文件丢失会导致页面空白。6.4 字体和中文乱码问题的排查思路我最初用 Pencil 导出 PDF 时碰到过中文乱码折腾了一阵发现是缺字体。Pencil 在 Linux 和低版本 Windows 环境下如果没有中文字体导出 PDF 时会出现豆腐块。解决办法是在系统里安装中文字体比如微软雅黑或思源黑体然后在 Pencil 所有涉及文字元素的地方确认字体设置。另一个常见问题是导出图片模糊这通常不是 Pencil 的问题而是没有设置足够高的导出分辨率。在导出对话框里找到分辨率选项调成 2 倍或 3 倍图片清晰度就会明显提升。7. 进阶玩法自定义控件库、模板管理与快捷键效率翻倍7.1 把常用组件存成自己的“私人控件库”用 Pencil 一段时间后你会发现自己反反复复用到某些组件比如一个固定样式的按钮、一个顶部搜索栏、一个带图标的导航栏。把这些组件存成自定义控件非常值得。具体做法是选中该组件后右键选择“添加到控件库”或类似功能给它取一个容易识别的名称。之后左侧控件面板就会出现这个组件拖出来就是原封不动的样式。这个功能用起来就像给自己建了一套乐高积木。我画中后台原型时会放一个“表格行”“筛选表单”“分页器”的自定义组件画 C 端产品时会放“商品卡片”“底部导航”“消息气泡”这几类组件。有了这套组件库新项目的起步速度会提升好几个档次。7.2 模板文件管理项目复制的正确姿势如果你不是从头做项目而是想基于已有项目的页面结构开新项目最好不要“另存为”然后删掉不用的页面因为旧项目里的组件样式和页面命名容易带出干扰。更推荐的做法是建一个“空白模板”项目把所有通用页面、通用组件都放进去每次新建项目时打开这个模板另存为新文件。在我的实际工作流里模板文件里会包含一套标准颜色方案品牌主色、辅助色、提醒色一套通用组件按钮、输入框、弹窗、Toast 提示一套标准页面尺寸手机端、平板端、桌面端有了这套模板新项目第一天就能进入画具体页面的阶段不用花时间调颜色、调字体。7.3 高频快捷键画每个页面都能省几秒Pencil 的快捷键很直观我把平时最高频的几个列一下功能快捷键选择工具V矩形工具R椭圆工具E组合Ctrl G取消组合Ctrl Shift G复制Ctrl D置于顶层Ctrl Shift Up置于底层Ctrl Shift Down这些快捷键最大的作用是让你在“画布”和“属性面板”之间来回切换时不需要找菜单形成了肌肉记忆之后画图速度会明显变快。7.4 文件打不开、异常退出的自救清单最后分享几个我踩过的坑。如果你双击 .pencil 文件打不开可以尝试先打开 Pencil然后“文件 - 打开”找到该文件。如果打开后提示损坏用文本编辑器打开文件看看是否是 XML 结构明显的乱码如果是尽快使用备份恢复。所以我强烈建议每个项目画完一个阶段就导出 .pencil 文件备份放到网盘或 Git 仓库里。有一次我电脑系统崩溃重装后所有软件配置都没了但因为我把模板文件和项目文件都备份过新环境只花了半小时就恢复了全部工作区。另外一个隐藏功能是“导出为 .svg 文件”。Pencil 的矢量输出格式对开发取图标和界面要素非常方便。就算你不直接做前端代码把部分元素导出为 SVG 交给开发他们可以用设计工具二次加工比从一张 PNG 里抠图要方便得多。这也是为什么我到现在依然会在某些项目里专门把 Pencil 作为效率辅助工具的原因它的输出格式足够开放能和主流设计流程衔接。我个人的体验是工具不在于多贵多新而在于是否匹配那一刻的真实需求。当你想快速把脑子的构思变成可以验证、可以讨论、可以演示的东西时Pencil 就是那个能让你马上开工、不会碍手碍脚的选择。希望这篇文章能把你在 Pencil 官网下完软件之后的路铺平少试探、少踩坑直接画出一套拿得出手的原型。