Maniac for Mac 深度使用指南

Maniac for Mac 是一款专为 macOS 系统设计的专业级矢量图形设计与原型制作工具。它以其流畅的交互体验、强大的矢量编辑能力和专注于用户界面（UI）与用户体验（UX）设计的工作流而著称。本文旨在提供一份详尽的指南，帮助用户全面了解并高效使用该软件。

一、核心界面与工作区详解

启动 Maniac 后，您将看到一个经过精心设计的现代化界面，主要分为以下几个区域：

• 顶部应用程序菜单栏与工具栏： 包含文件、编辑、视图、对象、文字等标准菜单。其下的自定义工具栏提供了最常用的工具按钮，如选择工具（V）、矩形工具（R）、文字工具（T）、画板工具（A）等，可右键点击工具栏进行自定义。
• 左侧工具面板： 垂直排列着核心设计工具，从上至下通常包括：选择工具、画板工具、形状工具（矩形、椭圆、多边形、直线）、钢笔工具、文字工具、铅笔工具、切片工具、注释工具。
• 右侧属性检查器面板： 这是 Maniac 的核心控制区域。其内容会根据当前选中的对象（画板、形状、文字、图层等）动态变化。主要选项卡包括：
  • 样式： 控制填充、边框（描边）、阴影、模糊等外观属性。
  • 布局： 控制对象的位置（X， Y）、尺寸（宽，高）、约束、自动布局（Auto Layout）设置。
  • 导出： 为所选图层或画板设置导出格式（PNG， JPG， SVG， PDF）和分辨率倍数（1x， 2x， 3x）。
  • 原型： 为对象添加交互热点，链接到其他画板，定义转场动画（如溶解、滑入、推动）。
• 中心画布区域： 主要的创作空间，所有画板（Artboard）和设计元素都在此呈现。支持无限画布，可通过触控板双指滑动或按住空格键拖拽进行平移，双指捏合进行缩放。
• 左侧/底部图层列表： 以树状结构显示当前文档中的所有画板、图层和组。可以在此重命名、隐藏、锁定图层，或通过拖拽调整层级顺序。

二、完整工作流程：从创建到导出

1. 创建或打开项目

步骤1： 启动 Maniac。在欢迎界面，点击 “新建文档” 或通过菜单栏 “文件” > “新建”（快捷键 Cmd + N）创建新文件。

步骤2： 在弹出的模板选择窗口中，可以选择预设的设备尺寸（如 iPhone 15， MacBook， iPad），网页尺寸，或自定义尺寸。选择后，点击“创建”。

步骤3： 若要打开已有项目，在欢迎界面点击“打开现有文件”，或使用 “文件” > “打开”（Cmd + O）。

2. 设计核心操作流程

步骤4：添加与编辑画板： 从左侧工具面板选择 “画板工具”（快捷键 A），在右侧属性检查器的“预设”下拉列表中选择一个设备尺寸，然后在画布上单击即可创建。也可以在画布上拖拽来自定义尺寸。选中画板后，可在右侧“布局”面板中精确调整其坐标和尺寸。

步骤5：绘制基础形状： 选择 “矩形工具”（R）、“椭圆工具”（O）或 “钢笔工具”（P），在画板上单击并拖拽进行绘制。绘制时按住 Shift 键可保持等比例（如正圆、正方形）。

步骤6：编辑对象样式： 选中一个形状，右侧“样式”面板将被激活。

• 填充： 点击颜色井选择纯色、线性/径向渐变，或导入图片作为填充。
• 边框： 开启边框开关，设置颜色、粗细（描边宽度）、端点样式和描边位置（内部、居中、外部）。
• 效果： 点击“+”添加阴影、内阴影、模糊等效果，并调整其参数。

步骤7：添加与编辑文字： 选择 “文字工具”（T），在画布上单击创建点文本，或拖拽创建区域文本。选中文字后，在右侧“样式”面板中可设置字体、字号、字重、颜色、对齐方式、行高等。

步骤8：图层管理与对齐： 在图层列表中选择多个图层，顶部工具栏或右键菜单中会出现对齐与分布按钮（左对齐、水平居中、等间距分布等）。使用 “编组”（Cmd + G）和 “取消编组”（Cmd + Shift + G）来管理复杂设计。

3. 制作交互原型

步骤9：链接画板： 选中一个作为“热区”的按钮或图层，在右侧“原型”面板中，点击 “添加交互”。

• 在“触发”中选择事件（如：点击、悬停）。
• 在“动作”中选择“跳转到画板”。
• 在“目标”下拉列表中选择要跳转到的目标画板。
• 在“动画”中选择转场效果（如：溶解、滑入）并设置时长。

步骤10：预览原型： 点击顶部工具栏右侧的 “预览” 按钮（或按 Cmd + Return），即可在一个独立窗口中实时体验交互流程。点击画板上的热区进行跳转测试。

4. 导出设计成果

步骤11：单个/批量导出：

• 导出选中对象： 选中一个或多个图层或画板，在右侧“导出”面板，点击“+”添加导出预设（格式、后缀、分辨率），然后点击“导出…”按钮（或使用 Cmd + Shift + E）选择保存路径。
• 导出整个画板： 在图层列表中选中画板，同样在“导出”面板设置并导出。

步骤12：导出为PDF或SVG： 对于矢量格式或文档交付，可使用菜单栏 “文件” > “导出为” > “PDF”（或“SVG”）。在弹出对话框中设置页面范围和质量。

三、常用功能进阶技巧

• 布尔运算： 选中两个重叠的形状，在顶部工具栏或右键菜单中找到“路径查找器”，使用联集、减去顶层、交集、差集来创建复杂图形。
• 符号（Symbols）： 将常用的组件（如导航栏、按钮）选中，点击顶部工具栏“创建符号”（Cmd + Shift + Y）。之后在“符号”面板中拖拽实例到画布。编辑主符号，所有实例将同步更新。
• 智能参考线与对齐： 在“视图”菜单中确保“智能参考线”开启。拖拽对象时，会自动显示与其他对象的间距、中心对齐等提示线，极大方便精准布局。
• 蒙版： 将一个形状（如圆形）置于图片上方，同时选中两者，右键选择“用所选形状作为蒙版”（或 Cmd + Ctrl + M），图片将被裁剪为该形状。
• 快速复制与重复： 选中对象后，按住 Option 键拖拽，可快速复制。使用 Cmd + D 可重复上一次的变换操作（包括复制和移动），非常适合创建等间距列表。

四、常见问题与解决方案

• 问题1：软件运行卡顿，特别是在处理复杂文件时。
  • 解决方案： 尝试减少画布上高模糊、多阴影效果图层的数量；将暂时不编辑的复杂组“栅格化”（右键菜单）；确保 macOS 系统已更新至推荐版本；在 Maniac 的“偏好设置”中检查硬件加速选项是否开启。
• 问题2：导出的 PNG 图片边缘有杂色或模糊。
  • 解决方案： 确保导出时选择了完整的整数倍分辨率（如2x， 3x）。检查对象本身是否应用了模糊效果。对于矢量形状，优先导出为 SVG 格式以保证清晰度。
• 问题3：无法选中被下层图层覆盖的小对象。
  • 解决方案： 在图层列表中直接点击该图层进行选择。或者，按住 Cmd 键在画布上连续点击，选择循环将依次穿透上层的对象。
• 问题4：从其他软件复制的矢量图形（如 SVG）粘贴后样式丢失。
  • 解决方案： Maniac 对 SVG 的支持可能不完全。尝试以“文件” > “导入”的方式导入 SVG 文件，或尝试复制为 PNG 格式后再粘贴。复杂路径建议在 Maniac 中用钢笔工具重新绘制。
• 问题5：自动布局（Auto Layout）设置后，元素位置错乱。
  • 解决方案： 仔细检查父容器的自动布局方向（水平/垂直）、内边距和对齐方式。确保子元素没有设置绝对定位。从简单的两个元素开始练习，逐步理解其排列规则。

五、Maniac for Mac 快捷键汇总表