OmniGraffle 超详细教程：从入门到精通
OmniGraffle 是一款由 The Omni Group 开发的专业图表绘制软件，被誉为“Mac上的Visio”，它功能强大，界面优雅，广泛用于创建流程图、线框图、思维导图、网络图、组织架构图等各种图表。
（图片来源网络，侵删）
本教程将分为以下几个部分：
- 第一部分：入门基础 - 认识界面，掌握核心操作。
- 第二部分：核心功能详解 - 深入了解形状、样式、连接线等核心元素。
- 第三部分：高级技巧 - 提升效率和专业度的进阶方法。
- 第四部分：实战案例 - 通过具体例子学以致用。
- 第五部分：资源与拓展 - 帮助你持续学习。
第一部分：入门基础
1 什么是 OmniGraffle？
- 定位：专业的图表和矢量绘图工具。
- 核心优势：
- 智能连接线：自动计算最短路径，避免线条交叉。
- 强大的样式系统：一键统一所有元素的外观。
- 精确控制：支持网格、对齐、分布等辅助功能。
- 跨平台：有 macOS 和 iOS 版本，通过 iCloud 同步。
2 界面初识
打开 OmniGraffle，你会看到以下主要区域：
- 工具栏：最顶部的菜单栏，包含所有命令。
- 工具面板：左侧的垂直工具栏，包含选择、形状、文本、画笔等工具。
- 画布：中间的白色区域，你进行创作的地方。
- 检查器：右侧的面板，用于精确调整选中元素的属性，这是最核心的控制面板。
- 第1栏 - 元素检查器：调整形状、线条、文本的颜色、边框、阴影等。
- 第2栏 - 排版检查器：调整字体、字号、行距、对齐方式等。
- 第3栏 - Canvas 检查器：调整整个画布的属性，如背景、网格、尺寸等。
- 大纲：左侧的面板，以树状结构展示画布中的所有元素，方便管理复杂图表。
3 第一个图表：创建一个简单的流程图
让我们通过画一个简单的“登录流程图”来熟悉基本操作。
- 新建画布：启动 OmniGraffle，选择“新建”。
- 添加形状：
- 从左侧工具面板中，选择“矩形”工具。
- 在画布上拖动,画出一个矩形，这就是你的第一个“开始”节点。
- 选择“圆角矩形”工具，再画一个，作为“输入用户名密码”节点。
- 选择“菱形”工具，画一个，作为“验证成功？”的判断节点。
- 添加文本：
- 选择文本工具 (T)。
- 点击“开始”矩形，输入文字“开始”。
- 重复此步骤,为其他形状添加相应文本。
- 连接形状：
- 从工具面板中选择线条工具。
- 关键技巧：将鼠标光标移动到第一个形状的边缘，当出现一个小圆点（连接点）时，按住并拖动到第二个形状的连接点，松开鼠标，一条连接线就自动生成了。
- 为菱形节点添加两条输出线,一条标注“是”，一条标注“否”。
- 调整样式：
- 选中所有形状。
- 打开右侧检查器的第1栏 - 元素检查器。
- 在“填充”颜色中选择一个你喜欢的颜色。
- 在“线条”颜色中选择另一个颜色，并调整线条粗细。
- 保存：按
Cmd + S保存你的第一个作品。
恭喜！你已经掌握了 OmniGraffle 的基本操作。
（图片来源网络，侵删）
第二部分：核心功能详解
1 形状
- 内置形状：矩形、圆形、菱形、多边形等。
- 使用遮罩：
- 将一张图片（通过
Cmd + V粘贴或拖入）和一个形状（如星形）放在画布上。 - 同时选中图片和形状。
- 右键点击,选择“组合” -> “使用顶层形状作为遮罩”。
- 图片就会被裁剪成星形的形状。
- 将一张图片（通过
- 创建自定义形状：
- 使用“钢笔工具”自由绘制路径。
- 使用“路径工具”编辑节点，创建任意复杂的形状。
2 连接线
这是 OmniGraffle 的灵魂所在。
- 类型：直线、正交线（折线）、曲线。
- 控制点：选中连接线后，线上会出现小圆点，拖动它们可以改变线条的形状和弯曲程度。
- 选中连接线,在检查器中可以轻松添加文本标签。
- 箭头：在检查器的线条设置中，可以自定义起点和终点的箭头样式。
3 样式
OmniGraffle 的样式系统是提高效率的关键。
- 什么是样式？：一个样式中定义了一组属性（如填充色、边框色、边框粗细、阴影效果、字体等）。
- 创建样式：
- 画好一个你满意的形状（一个蓝色的、带阴影的矩形）。
- 选中它,在检查器中点击“新建样式”按钮（一个带“+”号的样式面板图标）。
- 为这个新样式命名,如“标准按钮”。
- 应用样式：
- 画一个新的矩形。
- 在检查器的样式面板中选择你创建的“标准按钮”样式，新矩形会瞬间变成完全相同的外观。
- 编辑样式：
- 在样式面板中右键点击一个样式,选择“编辑”。
- 修改后,所有应用了该样式的元素都会自动更新！这确保了图表的视觉一致性。
4 文本
- 文本框：使用文本工具点击画布即可创建。
- 路径文本：用钢笔工具画一条曲线，然后使用文本工具点击该曲线，文字就会沿着路径排列。
- 列表：文本检查器中有“列表”选项，可以创建带项目符号或编号的列表。
- 检查拼写：
Shift + F7。
第三部分：高级技巧
1 使用图层
对于复杂的图表,图层管理至关重要。
- 显示图层：通过菜单栏
视图->大纲来显示大纲面板，它本质上就是图层面板。 - 组织图层：将不同类型的元素放在不同的图层。
背景层：放置图表的背景图或标题。形状层：放置所有流程图节点。连接线层：放置所有连接线（通常放在形状层下方）。文本层：放置所有文本标签。
- 锁定图层：右键点击图层，可以锁定它，防止误操作。
2 使用画布和图层
一个 OmniGraffle 文件（.graffle）可以包含多个画布。
（图片来源网络，侵删）
- 多画布用途：
- 版本管理：一个画布放“v1.0”，另一个放“v2.0”。
- 拆分复杂图表：将一个大的系统图拆分成多个子画布（如“用户模块”、“后台模块”），然后在主画布中用“超链接”将它们连接起来。
- 超链接：选中一个形状，在检查器的第3栏 - Canvas 检查器中，可以设置“超链接”，链接到其他画布、网页或文件。
3 使用网格和辅助线
- 网格：
视图->显示网格，网格可以帮助你精确对齐元素。 - 对齐和分布：选中多个元素后，顶部菜单会出现
排列菜单，可以对它们进行对齐（左对齐、居中对齐等）和分布（水平/垂直均匀分布）。 - 辅助线：从标尺处拖出辅助线，可以精确定位元素，辅助线可以吸附到网格和其他元素上。
4 导出
OmniGraffle 的导出功能非常强大。
- 常用格式：
- PDF：保留矢量信息，适合打印和分享。
- PNG/JPG：位图格式，适合在网页或PPT中使用，可以设置透明背景。
- SVG：矢量格式，可以在网页或Adobe Illustrator等软件中进一步编辑。
- 导出切片：在
文件->导出中，可以选择“导出切片”，这会根据画布上的辅助线或图层自动将大图切分成多个小图。
第四部分：实战案例
案例：绘制一个简单的 App 线框图
- 设置画布：新建画布，在 Canvas 检查器中设置一个常见的手机尺寸，如 375x667。
- 创建并复用样式：
- 创建一个灰色填充、圆角的矩形，作为“状态栏”。
- 创建一个蓝色填充、白色文字的矩形，作为“按钮”样式。
- 创建一个黑色文字、无填充的矩形，作为“标题”样式。
- 搭建布局：
- 使用矩形工具和文本工具,构建出 App 的基本框架：状态栏、导航栏、内容区、底部标签栏。
- 大量使用你创建好的“按钮”和“标题”样式，保持一致性。
- 使用占位符：
- OmniGraffle 有一个内置的“占位符”库（
视图->打开资源库->占位符）。 - 拖入人物头像、列表项、图片等占位符，让线框图更逼真。
- OmniGraffle 有一个内置的“占位符”库（
- 使用遮罩：
- 拖入一张图片作为内容区的背景。
- 在其上方画一个矩形,并使用“使用顶层形状作为遮罩”，让图片只显示在内容区域内。
- 添加注释：使用“便签”工具或简单的形状+文本，为交互元素添加说明。
第五部分：资源与拓展
1 快捷键
V：选择工具T：文本工具R：矩形工具L：线条工具O：正交线工具P：钢笔工具Cmd + C/Cmd + V：复制/粘贴Cmd + D：复制并粘贴（Duplicate）Cmd + Option + Drag：拖动复制Cmd + Z/Cmd + Shift + Z：撤销/重做Delete：删除选中元素
2 学习资源
- 官方资源：
- OmniGraffle 用户手册：最权威、最全面的文档，随时查阅。
- 官方教程视频：The Omni Group 官网和 YouTube 频道有大量高质量的视频教程。
- 社区和模板：
- Graffletopia：一个老牌的、海量 OmniGraffle 模板库，几乎你能想到的图表模板都有。
- Omni 论坛：可以提问，与其他用户交流。
- 中文教程：
在 Bilibili、知乎等平台搜索“OmniGraffle教程”，可以找到许多国内用户分享的视频和文章。
3 与其他工具的对比
- OmniGraffle vs. Visio：
- Graffle：界面更现代、优雅，在 Mac 生态中体验极佳，连接线算法智能。
- Visio：功能极其强大，尤其在企业级网络图、工程图方面，模板库庞大，但界面较为传统。
- OmniGraffle vs. Figma/Sketch：
- Graffle：专注于图表绘制，有独特的连接线和样式系统，适合流程图、线框图。
- Figma/Sketch：专注于 UI/UX 设计，有强大的组件、自动布局和协作功能，不适合绘制复杂的逻辑流程图。
希望这份教程能帮助你从零开始,逐步掌握 OmniGraffle，成为绘制专业图表的高手！
