签到

05月19日
尚未签到

共有回帖数 0 个

    拥抱的问号

    等级：


    深夜码字，如有问题请见谅。不来秀作品，说点干货的干活，下面提到的这些我都研究过。

    怎么都是夸FORM的。。。ORIGAMI项目应用问题你们可以直接看第5个。哈哈哈

    //--------2015.12.4更新---由于问题关注度有点高，这里进行一定的修改，并添加最近出现的新工具的使用感受。/

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

    2. Pixate,  图层类交互原型软件。-上手难度 2 颗星


    最近被GOOGLE购买了，然后免费了（说实话GOOGLE 可以说是产品杀手，进去的产品。。。我不敢苟同楼上们的那些说法）。
            优点：可交互，共享性强，有团队讨论以及回复模块（此处有点像justinmind）【有windows版本】，对GOOGLE MATERIAL DESIGN的支持比较好，MD相关预设会越来越多哦。
           缺点：图层类软件你们都懂得，用AE做可交互已经很烦了，更何况再加上一个交互模块，而且没有时间线啊。图层一多会非常的繁杂，层级管理不是很明确。

    关于和SKETCH结合  ，回复中网友说的很明确：如果用sketch的话，会发现Pixate和Sketch都是基于1:1下的开发尺寸来作为标准尺寸。可以使用另一种方式实现直接从sketch粘贴。在sketch里选择要导入的pixate切片或画板资源，在右侧栏的Export下选择对应的倍数和和格式后直接拖拽预览图到pixate，就不需要先导出保存再导入了。（虽然相对Framer/origami有点麻烦，不过在可接受范围）


    3. FRAMER STUDIO. -上手难度 5 颗星（对不会代码的设计师）Framer - Prototyping Tool for Designing UI, Interaction and Animation

    其实我并不想推荐，不过作为写的起前端扛得起大旗的交互大神必用咯。
          优点：你想干什么 就能干什么。而且分享起来特别简单，所以有很多案例，我们可以直接把代码拷过来用。关于这个你们可以去FRMAER的facebook群组看看就知道啦。基于coffeescript开发的你还能导入。。嗯。。sketch、PS文件。很方便。能够精确控制每一个图层的属性。毕竟人家是强大的JS，你还想怎样。
         缺点：你是视觉，你是交互，你大学/培训班 研究过JS么。如果不会，请略过。
    如果你会JS而且你写代码的速度很快，那恭喜，这绝对好用。其实说白了 就是套代码模板。

    /分享性最高的是这款了，而且代码入门其实很快/

    4.FORM. RelativeWave
    节点类软件。如果用过nuke的人 ，那就很熟悉咯，被GOOGLE买了。-上手难度 4 颗星

        优点：节点类软件，原型的可维护性强，支持从sketch里粘贴或导入了。GOOGLE的孩子，MD设计规范里的那些动画预设它最新版本里包括了。而且还有好多MD相关的PATCH了。还出了IOS SDK，用来创建自定义PATCH什么的，这块学的其实是QC...准备跟开发快速融合.优点还包括能够调取设备的相机等以及设备的震动控制。手机端的预览程序可以独立开启并直接把FORM文件共享。
    .
       缺点：暂时不能在电脑上预览。跟开发交接起来还是比较麻烦。


    5.ORIGAMI+QC：Origami — Design Prototyping目前比较好用的。节点类软件。FACEBOOK的天才们出的。-上手难度 4 颗星

      优点：可导出有一定使用价值的代码。 可维护性强。可在设备+电脑上都能预览。现在靠谱点的就这个啦。用的人也相对多些。你可以直接从SKETCH粘帖过来。目前最新版本支持直接导入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的一些鸡肋的问题。

    6.HYPE 3 PRO.Tumult Hype 3-上手难度 3 颗星

    人家是做HTML5的啦。不过，如果你不会用framer，那可以用这个，这个还有时间线，不过我喜欢从SKECTH里直接粘贴过来，然而hype不支持粘贴过来。不过做HTML界面确实很给力啊。简直就是神器。用来做原型的人还是少数咯。不过Hype原声支持输出动画以及GIF等文件格式。缓动曲线的支持也很好。

    7.FLINTO/PRINCIPLE.Principle - Animated Design-上手难度2颗星

    关于这两个为什么一起介绍。。接触的人都应该知道了。这两个工具的原理/实现/操作基本都非常相似。界面跟SKETCH很像，如果是SKETCH资深用户上手很快。能够快速实现各种滚动/转场/点击反馈效果。手机/电脑端的预览都非常的流畅。

    缺点：新出的，功能还在完善阶段，有一定的BUG，对复杂的逻辑运算以及一些BOUNCE/OVERSHOOT等效果的支持比较弱，跟开发对接也相对比较麻烦。不过快速做展示还是绰绰有余的。

    8.还未发布的并且值得关注的：creolabs(Creolabs: Native App Design and Development Reinvented)
    从预览视频可看出 ，这款软件能够快速制作高保真原型，原型在IOS原生代码下运行，对开发有一定的参考价值。


    9.Silver Flows,
    还未发布，不过直接能够在SKETCH中快速制作高保真原型，该有的功能都有（有可能替代目前SKETCH自带的鸡肋MIRROR功能）。直接拥有SKETCH插件和独立软件界面，如果发布应该会广泛使用。详情可查看medium上的介绍文章
    Introducing Silver : Lightweight Mobile Prototyping in Sketch 3
    。





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

    但从交互设计师的角度，关于哪个更好用，哪个淘汰，关我鸟事，哪个好用时老子用哪个。从目前看，ORIGAMI还是不错的。不过这些软件更新够慢的。全都有问题的时候，只能选自己爱用的好了。

    ---------------完。一个字一个字打得，就这样吧，有问题再补充。


    交互的话，强烈推荐用Quartz Composer
    不需要编程基础，上手快 ，原型可交互，动效流畅
    入门可参考下这篇文章：
    次时代交互原型神器Origami档案-CSDN.NET
    通过QC设置的动画参数可以直接提给开发，提升实现的效率

    这是我从零基础起步，花费半天时间做出来的小练习demo：
    初接触quartzcomposer，很好玩，处女作！感觉比AE更容易控制

    除了QC，另外再推荐两款快速生成原型工具：flinto 和POP
    flinto是在线生成原型网站，上传图片，通过简单的设置连接、过程动画，就可以快速生成
    这是我写过的一篇flinto入门教程，你可以参考下：交互原型快速体验工具flinto教程

    pop是移动端应用，通过拍照，勾滑出热区，设置链接，也可以快速生成，比较适合设计师自己做原型测试

    1. 如果你要成为一名优秀的动效设计师：
    那么学习成本不应该是阻止你选择Framer的理由。一个软件的最大能力有限才是阻止你选择的理由。
    对于一个具有无限可能的工具来说，花时间学习只是成本问题，如果它能助力你成为最自由的设计师，那么花点时间学学代码又何妨？你的目标是星辰大海，你终将成为行业最顶尖的设计师。

    2. 如果你只是为了设计稿的更好展示：
    可以直接用Keynote来做动效展示，简单，给领导看有面子。至于怎么实现？那是攻城狮大大们要考虑的事。

    3. 如果你是想跟跟最近的动效风潮，想要说“我也是一名能够设计动效的设计师”：
    请选择AE，或者Pixate这种简单、效果预制好的工具。

    下面详细说说几个我仔细研究过的工具：
    1. After Effects
    从13年扁平化视觉风格开始，我就意识到以后的亮点可能更多的要依靠动效这件事了。所以在当时还没有什么资料教程的情况下，开始研究动效工具。
    然后根据当时制作成本、工具成熟等原因，选择了After Effects。
    当时做的第一个动效Demo是这样的：
    Letv TV App Motion Design （服务器在国外，有时候有莫名其妙的访问问题，如果有条件可以打开vpn查看。）
    但是遇到的问题是：很难给技术说清楚怎么实现。在动作曲线设定好之后，技术根本不知道怎么放在代码里。而且其实对于多数攻城狮来说，让他们考虑如何分层实现界面效果，是很痛苦的一件事。
    当时为了这个动作曲线的事，甚至专门找了一个程序员朋友写了一个贝塞尔曲线视觉调节工具，调出同样的曲线，输出曲线的数字矩阵。
    但是。。还是有其他各种各样的实现问题。
    于是这个版本的开发不了了之。

    2. Flash
    最初考虑动效的时候，其实还考虑过Flash这个工具。
    当时有几个benefits：Action Script与Javascript的语法十分接近，技术可能容易参考；我以前给客户做过Youtube播放器的企业播放器外壳定制，所以有一定的技术能力的基础；Adobe系的软件互通效果很好。
    不过考虑到以下几点之后就放弃了：
    播放需要插件，很多移动设备和TV设备可能不支持。
    Flash的一些独有API和图形渲染方式和其他平台有一定的不同，所以代码的意义可能不大。
    与AE相比，AE支持分层的设计稿导入带来了很大的便利。

    3. Origami & QC
    Facebook团队在QC的基础上做出了Origami的动效开发包，建立了常用的动作模块。
    QC的制作方式其实应该算是可视化编程，虽然不用写代码，但是内容的处理方式与代码无异，同样的逻辑思维，同样的参数传递，同样要看文档学习和记忆一堆常用的API。
    而我无法忍受可视化编程的一点是，当逻辑稍微复杂的时候，那乱成一团的线简直不忍直视。。
    整体上来说，QC可视化编程的方式并没有有效的降低学习成本，而动效制作的成本也不低，功能还算全面和自由，但比不上能够直接写js的Framer。另外从与开发攻城狮的对接上，让开发去学习QC肯定不现实，参数的输出、层的逻辑都是要重新梳理和沟通的，所以这块的成本也不低。

    4. Form
    Form的使用和可视化编程模式与QC很接近。
    所以优势劣势也与QC很接近。
    因为最近被Google收购的缘故，更新进展步伐较快，而且据说集成了很多google官方的动效效果。

    5. Pixate
    支持设计稿导入，动效都靠属性选择面板来完成，比较直观，与传统设计软件界面接近。应该算是目前学习成本很小的动效软件了。
    被Google收购后从收费到免费。估计以后也会逐步集成很多好用的google官方动效。
    Pixate的劣势也比较明显，正是因为所有动效都靠属性面板的选择，所以逻辑复杂程度和可控制的细节都非常有限。是一个“可以很容易的做出常见动效”的软件。

    6. Framer Studio
    劣势，需要学习一定的编程基础。学习成本较高。
    优势：
    设计稿自动导入。不用自己导出图片然后摆位置了，直接一键导入设计稿，按照图层文件夹结构做好了层的划分和位置。省了大量时间有木有！
    除了Framer官方提供的API，还能够使用基本的HTML+CSS+Javascript来控制元素，所有的HTML5特性都被支持！你能够控制最细微的细节。
    你可以嵌入其他的Javascript框架。你可以在Framer.js基础上开发自己的Javascript框架。例如我为团队制作的框架，分页设计稿一键导入后，一行直观代码即可实现点击按钮跳转页面的弹性跳转动画。
    AE也蛮多人用，但个人感觉更适合视觉去做细腻的动效，例如loading页，反馈等等，并不适合做页面切换过渡的交互演示，花费的时间成本较大，这是我用AE做的demo：世界杯期间推广动效设计  你可以感受下不同原型工具的差别

    补充一个：Form。和QC的操作思路是非常相似的。但Form可以实时在手机上预览、操作，并且操作界面更加人性化。Form是Google在2014年末收购的，相信也是未来的一个趋势。目前国内的入门教程较少，我有翻译过一篇官方教程，感兴趣的同学可以参考：交互原型工具Form介绍 & 教程翻译

    楼主 2016-11-02 13:56 回复

共有回帖数 0 个
  • 回 帖
  • 表情 图片 视频
  • 发表

登录直线网账号

Copyright © 2010~2015 直线网 版权所有,All Rights Reserved.沪ICP备10039589号 意见反馈 | 关于直线 | 版权声明 | 会员须知