一:官方视频

墨刀的使用与Axure基本上差不多,不同的是墨刀把一些常用的小组件都封装好了作为一个独立的元件提供出来了,并有对应的样式与事件,而Axure还要自己一点一点的制作。在Axure RP 9中也提供了一个Simple UI Patterns元件库,该元件库也提供了很多常用的组件,如轮播图、时间选择器、进度条等元件,但是这些元件都是利用Default元件库中的多个元件加事件制作出来的,并没有单独封装成一个独立的组件。

Axure在制作App原型时很麻烦,通常都是使用Axure制作PC原型,使用墨刀制作App原型。

墨刀学习方法_App

二:学习方法

进入 素材库 直接使用别人制作好的一整套完整的 原型图,看看别人是怎么做的,学习别人一两套原型图墨刀的使用基本上就掌握的差不多了。

三:墨刀与Axure比较

3.1 工具布局大致相同

墨刀学习方法_动态面板_02


墨刀和Axure工具的布局大概差不多,只是位置不同,墨刀中的左上角对应于Axure中的页面,墨刀中的元素对应于Axure中的概要,墨刀中的模板对应于Axure中的模板,墨刀右边纵向工具条中的素材、我的、图标相当于Axure中的元件库。

3.2 墨刀中的链接区域和Axure中的热区是一样的。

墨刀学习方法_css_03

3.3 墨刀中有“全局事件”

全局事件的目标是针对于整个页面的,相当于在Axure中选中整个页面,为页面添加交互事件。墨刀中有定时器事件,定时器事件的目标只能作用于整个页面,而Axure中是没有的。定时器用于延迟触发事件。

墨刀学习方法_css_04

3.4 状态

墨刀中的状态分为页面状态和组件状态,组件状态就是Axure中的动态面板。

  • 页面状态:基于页面设计,效果跟随页面,交互动画无法直接复用到其它页面。一般用在整个页面的内容发生改变时。
  • 组件状态:基于组件设计,效果跟随组件,交互动画能以复制组件的方式应用到其它页面。一般用在页面中的局部地方内容发生改变时。

墨刀中的“添加组件状态”相当于Axure中的转为“动态面板”功能。

墨刀学习方法_动态面板_05


墨刀学习方法_动态面板_06

墨刀中的状态和Axure中的动态面板交互有点不太一样,Axure中添加事件是直接选中动态面板元件就可以了,而墨刀的事件是添加在具体的每个状态上的(拖动每个状态上的小闪电添加单击事件),例如先给State1添加事件,然后再给State2添加事件,例如State1切换到State2就将State1中的小闪电拖到State2上。

墨刀中新增了统一操作动态面板中的状态的操作,比如在某个状态中删除一个元件,让其它状态也同时删除掉该元件等,或者将某个状态的内容用其它状态的内容替换等,通过右键菜单即可以操作。

很多通过显示隐藏的效果也可以通过状态来实现,比如某个状态是显式状态,某个状态是隐藏状态。

墨刀中的动态面板如果内容超出元件的宽度会自动带有左右滑动事件,而Axure中是没有任何处理的,超出的部分直接隐藏。

感觉墨刀在App原型中感觉所有功能都是在用动态面板来实现,动不动就对整个页面进行动态面板。

3.5 墨刀中可以拖动箭头来固定顶栏和底栏的位置。

墨刀学习方法_动态面板_07

3.6 墨刀中的小闪电

墨刀中元件旁边的小闪电其实就是一种添加单击事件快捷方式,可以用来页面跳转、状态之间切换等。

墨刀中的屏幕内容制作滚动效果只需要拖拽页面的最底层下拉页面的高度,然后增加屏幕中的内容即可。

墨刀学习方法_html_08

墨刀中在预览的时候可以选择标注,选择标注可以方便开发人员和前端等同事查看复制每个元件的内容,样式等。

墨刀学习方法_动态面板_09