|
|
随着软件与终端的发展,如今的用户体验图片设计中动效的作用正变得越发重要,也有越来越多的图片设计师开始尝试让自己的作品“动”起来。但在实际工作中,相信大家常会有这样的疑问:怎样才能将自己精心图片设计的动态效果,准确的传达给工程师,避免实现的偏差呢?下面我想根据自己的经验,抛砖引玉,和大家聊一下这个话题。
试想一下,在一个沉静的的夜晚,你正为一个界面的过渡动画而苦思冥想,突然一道灵感之光穿越你的脑海,完美的方案浮现眼前。此刻你最想做的,恐怕不是翻阅开发文档研究实现原理,“老子得立刻把它表现出来。”
没错,我们是图片设计师,图片设计师要做的是可视化。对于动效来说,凭空描述永远是隔靴搔痒,将自己心中的图片设计最快速的可视化,是实现的第一步。果博东方官方网站为你展示更多的内容。
一、准确展示:视频Demo 视频Demo是个不错的开始,一段可以反复播放并在大部分设备上均可观看的视频,是让别人快速理解自己想法的最佳媒介。制作视频Demo,本人最常用的工具是AfterEffects。AE对于动效的控制与表现能力,至今无人能出其右,是我心目中最佳的概念图片设计工具。
除视频外,AE的另一个优势是,它输出的PNG序列帧素材可以直接应用到一些PC甚至移动端的软件中,作为实现效果。
二、操作体验:交互原型
视频Demo的局限是无法交互,而很大一部分动效都是在用户与界面交互时触发的。这部分动效的启动时机,与手势的关系,仅靠视频Demo就无法100%准确的传达了。这时,如果能有一个可交互的原型,很多问题就会迎刃而解。
对于可交互的原型(Prototype),网上已经有很多文章在讨论,制作工具也五花八门(Flash、AdobeEdge、QuartzComposer、Keynote、Framer、Pixate、Form...),我们该如何选择呢?对于这个问题,我主要看两个点:1、制作好的原型是否便于多人分享。2、是否可以直接输出可用于开发的参数。
基于这两点,我个人的第一个选择是Flash。
由于Apple的原因,Flash如今的境况可算是江河日下。但作为一个动效原型工具,它却有一些独特的优势。
优势1:可以直接导入AE生成的序列帧素材。
对于我这种以AE作为动效图片设计起始的人来说,这点太重要了。它意味着无需任何重复劳动,只需要在Flash中添加一些基于AS3.0的交互代码,就可以完成原型的制作,并保证自己最初的图片设计思路在原型阶段不打折扣的实现
|
|