Pencil 项目工作流程与团队协作

项目管理概述

良好的项目管理能让 Pencil 原型设计更加高效，本篇介绍从项目初始化到交付的完整流程。

设计项目生命周期

项目管理阶段：
├── 1. 项目启动
│   ├── 需求分析
│   ├── 竞品分析
│   └── 项目规划
│
├── 2. 设计执行
│   ├── 线框图
│   ├── 高保真原型
│   └── 交互设计
│
├── 3. 评审验证
│   ├── 内审
│   ├── 团队评审
│   └── 客户评审
│
└── 4. 交付维护
    ├── 交付物整理
    ├── 设计标注
    └── 后续维护

项目初始化

创建新项目

# 新建项目步骤
1. 文件 → 新建
2. 选择模板或空白文档
3. 设置页面尺寸
4. 命名项目

# 项目命名规范
✅ 推荐：
- "XXApp_v1.0_项目名.ep"
- "客户名_项目名_日期.ep"
- "项目名_platform_版本.ep"

❌ 不推荐：
- "新建文件.ep"
- "未命名.ep"
- "test.ep"

项目模板创建

# 创建项目模板
1. 设计基础架构
2. 创建通用组件库
3. 设置颜色和样式
4. 定义页面模板
5. 文件 → 保存为模板

# 模板内容
├── 品牌色彩定义
├── 字体规范
├── 常用页面模板
├── 通用组件库
└── 网格系统设置

文件组织

目录结构

# 推荐的文件夹结构
项目文件夹/
├── 01_线框图/
│   ├── 首页线框图.ep
│   ├── 列表页线框图.ep
│   └── 详情页线框图.ep
│
├── 02_高保真/
│   ├── v1.0/
│   │   ├── 首页_v1.0.ep
│   │   └── 列表页_v1.0.ep
│   └── v2.0/
│       └── 首页_v2.0.ep
│
├── 03_资源文件/
│   ├── 图片/
│   ├── 图标/
│   └── 字体/
│
├── 04_导出文件/
│   ├── PNG/
│   ├── PDF/
│   └── HTML/
│
└── 05_文档/
    ├── 设计说明.md
    └── 标注文档/

Pencil 内部组织

# 利用页面功能组织
├── 首页
├── 导航设计
│   ├── 顶部导航
│   ├── 底部导航
│   └── 侧边导航
├── 通用组件
│   ├── 按钮
│   ├── 输入框
│   └── 卡片
└── 页面流程
    ├── 登录流程
    └── 购买流程

版本管理

手动版本控制

# 版本命名规则
项目名_v主版本.次版本_日期

示例：
├── myapp_v1.0_20260301.ep    （正式发布）
├── myapp_v1.1_20260310.ep    （小改版）
├── myapp_v2.0_20260320.ep    （大版本）
├── myapp_v2.0_20260322.ep    （当前版本）
└── myapp_草稿_20260322.ep    （正在修改）

Git 版本控制

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

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

# 忽略临时文件
*.tmp
*.bak
*-backup.*
*-old.*

# 保留源文件
*.ep
!*-template.ep

Git 工作流

# 分支管理
main:     稳定版本
develop:  开发版本
feature:  功能分支

# 工作流程
1. 从 develop 创建功能分支
   git checkout -b feature/homepage

2. 在分支上进行设计
   ... 设计修改 ...

3. 提交更改
   git add .
   git commit -m "设计首页原型"

4. 推送到远程
   git push origin feature/homepage

5. 合并到 develop
   git checkout develop
   git merge feature/homepage

团队协作

角色分工

# 典型团队角色
├── 产品经理
│   ├── 提供需求文档
│   ├── 确定功能优先级
│   └── 验收设计成果
│
├── 交互设计师
│   ├── 设计交互流程
│   ├── 创建线框图
│   └── 定义交互规范
│
├── 视觉设计师
│   ├── 视觉美化
│   ├── 颜色和字体
│   └── 高保真原型
│
└── 开发工程师
    ├── 评审设计稿
    ├── 提取标注
    └── 反馈可行性

协作流程

# 协作流程图
产品经理  →  需求文档  →  交互设计师
                                  ↓
                        线框图 + 交互
                                  ↓
开发工程师  ←  评审反馈  ←  视觉设计师
                                  ↓
                        高保真原型
                                  ↓
                        客户评审  →  修改
                                  ↓
                              定稿交付

设计评审

# 评审会议准备
1. 提前发送评审材料
   - 原型文件
   - 设计说明文档
   - 竞品参考

2. 准备演示环境
   - 检查文件完整性
   - 测试交互功能
   - 准备标注版本

3. 记录评审意见
   - 指定记录人
   - 分类整理意见
   - 确定修改优先级

交付管理

交付物清单

# 交付物检查清单
☐ 源文件（.ep）
☐ 导出的图像（PNG/PDF）
☐ 交互原型（HTML）
☐ 设计标注文档
☐ 组件库文件
☐ 字体文件包
☐ 图片资源包
☐ 设计规范文档

设计标注

# 标注内容
├── 尺寸标注
│   ├── 元素宽高
│   ├── 间距
│   └── 边距
│
├── 颜色标注
│   ├── 色值（HEX/RGB）
│   ├── 使用位置
│   └── 状态变化
│
├── 字体标注
│   ├── 字体名称
│   ├── 字号大小
│   ├── 行高
│   └── 字重
│
└── 交互标注
    ├── 触发条件
    ├── 交互动作
    └── 状态说明

第三方标注工具

# 常用标注工具
├── Marketch
├── Pxelper
├── Assister
├── Sketch Measure
└── Figma（导出后标注）

# 标注流程
1. 在 Pencil 中导出 2x PNG
2. 导入标注工具
3. 添加尺寸、颜色、字体标注
4. 导出标注文档
5. 交给开发人员

项目复盘

设计复盘要点

# 项目复盘内容
1. 项目回顾
   - 项目目标
   - 实际成果
   - 时间投入

2. 做得好的
   - 流程优化
   - 工具使用
   - 团队协作

3. 需要改进
   - 需求变更
   - 沟通问题
   - 时间管理

4. 经验总结
   - 设计方法
   - 工具技巧
   - 协作模式

知识沉淀

# 建立设计知识库
├── 组件库
│   ├── 通用组件
│   └── 业务组件
│
├── 模板库
│   ├── 页面模板
│   └── 项目模板
│
├── 规范库
│   ├── 设计规范
│   ├── 交互规范
│   └── 命名规范
│
└── 案例库
    ├── 成功案例
    └── 问题案例

效率提升技巧

快捷操作

# 高效操作技巧
1. 使用组件库
   - 减少重复设计
   - 保证一致性

2. 利用复制功能
   - Ctrl+D 快速复制
   - Alt+拖动 精准复制

3. 使用对齐工具
   - 快速对齐元素
   - 等间距分布

4. 利用页面复制
   - 相似页面快速创建
   - 减少重复工作

自动化脚本

# 批量处理（如果有脚本支持）
├── 批量导出
├── 批量重命名
├── 批量格式转换
└── 批量生成标注

---

掌握良好的项目管理方法和团队协作流程，能显著提升设计效率，减少返工，确保项目顺利完成。