html制作故宫,故宫x金山WPS：H5设计全过程

前言

跨界总会擦出创意的火花，前不久金山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)实现。

雪花动画效果

结语

在此感谢团队的高度配合，通过不断的尝试，修改，打磨，调试，虽然还是会有一些不足，但也为下一次同类项目积累了丰富的经验。

可爱的你请把可爱的我设为“星标”。