案例实战!揭秘腾讯火影游戏Html 5背后的设计故事_html/css_WEB-ITnose
转眼负责火影手游的创意设计工作一年多了,在这段时间里从《鸣人雏田婚礼》到《重返木叶村》沙盘项目,我们为火影手游尝试了很多风格的H 5和互动站,春节期间我们又尝试了一次剪纸风格的H5,来看这次实战回顾!
项目背景:
在春节来临之际,我们获悉《 火影忍者 剧场版-博人传》2.18将在中国上映,这部电影主要讲的是鸣人和他儿子博人间的父子故事。作为火影手游市场设计团队,我们觉得我们可以为《博人传》,为火影手游项目,为火影迷做点什么,给火影迷来点惊喜!用一种特别的视觉语言为火影迷传递火影中的父子情感。而此时刚好有一个火影手游的过年发红包的市场运营活动需要一个H5作为载体。于是我们决定做一个H5,而这个H5的三大设计诉求为:
01 《博人传》电影的上映—讲诉鸣人和博人的父子情(情感内容诉求)
02 春节发红包—-(功能和氛围诉求)
03 火影IP—漫画(视觉内容诉求)
创意过程:
众所周知红包(压岁钱)是至亲之间情感的一种表达方式,火影中鸣人与他父亲以及鸣人跟他儿子之间轮回的父子关系,是我们打算通过 “压岁钱”作为串联,讲述一个泛大众的父子之间的情感故事,这样更容易引起大众的共鸣,而作为80后的我们,已经有大多为人父母,这种父子的轮回关系,感受更深,所以我们确定故事的主线为:轮回的父子情
铺开我们要承载的三大元素内容,我们发现用富有年味的剪纸动画来讲诉父子情,用压岁钱作为情感的线索来搭载红 包活动是最合适的选择,而纸雕风格的H5也没有人做过。在中国过年时都有贴剪纸年画的习俗,所以剪纸类风格的设计更能体现年味,更容易营造春节的氛围。所以我们确定用春节剪纸的风格来设计一本讲述鸣人父子情感故事的漫画书。
创意执行:
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】

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
