【原型设计】墨刀初体验

2019-07-08 本文已影响29人小糊涂涂涂

墨刀是一款在线原型设计工具，与Axure相比操作简单（嗯…但是Axure功能丰富呐），内置较多移动端APP原型设计常用组件（如轮播效果组件），对于移动端APP设计比较友好，下面写一下初次使用墨刀后对其基本功能的大概总结~

1.项目组与项目

制作原型前首先新建项目组，如下图所示，输入项目组名称、选择项目组图标及背景色，然后点击新建按钮。

新建项目组

接下来在项目组中创建项目（一个项目组可包含n个项目），输入项目名称、选择设备类型及型号，点击创建按钮。这里需要注意的是既可以选择创建空白项目，也可选择从模板中创建项目，模板库中预置了一些原型，可选择在其基础上进行编辑，以提升效率。这里以手机APP设计为例进行展示说明。

新建项目

项目创建成功，进入编辑页面，可设置启动图标与启动封面，点击主页/页面进入即可开始原型设计。

项目编辑

2.组件

组件可以说是模板，可复用，包含动态组件（即：包含状态动画的组件，如开关按钮）与静态组件两种。可直接将组件拖到页面，然后根据需要进行修改或直接使用。工具本身内置多种组件供用户使用，用户也可自己创建组件并保存到我的组件中，也可将看到的其他项目中比较好的组件另存到我的组件中。

组件

3.母版

与Axure母版类似，具备复用性及同步更新特性，修改母版一处则项目中所有用到该母版的地方即同步更新。母版跟随项目，而不是账号。若某组件需要有继承性，可将其转换为母版，具体方法为：选中组件，右键选择创建为母版即可。

母版

4.事件链接

墨刀里实现页面跳转、状态跳转操作简单，只需单击选中某个组件，点击其左侧的“链接符号”，然后按住鼠标不动直接拖动至跳转目标状态或页面即可。

链接符号

创建链接

链接创建成功，也可在右侧属性面板对链接事件进行编辑，如下图所示。

链接编辑

5.状态

墨刀的状态用来实现页面内的交互动画，状态切换有组件平滑移动的效果，与页面切换相比更平滑、不生硬。

首先解释一下默认状态与全局状态，默认状态即打开一个页面时，页面最初的样子，将默认状态链接至其他状态，即可产生动画效果；全局状态是用来放置动画制作元素的容器（感觉“全局状态”这个叫法与其实际功能不太相符(⊙o⊙)…），它决定了默认状态和其他新建状态里有哪些组件，即若其他状态需要用到某个组件，则需要打开全局状态来添加所用到的组件。