视效工程师如何准确的向工程师传达动效设计如何准确的向工程师传达动效设计
三联随着软件与终端的进展,如今的用户体验设计中动效的作用正变得越发重要,也有越来越多的设计师开始尝试让自己的作品“动”起来
但在实际工作中,信任大家常会有这样的疑问:怎样才能将自己精心设计的动态效果,准确的传达给工程师,避开实现的偏差呢下面我想根据自己的经验,抛砖引玉,和大家聊一下这个话题
试想一下,在一个沉静的的夜晚,你正为一个界面的过渡动画而苦思冥想,突然一道灵感之光穿越你的脑海,完美的方案出现眼前
此刻你最想做的,恐怕不是翻阅开发文档讨论实现原理,“老子得立即把它表现出来
”没错,我们是设计师,设计师要做的是可视化
对于动效来说,凭空描述永远是隔靴搔痒,将自己心中的设计最快速的可视化,是实现的第一步
一、准确展示:视频 Demo视频 Demo 是个不错的开始,一段可以反复播放并在大部分设备上均可观看的视频,是让别人快速理解自己想法的最佳媒介
制作视频 Demo,本人最常用的工具是 AfterEffect
AE 对于动效的控制与表现能力,至今无人能出其右,是我心目中最佳的概念设计工具
除视频外,AE 的另一个优势是,它输出的 PNG 序列帧素材可以直接应用到一些 PC 甚至移动端的软件中,作为实现效果
二、操作体验:交互原型视频 Demo 的局限是无法交互,而很大一部分动效都是在用户与界面交互时触发的
这部分动效的启动时机,与手势的关系,仅靠视频 Demo就无法 100%准确的传达了
这时,假如能有一个可交互的原型,很多问题就会迎刃而解
基于这两点,我个人的第一个选择是 Flah
由于 Apple 的原因,Flah 如今的境况可算是江河日下
但作为一个动效原型工具,它却有一些独特的优势
优势 1:可以直接导入 AE 生成的序列帧素材
对于我这种以 AE 作为动效设计起始的人来说,这点太重要了