案例实战！揭秘腾讯火影游戏Html 5背后的设计故事

转眼负责火影手游的创意设计工作一年多了，在这段时间里从《鸣人雏田婚礼》到《重返木叶村》沙盘项目，我们为火影手游尝试了很多风格的H 5和互动站，春节期间我们又尝试了一次剪纸风格的H5，来看这次实战回顾！

项目背景：

在春节来临之际，我们获悉《火影忍者剧场版-博人传》2.18将在中国上映，这部电影主要讲的是鸣人和他儿子博人间的父子故事。作为火影手游市场设计团队，我们觉得我们可以为《博人传》，为火影手游项目，为火影迷做点什么，给火影迷来点惊喜！用一种特别的视觉语言为火影迷传递火影中的父子情感。而此时刚好有一个火影手游的过年发红包的市场运营活动需要一个H5作为载体。于是我们决定做一个H5，而这个H5的三大设计诉求为：

01 《博人传》电影的上映---讲诉鸣人和博人的父子情（情感内容诉求）

02 春节发红包----（功能和氛围诉求）

03 火影IP---漫画（视觉内容诉求)

创意过程：

众所周知红包（压岁钱）是至亲之间情感的一种表达方式，火影中鸣人与他父亲以及鸣人跟他儿子之间轮回的父子关系，是我们打算通过 “压岁钱”作为串联，讲述一个泛大众的父子之间的情感故事，这样更容易引起大众的共鸣，而作为80后的我们，已经有大多为人父母，这种父子的轮回关系，感受更深，所以我们确定故事的主线为：轮回的父子情

铺开我们要承载的三大元素内容，我们发现用富有年味的剪纸动画来讲诉父子情，用压岁钱作为情感的线索来搭载红 包活动是最合适的选择，而纸雕风格的H５也没有人做过。在中国过年时都有贴剪纸年画的习俗，所以剪纸类风格的设计更能体现年味，更容易营造春节的氛围。所以我们确定用春节剪纸的风格来设计一本讲述鸣人父子情感故事的漫画书。

创意执行：

01 文案和脚本

总共设定了五个场景。每一个场景的角色，场景元素都有详细的设定。（下图是部分脚本图示）

02 创意视效和风格的执行

我们最初的构想是一幅幅的翻页H5，单张光效就像纸雕灯箱一样的画面效果,加上一些微动画。就像纸雕艺术家 Nair &Hari夫妇做的纸雕作品一样，通多层次手工剪纸雕塑，分层组装在盒子里，从后面或下方用LED照明，呈显具有3维立体感觉的光影投射效果。我们想在这基础上，实拍后做成H5，可以利用手机陀螺仪，手持手机晃动产生微视差的即视3维效果，加上一些场景微动画。但这种方式的视觉体验并不流畅、也不新颖、执行成本也略高，而且春节倒计时中时间不够了。

所以我们想到了一种更好的方式，做一个电动转动盘， 插上纸雕片，利用灯光，圆盘的转动形成虚实的光影动态效果。有点皮影的感觉，又有点西洋镜的效果，这样能更好的契合主题年轮的概念，也很好地解决了H5动态转场的问题。构想示意图如下：

03 拍摄与后期

庆幸TGIDEAS有自己专业的摄影棚，我们在摄影棚一呆了就是一整天，经过三天苦战终于完成了拍摄工作。中间碰到了许多问题，通过反复地组装调试，尝试纸片间疏密带来的视觉效果，灯光和镜头的调试，尝试制造人工实拍飘雪，金粉飘落的效果，以求达到最佳的真实光影效果！

最终H5的呈现

此外我们还用这些素材设计制作了火影纸雕红包！

项目小结：

经过重重困难和挑战，不断的优化，项目终于在年前顺利上线，期间积累了一点H5项目小经验，跟大家分享下。

1、要有爱

整个项目做下来，心情是无比愉快的，满怀着我们对火影的爱。如果你要做一个创意H 5，首先要感动参与项目的所有人，让团队成员都觉得这是个好玩的项目，都愿意为之付出全部的激情和爱心来工作。

2、要玩点与众不同

最近我们被各种风格的H5洗脑无数遍，H5的风格越来越丰富，一夜间，插画师、漫画师也好像找到了新的生存空间，我们设计师也都在寻找与众不同的视觉设计语言来表达自己的创意。要想有丰富的创意表达语言，需要多去涉及一些非自己专业的领域，这个世界很大，艺术的表达方式也是多种多样的，做为设计师应该多出去走走，多看看，多去了解一些传统艺术，传统手工技艺，这样会增加我们对创意的表达能力，对不同的创意主题能找到合适的视觉艺术的表达语言。

3、要主动

这个项目是我们主动发起和推动的一个有趣的项目，建议设计师有了好想法要及时主动提案并推动项目。

【走在时代前列的腾讯HTML 5精品好文】

DNF实战总结好文！
《腾讯游戏实战！DNF浴火新生HTML5项目总结》

优化HMTL 5页面的6个技巧！
《腾讯精品文！六大奇招带你优化HTML5移动页面》

HTML5 页面设计实战总结！
《春雨先知！腾讯移动端HTML5页面设计实战分享》

原文地址：tgideas.qq

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量104万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com