对于现代设计师来说,素描已经成为不可或缺的设计工具之一。各种原型设计工具正在悄然发生变化,针对草图原型的插件被开发出来,以满足设计师的需求。既有传统的桌面原型工具,也有基于云平台的工具。虽然没有标准规定你必须使用哪种工具,但是要在众多的草图原型工具中找到最合适的工作流程,提高工作效率,也是一件非常耗时的工作。

  因此,最近莫克的朋友们为大家精心整理了一套素描原型工具集,希望能帮助优秀的设计师朋友们找到适合自己的工具组合,提高工作效率。

  长期以来,素描因其交互性而受到批评。官方似乎更愿意把这些功能留给第三方开发者作为插件,悄悄做一个小而美的绘图软件。在今年更新的Sketch版本中,还可以支持Sketch内部的轻量级原型设计。这对于广大素描爱好者来说,无疑是一个好消息。

  原型交互模式:

   Sketch中的原型设计依靠画板和热点链接在页面间跳转,实现动态交互原型(类似于原型设计软件Mockplus中的拖拽链接)。但是,有一点我不得不吐槽,加太多链接线会让你眼花缭乱。

  预览方法:

   1) Sketch支持软件内部预览(类似于Mockplus中的F5本地预览)。

   SketchMirror中的实时预览(USB连接或局域网中的预览操作)。

   3)在SketchCloud实时预览(登录Sketch Cloud后,可以将项目文件上传到官方云,实现在线多人预览和讨论。)

  缺点:

  链接太多会导致不好的体验。

  过渡效果有限。

  素描相关资源:19个不容错过的素描线框套件

   1.Mockplus SketchMockplus是一个更快更简单的原型设计工具。自发布以来,深受国内外用户的喜爱,适合软件团队和个人在软件开发的设计阶段使用。快速交互功能可以很好地表达设计,帮助设计师“专注于设计,而不是工具”。随着越来越多的设计师对协作功能的需求,他们也推出了适合多人协作的团队版和企业版,为更多的软件开发/设计团队提高了工作效率。

  原型交互模式:

   1)下载Mockplus草图插件

   2)在Mockplus中拖拽组件后面的链接点,实现组件与组件、组件与页面、组件本身状态的交互效果。拖拽,快速互动3秒。

  预览方法:

   Mockplus提供8种预览方式,包括软件内F5本地预览、在线发布为HTML网页微信小程序(搜索Mockplus小程序)、移动客户端扫描二维码(MKplayer)。

   2.在意识到快速交互、快速设计、快速演示、快速使用的敏捷开发大趋势后,copycat团队于今年9月推出了copycat iDoc,正向更高效的产品协同设计平台发展。结合Sketch,在原生Mockplus原型设计和copycat iDoc中实现高保真原型设计非常高效便捷。

  原型交互模式:

  在copycat iDoc中,按住鼠标在设计稿上画一个长方形的热点,然后松开鼠标通过左边的项目树选择热点跳转的目标页面,就可以设置交互跳转链接了。您还可以为设置的交互式链接设置跳转动画。有9种动画风格可供选择,默认没有动画。也可以通过下拉框修改动画执行时间或者直接输入数值。

  预览方法:

  复制iDoc,点击顶部导航栏右侧的播放按钮,演示交互原型。手机也可以生成二维码用手机扫描查看。

   3.InVision Craft Sketch制作高保真原型时,大多需要从Photoshop上传内容,并进行素描。那么你肯定会遇到一个问题,就是你需要往界面里填很多真实的图片。这个过程是浪费时间。有什么节省时间的方法吗?当然有,那就是手艺。

   Craft是来自InVision的插件,功能强大。它不仅可以输出可视化规范(更偏向于StyleGuid),还具有复制排列对象、定义间距、自动填充文本/图片、自动填充重复元素等一些很酷的功能。通过安装这个插件到Sketch,你将体验到Sketch和InVision之间工作的连续性。通过结合设计和原型制作过程,我们可以快速输出高保真的原型。

  原型交互模式:

  根据官网的介绍,InVision的原型设计也是通过添加链接。在界面中添加画板链接,设置转场动画并添加微交互,将静态画面转化为交互原型。

  预览方法:

  软件内部播放按钮预览。

   4.Flinto Sketch使用Flinto,可以创建一些小的交互和动画,实现多屏app的全面流动。使用其过渡设计器,您可以非常快速地创建跳转和过渡动作。对于新手来说,直观明了。习惯了就觉得特别舒服,菜单、工具、选项都最小化了。它可以用来设计令人印象深刻的原型,避免陷入功能过多、分散用户注意力的局面。

  原型交互模式:

   Flinto可以与Sketch快速无缝地实现交互设计。

  接,并且通过插件就可以把素材直接导入到Flinto中,添加链接和过渡效果或者添加自动跳转。通过上传图片,添加热点配合相应的交互动作快速的生成原型,方便客户通过网页或者手机端进行观看。

  预览方式:

  1) 点击软件内部播放按钮

  2) 下载iOS手机端App预览(手机、电脑处于同一局域网)

  5. Principle + Sketch

  Principle和Flinto有很多相似的地方。作为一款原型设计工具,Principle的设计方式别具一格。它更多地关注于转换制作的时间轴线路以及Sketch屏幕间的交互。对于不同习惯的设计师来说,有的人喜欢这种设计方法,而有的人就更喜欢使用像Flinto中的Transition Designer或者Framer中的Auto-Code(自动编程)。

  原型交互方式:

  使用Principle可以方便地为多屏App制作流动,或者就专注于微交互,这两种任务它都可以胜任。与本文介绍的其它工具相比,Principle缺少一点润色。作为一款与众不同的原型设计工具,它的原型设计方式也略微特殊。

  1) 下载Sketch插件,导入素材

  2) 建立过渡和交互动作

  3) 用延迟和曲线来打磨动画

  4) 添加滚动/分页/拖拽

  预览方式:

  1) 软件本地预览

  2) 下载Principle Mirror手机预览

  缺点:

  1)画图不方便,所以建议大家在Skecth中做好图,再导入到Principle中

  2)不能在当前页中做动画。

  3)在Principle中的素材不能自由调整大小,只能用左侧面板的scale选项进行宽、高调整。

  6. Axure + Sketch

  众所周知,Axure是一款老牌的设计软件。作为专业的原型设计工具,它能快速、高效的创建原型。而输入高保真原型,则需要把视觉设计师在Sketch中制作好的矢量素材,例如图标、控件、按钮等导入到Axure中提高交互设计的效率。

  原型交互方式:

  先安装好Sketch插件AxureRP.sketchplugin,选中Sketch的素材,点击菜单的Plugins-AxureRP-Copy Selection。对于一般的交互,在Axure中可以通过弹窗来逐个筛选设置,到属性面板上去筛选目标页面(页面多的时候就有点烦了)。稍微复杂的交互,则需要条件生成器来实现。Axure在交互设置中,可以添加条件判断,但需要用户有一定的编程常识,否则掌握起来有相当难度。尤其是初次使用的时候。

  预览方式:

  本地发布预览

  7. Marvel + Sketch

  Marvel是一款免费的原型设计Web 应用,可以进行网页设计和移动端的UI设计。它根据你设计好的 PSD 或 Sketch 文档,也就是说你的视觉稿无需转换格式就可以使用,当然线稿图(.jpg or .png)也可以,导入后进行后续的交互设计。

  原型交互方式:

  先将画板通过Sketch插件同步到Marvel,框选界面元素,通过热点(HotSpot)连接目标画板并设置页面的转场方式和操作手势。不像连线的方式那么直观,所以容易造成逻辑混乱。

  预览方式:

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

  2) 生成URL通过邮件分享。

  8. Framer + Sketch

  与其他几款原型设计工具不同,Framer 可能是最特别的一款原型工具,因为它要求设计师具备代码能力。而它制作出来的原型也最接近真实效果。它支持调用系统键盘,输入真实的文本,然后作为数据被使用;它支持对音频、视频进行真实的控制与监听;Framer 的强大来自于它对 HTML、CSS 以及 Javascript 的无缝支持,单是音频和视频,就有数十种属性和事件可以拿来用。

  原型交互方式:

  Framer X中原型设计变得更加直观,只需点击几下即可创建基本级别的交互。将画板从sketch中复制粘贴到Framer中,使用“链接”工具添加推送和叠加等过渡,或使用多向手势创建嵌套滚动视图。

  预览方式:

  1) 本地预览

  2) iOS/Android手机镜像预览

  总结

  以上就是一些比较常见的Sketch原型设计工具组合。当然还有很多我们并没有列举出来的工具,例如Pixate 和UXPin,当然了还有Facebook的Origami Studio。如开头所说,并没一项规定限制你必须使用哪一种工具,只要是适合自己的使用习惯,适合自己的语言环境,适合团队的工作节奏,在不同的原型设计工具中切换使用也是常有的事。

  不管是使用Sketch的原型设计功能还是使用Sketch+原型设计工具组合的方式,只要能帮助自己提高工作效率,设计出满意的现代原型就是很好的组合。找到适合自己工作流程的原型工具,然后就开始工作吧!