3. 项目初始化与页面结构：创建Figma项目、建立页面层级、设置网格与参考线
3.1 用户场景
产品经理小张与设计师小李正在协作一款B2B后台管理系统的低保真原型设计。团队过往项目没有统一的结构规范，页面层级混乱，网格与参考线缺失，导致原型评审效率低下、设计交付物后期维护困难。本章将解决他们从零开始建立有序Figma项目的问题。
3.2 业务问题
- 无结构蔓延：页面与画板命名随意，开发与测试无法快速定位功能模块。
- 对齐标准缺失：原型元素位置不精准，设计评审时反复调整间距和尺寸。
- 协作混乱：多人编辑时缺乏统一网格参考，组件摆放不一致。
- 版本追溯困难：没有页面层级规划，后期修改难以回溯变化脉络。
3.3 需求拆解
| 需求维度 | 具体描述 | 优先级 |
|---|---|---|
| 项目创建 | 在Figma中快速创建团队项目或私人项目，设定初始名称与描述 | P0 |
| 页面层级 | 建立符合功能模块的页面树（如“登录注册 > 仪表盘 > 用户管理”） | P0 |
| 网格系统 | 设置8px基准网格，保证元素间距符合4px/8px倍率 | P1 |
| 参考线 | 添加关键区域参考线（侧边栏宽度、内容区安全边距） | P1 |
| 复用规范 | 将网格与参考线保存为Figma模板，供后续项目直接调用 | P2 |
3.4 原型表达：Figma操作流程
- 创建项目：在Figma Dashboard点击“+ New project”或从团队空间新建，输入项目名称“B2B后台管理系统 - 低保真原型”。
- 建立页面层级：在左侧页面面板（Pages）中依次添加：
- 1_首页
- 2_登录注册
- 3_仪表盘
- 4_用户管理
- 5_订单管理
- 6_消息通知
- 7_系统设置
- _通用组件库（下划线命名使其置底）
- 设置网格：选中任意画板（快捷键F），在右侧Design面板 → Layout Grid 中点击“+”，选择Grid样式：
同时添加行网格辅助垂直对齐：Grid Type: Rows，Count: 24，Gutter: 8px。Grid Type: Columns Count: 12 Margin: 24px Gutter: 16px Color: rgba(0, 0, 0, 0.1) - 添加参考线：从顶部标尺拖出水平参考线，标记内容区域上边距（80px导航栏高）、底部版权区（64px）。从左侧标尺拖出垂直参考线，标记侧边栏宽度（240px）与主内容区起始位置（264px）。
- 保存为模板：右键页面名称 → Duplicate，将重复页面重命名为“_模板-网格参考线”，仅保留网格和参考线，删除原型元素，供后续画板使用。
💡 关键原则：先建结构，再画原型。页面命名使用数字前缀+英文短横线（如“3_仪表盘”），保证左侧面板自动排序。网格与参考线在低保真阶段尤为重要，可以避免反复调整对齐带来的时间浪费。
3.5 交互流程
以下SVG展示了从“创建项目”到“复用模板”的完整操作链路，包含页面层级树与网格参考线设置关键节点。
3.6 指标验证
| 指标 | 目标值 | 验证方法 |
|---|---|---|
| 页面层级建立时长 | ≤5分钟 | 计时从打开项目到页面面板建完所有节点 |
| 网格与参考线设置时长 | ≤3分钟 | 同一设计师操作新画板时的耗时 |
| 设计评审中对齐修改次数 | ≤2次/屏 | 评审回放或修改记录统计 |
| 团队新成员上手成本 | ≤10分钟 | 新成员按文档操作后能够独立创建画板 |
3.7 验收标准
- ✔️ Figma项目已按照团队命名规范创建，包含项目描述（可选）。
- ✔️ 页面层级树结构清晰：主模块页面如“3_仪表盘”存在于左侧面板，通用组件页面置于底部。
- ✔️ 每个画板均启用了12列网格，且网格颜色透明度≤15%以确保不干扰原型阅读。
- ✔️ 至少添加了2条水平参考线（导航底部、版权区域顶部）和2条垂直参考线（侧边栏右侧、内容区左边）。
- ✔️ 已创建名为“_模板-网格参考线”的模板页面，包含网格与参考线但不含原型元素，可直接复制使用。
3.8 交付物模板
本章完成后的Figma项目文件结构示例：
B2B后台管理系统 - 低保真原型/
├── 页面层级（Pages）：
│ ├── 1_首页
│ ├── 2_登录注册
│ ├── 3_仪表盘
│ ├── 4_用户管理
│ ├── 5_订单管理
│ ├── 6_消息通知
│ ├── 7_系统设置
│ ├── 8_数据统计
│ └── _通用组件库
└── 模板页面：
└── _模板-网格参考线（包含12列网格+辅助行网格+关键参考线）
📌 交付注意：将网格与参考线的设置步骤截图或录屏，附在项目Wiki文档中，方便团队成员快速掌握。