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

2016-02-16 19:50 9 1 收藏

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

【 tulaoshi.com - 平面设计 】

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

1.After Effects

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

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

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

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

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

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

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

用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工程直接沟通了,并没有用什么卵文档。如果你是大公司,流程化嘛肯定需要咯)。

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://www.tulaoshi.com/n/20160216/1572944.html

延伸阅读
在风起云涌的互联网浪潮中,产品迭代的速度越来越快。随着用户需求的激增,也不断带来了对设计师能力要求的提高。初入交互设计领域几年来,明显发现可视化的内容远比文档的更易于被用户(以至我们的客户)所接受,就像用户研究项目中常说的一句话:用户怎么说的,并不代表他们怎么想。今天以原型设计为基点,与大家展开几点做简要的分析。 一、...
作品集是反映设计师设计水平最直观最有说服力的材料,而作为一个交互设计师,应该如何设计自己的作品集来证明自己的专业水准?知乎、Quora、ux.stackexchange.com等论坛都有相关的讨论,本文总结这些观点并针对自己求职的体会,探讨交互设计师的作品集应该如何设计,以期为旨在从事交互设计工作的同仁提供帮助。 既然是交互设计的作品,则不同...
很多同学做设计的时候经常会漏掉这个漏掉那个,等到开发来问的时候才想到。现在有了网易同学自创的自查表,可以把一些问题提前预防起来,文章系统全面,条理性强,是不可多得的实用好文呦。 飞灵:对于移动应用来说,移动情景非常复杂,设备也很多样。那么在设计之后,设计评审之前,你的交互稿考虑的细节是否完善,对特殊状态的描述是否有遗...
作为入行不久的交互设计师,我发现自己在交互设计的实践中无法顾及到方方面面,是存在思维盲区的。其中有欠缺经验的原因,也有自身知识局限的问题。进入开发阶段后,每次需要修改交互时,心里都会有些惭愧,感觉为小伙伴们带来了不必要的工作量。 然而现实中,交互设计的改动是难免的(因此一般一个项目会不断迭代交互文档),尤其是在时间安排...
加班中,为换脑子翻翻坟。 要不要长文呢? 算了,还是以一些图片代替吧,大部分都是在07~08年间在之前公司建设团队时的产物。 UE Team 内部工作流程 (图1),指导性的流程,实际操作中会有偏差,如任务紧急有些环节及review就会被跳过,大体是这样一个流程。 图1 UE Team 外部工作流程 (图2),简陋版(复杂版估计看不懂了),表达出大体的...

经验教程

83

收藏

99
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部