开放原子开发者工作坊

一、什么是墨刀

墨刀 MockingBot 是北京磨刀刻石科技有限公司旗下的一款在线原型设计与协同工具。

墨刀致力于简化产品制作和设计流程，采用简便的拖拽连线操作，作为一款在线原型设计软件，墨刀支持云端保存，实时预览，一键分享，及多人协作功能，让产品团队快速高效地完成产品原型和交互设计。

使用墨刀，用户可以快速制作出可直接在手机运行的接近真实 app 交互的高保真原型，使创意得到更直观的呈现。不管是向客户收集产品反馈，向投资人进行 demo 展示，或是在团队内部协作沟通、文件管理，墨刀都可以大幅提升工作效率，打破沟通壁垒，降低项目风险。

（摘自 墨刀官网：https://modao.cc/）

二、墨刀能干什么

原型设计

1. 支持HTML、PNG、APK、IPA 多格式离线文件下载，还可以下载多倍率图片，满足不同分辨率需求；

2. 支持创建 iPhone/iPad、Android、平板、watches、PC 各平台设备的原型，也可以自定义设备尺寸；

3. 提供 iOS、Android 等平台的常用组件及大量精美图标，同时还可以自定义自己的个性化组件，方便项目之间自由切换、使用；

4. 通过拖拽创建链接及交互动效，提供丰富的页面切换方式、交互手势及动画，简单操作即可创作；

5. 通过二维码、链接分享，可以在网页、移动端、墨刀预览助手 app 中快速查看产品 demo 的演示效果。

开发标注

1. 使用Sketch插件上传设计文件，墨刀标注会自动生成设计标注信息及全平台样式代码，可以精准还原标注信息，并提供每个元素的 CSS、Swift、Android 样式代码；

2. 提供了业内完善的颜色解决方案。除了展示常规设计文件的全局颜色，还会自动生成当前页的页面颜色，还可以手动吸取颜色，随心定制你的个人色板；

3. 只需设计师导入Sketch切图，即可自动生成多倍率切图文件。可以一键下载全部切图，也可以根据实际需要，下载独立的元素切图；

4. 除了支持元素在各平台之间的颜色、分辨率换算，还支持手动设置 HTML 的字体大小单位（rem/em）。

Sketch插件

通过Sketch插件上传设计文件，墨刀标注会自动创建、精准还原设计文件所有样式信息，并提供元素 CSS、Swift、Android 各系统样式代码。 

三、墨刀有什么优点

1. 有桌面版与手机版应用，能够更方便快捷地编辑、预览原型；

2. 轻量快速，同步、分享都很便捷；

3. 其控件的拖拉、大小的调整，都会自然的去匹配相应的母版大小；

4. 自带很多成熟的组件，例如键盘，开关，手机模型等。

 四、墨刀有什么缺点

1. 在交互效果上、控件组合上，操作面板的选择上不够灵活；

2. 需要付费才能使用更强大的共享创建功能；

3. 墨刀本地下载的功能需要注册并且购买。普通用户只能通过页面分享、或者扫一扫的形式进行观看；

4. 在保真度方面仍需改进。

五、如何使用墨刀（以网页版为例）

1. 创建应用

「项目管理页」，创建的项目都会展示在这里。左上角，可以切换个人空间和企业空间。下方，可以选择「使用模板项目」还是「创建空白项目」。

「使用模板项目」，可先预览模板效果，挑选成功后点击「使用模板」即可。

「创建空白项目」，创建后可以编辑页面，还可上传启动图标和启动界面图。

2. 创建页面结构

在偏好设置-推荐模式下，页面列表位于工作区的左侧，与元素列表并排。

可以在页面列表下添加新页面、子页面、创建副本、移动当前页到其他项目、删除等操作。

在页面列表下方，有「页面回收站」，14天内误删除的页面可以在回收站进行找回。

3. 创建页面内容

从组件区拖出组件到页面设计区，对齐进行大小、颜色、外观等属性设置。

高频组件区位于左侧，画网页原型时，可以将页面列表收拢起来，空间会大很多。

右侧组件区包括内置的组件、我的组件（可以将高复用的组件添加到这里）、图标、母版（有继承性，一改全改）。

可以通过快捷键A或者在上方工具栏点击「素材库」对素材进行批量的管理。

 4. 添加页面交互

页面间交互

点击组件建立页面间的交互，将组件旁边的圆形链接按钮拖动（链接）到相应的页面。

在添加链接时，还可根据需求，设置不同的触发手势、定时器及动效。

页面内交互

页面交互可以用动态组件来制作，制作诸如加载动画、分页器、组件神奇移动等效果。墨刀也内置了WEUI动态组件、AntDesign组件，可以直接使用。

5. 项目预览、分享与下载

预览

工作区点击“运行”按钮，即可进入原型演示模式。

在“预览“页面，还可以设置原型是否带真机外壳，链接区域是否高亮，是否显示批注，内容区是否滚动。

点击右上角的“全屏模式”，进入全屏演示。并支持切换黑白背景色。

分享

点击该项目的“分享”按钮，可以获取一个二维码和分享链接。

 

在分享页面设置“权限”和“效果”，保证项目预览的私密性和顺畅性。

下载

离线文件可供演示、查看，但是不能用于编辑

 

以上就是对“墨刀”的介绍与针对如何使用“墨刀”的一个简易的基础教程。