前几天在看文章的时候,发现一位外国友人放上了在线demo,点进去试了试效果不错,于是对制作它的web工具Marvel使用了一番,看看有什么不同的东西。

移动端发力之后,原型工具满天飞,有的专注于流程,有的专注于动效;有的在本地,有的在web;有的基于可视化操作,有的结合coffee script;而这一块的市场也已经很成熟了,大致上被sketch+的模式占据,flinto,principle,framer的用户占大多数,像老牌的Adobe,试图通过XD进入市场也尽显颓势,marvel并不是一款新的web工具,但是孤陋寡闻的我却是第一次认真地去了解,一起来看看marvel是如何帮助用户来完成一款app原型的。

清新的视觉

Marvel整体的视觉风格就很让我喜爱。

清新,简单,活力,看起来值得一试,我不会需要花费很大的精力去解读每个界面元素的含义和功能,没有太大的认知压力和学习恐惧,这是产品在面对早期用户时,很需要去考虑的一个方向。

创建项目时,提供了6种预设的设备画布供选择:

Website/TV,iPhone 5,iPhone 7,iPad,Android,Apple Watch。

我创建了一个项目"just for fun !”,点击查看后,出现了导入设计内容的提示,把设计的素材拖入进来即可添加。

marvel提供了两款插件,一款是for Slack,将项目动态同步到Slack中;另一款是sketch插件,方便将sketch文件素材倒入到项目中。
在Sketch中运行插件,选中画板,选择尺寸和需要上传到的项目名。

值得一提的是,这里一个上传的小动画也是很有心的做了出来。

除了上传设计内容外,marvel也提供了不错的画板内容,在线绘制需要得到图样。下图是我使用左侧工具随意体验了一下。

在浏览器全屏模式下,Marvel的操作体验和本地工具比起来也没差多少,操作十分流畅。

页面分为三栏:左侧的工具栏,画板,属性调整。

左侧的工具图标分别是:

生成矩形,生成圆形,生成文字,上传图片,从库中选择(库中包含了图片和图标两类供选择)。下方调整画板大小,如果执行了一些操作,也会有重做和返回上一步的操作。

画板不能够拖拽移动,仅作为内容的载体,这对我用惯了触控板的人来说,不太方便。

属性调整也大多是一些常用和基础的内容,像是层级的上下关系,对齐,大小,透明度,颜色,圆角。

保存后即可退出,回到项目页面。

绘制的画板和导入的素材都会在一个项目的列表中展现,其他的画板是通过Marvel的Sketch插件导入进项目中的。

这个时候可以看到页面的右上边有了四个操作:设置,下载,演示,分享。

设置:

可以重新调整画布尺寸,设置一些导出时相关设置,还有项目的私密性。

下载:

可以将制作后的原型提供多个方式去试用,这个脱离手机上mirror映射的方式会有很多优势,单独运行,单独使用;有些工具是不连接上电脑就不会用了。这些很喜人,更可以生成pdf文档,也不需要对交互文档做单独的梳理了。不过,这都是付费后的高级功能,没能尝试上,遗憾了。

演示:

直接在web页面中进行可交互的原型展示。

分享:

一开始我以为它只是单单的作为一个推广的功能,但是产品的设计师远为用户想的更多。

它不仅提供了URL生成,你可以以链接的形式发给任何人;你可能会通过邮件或SMS发送给其他人,他也帮助你提供快速方式;也可以在你的博客或者文章中嵌入它的一个快速访问;更可以记录用户操作的行为数据!这个功能足够贴心吧,像是我用其他工具做测试和记录的话,可能还要通过另一款app进行操作记录,而且还只能在一台设备上记录,显然这个平台提供的记录功能更加省事;同样也可以扩散给更多的人学习和使用。

一开始我以为它只是单单的作为一个推广的功能,但是产品的设计师远为用户想的更多。

它不仅提供了URL生成,你可以以链接的形式发给任何人;你可能会通过邮件或SMS发送给其他人,他也帮助你提供快速方式;也可以在你的博客或者文章中嵌入它的一个快速访问;更可以记录用户操作的行为数据!这个功能足够贴心,像是我用其他工具做测试和记录的话,可能还要通过另一款app进行操作记录,而且还只能在一台设备上记录,显然这个平台提供的记录功能更加省事;同样也可以扩散给更多的人学习和使用。

它不仅是一个设计工具,同样也为多人协作提供了可能,页面右下方有一个Comments的浮动按钮,点击它就可以看到其他成员对项目的一些评论和留言,方便团队中的设计沟通。

回到一开始添加完成了画板的页面,点击一个画板后,会进入到交互方式和逻辑的操作页。

通过鼠标圈选,可以选择出一个操作热区,然后操作热区会关联到下一个跳转的页面,设置页面的转场方式和操作手势。这一点怎么说呢,就不太想是拖拽曲线建立页面逻辑那么直接,当页面多起来的时候就会发现,再去弄清楚逻辑是很困难的事情,至少没有那么愉快,这样的缺点在pixate上表现地十分突出(对于pixate停止更新这件事情也是感到遗憾啊...)。另外,页面的左上角可以添加一个时间维度的编辑。

圈选出热区后选择关联页 选择转场方式和手势 当按照自己的设计方案完成后,就可以按照之前说过的分享或导出,完成设计输出。

不过这不是一款完全免费的app,更多功能是需要付费解锁的,毕竟人家用心做了,也是希望能够得到一定的回报。

仅从工具的层面来看,这款web工具确实很棒,在一些细节上也是很考究,虽然可能不太适用于国内用户,但是去尝试使用好的工具本身也是一件很美妙的事情啊不是吗?

最后应该附上这一款不错工具的地址:

Marvel-simple design, prototyping and collaboration
https://marvelapp.com

然后这个是试用的时候生成的外链,可以点击看看:

https://marvelapp.com/3ieac56

扫描二维码,分享此文章

ShuSQ's Picture
ShuSQ