转自H5广告资讯站
相信不少同学会觉得作品像是之前大火朋友圈的H5案例《淘宝造物节邀请函》的那支H5，形式确实类似，但项目思路和行业领域却截然不同，下面就让我们从项目需求讲起吧！
H5网站项目最初需求
日月广场是海南航空旗计划2016年末在海口市开设的大型购物、娱乐、文化的综合商务休闲中心，落成后的日月广场也将会成为海南地区最大的商业文化中心。 而对于地产行业H5产出一直低迷的现状来说，此次甲方找到我们团队来执行H5项目，也是希望能有一个较高的执行产出，能够给海口用户带来一些新颖的感受。
而甲方最初也有着明确的项目执行计划，这里面就包含了网站的形式和内容。
甲方有明确需求，这对执行团队是好事，它能规避不必要修改和反复提案，但前提是具体需求必须合理，而对于大型广场开幕性活动而言，CSS3的全景展示确实有非常大的内容优势，而且它能够用抽象的方法展示广场全貌，这点被需求方反复强调了多次。 所以，我们最终确定了执行方向。
上图为最初的项目计划，不过因为广场开业时间的调整，实际上项目执行的时间整整翻了一倍，但即使如此，一切还是在按照规划执行。 而很快，我们也得到了一个清晰的执行流程，如下图：
下面就让小呆来给大家一个个来具体讲解设计流程了！
H5项目插画阶段
插画是整个项目的第一步，也是最重要的内容，整套插画要做到对广场布局的合理抽象，要能够清楚明确的展示主要楼体信息和活动内容，而所有画面还必须能够适应手机屏幕尺寸。 因为，我们在前期插画阶段，甚至找到了日月广场的工程招标文件来作为参考。
而插画的执行也变成了整个项目最为耗时的过程，前前后后经历了大量的修改和调整，关键的步骤图如下：
在项目插画提案前，我们做出了3个版本（蓝色、绿色、红色）的底稿，而红搞最终胜出，这里有两个关键原因：
1.红色底稿符合活动调性和气氛。
2. 红色底稿符合整套日月广场VI色系，实际第二点尤为关键。
而接下来就是整套插画二级页面创作了。 在这里，我们把精力放在了对广场吉祥物的刻画上，尽可能的让吉祥物与当天的广场活动有一个紧密的关联，而下图则是广场吉祥物与相应主角的插画演示图。
这同样也不是一件轻松的工作，从上图你会发现定稿草图和最终效果有着比较大的差别，而在这个过程中，团队和甲方经历了反复的商议和协调，也因此放弃了很多较好的效果，对于一个项目而言，这也是难以避免的了。
下面就给大家展示下插画二级页面的主要内容，在H5内你是无法看清楚这些插画的细节的，希望通过图例，你让你从中找到一些可以学习的内容。
二级页面的创作方向主要与当天的活动主题有关，而具体的内容，在随后的设计篇我们会逐一讲解。
H5视觉设计阶段
设计阶段的工作相对插画来说相对要轻松一些，设计风格也在插画阶段被确定，这个阶段的关键是要页面设计和H5风格统一，避免出现内容不一致的情况。主要的设计内容如下：
二级页面设计
二级页面的设计我们最初给出了两个方向，定稿后的二级页面也经历了3次内容调整，最终的效果如下：
通过定稿的二级页面样式，整个H5一共延展出了12个二级分页面，他们都和二级插画图标联系在一起，构成了H5的主要内容信息，而下面这三支页面则属于特殊二级页面，他们陈述的信息与上面的页面内容也有所不同。
点位图设计
点位图标是引导用户点击二级页面的图标点，最初的点位图标设计的非常复杂，而在搭配主画面时，项目团队也意识到了复杂画面是不应该搭配复杂点位的。点位图标在经历了几轮修改后确定为了利用吉祥物翅膀的形式来表现：
点位图标同时被设计为闪烁效果，就是为了能够在复杂的主画面还能吸引用户的注意力，而为了区分主次，邀请函的点位图被设计成了黄色，和普通点位图标形成对比反差，而下图为最后定稿的全景点位图。
其他内容设计
这里再给大家展示下其它页面的设计稿和页面之间的交互关系，虽然整个H5的流程非常简单，但是清晰的用户操作流程还是要经历一番思考的，而该项目的主要交互方式和其它设计平面稿如下图：
讲到这里，通过上面的交互示意图，小呆也基本上把这次项目的内容设计部分给大家梳理清楚了，需要设计的页面实际还真的不少，而加上反复修改和调试的时间，设计师为项目的顺利上线加了不少班。
H5音效设计
很多项目团队在做内容报告和为H5做分析时都会忽略音乐的重要性，作为本次项目负责人，此次H5项目的音乐制作可以说是历经坎坷，整个H5虽然只需要一组背景音效，但项目对音效要求却是十分高的。
在最初过稿音乐小样时，客户选择了执行难度最为高的交响乐方向，而为了更好的表现效果，我们选择了真实器乐搭配电子器乐的混合制作方式，音乐通过录音棚前后制作了2次，而音乐小样就让我打回了不下6次，整个音乐制作过程经历了近乎10个版本的修改和调试。
音乐人遇到了自己不擅长的某些特定风格通常需要经历一个引导和沟通的过程，不过好在项目音效最终效果过关。
也因为上线时间太过于紧凑，所以，此次项目的音效部分呈现仍有一定的提升空间，但与整个网站的协调度来说，音效的表现力还是到位的。
H5网站开发设计
开发是网站实现的最后一个环节，也是最重要的一个环节，整个H5的所有内容设计都只有通过开发来实现。
而项目的H5开发主要分为三个部分：开场画面、全景3D插画、二级页面。
开场动画
在设计过程中我们意识到，因为H5主画面太过炫彩，所以、网站开场画面要保持简单和清晰，做太多炫目场景反而会影响体验和节奏，也会增加性能的损耗。
所以，设计了穿过广场LOGO和穿过开业信息的两次转场的适量动画，而开场动画元素均采用了适量图形，动画形式也采用了随机动画，你每次打开的网站动画效果都会有一定差别，所有动画内容也与H5主题相互呼应。
项目前期DEMO动画效果图
3D全景插画
3D全景插画是H5的主要展示内容，技术实现方式是CSS3 的3D变换命令，这一万花筒式的创新玩法最早由淘宝的H5作品《造物节邀请函》开始引领。 到目前为止，这类H5网站的出产量也不在少数了，该形式尤其适合大型展会类活动的推广，而技术实现的细节分析你可以参看小呆之前的H5文章《深度解密淘宝造物节H5为什么能刷爆你的朋友圈！》，你在我的网站主页就能找到这篇内容。
而下图为开发阶段网站草样演示和最后效果的演示：
（强烈吐槽微信的2MB限制！！图都看不清！）
二级页面设计
二级页面的具体设计在之前的设计部分已有一定介绍，所有二级页面的背景图形动画也同样采用随机动画。 同时，为了不让动画的图形影响到用户的内容阅读，元素的动态也被大大弱化。
下图为前期DEMO页面效果与最后网站效果的演示：
前期DEMO演示效果
最后网站上线演示效果
网站优化
网站的初始大小被控制在了2MB左右，在这里真的要给程序员点个赞！所有的机型，面对这个体量，加载几乎是毫无压力的。 而且，所有具体的画面内容并没有受到太大的损耗，所有页面的清晰度依然很高。
但安卓手机的体验和iphone要相差一大截，尤其是在开场动画的第二次转场，网站卡顿会比较明显，希望以后能在安卓上找到更好的解决方案。
最后我们还为网站的桌面端设计了一个主画面，当你使用PCMAC的浏览器访问H5网站时，画面会跳转到这幅主画面，从而规避用桌面端浏览器打开网站多BUG的情况，亲一会可以试试看。
最后的项目经验总结
虽然此次的H5项目并不是新颖的技术和表象形式，但在执行项目的过程中还是收获了很多新的项目经验。
1.任何复杂场景的H5网站在安卓系统下都会有大大小小的缺失，有些webGL的3D动画，或者较为复杂的CSS3动画都会遭遇手机观看卡顿的阻击，这也是当下视频类H5大行其道的一个原因，视频只要能播放，就能正常浏览，不管是什么设备。
2.我们发现 iphone 5s以下的苹果设备大多数已经不能够自动播放网站音乐了，为此还专门做了测试，发现以前的很多H5网站在iphone 5上已经无法自动播放音乐了，这不是H5的技术问题，而是苹果硬件的支持问题。所以，在遇到这种情况就请不要大惊小怪了，也许不是网站的BUG，而是硬件的原因。
私信“H5”，即可领取资源
制作H5过程中遇到的问题，也可以在评论区回复哦
閱讀更多 PP團 的文章
