注册账号
创建项目
使用组件
添加交互
导出分享
墨刀（MockingBot）的使用教程帮初学者从零开始学习原型设计。从注册账号到创建项目、使用组件库添加交互效果、设置手势转场动效，再到导出PNG/HTML分享，这篇教程覆盖了完整的墨刀入门流程。
本教程面向零基础用户，带你从注册墨刀账号开始，完成第一个可交互的原型项目，包括创建项目、使用组件、添加交互和导出分享的全流程。
第一步：注册墨刀账号
打开墨刀网页版（modao.cc）或启动墨刀桌面客户端，点击"注册"按钮。
- 可以使用手机号注册，也可以选择邮箱注册或微信扫码快速登录。
- 墨刀免费版即可完成本教程的所有操作。
第二步：创建第一个项目
登录后进入工作台，点击右上角"新建项目"。你可以选择以下三种方式开始：
- 从空白新建：适合从零开始自由设计
- 从模板创建：墨刀素材广场提供大量免费模板，涵盖移动 App、Web 后台、电商等场景
- 从素材广场创建：浏览分类素材，选择合适的页面直接使用
推荐初学者选择"从模板创建"，选择一个与你项目类型相近的免费模板来快速熟悉操作。
第三步：认识墨刀工作区
墨刀工作区主要分为以下几个区域：
- 顶部工具栏：包含保存、预览、分享、导出等常用操作按钮
- 左侧组件库：内置基础组件（矩形、文字、按钮、输入框等）、图标库和自建组件
- 中央画布：原型设计和编辑的主区域，支持拖拽组件到画布
- 右侧属性面板：调整选中组件的样式、位置、大小和交互属性
- 底部页面面板：管理项目中的多个页面，支持页面间跳转设置
第四步：使用组件搭建页面
从左侧组件库拖拽需要的组件到画布中：
- 常用基础组件：矩形（可作背景和容器）、文本、按钮、图片、输入框、图标
- 调整组件：选中组件后，在右侧属性面板可以调整尺寸、位置、颜色、圆角、阴影等样式
- 创建可复用组件：将常用的元素组合后右键选择"创建组件"，之后可以在组件库的"我的组件"中重复使用
第五步：添加页面交互
墨刀支持丰富的交互效果，让你的原型"动起来"：
- 页面跳转：选中按钮或可点击区域，在右侧交互面板点击"+"，选择"单击"→"跳转到页面"，选择目标页面
- 手势交互：支持单击、双击、长按、滑动等多种手势触发交互
- 动效设置：页面切换时可以添加推入、淡入、翻转等转场动画
- 状态切换：同一个组件可以设置不同状态（如按钮的默认态、悬停态、点击态）
第六步：预览和分享原型
完成原型设计后：
- 实时预览：点击顶部"预览"按钮，可以在浏览器或墨刀 App 中实时查看和操作你的原型
- 扫码预览：生成二维码，用墨刀 App 扫码即可在手机上查看原型效果
- 分享链接：点击"分享"，生成一个可访问的链接，发给同事或客户即可在线查看
- 导出：支持导出 PNG 图片、HTML 离线包和 APK 安装包（用于安卓设备演示）
第七步：团队协作
墨刀的团队协作功能允许多人同时编辑同一个项目：
- 在项目设置中添加团队成员（输入邮箱或手机号邀请）
- 支持评论和标注功能，团队成员可以直接在原型上标注修改意见
- 版本历史功能可以回溯到任一历史版本，不会丢失之前的修改
通过以上七个步骤，你已经掌握了墨刀的基本使用方法。如需实践更复杂的交互效果，建议下载墨刀桌面客户端获得更流畅的操作体验：
墨刀常用快捷键
掌握以下快捷键可以大幅提高原型设计效率：
| 快捷键 | 功能 | 说明 |
| Ctrl+S | 保存 | 手动保存当前项目（墨刀默认自动保存） |
| Ctrl+Z | 撤销 | 撤销上一步操作 |
| Ctrl+Shift+Z | 重做 | 恢复被撤销的操作 |
| Ctrl+C / Ctrl+V | 复制/粘贴 | 复制选中组件并粘贴 |
| Ctrl+D | 原地复制 | 在当前位置复制一份选中组件 |
| Ctrl+G | 编组 | 将选中的多个组件组合为一个组 |
| Delete | 删除 | 删除选中组件 |
| 方向键 | 微调位置 | 按方向键微调组件位置（每次移动1像素） |
| Shift+方向键 | 快速移动 | 按Shift+方向键快速移动组件（每次移动10像素） |
| Ctrl+滚轮 | 缩放画布 | 放大或缩小编辑区域视图 |
墨刀素材广场使用技巧
墨刀素材广场是内置的模板和素材市场，提供大量免费可用的原型模板。使用时注意以下几点：
- 素材广场的模板按行业和场景分类（电商、社交、企业办公、教育等），可以根据项目类型快速筛选
- 模板中的图片和文字都可以替换为你自己的内容，不需要从零开始画
- 你可以在一个项目中混合使用多个模板的页面，例如用电商模板的首页配合社交模板的个人中心页
- 素材广场定期更新，建议每隔一段时间浏览是否有新的适合你项目的模板上线