前端学画原型图(墨刀)

前端学画原型图

墨刀是一款国内较为出名的原型工具,常用于移动端,也可以做 PC 后台系统。

安装简单、使用方便,制作完成后可以通过 URL + 密码发布,通过浏览器查看。

如果需要导出 Html 离线包,需要升级版本,免费版本可以导出 pngpdf

安装

访问 modao.cc 下载所需版本。

Tip:笔者使用 window 版本 64,仅 86M。

双击安装(不到一分钟即可),微信扫描登录,绑定手机号注册,登录后效果如下:

前端学画原型图(墨刀)插图

新建项目和功能简介

新建一个空白的原型工具(还有流程图、思维导图),选择一种网页尺寸(例如 1920*1080)。

Tip:建议不要选模板,先从最基本的了解,最后工作时可以从模板开始来提高效率。

墨刀工作区域如下图所示:

前端学画原型图(墨刀)插图1

  • 默认是两个页面:主页、页面2。
  • 元素区域显示的是当前编辑页中的元素。比如主页目前有一个圆形、一个矩形
  • 左上角红框内是:文字、矩形、圆形、直线、链接区域、图片、打点批注
  • 右上角红框内是:添加成员、版本记录、下载(例如可以下载原型为png、pdf,离线Html和安装APK需要升级版本)、预览分享(可通过url和密码的方式发送到云端,供特定人员访问原型)
  • 右侧能配置编辑器中组件的外观、增加事件。例如修改主页中圆形边框、左对齐、增加动效、单击圆圈时执行某动作(跳转超链接、切换页面状态、显示/隐藏...)
  • 右侧第二个区块有组件,有许多现成的组件供我们使用,比如表格,有 element-ui,也有 antd 风格的,还有许多需要 vip 才能使用的表格...。还有页面状态图标图片页面母版

前端学画原型图(墨刀)插图2

Tip:许多操作和 PPT 很类似。比如对齐、画一个矩形、合并多个组件为一组...

新建弹框

需求:完成新建交互,点击新建,弹框显示。

效果如下(蓝色方框指点击区,这里仅做演示):

前端学画原型图(墨刀)插图3

前端学画原型图(墨刀)插图4

实现步骤:

  1. 首先将基础的画好,笔者直接截图,然后在新建按钮上画一个矩形
  2. 打开页面状态,点击状态1后面的复制图标,则会新建一个新的页面状态,将其改名为新建。现在有两个页面状态,由于新建状态复制于基础页,所以两个页面是相同的
  3. 新建进行编辑,画一个大的矩形并对其设置颜色和透明度,接着在蒙版上再画一个矩形,笔者为了方便,继续插入新建的图片,最后在弹框的右上角添加一个矩形
  4. 给新建按钮上的矩形添加事件,行为选择切换页面状态,继续选择新建;同样给弹框右上角的矩形也添加点击事件,选择状态1

前端学画原型图(墨刀)插图5

测试:

  • 点击新建按钮
  • 弹框显示新建,点击右上角的 X
  • 切换到页面状态1,重新回到基础页

动效

需求: 给组件(文字、图标、登录框)添加动画

效果如下:

前端学画原型图(墨刀)插图6

添加动效延迟即可。就像这样:

前端学画原型图(墨刀)插图7

  • 文字直接添加抖动
  • 图表的每个柱子分别设置下滑入延迟
  • 登录框设置跳动

Tip:比如需要做一个连续效果。点击配送,等待3秒,张三接单,过一秒,张三配送中,整个效果自动切换。可以使用定时器

前端学画原型图(墨刀)插图8

对齐

比如要实现如下效果:

前端学画原型图(墨刀)插图9

可以这么做:

  1. 在画布上拖入一个矩形,通过点击右上角图标的水平居中垂直居中让矩形置于画布中心
  2. 同样的方法让姓名、年龄、性别左对齐垂直等间距
  3. 最后画三条直线,也让其左对齐、垂直等间距

Tip:

  • 按住 shift 画线能让线条保持水平45°垂直
  • 不仅可以在画布选中组件,还可以在元素区域通过 shift 进行多选。就像这样:

前端学画原型图(墨刀)插图10

  • 将三条分割线进行组合(同时选中后,点击组合即可),方便后续修改。就像这样:

前端学画原型图(墨刀)插图11

动态组件

动态组件就是为一个组件添加设置多个状态,和页面状态一样可以用来实现页面内的交互动画。可以让页面中一个组件的位置、大小、颜色发生改变,也可以设置显示隐藏。

母版

假如要修改多个相同组件,通常需要逐一修改,此时可以使用母版,只需要改一处。类似 ppt 中的母版概念。

Tip:母版不可跨项目使用。

底部导航

需求:实现一个底部导航效果

效果如下:

前端学画原型图(墨刀)插图12

步骤如下:

  • 画三个页面:主页、书本、电器
  • 在画导航,也就是一个矩形,三个文本,全选中后右键转换为动态组件。效果如下:

前端学画原型图(墨刀)插图13

  • 给导航组件新建 3 个组件状态(和上文的页面状态类似),并编辑每个状态。比如将电器状态下电器文本调整为选中的颜色。效果如下:

前端学画原型图(墨刀)插图14

  • 退出导航组件编辑,右键将其转为母版,并重命名“底部导航”。就像这样:

前端学画原型图(墨刀)插图15

前端学画原型图(墨刀)插图16

  • 双击转为母版后的导航,给组件中的三种状态分别建立跳转。例如在主页状态下,给书本和电器设置跳转(可直接拖拽)。效果如下:

前端学画原型图(墨刀)插图17

  • 给3个页面添加底部导航(直接从母版中拖拽即可)。就像这样:

前端学画原型图(墨刀)插图18

  • 并设置导航组件的默认状态。例如书本页面的默认状态是书本。就像这样:

前端学画原型图(墨刀)插图19

文档

更多介绍请直接看墨刀使用文档。网页版入口如下:

前端学画原型图(墨刀)插图20

Tip:客户端也有入口

文章来源于互联网:前端学画原型图(墨刀)

THE END
分享
二维码