资深交互设计师推荐的6大必备神器分享

美丽不只是传说

美丽不只是传说

2016-02-16 19:50

想要天天向上,就要懂得享受学习。图老师为大家推荐资深交互设计师推荐的6大必备神器分享,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

不想在错误的软件上花功夫?花五分钟看完这篇!今天推荐的这6款交互设计工具全是经过敖厂长UX上手研究过的,优缺点都总结出来了,看完相信同学们就有答案了。

1.After Effects

你想在短时间内制作复杂演示效果。 请使用AE,曲线/锚点等使用MOTION V2脚本进行快速调整(在曲线界面中 鼠标拖动选择关键帧–拖动脚本上的滑块–对比缓动曲线 获得你想要的曲线效果,比其他脚本好用的在于曲线你可以进行自定义,表达式也好修改–不会改的话学点JS咯),你熟练AE的话能很快得到比较好的效果。AE缺点就是不可交互+精准度很难控制,当然有一个点就是,你想要什么效果 AE都能实现。但是程序上能不能实现就难说啦。

2.PIXATE,图层类交互原型软件

最近被GOOGLE购买了,然后免费了(说实话GOOGLE 可以说是产品杀手,进去的产品。。。我不敢苟同楼上们的那些说法)。

优点:可交互,共享性强,有团队讨论以及回复模块(此处有点像justinmind)【有windows版本】,对GOOGLE MATERIAL DESIGN的支持比较好,MD相关预设会越来越多哦。

缺点:图层类软件你们都懂得,用AE做可交互已经很烦了,更何况再加上一个交互模块,而且没有时间线啊。

用Pixate烦人的一点是,我是用750*1334做的,然后导进去发现,这货是按照375*667啊,而且不能直接从sketch粘贴,能别这么麻烦么。

Form和origami都是支持粘贴的。还有 动画预设较少。不过GOOGLE是动画狂,他们肯定会加预设的啊哈哈。听说以后版本会支持code export,观望中。

资深交互设计师推荐的6大必备神器分享,PS教程,图老师教程网

3. FRAMER STUDIO.

其实我并不想推荐,不过作为写得起前端扛得起大旗的交互大神必用咯。

优点:你想干什么 就能干什么。而且分享起来特别简单,所以有很多案例,我们可以直接把代码拷过来用。关于这个你们可以去FRMAER的facebook群组看看就知道啦。基于coffeescript开发的你还能导入Sketch、PS文件。很方便。能够精确控制每一个图层的属性。毕竟人家是强大的JS,你还想怎样。

缺点:你是视觉,你是交互,你大学/培训班 研究过JS么。如果不会,请略过。

如果你会JS而且你写代码的速度很快,那恭喜,这绝对好用。其实说白了 就是套代码模板。

4. FORM

节点类软件。如果用过nuke的人 ,那就很熟悉咯,被GOOGLE买了。

优点:节点类软件,原型的可维护性强。GOOGLE的孩子,MD设计规范里的那些动画预设它最新版本里包括了。而且还有好多MD相关的PATCH了。还出了IOS SDK,用来创建自定义PATCH什么的,这块学的其实是QC准备跟开发快速融合..以后可能能够导出MD 的android代码呢,期待期待。

缺点:不能在电脑上预览。肾六坏了还得跟同事借!还有就是支持从Sketch里粘贴了,结果不支持Retina,我用750 1334做的,结果发现Form是375 *667啊。我都得缩放成0.5才能继续。吓死朕了。还有就是不能共享啊。IOS工程师都是我们的大爷,你这样还要给他装FORM,会把他气shi的!

资深交互设计师推荐的6大必备神器分享,PS教程,图老师教程网

5. ORIGAMI+QC

目前比较好用的节点类软件,FACEBOOK的天才们出的。

优点:可导出有一定使用价值的代码。可维护性强。可在设备+电脑上都能预览。现在靠谱点的就这个啦。用的人也相对多些。你可以直接从SKETCH粘帖过来。不过只有在使用POP ANIMATION的PATCH时才可导出代码哦。不过开发那边真的能用这些代码。关于和开发沟通这个下面再写吧 。

缺点:有一些BUG不忍直视。

不能分享:有时给你的IOS工程师装了QC也没卵用。为什么?因为QC绝对烧死CPU+吃内存啊。就算你把FPS调到最低,如果图层够多够复杂,会把工程师电脑卡死的。XCODE都死了工程师怎么活嘛。还有就是目前功能上缺陷比较多(比如Swipe不能选择具体方向等,可以用自定义的PATCH进行定义,但是初级人员就用不了啊),有时你需要各种综合各种条件各种patch才能获得一个简单的效果。

关于ORIGAMI和开发的结合问题 :

1、ORIGAMI只能够导出POP animation PATCH相关的代码(CLASSIC ANIMATION和BOUNCY ANIMATION都是不能的哦–听说下个版本会有),代码里面的位移(POSITION TRANSITION)信息都是绝对位置,所以适配上你和开发需要进一步讨论解决方案。我的建议是QC中的定位系统严格统一为TOP LEFT或CENTER等。这个对适配问题很重要,如果你的外部GROUP的定位用的CENTER,而里面图层用的各种各样的其他参考坐标系,那么你导出的位移信息基本没卵用了。

2、如果有DELAY的话,请把DELAY放在POP ANIMATION PATCH的前面,如果不放在前面,代码导出的主要属性变化部分是空的(这应该是个BUG啊)。听说下个版本会导出delay的数值。

现在是我把DELAY用文档形式给开发,开发自己输入。还有一些循环动画也是不可导出的,这些也是以文档形式给的(其实就是让IOS哥哥坐在我旁边,用我的另一个显示给他看效果,一个显示器看我的QC工程直接沟通了,并没有用什么卵文档。如果你是大公司,流程化嘛肯定需要咯)。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

3、你的ANCHOR POINT就算是TOP LEFT,图层旋转是不会绕他的左上角旋转的。不过缩放是会缩放的。这个很坑啊。还有代码导出并没有导出ANCHOR POINT信息。

不过解决方案有的。但是都很麻烦。就是AE中的空白层类似的概念,留空切图。

4、很给力的东东叫PAINTCODE.可以直接把SKETCH粘贴的图层转为代码。并且PAINTCODE的官方提供了能够和ORIGAMI结合的PATCH,稍微研究一下(研究一两个小时,看看PAINTCODE的那个APPLE WATCH教程),就能够从PAINTCODE里解决ORIGAMI的一些鸡肋的问题。

从安装到实战教程:

《设计师新宠!交互神器ORIGAMI》

《设计利器抢先看!QUARTZ COMPOSER+ORIGAMI 2.0介绍及教程》

《动效神器第二波!ORIGAMI五分钟零基础入门秘籍》

资深交互设计师推荐的6大必备神器分享,PS教程,图老师教程网

6. HYPE 3 PRO.

人家是做HTML5的啦。不过,如果你不会用Framer,那可以用这个,这个还有时间线,不过我喜欢从SKECTH里直接粘贴过来,然而Hype不支持粘贴过来,直接PASS了。不过做HTML界面确实很给力啊。简直就是神器。不过用来做原型的人还是少数咯。

有夸FORM的,有夸AE的。作为MOTION DESINGER 还是最爱AE。

但从交互设计师的角度,关于哪个更好用,哪个淘汰,关我鸟事,哪个好用时用哪个。从目前看,ORIGAMI还是不错的。不过这些软件更新够慢的。全都有问题的时候,只能选自己爱用的好了。NOODLE我没提是因为它的BUG太多,还不足以有资格跟上面这些竞争。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)
展开更多 50%)
分享

猜你喜欢

资深交互设计师推荐的6大必备神器分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
资深交互设计师推荐的6大必备神器分享

资深设计师为您解答交互设计的疑问

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
资深设计师为您解答交互设计的疑问

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

12款网页设计师必备神器推荐分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
12款网页设计师必备神器推荐分享

设计师详细解析交互设计初体验分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
设计师详细解析交互设计初体验分享

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

交互设计师常用的WEB设计模式

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
交互设计师常用的WEB设计模式

如何考核交互设计师和视觉设计师的工作

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
如何考核交互设计师和视觉设计师的工作

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

以风车为设计元素的LOGO设计欣赏

以风车为设计元素的LOGO设计欣赏

精选国外A&D博物馆视觉形象设计欣赏

精选国外A&D博物馆视觉形象设计欣赏
下拉加载更多内容 ↓