奥斯睿品牌设计策划-贴心的品牌战略合作伙伴 客户服务热线:029-81012761
网站首页
关于我们
服务领域
新闻观点
作品案例
联系我们
如何准确的向工程师传达动效设计?
发布者:本站 发布时间:2015-3-2 11:58:10 阅读:3083次  

       

    随着软件与终端的发展,如今的用户体验设计中动效的作用正变得越发重要,

也有越来越多的设计师开始尝试让自己的作品“动”起来。但在实际工作中,相

信大家常会有这样的疑问:怎样才能将自己精心设计的动态效果,准确的传达给

工程师,避免实现的偏差呢?下面我想根据自己的经验,抛砖引玉,和大家聊一

下这个话题。
 
    试想一下,在一个沉静的的夜晚,你正为一个界面的过渡动画而苦思冥

想,突然一道灵感之光穿越你的脑海,完美的方案浮现眼前。此刻你最想做的,

恐怕不是翻阅开发文档研究实现原理,“老子得立刻把它表现出来。”
 
    没错,我们是设计师,设计师要做的是可视化。对于动效来说,凭空描

述永远是隔靴搔痒,将自己心中的设计最快速的可视化,是实现的第一步。
 
一、准确展示:视频Demo
 
    视频Demo是个不错的开始,一段可以反复播放并在大部分设备上均可观

看的视频,是让别人快速理解自己想法的最佳媒介。制作视频Demo,本人最常用

的工具是After Effects。AE对于动效的控制与表现能力,至今无人能出其右,

是我心目中最佳的概念设计工具。
   除视频外,AE的另一个优势是,它输出的PNG序列帧素材可以直接应用到一些

PC甚至移动端的软件中,作为实现效果。
二、操作体验:交互原型
 
    视频Demo的局限是无法交互,而很大一部分动效都是在用户与界面交互

时触发的。这部分动效的启动时机,与手势的关系,仅靠视频Demo就无法100%准

确的传达了。这时,如果能有一个可交互的原型,很多问题就会迎刃而解。
 
    对于可交互的原型(Prototype),网上已经有很多文章在讨论,制作

工具也五花八门(Flash、Adobe Edge、Quartz Composer、Keynote、Framer、

Pixate、Form...),我们该如何选择呢?对于这个问题,我主要看两个点:1、

制作好的原型是否便于多人分享。2、是否可以直接输出可用于开发的参数。

        基于这两点,我个人的第一个选择是Flash。
 由于Apple的原因,Flash如今的境况可算是江河日下。但作为一个动效原型工

具,它却有一些独特的优势。
 
    优势1:可以直接导入AE生成的序列帧素材。

    对于我这种以AE作为动效设计起始的人来说,这点太重要了。它意味着

无需任何重复劳动,只需要在Flash中添加一些基于AS3.0的交互代码,就可以完

成原型的制作,并保证自己最初的设计思路在原型阶段不打折扣的实现。
    优势2:可以导出.apk或.ipa的安装包,共享给任何有手机的人。

    由于本人的工作经常需要异地沟通,原型的可传递性就是个很关键的需

求了(总不能把电脑快递过去给人家看吧...)。Flash的打包发布功能,这时就

派上了用场。做好的原型通过Air for Android打包一个apk文件,邮件发过去安

装在对方手机上,轻松又愉快。
   另外一些可关注的工具,还有Pixate和Form,它们都可以通过共享工程文件的

方式远程传递,还能通过官方App将原型投射在手机上实时预览,缺点是只能做

一些基础的效果,创新一点儿的就搞不定了,不过他们都在不断地迭代更新,尤

其是后者,刚被Google收购,未来说不定会有快速的发展。
 
    我个人的第二个工具选择,是Framer Studio。当我把制作好的原型拿

给工程师看的时候,经常被问到这样一个问题:“能不能把源码给我们看一下?

”这时气氛通常会比较尴尬,因为Flash也好Form也罢,它们制作的原型只能起

到演示的作用,而无法直接生成对开发有帮助的代码。此时,除了报班现学

Android或iOS开发外,还有没有别的办法呢?答案是:“有!” Framer Studio

给了我们一线曙光。
 
    Framer Studio是一个纯编程实现的原型制作工具,有很强的动效实现

能力,它的语言是基于Javas cript衍生出的Coffees cript。虽然语法与

Android\iOS有不小的区别,但仅就动效这块,很多逻辑是可以共通的。
当然,它的学习成本也会高一些,不过当你拿着一段Framer的源码给工程师看的

话,当中的一些动画参数和实现逻辑,多少能给到他们些实际的帮助,所以付出

和回报还是成正比的。关于运用Framer的流程,Twitter的设计师分享了他们的

经验,大家可以看下这篇文章:《Twitter视频功能设计流程全程剖析》
 
    另外,如果你专注于iOS平台,也可以直接尝试一下Origami,这是个由

Facebook团队开发的原型工具,通过链接节点式的操作,无需自己写代码,在它

最新的更新中,已经支持导出可供iOS和Android使用的代码,这篇文章做了介:

《Introducing Origami Live》
三、协助开发:参数文档
 
    有了视频Demo,有了交互原型,相信工程师们已经理解你要做什么了,

那他们是否就可以愉快的把动效实现了呢?答案是:不一定。一些简单的动效,

工程师或许可以凭经验搞定。如果你的动效设计很复杂,涉及众多的参数与速率

变化,那仅凭你的描述与工程师肉眼的感觉,恐怕要出偏差。这时,就需要参数

文档的帮助了。
    想要自己的设计能被精确的实现,就一定要对实现的原理有所了解。根据实现

原理,把对应的参数精确的写出来,这就是参数文档。对于动效来说,基本参数

无非这三类:
 
        1、动画的起始时间、持续时间(duration\ offset)
        2、变化的属性(rotation\ position\ scale\ alpha)
        3、运动速率(interpolator)
 
    iOS与Android各自的程序语法不太相同,大家可以去官网翻看一下它们

的开发者文档,了解两者在动效实现上大概的语法格式,然后对应着把这些参数

标好,传递给工程师,他们就真正可以愉快的开发了。
 当然,开发过程中少不了和工程师的不断沟通(一些如像素位置、不同机型屏

幕比例的细节,包括可能出现的误差),换位思考,不能丢给他文档或demo之后

做甩手掌柜,那也是不负责任的表现。
 
    总结:
 
    简单的说,要想准确传达自己的设计可以分三步。
 
    第一步:要快速可视化。
    你可以选择任何用的顺手的工具,把自己的想法快速准确的呈现出来,

就已经是成功的一半。
 
    第二步:最大限度的还原使用场景。
    如果是PC端,就在电脑上演示。如果是移动端,就在手机上演示。如果

可操作,那最好做可交互的原型,当然,是在时间成本允许的条件下。
 
    第三步:把设计参数化,尽可能减少让工程师凭感觉开发的情况。
    相信我,如果你不希望工程师凭感觉调UI颜色,那么动效同理。一份精

确的文档,是你专业性的体现。
 
    最后我想提醒一下,本文提到了很多工具,而工具似乎有能让人着迷的

魔力。所以请注意了,千万不要在追求工具的过程中迷失了设计的本源。电影《

夜行者》里有一句台词:“想赢彩票的话,你得先赚够买彩票的钱。”同样,我

们是设计师,想要工程师实现出酷炫的动效,你得先把它酷炫的设计出来。抓住

一切机会提升自己的设计能力吧!那才是你最宝贵的东西。

上一篇: 2015年至关重要的4种排版趋势
下一篇: 设计师的个性与荣誉
联系我们
客户服务热线:029-81012761
本着为客户持续创作价值的理念,为有视觉前瞻性需求的客户提供有价值的视觉营销设计!
版权所有 © 2008-2015 奥斯睿广告文化传播有限公司 Anshirui Advertising Communication Co., Ltd
地址:西安市新城区朝阳门外长乐西路1号朝阳新世界12层1215室  传真:029-81012761  
电话:029-81012761   移动电话:19991288186  技术支持:中朗网络  
返回顶部