案例：重庆直辖20年，“快”来围观

出品：滴滴出行

制作：蓝橙H5团队

玩法：一镜到底+测试

 

1.详情内容上：

这是滴滴出行出品的一镜到底+测试H5，旨在通过重庆市直辖20周年这一热点来宣传自身品牌。H5总共分为两部分，加载完成进入H5即开始第一部分：一镜到底长图。开篇会提示用户往左右滑动来控制长图。长图动画展示了从1997年的解放碑到2003年一棵树观景台建成，再到2014年轻轨四通八达。长图动画展现了重庆20年从直辖开始到繁华都市的历史进程，随着动画的展示，页面中间会呈现“大山大水大重庆，重情重义重庆人”的字样，最后会浮现“重庆2017.6.18，直辖20周年”的字样。

动画播放完以后就是第二部分：测试页面，画面会展示测测你是怎样的重庆人，用户点击“开始测试”需要输入自己的姓名和上传自己的照片，开始测试系统会自动生成用户是什么样的重庆人，页面下方是滴滴出行的品牌标志。

 

2.策划设计上：

H5整体策划上分为了两部分，长图动画+上传照片测试，一方面作为重庆直辖20周年的宣传H5，辉煌大气的长图动画H5极好的展现了重庆20周年的发展，另一方面的测试也给H5增添了很多的互动性和趣味性。

H5整体设计上采用了写实风格，动画采用的是重庆各个年代的实景，给H5整体上增添了真实性，最后的测试采用了诙谐的文字风格，增添了用户的代入感。

 

3.用户体验上：

H5两部分的内容，分别采用写实加文字的风格，多角度的丰富了用户的感观体验，写实的动画风格也极好的宣传了重庆城市的发展，诙谐的测试结果也使得用户体验感极佳。