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

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:55 AM

转眼负责火影手游的创意设计工作一年多了，在这段时间里从《鸣人雏田婚礼》到《重返木叶村》沙盘项目，我们为火影手游尝试了很多风格的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】

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

See all articles