文/Miss Jojo

曾经只想安安静静的做APP，怎敢想有天会做一整个系统，我们不是安卓，是自己独立开发的移动OS。如今，元心OS已经发布至2.0，回想这三年PIAPIA走在系统动态设计这条大路上，我骄傲！在这条路上，我们遇到过很多问题，攻克过很多难关，我们深度贯穿到全部环节中，从构思，设计，制作，输出，与各接口人高度配合精准沟通，调试，最终才在真机上完美呈现。既然前期所有工作都是为了至关重要最终真机还原服务，而动态设计又是个看得见摸得着但说不清的东西，偏偏设计师和开发工程师之间又似乎隔着高山大海，那么问题来了，究竟该如何把电脑中完美的设计原封不动的还原在真机上呢？怎么做可以精准无误的把设计移交给开发工程师并且让他真的懂我们呢？这是个问题…接下来，就让我们聊聊吧。

特别特别重要的前期沟通

咳咳咳…其实如果做应用，你会省略掉很多厂商代理商的中间环节…-_-|||…

第三方应用的动态设计，大部分都能调用IOS和安卓的系统动画控件，帧频和触控都有规范约束，最终效果相对协调统一，只需要做差异化的动画设计就好，所以沟通成本相对不高，但做整个系统动态的设计，从手势触控，到开关按钮全部需要自己亲手开垦，一切都是0，没有一个统一的标准和共识，所以前期沟通是重中之重。动态设计师在开始设计之前一定要与开发工程师充分的沟通，涵盖方面包括开发的平台、开发工程师的开发水平、硬件的性能、还有对帧频进行了解和测试。

动态设计师一般运用的工具是AE和FLASH，设计前先要让开发了解我们有可能会设计哪些动态，一般来说，位移，缩放这些很常见，所有的开发都可以实现，当涉及到蒙版、形变、粒子扩散等效果时，一定先确认开发的平台、开发者的能力，以及硬件配置是否能支持这些动效，这三者缺一不可，所以说，充分全面的前期沟通可以帮助动态设计师把很多美好的幻想扼杀在萌芽里，尽快去构思其他接地气儿的设计，真真是提高效率的极好方法！啊哈哈哈哈(￢_￢)

记得那是2003年的第一场雪…咳咳咳， 恩，记得OS1.0的时候，想在挚爱的圣诞节推出一款桌面天气主题，壁纸会下雪，ICON上会积雪，当点击ICON进入应用的瞬间积雪飞散，被创意帅到立刻不吃不睡，以赶飞机的节奏实现设计稿傲娇的去找开发，结果被告知目前的系统暂时无法使用粒子特效做雪花飞散的动画…于是我的心就飞散了…

另外，着手设计前要对帧频进行同步测试，保证设计师心里有数，比如，你在flash中设计的动态是60帧/秒的完美流畅，到真机中只能实现30帧/秒，那效果一定是…

这个时候整体调整成本是很高的，所以最好在设计开始前测试好，让电脑和真机上帧速基本统一，接下来才能更好的还原设计。

先进行设计草稿或分节动态的确认

动态设计师在灵感来的时候天马行空，拦都拦不住。往往喜欢一气呵成拿出一份炫丽的设计稿闪瞎众人眼，可这时候如果开发温柔的对你说“亲，实现不了哦”真的瞬间跌入地狱，所以建议在动态有一个最简易设计草稿时，就给开发看一下，因为前期的语言描述相当有限，有了设计稿才会直观，沟通的时候动态设计师可以变本加厉，多问问开发同学，如果这样可以实现，我是不是还可以那样？我是不是还可以那样那样？多一些可能性抛给开发，以便于我们在设计上更好的发挥，也有助开发同学到达一个动态设计的癫疯！sorry是巅峰！

这是OS1.0的锁屏音乐播放动态，只是其中一部分，我当时是连贯完成了整个设计才给开发看，沟通后发现进度条气泡动画和音轨遮罩专辑封面动画都无法完美的实现，所以只能换其他思路重新设计，一份血泪史送给你们~

吃一堑长一智，在设计锁屏充电的动态时，每做一个细节的动画，我都会先给开发确认，如果可以实现再继续延续思路，或者不能完全实现可以怎样补救，所以基本上最终实现的与设计稿差距不太大，见下图，无非是波浪没有浪起来而已╮(╯▽╰)╭

关于设计稿的输出和标注

开发工程师在实现设计时，最希望的就是动态设计师时刻在旁边，随时精准报备出每一个元素的尺寸，坐标，运动轨迹，时长等等，所以我们需要尽可能详细全面的标注，我的方法是：


1.将动态设计稿输出成视频格式，这样方便开发快进快退，反复观察动态效果。

2. 尽可能的将动态截取成最细致的步骤，最好是一个动态设计一份输出物，当然，也要有一个高清无码未删减的完整版。

3. 将动态设计稿输出成静帧序列图，这样更加直观，开发可以根据心情走走停停~下图是告诉你，一个ICON是怎么没滴~

4. 尽可能详尽的标注，每一个元素的尺寸、坐标、运动轨迹、时长，运动曲线，包括元素间的动画关系、层级等等，就是要把眼睛看到的，看不到的，在动画发生的一切事情，用数据表达出来，这样一般不会出错，可以最大限度的还原动态设计。

5. 面对面把输出物，动画分镜和逻辑给开发详细讲一遍，记得讲完要他重复给你听~这样开发明白了动画原理，感知到你的设计风格，说不定会感动，说不定会带着情怀用生命帮你还原设计✧(≖ ◡ ≖✿)

另外建议设计师经常去找开发同学聊聊天，问问他们在开发过程中有什么问题没，有一次，我无意经过研发区，随口问了公用控件同学一句，动态实现有没有什么问题，他想了半天给我看他实现的效果，说总觉得哪里怪怪的，我一看便发现他忘记加曲线，他立刻恍然大悟说，“早知道早问你了，我调了一个星期…”开发工程师和设计师的思维模式不一样，他们很可爱，有时候只知道闷头敲代码却不知道问你一句，其实很可能你的一句话他们就明白怎么实现了，所以，还是要多点关怀多点爱/(￣∀￣)/

开发初步实现后先与动态设计师沟通确认

和动态设计师完成初稿就先跟开发确认一样，建议开发初步实现一点草稿就积极与动态设计师确认沟通，以免徒劳，及时良好的沟通是高效开发的保障。另外，动态设计师要有良好的记录习惯，对每次沟通的动态和参数做详细记录，一旦到了开发阶段，能控制设计的不再是鼠标，而是参数。

实现还原后动态设计师要与开发一起调试

无论前期的沟通和标注多到位，最后实现的效果可能还是和最初设计有细微出入，动态设计是产品体验好坏的重中之重，我们还是需要在细节上不断调整和优化，在真机上成功与否，未必是你的动效够不够漂亮，有时仅仅是触控时慢了50毫秒就显得这个动态很拖拉，又或者是硬件配置以及系统渲染能力没有与动态完美结合，也会显得系统卡顿。此时，用户在吼：你可真墨迹！动态在哭：我是多余滴！所以一旦可以在真机上DEMO，动态设计师必须在真机上反复操作，体验动效，从动效本身、硬件适配、系统渲染能力等多方面检测是否存在细微的不流畅，与开发一起不断调试，用专业的敏感度去判断全面调优，最好的效果是不但将动态还原实现在真机，并且加上触控后，用起来远比电脑更舒服流畅。一旦找到最适合的参数立刻定版提交，不要再做任何修改，调试之前一定要提醒开发同学做好备份。

最后还有几句四字真言送给你们：不轻易放弃-_-|||，旁门左道，绞尽脑汁，移花接木，以假乱真。

（一份移花接木的动画切图）

曾经系统中需要一个LOGO的启动动画，我做出设计稿给开发看，一开始，他是拒绝的，说“不能你让我开发，我就马上开发，你这个效果是需要用滤镜的，目前无法实现加滤镜的3D光影动画，”而我也不甘心放弃，思前想后决定用笨方法，把光影和图片全部分层截取出来，尽可能用渐变和透明度生成接近滤镜呈现的效果以假乱真，最终给到开发简单的动画方式和白痴一样的切图，我说，“你看，我后来改了设计手法，没有那些乱七八糟的3D和滤镜，我这个切图就是图片，颜色就是色值，动画就是位移，我现在设计出来就是这个样子，那将来你实现也是这个样子，”最后，动画就DUANG一下实现了~

其实设计师和开发工程师之间并没有隔着高山与海洋，我们可以多了解他们的编程原理，有时我们拿出一个动态设计他们无法实现，先别着急放弃，多沟通问问他们的实现方法，很多次在沟通之后，了解了他们的编译方法，我会想到变通的方式，曲线救国。以自己的理解，去给他们提建议和方案，或改变我们的动画设计手法，但最终呈现的效果还是最初的设计，皆大欢喜。

关于和开发工程师高效协作，还原动态设计，目前想到的就是这些，我很明白动态设计师心里的苦，经常有好的想法，设计出来开发却实现不了，没关系，我们可以珍藏好设计稿，现在实现不了说不定以后就实现了呢，就算永远无法在手机上实现，至少也在电脑上实现了，能证明了自己，也是极好滴，最后，愿你们此生所有设计都美美滴还原在真机┏(＾0＾)┛