windows-motion-tool-pixate

一篇成功文章的开头皆需寒暄几句:大约一个半月以前,ME Workshop知名逗比马丁· 胃发表了一篇关于QC+Origami 动效设计的文章,引来无数Mac用户的热捧和无数Windows用户的哀嚎(买不起Mac就要遭到歧视么…),广大Windows用户都用不了算神马动效神器!?今天就来介绍一款妇孺皆爱、老幼皆宜、比QC简单易上手、比AE可交互的全平台动效神器 —— Pixate。

wy20150805 (1)

注:上文提到的软件教程:

优点1:适合设计师的思维方式

QC的好处是可以比较方便的和程序猿对接,很多动效的实现逻辑和前端的代码逻辑是相通的。也就是说,使用QC虽然不需要写代码,但归根结底还是猿类的思维方式,对于我们这些一点代码不懂,逻辑能力又不是特别好的小小设计师来说,还是有些门槛的。看到满屏的连接线,就让人有点望而却步,搞不清其中的逻辑。

作为设计师,无论是交互还是视觉,无论是用PS、AI还是用Axure、Sketch,我们最最熟悉的一个概念,就是图层了。而Pixate的操作方式,同样也是图层的概念。Pixate的界面,乍一看有点像PS呢。

wy20150805 (2)

如上图所示,左上角是图层区,我们可以将视觉稿或是高保真的交互稿切图后导入Pixate中,所有的图层按照前后顺序出现在图层区中,与PS一样,上层的图片会覆盖在下层的图片上,图层还可以设置成组。历史记录区域也与PS很相似,记录最近的20步操作。值得注意的是,Pixate是随时保存的,如果操作了一堆之后,想要退回到20步以后,就再也回不去了…左下角是手势交互和动画区域,包括常用的手势操作(拖拽、单击、双击、长按、旋转、缩放、滚动)和常见的动效(移动、缩放、旋转、渐隐渐显、变色、改变图片、重复),我们可以将这些手势或是动效直接拖拽到图层上,图层就会实现相应的效果。界面右侧则是对图层属性和交互和动画属性的设置。图层属性可以用来设置图片的大小、位置、透明度等。重头戏是右下角的交互和动画属性设置,通过设置这些参数,可以将手势和相应的动画连接起来,连接完成后,一个可以操作、可以交互的原型就制作好了。

那这些参数该如何调呢?这里给出几个练习的链接,大家做几个实例之后,就会得心应手了。

优点2:实时预览,可交互

Pixate的另一个优点就是可以实时预览,并且是可以在手机上实时操作和预览。只需在手机上下载Pixate的app,iOS和Android都可以下载,通过wifi或是数据线连接电脑,就可以实时看到预览效果了。如果懒得连手机,也可以在模拟器上预览效果。

wy20150805 (3)

优点3:全平台

你可以online使用,也可以在Mac或是Windows上下载使用。Pixate支持多款iOS和Android机型,甚至支持Apple Watch、LG G Watch和Moto 360三款智能手表,可以说是全平台覆盖。

wy20150805 (4)

说了那么多优点,Pixate也有一些缺点。它还是更适合做页面级的动画,对于需要形变、非常细腻的复杂动画,有些无能为力。所以Pixate更适合交互设计师来表达界面逻辑,而更加生动有趣的loading或是彩蛋,还是交给视觉大神们,用Flash或是AE来做吧。

在哪下载?

说了那么多,快来看看在哪下载吧。大家可以在它的官网 http://www.pixate.com 下载使用。官网上同时还提供了很多Demo,可以下载来学习研究,Blog里的官方教学视频也值得一看。

最最关键的是,自从被Google收购以后,它就免费了!可以说是喜大普奔的好消息。大家快快下载来试试吧

 【动效神器Hype零基础入门教程系列】

先聊一下这个软件的强大功能,附上简单教程!
《Sketch神助攻!无代码做动效神器Hype3入门教程》

台湾设计师叫你用Hype做原型过场!
《无代码动效神器!教你用HYPE3做APP原型的基础过场(附神器)》

美丫姐手把手教你用Hype做Path菜单动画!
《比AE还方便!教你用HYPE无代码制作PATH扇形菜单动画》

作者:ME网易移动设计-子木yoyo

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量99万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

点赞
收藏 4
继续阅读相关文章

发表评论 已发布 1

还可以输入 800 个字
 
 
载入中....
1 收藏