超好用的原型设计工具 【墨刀Mockingbot】

admin 原型设计工具软件超好用的原型设计工具 【墨刀Mockingbot】已关闭评论字数 1649阅读模式

墨刀是什么?

墨刀是一款在线原型设计工具。借助于墨刀,创业者、产品经理及UI/UX设计师能够快速构建移动应用产品原型,并向他人演示。

使用

墨刀是很好用的原型设计工具,是需求大人们的必备良器。首先大家先下载好墨刀。然后随便注册一下,就可以愉快的使用了。

一、创建项目

1.打开墨刀, 在首页点击创建应用:

 
创建

2.选择相应的设备:

 
选择设备

3.填入必要信息,然后创建:

 
填写信息

然后就可以进行编辑了。

二、相关功能

创建好的项目主界面:

 
主界面
  • 左边是组件的选择。
  • 中间是编辑界面,需要什么组件直接拖动到编辑界面。
  • 右边是页面管理和状态管理,以列表的形式存在。
  • 上边是工具栏。
  • 还有具体的组件对应的工具栏。

三、使用

1.原型增加一个底栏,标题栏双击可以改变标题,然后运行:

 
加低栏
 
运行效果

一个简单的iphone界面出炉了

2.接下来看看母版的作用,母版对于重用的组合原型是非常方便的:

 
创建
 
叫做Cell的母版
 
添加我们需要的内容

母版里面添加组件和主界面添加是相同的。
然后回到主界面,看一个我们建好的母版:

 
建好的Cell
 
使用母版CELL,直接拖
 
运行

一个带列表的界面就出来了

3.组合和打散,这也是原型设计中常用的,将几个组件在需要的时候进行组合,方便编辑,编辑后又可以重新打散:

 
组合

自己试一下效果,很简单
4.页面跳转:

 
连接
 
页面二的连接
 
运行

点击第二个按钮,就能跳转到页面二

 
屏幕快照 2016-12-19 下午1.57.28.png

点击第一个按钮就能跳转回去

5.状态:状态是一个页面的不同状态显示的内容,每个页面都可以有很多种状态,但添加新的组件必须在全局状态添加,这样才能保证每个状态组件一致。

结尾

墨刀使用起来是非常简单的,掌握了上面的ji'qiao,基本就能玩得很6了。原型设计不一定是需求大人的专利,我们程序员一样能做到,程序员永不为农...

作者:耕地

链接:https://www.jianshu.com/p/6cb9568729e1

來源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

今天要介绍的原型工具 — 墨刀,我觉得对于非设计背景出身,工作重点是展现画面逻辑和流程概念的人来说,是很不错的选择。

墨刀是一款大陆在线原型设计工具,最近下载操作后有种相见恨晚的感觉。以前在做Wireframe、Mockup和Prototype时,最大的困扰就是很多元件都要重画,或者是交互效果要花很多时间设定(逻辑要超好><)。

以我个人来说,目前接触过的有Sketch、Axture、Marvel、Invision、Flinto、Principle,除了第一、二款拿来画Wireframe和Mockup之外,其他都是辅助做Prototype的工具,再根据要做的效果复杂度而不同。

p.s. Sketch其实拿来画Wireframe并不是最佳的选择,但因为工作要求高拟真的图就选择此工具了。不过好处是有许多Plugin之外,也可以汇入其他原型工具里作进一步的互动效果!

墨刀的特色是:
1.有丰富的元件数据库,除了图标之外,还有组件(搜寻框、顶端栏、对话框等等),可以很方便的直接拖曳到工作区,不用一个个自己画。

2. 有基本的交互功能(母版),例如轮播图、下拉菜单、左右滑动等,可以快速的建立互动效果。

超好用的原型设计工具 【墨刀Mockingbot】-图片20
3. 可以直接产出每个页面之间的关系,即工作流程,一次可以看到整体的设计构架。

超好用的原型设计工具 【墨刀Mockingbot】-图片21
4. 在每个页面可以新增备注,在预览画面会呈现出来,以利沟通。

超好用的原型设计工具 【墨刀Mockingbot】-图片22

5. 有提供Sketch Plugin,可以汇入Sketch美美的图,再加上交互效果,简单的Prototype就完成啰!

基于以上的特色,我觉得如果只是要快速的画出产品界面,表达流程和互动效果,墨刀十分的适合,第一次试用大概十分钟可以画出(Instagram首页和加入基本的滑动效果),官网也有许多教学视频和文件(https://modao.cc/tutorials/6978)可以参考,相信还有许多强大的功能我还没体验到,若想找一个制作Wireframe快速方便的朋友可以试试看!

 
admin
  • 本文由 admin 发表于 2018年3月30日 17:09:34