Pencil 原型导出与团队协作

导出格式概述

Pencil 支持多种导出格式，满足不同场景的需求：

导出格式：
├── 图像格式
│   ├── PNG（推荐）
│   ├── JPEG
│   └── SVG
├── 文档格式
│   ├── PDF
│   └── HTML
└── 可编辑格式
    └── Pencil 文档 (.ep)

图像导出

导出为 PNG

PNG 是最常用的导出格式，透明背景支持：

# 导出 PNG 步骤
1. 选中要导出的页面或元素
2. 菜单：文件 → 导出为图像
3. 选择 PNG 格式
4. 设置导出选项
5. 选择保存位置
6. 点击导出

PNG 选项：
├── 缩放比例：1x, 2x, 3x
├── 背景：透明/白色/自定义
└── 范围：选中元素/当前页面/所有页面

导出为 JPEG

JPEG 适合照片类图像，文件更小：

# JPEG 导出设置
├── 质量：1-100（建议 85-95）
├── 背景：白色/自定义
└── 渐进式：支持（网页加载时显示）

适用场景：
- 带有照片的原型
- 不需要透明的背景
- 分享给非设计师

导出为 SVG

SVG 是矢量格式，可无损缩放：

# SVG 导出特点
├── 矢量格式：无损缩放
├── 文件较小：文本为主时
├── 可编辑：可在 Illustrator 中编辑
└── 浏览器支持：直接用浏览器打开

适用场景：
- 图标导出
- 需要二次编辑
- 印刷输出

文档导出

导出为 PDF

PDF 适合文档化和打印：

# PDF 导出设置
1. 菜单：文件 → 打印
2. 选择「打印到 PDF」
3. 设置页面范围
4. 设置页面布局
5. 点击打印

PDF 选项：
├── 页面大小：A4 / Letter / 自定义
├── 方向：纵向 / 横向
├── 边距：默认 / 自定义
└── 每页页面数：1 / 2 / 4 / 6

批量导出

# 导出所有页面为图像
1. 菜单：文件 → 导出所有页面
2. 选择导出格式（PNG/JPEG）
3. 设置导出选项
4. 选择目标文件夹
5. 确认导出

命名规则：
- 按页面名称命名
- 按序号命名（page_001, page_002）
- 自定义前缀（myapp_page_001）

HTML 原型导出

导出可交互 HTML

Pencil 可以导出基本的 HTML 原型：

# HTML 导出步骤
1. 菜单：文件 → 导出为 HTML
2. 选择导出位置
3. 确认导出

HTML 原型特点：
├── 页面结构保持
├── 支持基本交互
│   ├── 页面跳转
│   ├── 显示/隐藏
│   └── 悬停效果
├── CSS 样式保持
├── 链接可点击
└── 适合桌面浏览器

HTML 导出限制

⚠️ HTML 导出限制
├── 部分复杂交互可能丢失
├── 组件可能无法完美呈现
├── 动画效果简化
├── 字体可能需要嵌入
└── 不支持动态数据

优化 HTML 导出

# 优化建议
1. 使用标准组件
2. 避免复杂嵌套
3. 使用系统字体
4. 简化交互设计
5. 测试导出结果

Pencil 文档格式

保存和打开

文件格式：.ep（Evolus Pencil）

保存：Ctrl+S
另存为：Ctrl+Shift+S
打开：Ctrl+O
最近文件：Ctrl+Shift+O

版本兼容性

# 版本兼容性
├── .ep 格式跨版本兼容
├── 组件集合（.epc）可能需要更新
├── 某些新功能在旧版本可能不支持
└── 建议使用最新版本

最佳实践：
1. 定期保存（Ctrl+S）
2. 重要节点另存版本
3. 保持软件更新

团队协作

协作方式选择

方式	优点	缺点
原始文件共享	保持可编辑性	合并困难
导出 PDF/图像	便于查看	不可编辑
Git 版本控制	追踪修改	需要技术背景
云协作平台	实时协同	需要网络

原始文件协作

# 文件命名规范
项目名称_v版本_日期.ep

示例：
├── myapp_v1.0_20260301.ep
├── myapp_v1.1_20260310.ep
├── myapp_v2.0_20260320.ep
└── myapp_正在修改_20260320.ep

版本说明：
├── v1.0：正式版本
├── v1.1：小更新
├── v2.0：大版本更新
└── _draft：草稿版

定期导出备份

# 备份策略
1. 每日备份：自动保存
2. 每周导出：导出为 PNG/PDF
3. 每次迭代：保存新版本文件

备份位置：
├── 本地：项目文件夹
├── 外接硬盘：定期拷贝
└── 云存储：OneDrive/Dropbox

版本控制

Git 版本控制

Pencil 文件是 XML 格式，适合 Git 管理：

# .gitignore 设置
# 忽略编译输出
*.exported/
build/

# 忽略临时文件
*.tmp
*.bak

# 保留项目文件
*.ep

Git 工作流

# 推荐工作流
1. 克隆项目仓库
2. 创建功能分支：git checkout -b feature/login
3. 在分支上进行设计
4. 提交更改：git add . && git commit -m "添加登录页面"
5. 推送分支：git push origin feature/login
6. 合并到主分支：通过 Pull Request

冲突处理

冲突类型：
1. 页面冲突：两人都修改了同一页面
2. 组件冲突：组件定义冲突

解决方案：
├── 使用"他们的"版本
├── 使用"我的"版本
├── 手动合并（需要谨慎）
└── 求助团队成员

云协作平台

方案对比

平台	特点	适用场景
Figma	实时协作	专业团队
Sketch	Mac 专用	设计团队
Adobe XD	协作功能	设计团队
Pencil	免费离线	小团队/个人

Pencil 配合其他工具

# 推荐工作流
Pencil（原型设计）→ 导出图像 → Figma（高保真）

Pencil（低保真）→ 导出 PNG → 在设计工具中标注

Pencil（交互原型）→ 导出 HTML → 给客户演示

原型演示

演示准备

# 演示前检查
1. 所有交互都能正常工作
2. 页面跳转逻辑正确
3. 没有死链接
4. 导出测试一遍
5. 准备演示稿

演示技巧

# 演示技巧
1. 从用户视角演示
2. 聚焦核心功能
3. 准备备选方案
4. 记录反馈问题
5. 演示后发送导出版本

客户反馈收集

# 反馈收集方法
1. 导出 PDF 发送
2. 导出 HTML 上传到临时服务器
3. 使用在线原型工具（如 InVision）
4. 预约会议演示

反馈记录：
├── 收集时间
├── 反馈人
├── 具体意见
├── 优先级
└── 状态（待处理/已采纳/不采纳）

原型审核

审核清单

# 原型审核清单
功能完整性：
☐ 所有功能都有对应的原型页面
☐ 核心流程完整
☐ 异常流程有考虑

交互合理性：
☐ 交互符合用户预期
☐ 跳转逻辑清晰
☐ 反馈及时明确

视觉一致性：
☐ 风格统一
☐ 间距规范
☐ 颜色使用一致

技术可行性：
☐ 在目标平台可实现
☐ 交互不过于复杂
☐ 性能要求合理

审核流程

审核流程：
1. 设计师自检
2. 组内评审（设计团队）
3. 产品评审（产品经理）
4. 开发评审（技术团队）
5. 客户评审（甲方）

最佳实践总结

文件管理

# 最佳实践
1. 规范的命名
2. 清晰的目录结构
3. 定期备份
4. 版本控制
5. 文档注释

协作建议

# 协作建议
1. 明确分工：谁负责哪个模块
2. 定期同步：每周同步进度
3. 沟通渠道：建立即时沟通群
4. 设计规范：统一设计语言
5. 审核机制：规范的审核流程

---

良好的导出和协作实践可以让原型设计工作更加高效，团队协作更加顺畅。