墨刀和Sketch擦出的火花

墨刀开发的Sketch插件终于从内测中脱壳而出了,可以将Sketch中的Artboard直接导入墨刀中,然后进行交互操作(页面跳转)的链接设置。

一时手痒,赶紧试了试,也把使用过程和感受分享给大家。(然而非要拖到周一才发)


使用条件

1)有Mac(因为Sketch这个小妖精,你懂的)

2)有墨刀账号

当前版本插件内不支持新建项目,所以新注册用户需要打开浏览器或者墨刀客户端,登录并新建应用后,才能进行上传操作

所以使用前先在墨刀账户里新建项目

使用过程

1)在Sketch中创建Artboard

Artboard数量没有限制,能用就行。不过记住一定得是Artboard.下图是两个Artboard例子。


2.)下载安装墨刀插件MockingBot.sketchplugin

无法在Sketch的官方插件页面--获取到,只能在墨刀官网获取


3)选中要添加的Artboard后,再选择墨刀插件导入


4)输入墨刀账号及密码登录

确保连接的是同一个账号,且Sketch会记录登录信息


5)选择要导入的墨刀文件

支持通过分类和搜索选择墨刀应用


6)导入成功!复制链接在浏览器进入

但我这边复制无效,不过也可以不用复制直接从浏览器中进入墨刀查看。

如果已经打开了项目,直接刷新页面就行


7)在墨刀中进入工作区且选择刚才将Artboard导入的应用


8)在界面右侧会出现刚导入的Artboard图片

此时,原来的Artboard都被处理成了一整张图片,原本的按钮或者图形都无法单独使用

在右侧的页面列表里,刚才导入的Artboard顺序和Sketch中是反着的


9)在左侧工具栏选择“链接区域”在页面上框选区域,然后拉取链接到相应界面


10)运行即可


其它说明

1. 墨刀也有客户端,使用的话和web端完全一样,也可以使用Sketch插件导入的Artboard做交互设置。

2. 墨刀的这个插件目前是V1.0,按官方说法后续应该会有升级。

3. 官方说:设计稿更新上传后,会覆盖原有设计稿,但不会影响已添加交互链接。经过测试,发现分这么几种情况:

3.1在原来的Artboard上修改后,且Artboard数量不变,重新导入后,修改过的Artboard会覆盖原来的,而原来的交互链接在原位置不会变。比如一个按钮上添加了交互链接,在Sketch中把该按钮的位置下调了,但导入后,交互链接区域还在之前的位置;

3.2 在原来的Artboard上修改后,且Artboard数量增加,导入后被修改的Artboard将之前的覆盖,且上面的链接还在,新的Artboard也会依次添加;

3.3 在原来的Artboard上修改后,Artboard数量减少,导入后被修改的Artboard将之前的覆盖,且还是之前的Artboard数量,在Sketch中删除的还在;

3.4 新建Sketch文件,新建Artboard,导入墨刀的同一个文件后,之前的Artboard还在,新的会依次添加。

上面叽叽歪歪一堆,简言之:墨刀中导入的Artboard只多不少,真是任性!


使用感受

1. 让我略感失望的是,Artboard导入墨刀后,被直接处理成了一张图片,原本的形状、图片都无法单独直接点击生成链接,这和我预想的不一样。这很像Axure里的“热区”元件。

好在后续版本会改进。会引入测距功能,开发者在原型上可查看所有控件参数——包括颜色、尺寸、边距等信息。而且会保留分层数据,让设计师完成更精细化的交互原型。

2. 该插件是打算将墨刀和Sketch的优势结合。Sketch作图和界面相当好上手且快速(尤其有各种强大的插件),而墨刀也是国内很优秀的一款快速设置页面交互并演示的产品。将二者结合起来,确实非常棒!期待后续版本更强大的功能。

3. 对于很多产品的交互设计,这都是一个很实用的插件。当然我们的目标也要限于做到页面跳转的交互、控件点击交互等,这已经足以帮我们快速查看交互设计、页面逻辑了。如果要做复杂的页面交互动效之类的,这个插件暂时能力不足。


END

不敢相信,我居然写了一篇正儿八经的教程推文。

不过估计你们也不一定看,看了也不一定下载,下载了也不一定试用,试用了也不一定继续用,继续用了……跟我就没什么关系了。

周一了。



往期推文(点击前往)

一本道 | 设计师专用成语

说来惭愧,我以前总是比较快

将细节进行到底 | 作品集

艺计回忆录 | 交互求职

清美交叉学科 | 考研得知道

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容