9款原型设计工具与Sketch的强强组合,轻松构建交互原型!

原型设计的发展历史经历了纸上原型、静态线框设计、到如今的可交互式原型。做为设计过程当中最初始的阶段,设计师们对原型设计的要求也愈来愈高。所以,现在的原型设计工具格局也发生了很大的变化。web

Sketch对于现代设计师而言,已经成了不可或缺的设计工具之一。各家原型设计工具也在悄悄的发生一些改变,迎合设计师们的需求,纷纷开发出了针对sketch原型的插件。既有传统的桌面端原型工具,也有基于云平台的工具。虽然没有任何一条标准规定你必须使用哪个工具,然而如何能在众多的sketch+原型工具的组合中找到最适合本身的工做流程,提升工做效率,也是一件耗时的工做。编程

因此最近摹客的小伙伴们精心的为你们整理出了一个Sketch+原型工具的合集,但愿能帮助各位优秀的设计师朋友们找到适合本身的工具组合,提升工做效率。小程序


1. Sketch微信小程序


长久以来,Sketch 在可交互方面一直为人所诟病。官方彷佛更但愿将这些功能留给第三方开发者作插件,本身安静的作个小而美的绘图软件。而今年更新的Sketch版本中,它也能够支持在Sketch内部进行轻量级的原型设计了。这对于广大Sketch粉丝来说无疑是个好消息。微信

原型交互方式:app

Sketch中的原型设计依赖于画板(Artboards )和热区( Hotspot )连接实现页面间的跳转,实现动态交互原型(相似于原型设计软件Mockplus中的拖拽式连接点 )。然而不得不吐槽的一点是连接线加的太多会让你眼花缭乱。工具

官方教程:www.sketchapp.com/docs/protot…post

预览方式:动画

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

2) Sketch Mirror内实时预览( USB 链接或同局域网内预览操做)。

3) Sketch Cloud 内实时预览(登陆 Sketch Cloud 后可将项目文件上传至官方云端,实如今线多人预览,并可进行讨论。)

缺陷:

连接线过多会致使体验很差。

连接过渡效果有限。

Sketch相关资源:2018年不可错过的19款Sketch线框图套件


2. Mockplus + Sketch


Mockplus是更快更简单的原型设计工具。自发布以来深受国内外用户喜好,适合软件团队、我的在软件开发的设计阶段使用。简单快速的交互功能,可以很好地表达设计,帮助设计师「关注设计,而非工具」。随着愈来愈多设计师对协做功能的需求,他们也推出了适合多人协做的团队版和企业版,为更多的软件开发/设计团队提升了工做效率。

原型交互方式:

1) 下载Mockplus Sketch插件:www.mockplus.cn/download

2) 在Mockplus中拖拽组件后面的连接点,实现组件与组件,组件与页面,以及组件自己状态的交互效果。一拖一放,3秒快速交互。

官方教程:

Mockplus原型交互:doc.mockplus.cn/?p=4098

预览方式:

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


【来啦!彩蛋君】Mockplus我的版免费赠送福利!限时限量!

Mockplus对接iDoc了,将原型接入产品工做流,增长了原型标注、评论、对比设计稿、全貌呈现等功能,诚邀体验!赠送Mockplus我的版!数量有限,先到先得!


专属激活码:Mock2019;

激活数量:限量150个;

有效期:2019年9月30日

激活地址:www.mockplus.cn/user/upgrad… (登陆/注册后输入激活码便可)


Plus,发布Mockplus原型到iDoc,还有更多大礼等你拿!


3. 摹客 iDoc


在实现交互快、设计快、演示快、上手快的敏捷开发(Agile Development)的大趋势后,摹客团队在今年9月份推出了摹客iDoc,朝着更高效的产品协做设计平台方向发展。与Sketch的结合,使其在原生Mockplus原型设计和摹客 iDoc中实现高保真原型设计都很是高效、便捷。

原型交互方式:

在摹客iDoc中,按住鼠标在设计稿上绘制一个矩形的热区,再松开鼠标经过左侧项目树选择热区跳转的目标页面,便可完成交互跳转连接的设置。对设置好的交互连接还能够设置跳转动画,有9种动画样式能够选择,默认没有动画。还可经过下拉框或直接输入数值修改动画执行时长。

官方教程:摹客iDoc原型交互:doc.mockplus.cn/?p=4517

预览方式:

摹客iDoc中,点击顶部导航栏右侧播放按钮,便可演示交互原型。手机项目也可生成二维码用手机扫描查看。


4. InVision Craft + Sketch


制做高保真原型时,大多须要从Photoshop和Sketch上传内容。那你确定会碰到一个问题,就是须要填充不少真实的图片到界面里。这个过程很是浪费时间,有没有能节省时间的办法呢?固然是有的,那就是Craft。

Craft是InVision出的一个插件,功能强大。它不仅能够输出视觉规范(比较偏向StyleGuid),还有些很酷的功能例如复制并排列物件,定义间距,文本/图片自动填充,重复元素自动填充等等。经过将这个插件安装到Sketch,你将体验到Sketch和InVision之间工做的连续性。经过将设计和原型制做流程结合在一块儿,就能够快速的输出高保真原型。

原型交互方式:

从官网的介绍能够了解到,InVision的原型设计方式也是经过添加连接的方式。界面元素中添加连接到画板,设置过渡动画并添加微交互,将静态画面转换为交互原型。

官方教程:www.youtube.com/watch?v=1H7…

预览方式:

软件内部播放按钮预览。


5. Flinto + Sketch


使用Flinto能够建立一些小的交互和动画,实现多屏App的总体流动(Comprehensive Flows)。使用它的Transition Designer,能够很是快速的建立跳转和转场动做。对于新手而言,直观明了,当用习惯了后就感受特别顺手,菜单、工具和选项都变成最小化。用它彻底能够设计出使人印象深入的原型,避免陷入特色过多的境地,分散用户注意力。

原型交互方式:。

Flinto能够快速实现交互设计,与Sketch无缝对接,而且经过插件就能够把素材直接导入到Flinto中,添加连接和过渡效果或者添加自动跳转。经过上传图片,添加热点配合相应的交互动做快速的生成原型,方便客户经过网页或者手机端进行观看。

官方教程:www.youtube.com/watch?v=afG…

预览方式:

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

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


6. Principle + Sketch


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

原型交互方式:

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

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

2) 创建过渡和交互动做

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

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

官方教程:principleux.com/principle-c…

预览方式:

1) 软件本地预览

2) 下载Principle Mirror手机预览

缺陷:

1)画图不方便,因此建议你们在Skecth中作好图,再导入到Principle中

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

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


7. Axure + Sketch


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

原型交互方式:

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

官方教程:www.axure.com/support

预览方式:

本地发布预览


8. Marvel + Sketch


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

原型交互方式:

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

官方教程:marvelapp.com/features/pr…

预览方式:

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

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


9. Framer + Sketch


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

原型交互方式:

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

官方教程:www.youtube.com/watch?v=foS…

预览方式:

1) 本地预览

2) iOS/Android手机镜像预览

总结:

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

不论是使用Sketch的原型设计功能仍是使用Sketch+原型设计工具组合的方式,只要能帮助本身提升工做效率,设计出满意的现代原型就是很好的组合。找到适合本身工做流程的原型工具,而后就开始工做吧!

相关文章
相关标签/搜索