前言
跨界总会擦出创意的火花，前不久金山WPS和故宫合作的创意H5上线，得到不错的反馈，在此分享一些幕后制作过程，希望对大家有所帮助:)
长按扫码体验H5
项目背景
往小的说，这次H5是为了推进与故宫的合作，往大的说，是在建国70周年这个大氛围下，为中华文化传承出一份薄力（严肃脸）。
整个H5的幕后设计制作只有3人，断断续续耗时两个多月。由于这个H5是我们设计创意组自发推动的项目，有较多的设计资源，但开发资源紧缺，于是在前期策划时便决定以视频为主，减少交互的内容，降低开发成本。
创意：Su 、 Queenly 、 Pencent 、 草帽Robert
总监：Paticboy
项目组长：草帽Robert
插画：Queenly 、 Zou
动画：Su
音乐音效：Queenly
故宫文物南迁场景图
前期创意
项目开始前建议建立一个表格，记录项目的进度，多人协作起来更方便，有兴趣的同学可以前往链接：金山文档
项目进度表
1.头脑风暴
项目立项后，便开始前期的创意。定好两个方向（WPS&故宫），随后开始发散一些关键词，请尽情的放大脑洞。
关键词
有了更细的方向之后，便可以寻找他们可以交集的地方。故宫文物南迁是个历史，而WPS Office是多文档处理，两者相结合便有了故宫文物南迁历史的WPS文档。
品牌交集
2.创意阐述
WPS打开了一篇故宫文物南迁的历史资料文档，镜头冲进文章，穿越到当时的历史，文物因战争不得不南迁，随后故宫博物院制定计划，护送文物迁移，一路上经过火灾，土匪，风雨，船难，日军炮火轰炸，辗转万里，二十五年后终回故宫。结尾定格到故宫分享页面，并设有排名。
剧情路线
随后会对整个H5会进行一个策划评估，可以从六个维度去分析，如下图。这次H5更多是偏向于与用户产生情感共鸣。
策划评估
3.故事板
创意想法确定后，便开始草图的绘制，先是寻找当年的历史图片素材，考虑每个镜头的衔接转场，保证画面内容的连贯性， 让大家更清晰了解整个H5的动画流程。
分镜头草稿
4.沟通会议
每周我们会进行定期的沟通会议，可以让大家更好的把控整个项目的进度，也可以更好的保持插画和动画之间的沟通协作。
沟通会议
5.流程图
绘制开发需要的交互流程图，以方便他们构建框架。如下图：
交互流程图
视觉设定
1.视觉风格的探索
分镜草图确认后就正式开始视觉部分的工作，我们会着手找一些参考图，尝试多种画面风格的表现形式，选择最符合本次题材内容的风格。
视觉风格探索
2.参考图片
前期找了很多历史照片及影视作品的截图，题材尽量贴近当年的物品特征，记录历史的痕迹，勾起对历史的固有情怀。
视觉风格探索
3.最终视觉稿
最终选择复古灰色调绘制其他分镜，画面上增加了较多的噪点，更加怀旧有年代代入感。关于原画的分工和合作的问题，时间紧任务重，未经一定时间的磨合是很难做到完全统一，所以我们统一了笔刷及色值，最后再以主笔插画师负责细节的调整。
最终视觉稿
4.细节处理
期间也会有各种调整，比如画面没有突出战争氛围，于是前景及后景做了调整，加入石头，铁丝木桩，炸破的房屋来凸显战火连连。
战争场景氛围
前期草图没有展示更多火车的角度，把平视改成俯视角度。由于动效实现的限制，最后改变了透视角度。
物体透视问题
为了让画面更好的贴合年代背景，找了很多当年的车，飞机等相关物品的照片来参考绘制，并加入细节，使画面更有代入感。
飞机真实性
动画制作
为了后期更好的制作动画，前期准备插画素材时需要注意两点：一是画面中的物体要分层；二是物体被遮挡的部分也要画出。一般来说注意这两点就能满足大部分动画制作的需要，但是为了达到更好的效果，制作过程中往往还需做更多的工作。
1.规范图层
将图层按物体空间位置分为近、前、中、后、远五级。制作动画时参考这五级距离标示控制物体的移动速度，一般距离越近的物体移动越快。以如下分镜为例：
场景插画图层分层
2.将物体补充完整
根据动画需要，将某些物体补充完整。结合上面说的“距离越近移动越快”，如下面的石头因为距离我们很近所以有较快的移动速度，于是将其补充成完整的石头，做一个横跨屏幕的平移动画。
补充图形元素
汽车动画效果
3.调整图形
根据动画需要调整物体形态，如火车镜头，为了做出火车行驶画面，由透视图改为轴测图。
火车轴测图
火车动画效果
4.分割组合物体
为了增加更多动画细节，需要对部分物体进行再次分割。
汽车分解图形
人物分解图形
5.特效
云、雾、雪、烟、雨这些效果是由粒子插件（Particular）实现，雪崩效果是用物理插件（Newton）实现。
雪花动画效果
结语
在此感谢团队的高度配合，通过不断的尝试，修改，打磨，调试，虽然还是会有一些不足，但也为下一次同类项目积累了丰富的经验。
本篇文章来源于微信公众号: MU设计团队
