【原型设计】墨刀初体验

作者: 小糊涂涂涂 | 来源:发表于2019-07-08 14:39 被阅读29次

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


    1.项目组与项目

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

    新建项目组

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

    新建项目

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

    项目编辑

    2.组件

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

    组件

    3.母版

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

    母版

    4.事件链接

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

    链接符号 创建链接

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

    链接编辑

    5.状态

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

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

    全局状态与默认状态

    然后这里的状态分为两类,即组件状态与页面状态,下面分别解释:

    组件状态

    即为某个组件设置交互动画,步骤为:创建组件 — 设置组件默认状态样式 — 新增状态2并设置组件状态2样式 — 将状态1和2进行链接。

    默认状态 状态2 组件状态效果

    页面状态

    即为整个页面设置交互动画,步骤类似组件状态,不再赘述。


    以上即对墨刀基本功能的初步了解和使用,要想深入了解还需继续使用。总的来说,墨刀有其使用价值,易上手,另外其对于原型文件的分享、发布比axure更方便,实际工作中可根据具体需求选择使用合适的原型设计工具。

    PS:免费版与个人版区别如下

    相关文章

      网友评论

        本文标题:【原型设计】墨刀初体验

        本文链接:https://www.haomeiwen.com/subject/hqqohctx.html