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

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

使用条件

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

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

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

使用过程

1)在Sketch中创建ArtboardArtboard数量没有限制,能用就行。不过记住一定得是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

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

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

周一了。

往期推文(点击前往)

墨刀可以导入文件吗_墨刀和Sketch擦出的火花相关推荐

  1. power bi导入文件夹_从Power BI Desktop中的PDF文件导入数据

    power bi导入文件夹 Power BI Desktop is a useful reporting and analytical tool to represent data in variou ...

  2. 导入文件按钮_如何将PPT软件功能配置导入另一台电脑

    为了提高工作效率,用户往往会将常用的一些命令添加到快速访问工具栏或功能区中,但当其他电脑上工作时,就得再次添加相关命令.为了不再这么琐碎,可以将自定义设置的配置文件导出,然后在其他电脑中导入,以便获得 ...

  3. jupyter 导入文件路径_更改jupyter notebook默认存储路径

    jupyter notebook默认存储路径在C盘下,有时候会丢失文件,很不方便.最好更改一下其默认存储路径比较安全. 1.在想要设置的存储路径下新建一个文件夹,如我在D盘下新建了jupyter-no ...

  4. 苹果笔记本怎么找文件夹_如何在苹果笔记本中找出 “~/Library/Preferences/” 文件夹?...

    一.iPhone访问限制密码找回教程(未越狱) 1.打开iTools,在左侧菜单栏找到"文件系统",依次打开/private/var/keychains/,在keychains文件 ...

  5. 单文件组件下的vue,可以擦出怎样的火花

    2016注定不是个平凡年,无论是中秋节问世的angular2,还是全面走向稳定的React,都免不了面对另一个竞争对手vue2.喜欢vue在设计思路上的"先进性"(原谅我用了这么一 ...

  6. 在python中使用最小二乘法画出拟合曲线_基于jupyter notebook的python编程-----运用最小二乘法,导入文件数据模拟一元线性回归分析...

    基于jupyter notebook的python编程-----运用最小二乘法,导入文件数据模拟一元线性回归分析 用最小二乘法模拟一元线性回去曲线的目录 一.运行jupyter notebook,搭建 ...

  7. python如何避免转义字符_如何解决因转义字符而报错的问题(在使用python导入文件时)...

    有些萌新在初次使用python导入文件时,可能会遇到遇到各种各样的报错.今天我们就来讲讲其中最常见的一种报错---转义字符"\"冲突. 问题重述: 比如像下面这样,当我们想导入一个 ...

  8. 交叉驰豫的影响因素_墨点对uv打印机印刷质量影响

    咔勒 Olor-服务好每一位客户 如果将每英尺所含的墨点或线作为uv打印机印刷质量的关键因素,显得有些过分简化了,没有将其他重要因素考虑在内,有些因素与uv打印机系统相关,有些跟uv墨水的品质有关,而 ...

  9. code block怎样导入整个文件夹_怎样制作音乐相册?多种风格的背景音乐任你挑...

    以前的相册,是一张一张静态的相册,而现在的相册,却是可以"动起来"的吧!一想到这种充满黑科技的相册,你是不是觉得就是那些专业人士制作出来的呢?实际上,要制作这样的电子相册还真不需要 ...

  10. 怎么把录音导入库乐队_将音频和 MIDI 文件导入到 iPad 版库乐队

    将音频和 MIDI 文件导入到 iPad 版库乐队 您可以从电脑导入音频和 MIDI 文件,并将它们用在库乐队乐曲中.您可以:将音频文件添加到现有的录音机或放大器轨道 将 MIDI 文件添加到现有的键 ...

最新文章

  1. 如何在Objective C中声明Block?
  2. Android 开发 Tips
  3. ZLMediaKit_wiki
  4. php 国密 签名,关于php国密SM3签名算法
  5. PHP能在Mac上运行吗,PHP Composer无法在Mac上运行
  6. wordpress+lnmp出现 404 Not Found nginx
  7. 子恩域名授权系统2.0全解无加密无授权版盗版入库源码
  8. win台式找不到计算机管理,win10系统计算机右键-管理打不开windows找不到文件的解决方法...
  9. 简述python的优点_Python是什么及Python的优点和缺点
  10. 数据库——“该连接已关闭”问题解决方案
  11. 手机代理上网_ip地址是怎么来的?手机电脑怎么获得IP地址?
  12. 《图解数据结构》.pdf
  13. Docker最新教程 (视频地址https://www.bilibili.com/video/BV1og4y1q7M4)
  14. matlab2012a for mac,matlab 2016a mac |matlab 2016a for mac免费版专业版 32位/64位 - 系统天堂...
  15. 历史上有哪些最凶计算机病毒?
  16. 关于组长、队长和团长
  17. ROC曲线的通俗理解
  18. Vue Clipboard 异步复制粘贴
  19. windows系统锁定计算机组合键,WIN键间断性触发在锁定状态!!
  20. 03-Java核心类库_常用类库

热门文章

  1. windows10自带的截图、录屏快捷键
  2. 坦克大战之继承的实现
  3. 18650锂电池保护板接线图_锂电池保护板的基础知识及常见不良分析
  4. 台式计算机的质保期是多少,戴尔台式机保修多长时间
  5. win7开机提示由于系统注册表文件丢失或损坏因此无法加载怎么办
  6. AI发票扫描识别sdk软件接口
  7. webpower中国区受邀出席2014梅花网中国传播业大展
  8. Flash坏块检测软件h2testw图文教程
  9. 低代码平台-竞品分析ABP框架
  10. 【小家java】java8新特性(简述十大新特性) 饱受赞誉