壹、墨刀原型设计工具操作使用指南

一、基础入门

1. 软件版本与环境要求

• 版本区别：
  • 免费版：支持 3 个项目，单项目最多 20 页，基础组件与交互，团队成员≤5 人；
  • 专业版（付费）：无项目数量限制，支持全部组件、API 模拟、高级协作，团队成员≤20 人；
  • 企业版（付费）：定制化权限、品牌水印、分支管理，适合大型团队（价格需联系销售）。
• 环境要求：
  • 客户端：Windows 10+（64 位）、macOS 10.13+，最低 4GB 内存，建议 8GB；
  • 网页端：Chrome 80+、Edge 80+、Firefox 75+（不支持 IE 浏览器）。

2. 账号注册与初始化

• 注册流程：
  1. 官网点击「免费注册」→ 输入手机号→ 接收验证码→ 设置密码（8-20 位，含数字 + 字母）；
  2. 完善信息：选择身份（产品经理 / 设计师 / 开发者 / 其他）→ 选择行业（互联网 / 教育 / 金融等）→ 完成初始化。
• 新手引导：首次登录后自动弹出引导弹窗，点击「开始引导」可学习：
  • 基础操作：新建项目、添加组件、设置交互；
  • 快捷入口：模板库、帮助中心、快捷键指南。

二、项目管理

1. 新建项目（参数与限制）

• 自定义尺寸细节：
  • 输入框支持单位换算（如输入 “375dp” 自动转为 “375px”，1dp=1px）；
  • 最大尺寸限制：5000×5000px（超过会提示 “尺寸过大，可能影响性能”）。
• 模板复用技巧：
  • 模板筛选：点击模板卡片→ 查看详情（包含页面数量、组件类型、更新时间）；
  • 部分复用：导入模板后，删除不需要的页面，保留核心结构（如电商模板保留 “商品列表”“详情页”）。

2. 项目设置（隐藏功能）

• 页面切换动画全局设置：
  • 路径：「项目设置」→「页面设置」→「默认过渡动画」；
  • 优先级：全局动画可被单页面交互中的 “过渡动画” 覆盖（如全局设 “无”，某页面跳转设 “滑动” 则以该设置为准）。
• 原型水印自定义：
  • 企业版功能：「高级设置」→「水印设置」→ 上传自定义图片水印（支持 PNG 透明格式，建议尺寸 200×100px）→ 设置透明度（10%-90%）。

3. 项目操作（异常处理）

• 导入失败解决：
  • Axure 导入失败：检查.rp 文件版本（需 Axure 9+），文件大小≤100MB，复杂交互（如动态面板）可能导致导入不全；
  • Sketch 导入失败：确保安装最新版墨刀 Sketch 插件，导出前合并 Sketch 图层（避免图层过多）。
• 版本回滚异常：
  • 问题：回滚后部分组件丢失→ 原因：历史版本后新增的组件未被保存→ 解决：回滚前手动保存当前版本，或重新添加组件。

三、页面设计

1. 页面树管理（深度操作）

• 弹窗页面设置：
  • 尺寸建议：宽度≤375px（移动端），高度≤500px（避免超出屏幕）；
  • 层级设置：弹窗页面默认在普通页面上方，如需嵌套弹窗（弹窗内再打开弹窗），需在交互中设置 “置顶显示”。
• 页面批量操作快捷键：
  • Windows：Ctrl+A（全选页面）、Ctrl+Shift + 点击（多选不连续页面）；
  • macOS：Command+A、Command+Shift + 点击。

2. 画布操作（精度控制）

• 坐标定位技巧：
  • 组件坐标显示：选中组件→ 画布底部状态栏显示 “X: 100px, Y: 200px”（实时更新）；
  • 批量位移：选中多个组件→ 右侧属性面板输入 X/Y 值→ 所有组件同步位移（保持相对位置不变）。
• 辅助线高级用法：
  • 吸附距离设置：「视图」→「网格设置」→「吸附距离」→ 选择 5px/10px/20px（数值越小精度越高）；
  • 辅助线复用：右键辅助线→「保存为预设」→ 命名（如 “登录页辅助线”）→ 其他页面可「加载预设」快速应用。

3. 图层管理（高效检索）

• 图层筛选：图层面板顶部点击「筛选」图标→ 按组件类型（文本 / 图片 / 按钮）筛选→ 快速定位目标图层；
• 图层锁定状态：锁定的图层在图层面板显示 “锁” 图标，右键→「解锁全部」可一次性解锁所有图层；
• 嵌套图层选择：多层嵌套时（如卡片→列表→文本），双击图层可逐层进入（类似 PS 的图层进入），按 Esc 退出当前层级。

四、组件与样式

1. 组件库（细分组件参数）

• 输入框组件细节：
  • 提示文本：右侧属性面板「占位文本」输入（如 “请输入手机号”），默认灰色，输入内容后消失；
  • 输入限制：设置「最大长度」（如 11 位手机号），超出后无法输入；
  • 键盘类型：移动端预览时，可设置弹出键盘类型（数字 / 字母 / 邮箱，默认通用键盘）。
• 图标组件高级设置：
  • 图标旋转：右侧「样式」→「旋转」输入角度（-360°~360°），如设置 90° 使箭头向上；
  • 图标组合：多个图标叠加（如圆形 + 对勾 = 选中图标），组合后保存为自定义组件。

2. 组件操作（异常处理）

• 组件无法选中：
  • 原因 1：被其他组件完全覆盖→ 解决：图层面板直接点击目标图层；
  • 原因 2：组件被锁定→ 解决：图层面板点击 “锁” 图标解锁；
  • 原因 3：处于组内且未穿透选择→ 解决：按住 Alt 点击组件。
• 组件复制异常：
  • 问题：Ctrl+D 复制后组件位置重叠→ 解决：复制后按方向键微调（默认偏移 10px）；
  • 问题：跨页面复制组件样式丢失→ 解决：先将组件保存为自定义组件，再在目标页面引用。

3. 样式设置（像素级优化）

• 渐变色设置：
  • 线性渐变：设置角度（0°= 水平从左到右，90°= 垂直从上到下）→ 点击色标可添加 / 删除（最多 5 个色标）→ 拖动色标调整位置；
  • 径向渐变：设置中心点（X/Y 百分比，50%= 中心）→ 调整渐变半径（0%~100%）。
• 阴影参数对应效果：
  • X 偏移：正值→ 阴影向右，负值→ 向左（如 5px→ 右移 5px）；
  • Y 偏移：正值→ 阴影向下，负值→ 向上；
  • 模糊半径：值越大阴影越模糊（0px = 清晰边缘，20px = 高度模糊）；
  • 扩散半径：正值→ 阴影扩大，负值→ 阴影缩小（如 - 2px = 阴影比组件小 2px）。

五、交互设计（核心功能极致细化）

1. 交互事件（复杂场景示例）

• 多触发条件组合：
  场景：购物车 “结算” 按钮，单击且商品数量 > 0 时跳转支付页，否则显示提示。
  操作：

  1. 选中按钮→ 添加交互→ 触发方式「单击」；
  2. 动作类型「条件判断」→ 添加条件：变量 “商品数量”>0；
  3. 满足条件：跳转「支付页」；
  4. 不满足条件：显示「“请添加商品” 提示文本」（2 秒后自动隐藏）。

• 滑动交互细节：

  • 滑动距离设置：「交互」→「滑动」→ 勾选「设置滑动距离」→ 输入像素值（如 50px，滑动超过 50px 才触发动作）；
  • 滑动方向限制：选择「仅水平」或「仅垂直」（避免误触）。

2. 条件与逻辑（变量高级用法）

• 数组变量操作：
  • 新增元素：设置变量「数组 A」=「数组 A」+「新元素」（如购物车添加商品）；
  • 删除元素：设置变量「数组 A」=「数组 A」过滤「元素 B」（如购物车删除商品）；
  • 取值：通过索引获取（如「数组 A [0]」取第一个元素）。
• 多条件嵌套：
  场景：登录时，先判断用户名是否为空→ 不为空再判断密码是否正确。
  操作：
  1. 第一层条件：用户名≠空→ 满足则进入第二层条件；
  2. 第二层条件：密码 =“123456”→ 满足则跳转首页，否则提示 “密码错误”；
  3. 第一层不满足：提示 “用户名不能为空”。

3. 状态管理（动态切换技巧）

• 组件状态联动：
  场景：开关组件切换时，同步显示 / 隐藏 “开启提示” 文本。
  操作：
  1. 开关新增 “开启”“关闭” 状态（默认 “关闭”）；
  2. 开关添加交互：触发方式「单击」→ 动作「切换状态」（在 “开启” 和 “关闭” 间切换）；
  3. 同一交互中添加条件：若状态为 “开启”→ 显示提示文本；若为 “关闭”→ 隐藏提示文本。

六、预览与分享

1. 预览原型（调试技巧）

• 交互逻辑调试：
  • 问题：交互未触发→ 检查：组件是否被其他组件覆盖（预览时按「热区」查看）、触发方式是否正确（如误设为 “双击”）、条件是否满足（调试面板查看变量值）；
  • 问题：跳转页面错误→ 检查目标页面是否被删除（页面树中确认存在）、是否设置了 “默认页面” 覆盖跳转。
• 移动端预览适配：
  • 适配不同尺寸：预览时切换设备型号→ 观察组件是否超出屏幕（超出部分需调整尺寸或布局）；
  • 手势模拟：双指捏合→ 模拟缩放手势（网页端原型）；长按组件→ 触发长按交互。

2. 分享原型（权限问题解决）

• 链接无法访问：
  • 原因 1：链接过期→ 解决：重新生成链接（延长有效期）；
  • 原因 2：项目被删除→ 解决：从回收站恢复项目（首页「回收站」→ 右键恢复）；
  • 原因 3：权限变更→ 解决：检查分享范围（如从 “公开” 改为 “私有” 会导致链接失效）。
• 评论不显示：
  • 原因：被过滤→ 解决：编辑界面「评论」面板→ 点击「筛选」→ 取消 “已解决” 过滤；
  • 原因：权限不足→ 解决：分享者需开启 “允许评论” 权限。

七、团队协作

1. 团队管理（权限冲突处理）

• 角色变更限制：
  • 管理员无法将自己降为 “查看者”（需先转让管理员权限给其他成员）；
  • 批量变更角色：成员列表按 Ctrl/Command 选中多人→ 点击「变更角色」→ 选择目标角色。
• 团队容量超限：
  • 提示 “成员数量超出上限”→ 解决：删除不活跃成员（管理员→「成员管理」→ 移除）或升级套餐。

2. 协作操作（实时冲突解决）

• 编辑冲突处理：
  • 场景：A 和 B 同时编辑同一组件→ 后保存者的修改会覆盖前者→ 解决：沟通分工（如 A 负责左侧组件，B 负责右侧），或使用「锁定」功能临时保护组件；
• 版本合并冲突：
  • 企业版分支合并时提示 “冲突”→ 解决：点击「对比冲突」→ 手动选择保留 A 版本 / B 版本的修改→ 确认合并。

八、高级功能

1. API 模拟（参数与调试）

• 请求参数设置：
  • Query 参数：添加键值对（如 “page=1&size=10”）→ 会拼接到 URL 后（/api/list?page=1&size=10）；
  • Body 参数：选择格式（form-data/json）→ json 格式需输入标准 JSON（如{"name":"test"}）。
• API 调试工具：
  预览时按 F12 打开浏览器控制台→「Network」标签→ 查看 API 请求详情（状态码、响应时间）→ 排查是否因参数错误导致响应失败。

2. 数据绑定（动态内容调试）

• 绑定不生效解决：
  • 检查变量是否存在（「数据」→「变量」确认名称正确，区分大小写）；
  • 检查绑定路径：API 响应绑定需确认 JSON 路径正确（如data.list[0].name而非list[0].name）；
  • 刷新绑定：右键组件→「刷新数据绑定」（解决缓存导致的不更新问题）。

九、辅助工具与常见问题

1. 快捷键补充（隐藏组合键）

• 组件对齐：选中组件后按 Ctrl + 左箭头→ 左对齐到画布边缘；
• 复制样式：Ctrl+Shift+C（复制组件样式）→ Ctrl+Shift+V（粘贴到目标组件）；
• 页面切换：编辑界面按 PgUp/PgDown→ 快速切换上 / 下一页。

2. 常见问题（FAQ）

• Q：组件无法拖拽到画布？
  A：检查是否处于 “预览模式”（需切换回编辑模式）；或组件库被折叠（点击左侧「组件」展开）。
• Q：原型卡顿怎么办？
  A：删除冗余组件（尤其是大图）；关闭「视图」→「显示阴影」（减少渲染压力）；升级客户端到最新版本。
• Q：如何导出高清晰度图片？
  A：导出时选择 “3x” 分辨率；确保原图为高清图（建议≥72dpi）。

该指南通过异常场景处理、像素级参数说明、复杂交互示例，覆盖了墨刀操作的全细节，适合从新手到资深用户的进阶学习。结合 PlantUML 思维导图的层级化展示，可快速定位具体功能的操作要点与问题解决方法，真正实现 “照指南即可操作” 的实用价值。

十、导图表现

@startmindmap
title 墨刀原型工具极致精细化功能体系* 基础入门
** 软件版本与环境
*** 版本区别（免费/专业/企业版功能限制）
*** 环境要求（客户端系统/浏览器版本/内存）
** 账号注册与初始化
*** 注册流程（手机号/验证码/密码设置）
*** 新手引导（基础操作/快捷入口）* 项目管理
** 新建项目
*** 自定义尺寸（单位/最大限制/换算）
*** 模板复用（筛选/部分复用技巧）
** 项目设置
*** 全局动画（优先级/覆盖规则）
*** 水印设置（企业版自定义/透明度）
** 项目操作
*** 导入失败解决（Axure/Sketch问题）
*** 版本回滚异常（组件丢失处理）* 页面设计
** 页面树管理
*** 弹窗页面（尺寸建议/层级设置）
*** 批量操作快捷键（Windows/macOS）
** 画布操作
*** 坐标定位（状态栏显示/批量位移）
*** 辅助线（吸附距离/预设复用）
** 图层管理
*** 图层筛选（按类型筛选）
*** 嵌套图层（双击进入/Esc退出）* 组件与样式
** 组件库
*** 输入框（提示文本/输入限制/键盘类型）
*** 图标（旋转/组合技巧）
** 组件操作
*** 无法选中解决（覆盖/锁定/穿透）
*** 复制异常（位置重叠/跨页样式）
** 样式设置
*** 渐变色（角度/色标/半径）
*** 阴影参数（偏移/模糊/扩散）* 交互设计
** 交互事件
*** 多条件组合（结算按钮示例）
*** 滑动交互（距离/方向限制）
** 条件与逻辑
*** 数组操作（新增/删除/取值）
*** 多条件嵌套（登录判断示例）
** 状态管理
*** 状态联动（开关-提示文本示例）* 预览与分享
** 预览原型
*** 交互调试（未触发/跳转错误）
*** 移动端适配（尺寸切换/手势）
** 分享原型
*** 链接问题（过期/删除/权限）
*** 评论不显示（过滤/权限）* 团队协作
** 团队管理
*** 角色变更（管理员限制/批量变更）
*** 容量超限（成员清理/套餐升级）
** 协作操作
*** 编辑冲突（覆盖问题/分工解决）
*** 版本合并冲突（手动选择）* 高级功能
** API模拟
*** 请求参数（Query/Body格式）
*** 调试工具（控制台Network）
** 数据绑定
*** 不生效解决（变量/路径/刷新）* 辅助工具与FAQ
** 隐藏快捷键（对齐/样式复制/页面切换）
** 常见问题（组件拖拽/卡顿/高清导出）
@endmindmap

---

贰、墨刀原型设计工具实践操作

一、小白用墨刀做能碳管理系统原型的完整流程

能碳管理系统主要用于监控能源消耗、分析碳排放、管理节能措施，原型制作可分为 「规划→搭建→设计→交互→验证→分享」 六步，每一步都拆解到 “拖组件、改文字” 的细节，0 基础也能跟做！

步骤 1：需求规划（10 分钟）

目标：明确系统要做什么，避免后期反复改。

• 核心功能模块（必选，直接抄）：

  1. 登录页：用户输入账号密码进入系统。
  2. 首页仪表盘：总览核心数据（总能耗、碳排放、异常预警）。
  3. 能耗监测：按能源类型（电 / 水 / 气）、区域、时间看能耗数据。
  4. 碳排放管理：统计碳排放量、减排量，分析排放来源。
  5. 节能分析：展示节能项目效果（如光伏、LED 改造）、能耗趋势。
  6. 设备管理：监控重点用能设备（空调、锅炉）的状态和能耗。
  7. 报表中心：导出数据报表，支持自定义查询。

• 画草稿（不用专业，手机拍张纸就行）：

  首页顶部放“总能耗、碳排放”大数字，中间放 3 个图表（能耗趋势、碳排放占比、区域对比），底部放“异常预警”列表。  
  能耗监测页左侧选能源类型，右侧用柱状图对比区域能耗，下面用表格列详细数据。  
  

步骤 2：新建项目与页面（5 分钟）

目标：在墨刀里建 “房子框架”，确定有哪些页面。

1. 新建项目：

   • 打开墨刀 → 点击首页 「+ 新建项目」 → 选 「网页端」（能碳系统多在电脑上用）→ 尺寸选 「PC 1920×1080」 → 名称填 「能碳管理系统」 → 点 「创建」。

2. 搭建页面树（像建文件夹分类放页面）：

   • 左侧 “页面树” 点 「+」 → 选 「分组」 → 命名 「核心功能」（放主要页面）。
   • 选中 “核心功能” 分组 → 点 「+」 → 选 「页面」，依次建这些页面：
     • ① 登录页
     • ② 首页 - 仪表盘
     • ③ 能耗监测
     • ④ 碳排放管理
     • ⑤ 节能分析
     • ⑥ 设备管理
     • ⑦ 报表中心

步骤 3：设计静态页面（每个页面 15-20 分钟）

目标：给每个页面 “填内容”，先做静态版（能看到文字、按钮、图表占位）。

3.1 登录页（最简单，练手用）

• 拖组件（左侧 “组件库→基础” 里找）：

  • 拖 1 个 「图片」 组件（放系统 logo，右键 “替换图片” 选本地图片）。
  • 拖 2 个 「输入框」 组件（分别改占位文字为 “用户名”“密码”）。
  • 拖 1 个 「按钮」 组件（改文字为 “登录”）。
  • 拖 1 个 「文本」 组件（改文字为 “能碳管理系统登录”，当标题）。

• 调样式（右侧 “样式” 面板改）：

  • 标题文本：字体 24px，颜色选深蓝色（#2F54EB）。
  • 输入框：提示文字颜色浅灰色（#999），边框 1px 灰色（#DDD）。
  • 按钮：背景色绿色（#52C41A），文字白色，圆角 4px。

• 对齐（框选所有组件 → 顶部 “对齐” 按钮）：

  • 先点 「水平居中」 → 再点 「垂直居中」 → 让内容在页面中间。

3.2 首页 - 仪表盘（核心数据展示）

• 顶部导航栏：

  • 拖 1 个 「容器→导航栏」 组件 → 拖 1 个 「文本」 组件（改文字为 “能碳管理系统”，字体 20px，颜色白色）→ 拖 2 个 「图标」 组件（用 “设置”“用户” 图标，颜色白色）。
  • 导航栏背景色设为深蓝色（#2F54EB），高度 60px。

• 左侧菜单：

  • 拖 1 个 「矩形」 组件（背景色浅灰色 #F5F5F5，宽度 220px，高度占满页面）。
  • 在矩形里拖多个 「文本」 组件（改文字为 “首页”“能耗监测”“碳排放管理” 等，字体 14px，颜色 #333）。
  • 选 “首页” 文本 → 设为蓝色（#2F54EB）、加粗 → 模拟选中状态。

• 核心数据区：

  • 大数字卡片：拖 3 个 「矩形」 组件（背景色白色，加阴影）→ 每个矩形里拖 1 个 「文本」 组件（分别写 “总能耗：12500 kWh”“碳排放：890 tCO₂e”“今日减排：20 tCO₂e”，字体 20px，颜色 #333）。
  • 图表占位：拖 3 个 「图片」 组件（右键 “替换图片” 选本地 “折线图截图”“饼图截图”“柱状图截图”，当占位）。
  • 预警列表：拖 1 个 「容器→列表」 组件 → 改列表项文字为 “空调能耗异常（2023-10-01）”“锅炉碳排放超标（2023-10-02）”。

3.3 其他功能页（偷懒复制法）

• 复制首页的 「导航栏」 和 「左侧菜单」 → 粘贴到 “能耗监测”“碳排放管理” 等页面 → 保持风格统一。
• 能耗监测页：
  • 左侧拖 1 个 「下拉菜单」 组件（改选项为 “电”“水”“气”）。
  • 右侧拖 1 个 「容器→柱状图」 组件（改数据为 “区域 A：5000 kWh”“区域 B：3000 kWh”）→ 拖 1 个 「容器→表格」 组件（填能耗详细数据）。

步骤 4：添加交互（让页面能跳转、有动态效果）

目标：让 “登录按钮” 能跳转到首页，“左侧菜单” 能切换页面，模拟真实系统的交互。

4.1 登录页→首页跳转

• 选中 “登录” 按钮 → 右侧 「交互」 面板 → 点 「+ 添加交互」 → 触发方式选 「单击」 → 动作选 「跳转页面」 → 目标页面选 「首页 - 仪表盘」 → 动画选 「无」 → 点 「确定」。

4.2 左侧菜单切换页面

• 选中 “能耗监测” 文本 → 右侧 「交互」 面板 → 点 「+ 添加交互」 → 触发方式选 「单击」 → 动作选 「跳转页面」 → 目标页面选 「能耗监测」 → 点 「确定」。
• 同理，给 “碳排放管理”“节能分析” 等菜单文本，添加跳转对应页面的交互。

4.3 简单动态效果（可选，让按钮更生动）

• 选中 “登录” 按钮 → 右侧 「交互」 面板 → 点 「+ 添加交互」 → 触发方式选 「鼠标悬停」 → 动作选 「切换状态」 → 新建 “悬停状态” → 改背景色为深绿色（#389E0D）→ 点 「确定」。
• 效果：鼠标放到按钮上，颜色会变深。

步骤 5：预览与调整（10 分钟）

目标：检查原型是否有错误，调整细节让页面更美观。

1. 预览原型：

   • 顶部点 「预览」 按钮（或按 Ctrl+P）→ 在新窗口查看效果 → 点击 “登录按钮”“左侧菜单”，检查是否能正常跳转。

2. 调整细节：

   • 组件错位：拖动组件到正确位置，或用顶部 “对齐” 工具（如 “水平居中”“垂直分布”）。
   • 文字看不清：右侧 “样式” 面板改字体颜色（如 #333 更清晰）或字号（如标题 24px，内容 14px）。
   • 交互没触发：检查 “触发方式”“目标页面” 是否选对，重新设置交互。

步骤 6：分享给他人（5 分钟）

目标：生成链接，发给同事 / 领导看原型效果。

• 顶部点 「分享」 → 选 「仅查看链接」 → 可设置 “密码”（选填）→ 点 「创建链接」 → 复制链接 → 发给需要查看的人（无需登录墨刀，直接打开链接就能看）。

二、修复后的竖版 PlantUML 流程图（小白操作顺序）

解决了原代码的颜色报错问题，用 墨刀默认支持的颜色语法 重新编写，确保能正常渲染：

@startmindmap  
title 用墨刀做能碳管理系统原型步骤（竖版）  
left to right direction  *[#DeepSkyBlue] 需求规划  
** 明确核心功能  
*** 登录页  
*** 首页仪表盘  
*** 能耗监测  
*** 碳排放管理  
*** 节能分析  
*** 设备管理  
*** 报表中心  
** 画简单草稿  
*** 页面布局  
*** 核心元素位置  *[#GreenYellow] 新建项目与页面  
** 新建项目  
*** 选“网页端”  
*** 尺寸1920×1080  
*** 命名“能碳管理系统”  
** 搭建页面树  
*** 建“核心功能”分组  
*** 新建7个页面（登录页/首页等）  *[#LightCoral] 设计静态页面  
** 登录页  
*** 拖入logo、输入框、按钮  
*** 调整样式（颜色/字体）  
*** 对齐组件  
** 首页-仪表盘  
*** 加导航栏和左侧菜单  
*** 放数据卡片（大数字）  
*** 加图表和预警列表  
** 其他功能页  
*** 复制导航和菜单  
*** 按需求加对应组件  *[#Plum] 添加交互  
** 登录页→首页跳转  
*** 选中按钮→添加交互  
*** 触发“单击”→跳转页面  
** 菜单切换页面  
*** 每个菜单文本添加跳转  
** 动态效果（可选）  
*** 按钮悬停变色  *[#LightSkyBlue] 预览与调整  
** 预览原型（Ctrl+P）  
*** 检查跳转是否正常  
*** 查看布局是否合理  
** 调整细节  
*** 修正组件位置  
*** 优化文字样式  *[#Silver] 分享原型  
** 生成“仅查看链接”  
*** 复制链接分享  
@endmindmap  

怎么用这个代码？

• 打开 PlantUML 在线编辑器（PlantUML Web Server）→ 粘贴代码 → 点 “Submit”→ 自动生成流程图。

三、小白避坑指南（关键提示）

1. 组件找不到？

   • 墨刀组件库分类清晰，“基础” 里找文本、按钮；“容器” 里找导航栏、列表；“交互” 里找下拉菜单、开关。

2. 交互没效果？

   • 检查 “触发方式”（如是不是误设为 “双击”）、“目标页面”（是不是删了或重命名了）。

3. 页面太丑？

   • 用 “样式刷”（选中好看的组件 → 点顶部 “样式刷” → 刷到其他组件）快速统一样式。

4. 不想做图表？

   • 先用 “矩形 + 文本” 模拟（比如画个矩形，里面写 “能耗趋势图”），后期再替换成真实图表。

按照这个流程，3 小时内就能做出一个能跳转、能展示核心功能的能碳管理系统原型。

叁、“流程图→PRD（产品需求文档）→原型图（墨刀实操）→设计稿”

 摘要

本文专为零基础小白打造，详细拆解 “流程图→PRD（产品需求文档）→原型图（墨刀实操）→设计稿” 的完整开发链路，聚焦能碳管理系统的核心场景（如数据采集、碳核算、报表分析等）。每个阶段均明确工具选择、操作步骤及实战案例，尤其针对墨刀原型图制作提供 “一步一截图式” 指引，最后用 PlantUML 可视化全流程，帮助小白快速理解并独立完成能碳管理系统的前期开发工作。

一、第一步：画流程图 —— 梳理能碳管理系统的 “业务骨架”

流程图是整个开发的 “地基”，作用是把能碳管理系统的业务逻辑、功能模块和用户操作路径 “画出来”，避免后续开发混乱。小白不用怕，跟着步骤来就能上手。

1. 明确流程图核心目标

能碳管理系统的核心是 “帮企业记录碳排放数据、计算碳排放量、生成合规报表”，所以流程图要围绕 3 个关键场景展开：

• 场景 1：数据采集（企业录入能源消耗、生产数据等基础信息）；
• 场景 2：碳核算（系统根据采集数据，按国标 / 国际标准计算碳排放）；
• 场景 3：报表输出（生成碳排放清单、减排建议等可下载报表）。

2. 选择新手友好的流程图工具

不用选复杂工具，推荐 2 个免费且易上手的：

• Draw.io（网页版，无需安装）：打开浏览器直接用，模板多，支持导出 PNG/JPG；
• Microsoft Visio（适合有 Office 基础的小白）：功能更全，自带 “流程图表” 模板。

3. 手把手画能碳管理系统流程图（以 Draw.io 为例）

（1）准备工作

打开 Draw.io 官网（Flowchart Maker & Online Diagram Software），点击 “Blank Diagram”，左侧工具栏选择 “Flowchart”（流程图），常用符号记 3 个就行：

• 矩形框：代表 “操作 / 步骤”（如 “企业录入 electricity 消耗数据”）；
• 菱形框：代表 “判断 / 分支”（如 “数据是否符合校验规则？”）；
• 箭头：代表 “流程方向”（连接各个步骤）。

（2）分场景画流程（以 “数据采集” 为例）

1. 先画 “起点”：拖 1 个矩形框，写 “企业登录能碳管理系统”；
2. 下一步：拖矩形框，写 “进入‘数据采集’模块”，用箭头连接起点；
3. 核心步骤：拖矩形框，写 “选择数据类型（如 electricity / 天然气 / 燃油）”；
4. 数据录入：拖矩形框，写 “填写消耗量、使用时间、对应生产环节”；
5. 判断校验：拖菱形框，写 “系统校验数据是否完整（无空值 / 格式正确）？”；
6. 分支处理：
   • 若 “是”：拖矩形框，写 “数据保存至系统数据库”；
   • 若 “否”：拖矩形框，写 “弹出提示‘请补充 XX 字段’”，再用箭头连回 “填写消耗量” 步骤（让用户重新修改）；
7. 终点：拖矩形框，写 “数据采集完成，跳转至‘碳核算’模块”，用箭头连接 “数据保存” 步骤。

（3）校验与优化

画完后找懂业务的人（如企业环保专员）看一眼：“这个流程是不是符合你们平时录数据的习惯？” 比如企业可能需要 “批量上传 Excel 数据”，那就补充一个 “选择‘批量上传’/‘手动录入’” 的判断步骤，确保流程贴合实际需求。

二、第二步：写 PRD—— 把流程图 “翻译成需求文档”

流程图是 “画出来的逻辑”，PRD 是 “写出来的需求”，要明确每个功能的 “做什么、怎么做、有什么要求”，方便后续画原型、做设计时不跑偏。小白不用写得太复杂，抓住 “核心四要素” 就行。

1. PRD 核心四要素（小白必写内容）

要素	说明（以能碳管理系统 “数据采集模块” 为例）
功能描述	明确这个功能是干嘛的，比如 “企业用户可手动录入或批量上传能源消耗数据，系统自动校验数据完整性”
交互规则	明确用户操作后系统的反应，比如 “点击‘上传 Excel’按钮后，弹出文件选择框，仅支持.xlsx/.xls 格式，最大 50MB”
数据要求	明确字段规则，比如 “‘消耗量’字段仅支持数字，保留 2 位小数；‘使用时间’字段需选择‘年 / 月 / 日’，不能选未来时间”
优先级	用 “高 / 中 / 低” 标注，比如 “手动录入数据（高）、批量上传（中）、数据导出（低）”，先做重要功能

2. 选择 PRD 撰写工具

推荐 “石墨文档”（网页版，支持多人协作），自带 “PRD 模板”，小白直接填空就行：

1. 打开石墨文档（石墨文档官网-在线协同办公系统平台,支持云端多人在线协作文档,表格,幻灯片），登录后点击 “新建”→“文档”→搜索 “PRD 模板”；
2. 模板一般包含 “文档信息（版本 / 作者）、功能清单、详细需求、非功能需求”，按模板填内容。

3. 实战：写 “数据采集模块” PRD（小白填空示例）

文档信息

• 文档名称：能碳管理系统 - 数据采集模块 PRD
• 版本：V1.0（第一次写就标 V1.0）
• 作者：XXX（你的名字）
• 日期：2025 年 8 月 24 日

功能清单

功能名称	优先级	所属模块
手动录入能源数据	高	数据采集
批量上传 Excel	中	数据采集
数据校验提示	高	数据采集
已录数据查看	中	数据采集

详细需求（以 “手动录入能源数据” 为例）

1. 功能描述：企业用户在 “数据采集” 页面，选择能源类型后，手动填写对应消耗数据，提交后系统保存并校验；
2. 交互步骤：
   • 步骤 1：用户点击 “手动录入” 按钮，弹出录入弹窗；
   • 步骤 2：用户从下拉框选择 “能源类型”（选项：electricity / 天然气 / 燃油 / 其他）；
   • 步骤 3：用户填写 “消耗量”（输入框，仅支持数字，保留 2 位小数）、“使用时间”（日期选择器，默认当天，不可选未来）、“对应生产环节”（下拉框：生产车间 A / 生产车间 B / 办公区）；
   • 步骤 4：用户点击 “提交” 按钮，系统触发校验；
3. 校验规则：
   • 若 “能源类型” 未选：弹窗提示 “请选择能源类型”；
   • 若 “消耗量” 为空或非数字：弹窗提示 “请输入正确的消耗量（数字，保留 2 位小数）”；
4. 非功能需求：提交后加载时间不超过 3 秒，若网络差，显示 “加载中，请稍候” 动画。

4. PRD 评审（小白必做）

把写好的 PRD 发给 2 类人看：

• 业务方（如企业环保负责人）：“这些需求是不是你想要的？”；
• 技术 / 设计（如果有）：“这些需求技术上能不能实现？设计上有没有难度？”；
  根据反馈修改，比如业务方说 “需要加‘数据来源备注’字段”，就补充到 PRD 里，确保需求统一。

三、第三步：做原型图 —— 用墨刀把 PRD “变成可点击的界面”

原型图是 “可视化的 PRD”，相当于系统的 “草稿界面”，能让大家直观看到 “页面长什么样、点击按钮会去哪”。重点来了 —— 用墨刀实操，小白跟着步骤走，1 小时就能做出第一个页面。

1. 墨刀准备工作（先搞定基础设置）

（1）注册登录墨刀

• 打开墨刀官网（墨刀 - 适合产品团队的原型设计及协作平台），用手机号注册（个人版免费，足够小白用）；
• 登录后，点击右上角 “新建项目”，按提示填写：
  • 项目名称：能碳管理系统（必填）；
  • 设备类型：选 “PC 端”（能碳管理系统多在电脑上用）；
  • 屏幕尺寸：选 “1920×1080”（主流电脑分辨率）；
  • 点击 “创建”，进入墨刀编辑界面。

（2）认识墨刀编辑界面（小白必看 3 个区域）

• 左侧组件库：有 “按钮、输入框、下拉框” 等现成组件，拖到画布上就能用；
• 中间画布：就是你要设计的页面（比如 “数据采集页”）；
• 右侧属性栏：选中文组件后，在这里改颜色、字体、大小（比如把按钮改成 “绿色”，文字改成 “14 号”）。

2. 实战：用墨刀做 “数据采集页” 原型（一步一操作）

我们要做的页面包含 3 个部分：顶部导航栏、左侧菜单、中间内容区（核心是数据录入表单）。

（1）搭建页面框架（5 分钟搞定）

1. 拖 “导航栏” 组件：从左侧组件库搜 “导航栏”，拖到画布顶部，在右侧属性栏改：

   • 高度：80px；
   • 背景色：#2E86AB（蓝色，显专业）；
   • 标题：能碳管理系统（文字颜色白色，字体 18 号）；
   • 加 “用户头像”：拖 “图片” 组件到导航栏右侧，上传一张头像图，大小 30×30px。

2. 拖 “侧边栏” 组件：从左侧搜 “侧边栏”，拖到画布左侧，改：

   • 宽度：200px；
   • 背景色：#F5F7FA；
   • 加菜单选项：拖 “文本” 组件，依次写 “首页、数据采集、碳核算、报表输出、系统设置”，每个文本间距 20px，选中 “数据采集” 时文字颜色改 #2E86AB（表示当前在这个模块）。

（2）做核心内容区 —— 数据录入表单（重点操作）

1. 加 “页面标题”：拖 “文本” 组件到中间内容区（侧边栏右侧），写 “数据采集”，字体 20 号，加粗，距离顶部 20px。

2. 加 “录入方式切换”：

   • 拖 2 个 “按钮” 组件，并排放，分别写 “手动录入”“批量上传”；
   • 选 “手动录入” 按钮，在右侧属性栏改背景色 #2E86AB、文字白色（表示当前选中）；
   • 选 “批量上传” 按钮，背景色 #FFFFFF、文字 #666666（未选中）。

3. 加 “表单字段”（按 PRD 里的需求来，每个字段包含 “标签 + 输入组件”）：

   • 字段 1：能源类型（标签 + 下拉框）；
     1. 拖 “文本” 组件，写 “能源类型：”，字体 14 号，颜色 #333333；
     2. 从左侧搜 “下拉框” 组件，拖到标签右侧，改宽度 200px；
     3. 双击下拉框，添加选项：electricity、天然气、燃油、其他（按 PRD 需求）。
   • 字段 2：消耗量（标签 + 输入框）；
     1. 拖 “文本” 组件，写 “消耗量（单位：kWh/m³/L）：”，放在 “能源类型” 下方，间距 15px；
     2. 拖 “输入框” 组件到右侧，改宽度 200px，提示文字写 “请输入数字，保留 2 位小数”（在右侧属性栏 “提示文本” 里填）。
   • 字段 3：使用时间（标签 + 日期选择器）；
     1. 拖 “文本” 组件，写 “使用时间：”，放在 “消耗量” 下方，间距 15px；
     2. 搜 “日期选择器” 组件拖到右侧，改宽度 200px，默认日期设为当天。
   • 字段 4：生产环节（标签 + 下拉框）；
     1. 拖 “文本” 组件，写 “对应生产环节：”，放在 “使用时间” 下方，间距 15px；
     2. 拖 “下拉框” 组件，添加选项：生产车间 A、生产车间 B、办公区。

4. 加 “提交 / 重置按钮”：

   • 拖 2 个 “按钮” 组件，放在表单最下方，间距 20px；
   • 左边按钮：写 “提交”，背景色 #2E86AB、文字白色；
   • 右边按钮：写 “重置”，背景色 #FFFFFF、文字 #666666。

（3）设置交互逻辑（让原型 “能点击”）

原型不是静态图，要让按钮有反应，比如点击 “提交” 弹出成功提示，点击 “批量上传” 切换表单。

1. 给 “提交” 按钮加交互：

   • 选中 “提交” 按钮，点击右侧属性栏最下方的 “交互”→“添加交互”；
   • 触发方式：选 “单击”；
   • 交互动作：选 “弹窗”→“新建弹窗”；
   • 在弹窗里拖 “文本” 组件，写 “数据提交成功！即将跳转至碳核算模块”，再拖一个 “确定” 按钮；
   • 给 “确定” 按钮加交互：单击→“页面跳转”→选择 “碳核算页”（后续要做的页面，先创建空白页命名为 “碳核算页”）。

2. 给 “批量上传” 按钮加交互：

   • 选中 “批量上传” 按钮，加 “单击” 交互；
   • 交互动作：选 “显示 / 隐藏”→选中 “手动录入表单”（按住 Ctrl 键选所有手动录入的字段）→动作选 “隐藏”；
   • 再添加一个 “显示 / 隐藏” 动作：选中 “批量上传表单”（提前拖好：一个 “文件上传” 组件 +“上传” 按钮，默认隐藏）→动作选 “显示”；
   • 最后改按钮样式：“批量上传” 按钮背景色改 #2E86AB（选中），“手动录入” 按钮背景色改 #FFFFFF（未选中）。

（4）预览与分享（看效果、收反馈）

1. 点击墨刀编辑界面右上角的 “预览” 按钮，就能看到可点击的原型，测试所有按钮是否正常；
2. 若要给别人看，点击 “分享”→生成 “公开链接”，发给业务方或设计，收集修改意见（比如 “表单字段太挤，要加大间距”），在编辑界面直接调整。

3. 完成其他核心页面原型

按同样的方法，做 “碳核算页”“报表输出页”：

• 碳核算页：加 “选择核算标准”（下拉框：国标 GB/T 32150-2015、ISO 14064）、“核算结果展示区”（文本 + 图表组件，墨刀有现成的 “柱状图” 组件）、“重新核算” 按钮；
• 报表输出页：加 “报表类型选择”（下拉框：碳排放清单、减排建议）、“时间范围选择”（日期区间选择器）、“下载报表” 按钮（交互：单击→提示 “报表已生成，开始下载”）。

四、第四步：出设计稿 —— 把墨刀原型 “美化成最终界面”

设计稿是 “视觉落地版的原型”，要确定颜色、字体、图标等视觉风格，让界面更美观、符合用户习惯。小白不用学复杂的设计软件，用 Figma（免费网页版）就能上手，核心是 “跟着原型画，统一风格”。

1. 设计前先定 “设计规范”（避免界面混乱）

能碳管理系统是企业级工具，风格要 “专业、简洁、易读”，定 3 个核心规范：

• 颜色规范：
  • 主色：#2E86AB（蓝色，用于按钮、选中状态，显专业）；
  • 辅助色：#4CAF50（绿色，用于成功提示）、#F44336（红色，用于错误提示）；
  • 背景色：#FFFFFF（页面背景）、#F5F7FA（侧边栏 / 卡片背景）；
  • 文字色：#333333（标题）、#666666（正文）、#999999（提示文字）。
• 字体规范：
  • 标题：微软雅黑，18-24 号，加粗；
  • 正文：微软雅黑，14 号；
  • 提示文字：微软雅黑，12 号。
• 组件规范：
  • 按钮：圆角 4px，高度 36px，文字居中；
  • 输入框：边框色 #E5E7EB，选中时边框色 #2E86AB，圆角 4px，高度 36px；
  • 卡片：阴影 #00000010（轻微阴影），圆角 8px， padding（内边距）20px。

2. 用 Figma 画设计稿（小白简化版步骤）

（1）准备工作

• 打开 Figma 官网（Figma: The Collaborative Interface Design Tool），注册登录，新建 “文件”→命名 “能碳管理系统设计稿”；
• 按设计规范创建 “样式库”：在左侧 “Local Styles” 里，添加 “颜色样式”（把主色、辅助色存进去）、“文本样式”（把标题、正文样式存进去），后续直接调用，不用重复设置。

（2）复刻墨刀原型，美化界面（以 “数据采集页” 为例）

1. 画页面框架：

   • 导航栏：用 “矩形” 工具画一个 80px 高的矩形，填充主色 #2E86AB，在中间加 “能碳管理系统” 文本（白色，18 号，加粗），右侧加圆形头像（用 “椭圆” 工具画 30×30px 的圆，填充头像图）。
   • 侧边栏：画 200px 宽的矩形，填充 #F5F7FA，加 “首页、数据采集” 等文本（未选中 #666666，选中 #2E86AB，14 号），文本间距 20px，选中的 “数据采集” 下方加一个 8px 宽的蓝色竖线（主色）。

2. 画表单区域（核心美化点）：

   • 标签文本：用 “文本” 工具写 “能源类型：”，应用 “正文样式”（14 号，#333333）；
   • 下拉框：画 200px 宽、36px 高的矩形，边框 #E5E7EB，圆角 4px，内部加 “electricity” 文本（14 号，#666666），右侧加 “下拉箭头” 图标（Figma 左侧 “Assets” 里搜 “chevron down”）；
   • 按钮：“提交” 按钮画矩形（120px 宽、36px 高），填充主色 #2E86AB，圆角 4px，加 “提交” 文本（白色，14 号，加粗）；“重置” 按钮画同样大小的矩形，填充白色，边框 #E5E7EB，加 “重置” 文本（#666666，14 号）。

3. 加细节优化（让设计稿更专业）：

   • 给表单加 “卡片”：用矩形把所有表单字段包起来，填充白色，加轻微阴影 #00000010，圆角 8px，内边距 20px；
   • 加 “必填标识”：在 “能源类型、消耗量” 等必填字段的标签后，加红色 “*”（14 号，#F44336）；
   • 加 “提示文字”：在输入框下方加灰色文本 “注：消耗量需与能源类型单位匹配（如 electricity 填 kWh）”（12 号，#999999）。

（3）输出设计稿交付物

设计稿完成后，要导出给开发用的文件：

• 导出页面：选中页面，右键→“Export”→选择 “PNG”（用于预览）或 “SVG”（用于开发切图）；
• 标注尺寸：用 Figma 插件 “Measure”（免费），给每个组件标注尺寸（如按钮宽 120px、高 36px）、颜色值（如 #2E86AB），方便开发还原设计。

五、全流程可视化

以下是 “流程图→PRD→墨刀原型图→设计稿” 的 PlantUML 代码，复制到 PlantUML 编辑器（如PlantUML Web Server）即可生成可视化图表，小白能直观看到每个阶段的输入、输出和工具：

@startuml 能碳管理系统开发全流程
' 设置图表样式
skinparam rectangle {roundCorner 10fillColor #F5F7FAborderColor #2E86AB
}
skinparam diamond {fillColor #E8F4FDborderColor #2E86AB
}
skinparam arrow {color #666666thickness 2
}' 流程开始
start
:明确能碳管理系统核心场景\n（数据采集/碳核算/报表输出）;' 阶段1：流程图
:阶段1：画流程图;
:工具：Draw.io/Visio;
:操作：梳理业务逻辑→拖放流程符号→标注步骤→校验优化;
:输出：能碳管理系统流程图（PNG/XML）;' 阶段2：PRD
:阶段2：写PRD;
:工具：石墨文档/飞书文档;
:操作：拆解流程图模块→填写功能描述/交互规则/数据要求→标注优先级→评审修改;
:输出：能碳管理系统PRD文档（在线文档/PDF）;' 阶段3：墨刀原型图
:阶段3：做墨刀原型图;
:工具：墨刀（个人版）;
:操作：新建PC端项目→搭建页面框架（导航栏/侧边栏）→拖放组件做表单→设置交互逻辑→预览分享;
:输出：能碳管理系统可交互原型（墨刀链接/HTML）;' 阶段4：设计稿
:阶段4：出设计稿;
:工具：Figma/Sketch;
:操作：制定设计规范（颜色/字体/组件）→复刻原型美化→加细节优化→导出标注文件;
:输出：能碳管理系统设计稿（PNG/SVG+标注文档）;' 流程结束
end
@enduml

通过以上步骤，新手从 “画流程” 到 “出设计稿” 的全链路就走通了。如果在墨刀设置交互时遇到问题，比如 “跳转页面没反应”，可以先检查 “交互动作” 是否选对（比如是不是误选了 “隐藏” 而不是 “跳转”），也可以随时告诉我具体操作难点，我会帮你拆解更细致的解决步骤。另外，你也可以说说能碳管理系统是否有特殊功能（如对接企业 ERP 系统），我可以补充对应的流程和原型设计技巧。