最美H5 酷站欣赏 UI素材 专题 设计导航

腾讯TGideas:一个牛逼H5诞生记

【小编有话说】首先给大家隆重介绍下腾讯互动娱乐市场部的专业设计团队–TGideas,爱果果收录过好多这个团队开发的H5网站,无论从创意还是技术上他们的作品都在引领这H5发展的方向,是小编非常仰慕的一个团队。

这篇文章原标题《2015发布会回顾-品牌篇》,是腾讯2015发布会的一个预热H5从立项到创意再到开发的回顾,小编通读后发现这其实是一篇非常好的教程类文章,给那些正在摸索或者准备要做H5的小伙伴们指明了开发的路线,必须重点推荐给大家。

前方高能预警!!!

回顾2014年发布会的移动端邀请函,当时算是一款比较优秀的H5网页,在交互方式(动画、单屏滑动等)做了新的尝试,有非常好的反馈,成了后续H5学习的范例。一年过去了,H5大势流行了,各式各样,花样辈出,市场颇大。所以这一届发布会在移动端品牌建设有更大的挑战,创新突破的优良作风也继续坚持下去……OH!

这次发布会的整体包装,团队参与度也比较高,从前期策略规划的,了解目标对象,分析行业、媒体、大众人文特征及心理特征,把控发布会整体格调,预算管理……,到创意策划与执行的视觉、视频、展会体验都有深入参与。

”想象力H5“在整个发布会包装中处于线上品牌线的预热阶段,我们的目的是要做出一个符合2015年发布品牌形象的H5,提出这一届发布会的品牌概念——让想象绽放,总的来说就是要把气质搞起来。

接下来就开始进入正题了啦!

寻找想象力(头脑风暴)

我们已知的信息,2015年的slogan——让想象绽放,然后整个创意都将围绕着“想象力”开始展开联想……

发散发散,首先看看大家是怎么表现想象力的!

游戏类

1.画面、故事、互动……全方面营造展示想象力的氛围,将想象力具象,比较直白,多重刺激快速给人留下印象。例如:

-纪念碑谷——游戏体验不论从故事、画面还是互动,都充满了想象力,让人充满遐想,太爱了;

-Gorogoa——一款手工精心画出的世界悬浮的独特的益智游戏,整个游戏画面分为四大块,场景切换相当出乎意料,扑朔迷离;

-谜画之塔——解谜游戏,解救女孩Iris,游戏把具有想象力的画作通过想象力转化成场景,整个体验穿梭在城堡的画作和Iris的画作,进入华丽的想象力世界。

2.酷炫的效果,通过游戏互动让用户脑洞大开。这类想象力的表达方式要求比较高,用户对想象力理解的程度各不一样,比较难把控。例如:

.shadowmatic   .拯救基瓦努卡Kiwanuka

影视类

影视类想象力多种多样,特有的节奏感剧情感可以尝试延用来H5。例如:

.星际穿越——对未知的好奇,遐想;

.少年派——强大的故事环环相扣,充满想象、情怀。

书籍类

文字,让人更有想象力,有更多表达的手法来借鉴。像小时候学的:

1.从百草园到三味书屋——很多比喻拟人的手法,让无趣变得有趣;

2.面朝大海出暖花开——用文字营造强大的画面、诗意的氛围。

 

故事构思(梳理、联想)

表达想象力的表达多种多样,对想象力展开联想后,梳理出一个适合本次发布会的表现方式。

初步的设想,这个H5需要的三个点:

1.人物

寻找一位承载梦想的主角,理所当然的选择小孩,小孩是最富有想象力的角色。

2.核心元素

需要有一个元素,代表着整个H5的重心,引出整个故事。选用了2015UPKV的三角形元素,三角形多变比较好好应用,KV元素也呼应本届的主题。

3.故事路线

支撑所有的基础。完整的路线,让H5一环一环不会脱节。

随后,在故事中拟定几个关键情节,使故事连贯环环相扣。然后增加跌宕起伏的情绪,让体验不用那么乏味。

文案也开始从这几个关键点入手,有个雏形——

  • 引:我们的征途是星辰大海
  • 起航:置身浩瀚宇宙,欣喜仰望
  • 跌落:坠入未知山谷,汲汲前行
  • 探索:跨越袤然大海,奇幻斑斓
  • 绽放:踏上无垠旷野,躬身播种
  • 结:繁花之上再生繁花,梦境之上再现梦境

将之前的拟定的几个情节,加上人物、元素、故事梳理出完整的草图。

 

关于视觉

整体——氛围渲染

想要营造一个诗意,有情怀的氛围。从场景着手,大一些的场景大一些的大视角,例如,海、空……让人有遐想,将拟人比喻夸张的手法应用起来。

细节刻画——人物、元素配合

人物的设定用简单的色块,没有很细节的出现鼻子眼睛,有一些神秘感,让大家对人物也有一些想象。三角元素多变的配合,以不同的状态出现在几个关键情节中,引出整个故事。

完整设计稿输出

起航

跌落

探索

绽放

亮点来丰富内容,制造一些惊喜

1.适当借力,寻找共鸣

找一些经典的元素,借力。经典的元素是已经深入人心,若果能巧妙的应用过来,可以为整个H5增添很多趣味。也算是像经典致敬。借力埃舍尔的矛盾空间经典画作,把本来普通的室内场景变得奇幻有趣,让人有些想要看一看的感觉。

2.结合业务板块

-不想要生硬的将业务板块放进H5,影响整体氛围的营造。希望找一些大家能产生共鸣的元素,隐晦的体现这几大业务。

例如:电影,星际穿越里黑洞元素深入人心,电影的热度也还未过,这个元素恰好可以好好应用。

例如:文学,用已有的元素营造氛围,利用字的笔画,制造一些空间感,增添很多氛围。

3.增加互动,丰富故事

人物在山洞里行走时,整个过程显得很平静。将影子巧妙的应用起来,再加上互动,增添了的寓意(小人物也有强大内心)变得不简单。

音乐

受限于版权问题,结合项目进行配乐创作,在ios平台上的GarageBand上编制完成。整体节奏配合画面氛围,为H5增加个性。音乐部分同样分为四段,契合故事节点中的情绪,例如跌落,有空灵的音效,探索加入和声效果等等。

动画节奏

整个H5关键部分就是动画了,除了一些细节动画,整体的节奏感相当,关系着用户体验的舒适度。动画的小伙伴在整个时间的控制上也是真分夺秒,滴滴都不放过。(期待他们的详细分享)

技术

快速选择一个对应此H5项目的最优方案。

H5的动画用了大量的图片,因此文件特别大,为了保证H5有更好的体验,技术同学掏心掏肺日日夜夜的打磨!(期待他们的详细分享)

总结

1.数据上来看,有了比较好的反馈。

PC端、移动端的配合。PC端任然是一个不容忽视的力量,可以巧妙应用起来,做出一些新颖的、奇奇怪怪的东西,帮助移动端导流,提升曝光数据。

2.不断尝试新鲜

-人们都有一颗好奇心,新鲜的玩意儿总是遭人喜欢,会让人多留意几眼

3.小伙伴们相互配合

-将自己擅长的部分发挥到项目里,兴趣十足,参与感十足。

-小伙伴们的力量是强大的后盾。以往技术往往是限制H5发挥的痛处,反而这一次这个项目在前期没有太考虑技术问题,在后阶段都处于未知状态,但是结果H5的还原程度都很好。

快扫码看看成果!

最后奉上TGideas的官网:http://tgideas.qq.com/

作者:猴哥
原文:《2015发布会回顾-品牌篇》