经验分享!如何准确的向工程师传达动效设计意见

本文主要介绍经验分享！如何准确地向工程师传达动态效果设计意)，下面跟着东辰网详细了解一下吧。

@TCWison(阿里资深视觉设计):随着软件和终端的发展，动态效果在今天的作用用户体验设计变得越来越重要，越来越多的设计师试图让他们的作品动态。但是在实际工作中，相信大家经常会有这样一个疑问:如何才能将自己设计的动态效果准确的传达给工程师，避免实现中的偏差？接下来，根据我自己的经验，我我想和你谈谈这个话题。

想象一下，在一个安静的夜晚，你正在苦苦思索一个界面的转场动画，突然灵光一闪，一个完美的方案浮现在你的脑海里。我你目前最想做的恐怕不是看开发文档研究实现原理。我必须马上展示出来。

是的，我们是设计师，设计师要做的就是可视化。对于动态效果来说，凭空描述出来永远是一个抓手，设计在你心中最快的可视化是实现的开始步。

一、精准展示:视频演示视频演示是一个很好的开始。一个可以在大多数设备上反复播放和观看的视频，是其他人快速理解自己想法的最佳媒介。制作视频Demo最常用的工具是AfterEffects。AE是我心目中最好的概念设计工具，因为它能够控制和表达动态效果。

毫不夸张的说，AE通过控制速度曲线和水平，可以达到你见过的任何动态效果。

除了视频，AE的另一个优势是它输出的PNG序列帧素材可以直接应用到一些PC甚至手机软件上作为实现效果。

(AndriodL中部分控件的动画是通过程序直接播放设计好的序列帧素材实现的)

二、操作体验:交互原型视频演示的局限性在于不能交互，很大一部分动态效果是在用户与界面交互时触发的。这部分动态效果的开始时间和手势之间的关系，仅靠视频演示是无法100%准确传达的。这时候如果有一个交互的原型，很多问题就迎刃而解了。

关于交互原型，网上已经有很多文章，各种制作工具(Flash，AdobeEdge，QuartzComposer，Keynote，Framer，Pixate，Form)。应该如何选择？对于这个问题，我主要看两点:

基于这两点，我的首选是Flash。

(没错，就是AdobeFlash，一款优劣分明的软件)

因为苹果，Flash今天的情况可以统计。It这是一条正在衰落的河流。但是作为一个动态原型工具，它有一些独特的优势。

优点一:可以直接导入AE生成的序列帧素材。

这对于我这种以AE作为动态设计起步的人来说太重要了。这意味着你不不需要任何重复性的工作，只需要在Flash中添加一些基于AS3.0的交互代码，就可以完成原型，并且保证你最初的设计想在原型阶段实现。

(动作脚本是一种可视化很强的语言。结合AE素材，你设计的动态效果基本可以完美再现)

优点2:可以导出的安装包。apk或者。ipa并与任何有手机的人分享。

因为我的工作经常需要在不同的地方交流，原型的可移植性是一个关键的要求(我可以不要把我的电脑快递给别人)。Flash的打包和发布功能这时候就派上用场了。完成的原型通过AirforAndroid打包一个apk文件，邮件发送给对方s手机，轻松又过瘾。

(左边的是一个。Flash打包的apk文件，可以直接拷贝到手机上安装)

其他值得注意的工具，如Pixate和Form，可以通过共享工程文件进行远程传输，通过官方App将原型投影到手机上进行实时预览。缺点是他们只能做一些基本的效果，但他们可以t没有创新，但是他们在不断迭代更新，尤其是后者，刚刚被谷歌收购，未来可能会有快速发展。

我的第二个工具选择是FramerStudio。当我向工程师展示原型时，我经常被问到你能给我们看看源代码吗？这时候的气氛通常是尴尬的，因为无论是Flash还是Form，他们做出来的原型都只能起到示范的作用，而can不要直接生成对开发有帮助的代码。这个时候除了报班学习Android或者iOS开发还有别的方法吗？答案是:是啊！Framer工作室给了我们一丝曙光。

FramerStudio是一个纯编程的原型工具，具有很强的动态实现能力。它的语言是Coffeescript，源自Javascript。虽然语法和AndroidiOS有不小的区别，但仅就动态效果而言，很多逻辑是可以通用的。

(框架者s界面，代码区在左边，右边可以直接看到实现效果，非常方便)

当然它的学习成本会高一些，但是当你给一个工程师看一段成帧器源代码的时候，一些动画参数和实现逻辑可以给他们一些实际的帮助，所以付出和回报还是成正比的。

另外，如果你专注于iOS平台，你也可以直接尝试折纸，这是脸书团队开发的原型工具。你不不需要通过链接节点操作编写自己的代码。在其最新的更新中，它已经支持为iOS和Android导出代码。

(最新版本的Origami支持代码导出，虽然可用性还有待提高，但绝对值得持续关注)

三、辅助开发:有了参数文档的视频演示和交互原型，相信工程师们已经明白你要做什么了，那么他们能愉快地实现动态效果吗？答案是:不一定。一些简单的动态效果，有经验的工程师可能会解决。如果你的动态设计非常复杂，涉及许多参数和速度变化，那么你的描述和工程师仅凭肉眼感觉很可能会导致偏差。这时候就需要参数文档的帮助了。

(比如这个元素运动复杂的动画，即使工程师看懂了也不一定能准确实现)

想要自己的设计准确实现，就必须了解实现的原理。根据实现原理，准确写出相应的参数，就是参数文档。对于动态效果，基本参数不外乎这三类:

动画的开始时间和持续时间偏移发生变化(旋转位置比例alph)。IOS和Android的程序语法不太一样。你可以去官网看看他们的开发者文档，了解他们在动态效果实现中的大概语法格式，然后把这些参数做相应的标注，传递给工程师，让他们真正快乐的开发。

(分享一些我的Andriod文档，只要能注明开发需要的参数，格式任意)

当然，在开发的过程中，一定要和工程师不断沟通(一些细节比如像素位置，不同机型的屏幕比例，包括可能出现的)，换位思考，你可以不要把文档或者demo扔给他，自己当掌柜，这也是不负责任的。

总结:简单来说，有三个步骤可以准确传达你的设计。

开始步:快速想象。

你可以选择任何一个得心应手的工具，快速准确的提出你的想法，已经成功了一半。

第二步:最大程度还原使用场景。

如果它s在PC端，在电脑上演示。如果是移动终端，会在手机上演示。如果可行，最好做一个交互原型，当然是在时间和成本允许的情况下。

第三步:将设计参数化，尽量减少让工程师凭感觉开发的情况。

相信我，如果你不。;t希望工程师凭感觉调整UI颜色，那么动态效果也是一样的。一份准确的文件是你专业素养的体现。

最后，我想提醒你，这篇文章中提到了很多工具，工具似乎有着令人着迷的魔力。所以请注意，千万不要在追求工具的过程中。失去了设计的原点。电影《夜行者》里有句台词:如果你想赢得，你必须赚足够的钱去买。同样，我们是设计师，工程师要想做到酷炫的动态效果，你首先要酷炫的设计出来。抓住一切机会提高自己的设计能力！那个这是你最珍贵的东西。

@TCWison(阿里资深视觉设计):随着软件和终端的发展，动态效果在今天的作用用户体验设计变得越来越重要，越来越多的设计师试图让他们的作品动态。但是在实际工作中，相信大家经常会有这样一个疑问:如何才能将自己设计的动态效果准确的传达给工程师，避免实现中的偏差？接下来，根据我自己的经验，我我想和你谈谈这个话题。

想象一下，在一个安静的夜晚，你正在苦苦思索一个界面的转场动画，突然灵光一闪，一个完美的方案浮现在你的脑海里。我你目前最想做的恐怕不是看开发文档研究实现原理。我必须马上展示出来。

是的，我们是设计师，设计师要做的就是可视化。对于动态效果来说，凭空描述出来永远是一个抓手，设计在你心中最快的可视化是实现的开始步。

一、精准展示:视频演示视频演示是一个很好的开始。一个可以在大多数设备上反复播放和观看的视频，是其他人快速理解自己想法的最佳媒介。制作视频Demo最常用的工具是AfterEffects。AE是我心目中最好的概念设计工具，因为它能够控制和表达动态效果。

毫不夸张的说，AE通过控制速度曲线和水平，可以达到你见过的任何动态效果。

除了视频，AE的另一个优势是它输出的PNG序列帧素材可以直接应用到一些PC甚至手机软件上作为实现效果。

(AndriodL中部分控件的动画是通过程序直接播放设计好的序列帧素材实现的)

二、操作体验:交互原型视频演示的局限性在于不能交互，很大一部分动态效果是在用户与界面交互时触发的。这部分动态效果的开始时间和手势之间的关系，仅靠视频演示是无法100%准确传达的。这时候如果有一个交互的原型，很多问题就迎刃而解了。

关于交互原型，网上已经有很多文章，各种制作工具(Flash，AdobeEdge，QuartzComposer，Keynote，Framer，Pixate，Form)。应该如何选择？对于这个问题，我主要看两点:

原型是否便于多人分享，是否可以直接导出进行开发？基于这两点，我的首选是Flash。

(没错，就是AdobeFlash，一款优劣分明的软件)

因为苹果，Flash的处境每况愈下。但是作为一个动态原型工具，它有一些独特的优势。

优点一:可以直接导入AE生成的序列帧素材。

这对于我这种以AE作为动态设计起步的人来说太重要了。这意味着你不不需要任何重复性的工作，只需要在Flash中添加一些基于AS3.0的交互代码，就可以完成原型，并且保证你最初的设计想在原型阶段实现。

(动作脚本是一种可视化很强的语言。结合AE素材，你设计的动态效果基本可以完美再现)

优点2:可以导出的安装包。apk或者。ipa并与任何有手机的人分享。

因为我的工作经常需要在不同的地方交流，原型的可移植性是一个关键的要求(我可以不要把我的电脑快递给别人)。Flash的打包和发布功能这时候就派上用场了。完成的原型通过AirforAndroid打包一个apk文件，邮件发送给对方s手机，轻松又过瘾。

(左边的是一个。Flash打包的apk文件，可以直接拷贝到手机上安装)

其他值得注意的工具，如Pixate和Form，可以通过共享工程文件进行远程传输，通过官方App将原型投影到手机上进行实时预览。缺点是他们只能做一些基本的效果，但他们可以t没有创新，但是他们在不断迭代更新，尤其是后者，刚刚被谷歌收购，未来可能会有快速发展。

我的第二个工具选择是FramerStudio。当我向工程师展示原型时，我经常被问到你能给我们看看源代码吗？这时候的气氛通常是尴尬的，因为无论是Flash还是Form，他们做出来的原型都只能起到示范的作用，而can不要直接生成对开发有帮助的代码。这个时候除了报班学习Android或者iOS开发还有别的方法吗？答案是:是啊！Framer工作室给了我们一线曙光。

FramerStudio是一个纯编程的原型工具，具有很强的动态实现能力。它的语言是Coffeescript，源自Javascript。虽然语法和AndroidiOS有不小的区别，但仅就动态效果而言，很多逻辑是可以通用的。

(框架者s界面，代码区在左边，右边可以直接看到实现效果，非常方便)

当然，它的学习成本会更高，但是当你给一个工程师看一段成帧器源代码的时候，一些动画参数和实现逻辑可以给他们一些实际的帮助，所以付出和回报还是成正比的。

另外，如果你专注于iOS平台，也可以直接尝试折纸。这是由脸书团队开发的原型工具。通过类似于节点的操作，你不用你不需要写你自己的代码。在其最新的更新中，它支持iOS和Android的代码导出。

(最新版本的Origami支持代码导出，虽然可用性还有待提高，但绝对值得持续关注)

三、辅助开发:有了参数文档的视频演示和交互原型，相信工程师们已经明白你要做什么了，那么他们能愉快地实现动态效果吗？答案是:不一定。一些简单的动态效果，有经验的工程师可能会解决。如果你的动态设计非常复杂，涉及许多参数和速度变化，那么你的描述和工程师仅凭肉眼感觉很可能会导致偏差。这时候就需要参数文档的帮助了。

(比如这个元素运动复杂的动画，即使工程师看懂了也不一定能准确实现)

想要自己的设计准确实现，就必须了解实现的原理。根据实现原理，准确写出相应的参数，就是参数文档。对于动态效果，基本参数不外乎这三类:

动画的开始时间和持续时间偏移发生变化(旋转位置比例alph)。IOS和Android的程序语法不太一样。你可以去官网看看他们的开发者文档，了解他们在动态效果实现中的大概语法格式，然后把这些参数做相应的标注，传递给工程师，让他们真正快乐的开发。

(分享一些我的Andriod文档，只要能注明开发需要的参数，格式任意)

当然，在开发的过程中，一定要和工程师不断沟通(一些细节比如像素位置，不同机型的屏占比，包括可能出现的)，换位思考，你可以不要把文档或者demo扔给他，自己当掌柜，这也是不负责任的。

总结:简单来说，有三个步骤可以准确传达你的设计。

开始步:快速想象。

你可以选择任何一个得心应手的工具，快速准确的提出你的想法，已经成功了一半。

第二步:最大程度还原使用场景。

如果它s在PC端，在电脑上演示。如果是移动终端，会在手机上演示。如果可行，最好做一个交互原型，当然是在时间和成本允许的情况下。

第三步:将设计参数化，尽量减少让工程师凭感觉开发的情况。

相信我，如果你不。;我不希望工程师凭感觉调整用户界面，颜色，所以动态效果是一样的。一份准确的文件是你专业素养的体现。

最后，我想提醒你，这篇文章中提到了很多工具，工具似乎有着令人着迷的魔力。所以请注意，唐不要在追求工具的过程中失去设计的本源。电影《夜行者》里有句台词:如果你想赢得，你必须赚足够的钱去买。同样，我们是设计师，工程师要想做到酷炫的动态效果，你首先要酷炫的设计出来。抓住一切机会提高自己的设计能力！那个这是你最珍贵的东西。

了解更多经验分享！如何准确地向工程师传达动态效果设计意见)相关内容请关注东辰网。