原型设计工具“MockingBot 墨刀”深度使用吐槽

两个月前接到了一个项目,开发周期不算紧张但是人手不足,只好自己承包从需求对接到视觉设计的整个产品设计阶段。功能逻辑并不复杂,不过事情多乱杂,PC 客户端 + APP 客户端*2 + Web 管理后台,要半个月内梳理好需求画出全部原型并和客户确认,然后迅速补充文档进入开发阶段。

以前都是内部项目,没有客户确认环节,原型细点糙点全看各位产品经理的心情。但这次就不能沿用以前的习惯了,既要给自己省事又要让客户满意,用 Axure 是不可能用的,这辈子都不想用了

重新选择原型工具

于是就想着换个更方便易用的原型工具,只要能满足这几条核心需求,那就选它。

  • 原生云端保存在线分享:
    客户确认阶段必然会反复调整修改,要是还反复生成文件发邮件就太折腾了,在线分享直接刷新即可
  • 原生支持多终端演示:
    毕竟有 APP 端,要能在手机上打开个链接就直接看效果,如果自动适配不同分辨率就更好了
  • 方便快捷的取色与标注:
    Web 端就不打算出效果图,直接按高保真标准出原型,开发拿着原型就能自动标注,完美
  • 丰富智能的模板组件:
    无非就是那几套常用的设计语言,但必需得有拖来即用的组件才行,如果全得自己重新画那就太坑了
  • 支持基础交互和动效:
    既然是给客户演示,有些必要的交互和动效还是得做出来最直观,支持基础的就行,还得操作简单

平时收藏了很多新鲜工具,挑了几款偏原型的,之前多多少少都体验过,这次抽出宝贵的一天时间,根据以上需求认真对比了一番,完全满足期望得5分,结果如下表:

AxureMockingbotxiaopiuJustinmindAdobe XDSketch
云端保存155122
在线演示144241
多终端适配154232
多人协同133123
组件丰富智能324335
快速实现动效133151
自动标注-4--41
社区活跃度423135
122826112620

可以看出第一梯队的差距并不大,但最终权衡下还是选择了墨刀,胜在功能比较齐全,没有明显短板

离客户确认的时间不多了,机智地搜了个9折优惠码“xiongmao”,赶紧付费入坑。不确定海外版是不是还有更优惠的,有需要的可以自己搜索试试“mockingbot coupon”。

意见建议与吐槽

经过半个月的埋头苦画,最终和客户愉快地确认完了所有原型。中途陆续又补充了很多需求细节,根据客户的“建议”不断修修改改肯定是少不了的,到现在也已经开发到尾声,最后一统计,总共为这个项目的各平台原型画了170个页面。总的来说墨刀还是很给力,当然也有很多不太顺手的地方。

根据前面的使用,大部分功能算得上深度使用,也有一些功能暂时没用上,现在终于有时间吐槽一下。主要是一些个人问题反馈,还有一些建议,本意是希望墨刀越来越好。

一、母板/自定义组合:

如今能作为生产力的设计工具,一定都离不开“母板”类功能,比如 Sketch 中的 “Symbol 符号”,PhotoShop 中的 “Smart Object 智能对象”,Axure 中的“Master 母板”,各软件中的用法虽然各有异同,本质上还是相同元素的多状态关联映射,当某些元素被大量反复使用时,方便统一维护。

墨刀中的“母板”功能涵盖了很多重要用途,小到元素状态继承,大到页面交互动效。而“自定义组合”则显得鸡肋了一点,实际上就是编组,只是通过自定义后,可以方便搜索,也可以分享协同。

但在实际使用中,这两个“自定义库”让我感到很分裂,随着页面增多,自定义的东西也越来越多。好多时候,在找某个东西前都要先回忆一下,到底是建在了母板中还是组合中,然后再去搜索,因为相似元素很容易记混。

在我看来,母板的用途范围完全包含了自定义组合,而我为了图方便也是这么使用的——把所有自定义元素都建成母版,如果某个地方需要单独修改而不影响其它,就从母板中复制出来,至少我能始终在一个地方找。

这是要我一个一个一个的手动导入啊

不过自定义的内容还不能排序,更别说分组了,开始以为能像 Sketch 那样规范命名就自动分组,但是并没有。什么,你说能搜索,实际使用效率能有鼠标点几下更快么?自定义内容一但多起来,找起来简直就是噩梦。由于查找的极其不方便,使得我在后期能不自定义就尽量不用,宁愿去别的页面复制过来都行。

  • 个人认为母板和自定义组合概念可以合并
  • 凡是自定义内容都需要排序和分组

二、组件/模板

内置的组合就只有一套 iOS 和一套 Material Design,显然这是远远不够了。好在官方也很重视第三方模板内容的建设,在我使用的这段时间里,搞了一些活动吸引优秀作者贡献了大量模板,数量显著增长。

随着数量的增长,问题也就来了,我想用的东西不好找啊!比如一个新用户想做一个 IM 界面,他该如何快速的找到那套模板呢?要么他明确知道“支付宝”里有 IM 模块,要么就是把每个模板都点开看看,所以,模板库里的“关键词+标签”的搜索一定不能少啊!

目前有将近60个模板,陆续增加中

还有一个急需增强的地方,就是常用组件的“智能性”。比如现在的“表格”只能用线和块自己去拼,经常画原型的都知道理想的表格组件该怎么玩—— 自动增减行和列。工作流里的表格就挺好的,为什么不放到原型中来?我那几十个页面的管理后台,能想像是怎么拼出来的吗?

现在有个别默认组件已经具备了基础的“智能性”,比如 Switch、Checkbox、Radio 有开关两个状态供选择,但是,这几个组件又不能自定义颜色,没办法又只好自己做了几个母板。可能第三方模块中也有现成的母板可用,但又回到了上面的问题,臣妾找不到啊。

这些显而易见的改进之处,一定也在官方的规划之中,只是希望快一点。对门 xiaopiu 的表格组件就显得很智能了,所以请再快一点。

  • 模板库需要“关键词+标签”搜索功能,否则再多模板都是浪费
  • 常用组件的“智能性”急需增强,并且支持一定程度的自定义

三、颜色

关于颜色,首要的槽点当然就是没有“自定义调色板”功能了,这也是官方群和讨论区里经常提到的需求。

现在只是自动记录了十多个最近使用的颜色,在实际使用中你会发现颜色记录总是变来变去的。而且这些颜色并不会随着项目保存,也就是说,你回家想改改原型,颜色记录一片空白,只能从其它地方复制或取色。

像我这种拿高保真原型当设计稿的项目,为了规范统一颜色,不得不单独画了一套色板,开了两个窗口,来回复制取色。但即便是这样,在标注中还是会出现多个相近颜色的情况,因为页面元素实在太多了,来回倒腾颜色实在麻烦,难免不一致。

使用一段时间,一定会出现大量相近颜色

于是在开发前又不得不再单独整理了一套颜色规范,这么就显得自动标注中的取色功能很鸡肋了

  • 支持自定义调色板,并随项目保存
  • 顺便要能支持渐变色就更好了

四、图标

现在内置了两套开源图标库和一套官方图标库,还将就够用了。最让我费解的就是后面还跟了一个“Custom Icons”的分类,乍一看还支持自定义,哎哟,不错哟。

这20个“自定义图标”的存在意义是什么?

当你真想增加一些自定义图标的时候,却不知道该怎么办了。我甚至还以为是不是需要手动添加进安装目录,结果把所有安装文件找了一遍,发现是我自己想多了。当然,我这里指“自定义矢量图标”,支持调整填充色的那种,而不是拖一堆图片进去。

经过折腾发现,其实是支持拖入 SVG 图标的,或者说支持了一半,可以无损缩放,但却不能调整颜色。说到这儿,大家可以去体验一下 figma,支持 SVG 图标那叫一个完美。

再说一个与开发衔接不流畅的地方,项目开发中也用了 Font Awesome,但开发人员没办法直接从原型中取到使用图标的 class 代码,这就有点折腾人了。曲折的方法也有,就是从“开发者工具”中查这个图标的源代码,够折腾吧。

  • 支持自定义图标,无论是基于 SVG 或是 iconfont
  • 退一步来讲,请先支持拖入的 SVG 图标调整颜色吧

五、演示预览

画原型必然会写一些逻辑注释,而我这次把原型当成效果图来用,最后写出来的批注可能过多了,就像下面这个样子。在评审需求时,这些指示线都感觉有点碍事,如果有个显示/隐藏批注的切换就好了。

对我来说,在预览阶段更紧迫的需求是切换页面太麻烦,如果可以用键盘翻页最好,或者给个上一页/下一页的按钮都行。因为大部分不带交互的原型,都是按顺序来切换预览的,要像翻图片那样。

需求评审时,这么多的批注略显碍事

我这一个项目就几十页,对着一群开发和测试人员,每讲完一页,还得用鼠标在右侧找准了下一页再点击切换,很累,显得非常的不酷

  • 预览时支持显示/隐藏批注
  • 预览时支持快捷键或按钮的快速上下翻页

六、图片库

图片库目前是按项目自动分组,支持图片名称和标签搜索,支持批量替换,这样的组织形式就已经挺好了(相对于上面说的模板库而言)。但我在整个项目的原型过程中,从来没有从图片库中复用一张用过的图片,都是直接找到原页面再复制过来。

就个人习惯,我经常会截一些图片临时放进来对照着画原型,然后删掉,但这些临时图片还会存在图片库中。所以遗憾的是,临时图片越堆越多,至少占半数以上,我也不想一张一张的清理,慢慢就变成“垃圾库”了,这时就急需增加一个“清理未使用图片”的功能

基本没用上,可能是打开方式不对

可以看出这个功能是设计初衷是很好的,但要达到理想的使用效果,前提是需要用户规范、严谨、耐心地使用才行。如果产品本身不能很方便的帮助用户维持这种规范的使用行为,就很容易变成鸡肋。

  • 快捷清理原型中未使用的图片

七、工作流

这次项目原型中没用上工作流,只大概体验了一下,按以往其它工具的经验,有这几点建议:

每条连线应该原生配套一个文本说明,可留空不填,这样一但页面位置有变化,就不用再单独调文本位置。

在单个元素上开始拖动,现在响应为“框选”操作,而我的预期是“拖动”它。就我用过的设计工具以及操作系统都是“在对象上响应拖动,在对象外响应框选”这个原则,而现在要先点一下选中元素,才能拖动它,十分不习惯。

预览工作流时,每个界面只能放大到25%,某些相似的界面根本分辨不出到底是哪个,所以这个比例限制可以再大一点吧。

八、稳定性/安全感

作为一款在线工具,全力保证所提供服务的稳定性是一切功能的根本,从个人近几个月的使用来看,稳定性还有待增强。这里就不详细写出来了,以免误导新用户,但深度用户一定懂的。

深度用户对这个状态一定不陌生

另外一点就是安全感,个人就碰到过一次,因为功能升级导致内容变化。某一次升级阴影功能,致使原型中某些元素的边框样式变得又黑又丑,强迫症的我不得不每个页面给手动改了回来。这显然是对旧版参数的兼容不够,而且测试不充分,我知道墨刀喜欢用灰度上线,很不幸这次小事故被我碰上了

要说这也不是多么严重的问题,至少数据都在还,无非就是多花点时间给改回来,但明显降低了我的安全感。

九、源文件/生态圈

大家从传统原型工具转型到墨刀,肯定在很长一段时间内都会感觉到不习惯,其中一个很明显的差异就是,没有了“源文件”这个概念,就意味着数据的控制权都在提供商手上。

一切流程都与以前已经根深蒂固的习惯不同了,你不能像以前随意分发或共享自己的可编辑文件,除非购买更多的协同帐号。特别是有协同需求的用户,总感觉束手束脚,不自由,不踏实。难免产生疑虑,我凭本事画出来的原型,为什么还不由自己控制?

墨刀定位于原型工具 SaaS 服务,不支持生成可编辑的源文件,可以迫使用户产生更多付费,这种封闭策略也是情理之中的事情。但是,从另一方面来,如果墨刀能支持生成源文件如果能尝试着更开放一些,或者会是另一种意想不到的景象。

这一点可以参考一下 figma 的开放策略,或许能有一些启发:

这是一款2012年开始研发,到2016年才正式上线的UI设计工具,同样基于浏览器——意味着天生跨平台,界面操作与 Sketch 极其相似——讨巧的无门槛转换,除了在功能体验上对标着 Sketch,也有自己的特色——几乎无延迟的实时协同,极其易用的矢量图形支持,可导入 Sketch 源文件,能保留绝大部分的可编辑性,也可以生成自有格式的可编辑源文件。

这样的设计工具一上线,就蹭尽了 Sketch 的热度,除了口碑与用户快速上涨之外,还得意于支持生成“源文件”的开放态度,到今天已经初步形成了自己的资源生态圈,越来越多的付费设计资源提供了 figma 格式,越来越多的用户也在纷纷共享自己的作品。

还有 Sketch 的开放生态转变,也能从侧面印证“开放”对于生态布局的重要性:

Sketch 逐渐被设计师们熟知,应该是 2014 年前后。在当时发布的 v3.0 版本中增加了包括“Symbols”在内的许多重要功能,才真正被越来越多的从业人士作为生产力工具来使用。在用户迅速增加的几年后,直到 2017年4月发布的 Sketch 43 版本,把源文件数据换成了 JSON 格式存储,之前都是以“二进制”的形式存储,这就意味着源文件中所有的数据都全部公开了。

可能有些喜欢猎奇的设计师能感觉到,最近两年,越来越多的第三方设计工具支持 Sketch 源文件导入、编辑、转换,就是得意于采用 JSON 格式存储的源文件。

这样转变的好处是不言而喻的,大量的第三方工具支持和设计资源涌现,吸引了更多的设计师纷纷转投阵营,如今已经在 UI 方面完全能和 PhotoShop 分庭抗礼(这句话可能会被喷),而 Sketch 也正逐步成为“矢量UI设计”的行业标准。

以上,选择开放还是保守或是封闭,直接决定了未来的想像空间能有多大。

如果墨刀在快速满足更多功能需求的基础上,还能提前在开放生态进行准备和布局,提前规划在线原型工具的产品标准,积极整合上下流环节的优秀资源,同时充分发掘核心用户的创造力,一定会呈现出不一样的生命力。

总结

以上内容陆陆续续凑了一个多月,其实还有很多细节的槽点没写出来,比如动效、项目管理、手机客户端等一些并不高频的功能点,实在是空闲时间不多,就这样收尾吧。

如果你是墨刀深度用户,一定会有不同程度的相似感受,希望多多交流。如果有幸被官方人员看到,当然也希望能感受到,这一大篇内容的重点其实也并不是想吐槽功能和体验。

最后的总结是,相较于传统的原型工具,在某些特定的场景下,墨刀确实能为你省下很多时间和精力,虽然定位于“原型”工具,其实在某些方面已经延伸到了视觉、开发、测试阶段,这也是原型工具发展的趋势。并且这只是一个 2015 年才正式上线新工具,势头迅猛。

如果作为设计师的你(包括但不限于产品经理)还没接触过新一波的原型工具(参照文首表格),强烈建议你带着实际的任务目标去认真体验一翻,而不是随便看两眼点几下,肯定会带给你带给团队不一样的体验。

优秀的工具就应该这样,不只要提升某一环节的效率,更应该带动上下游的生产力升级。