设计师揭秘!超火的故宫HTML 5背后的设计故事 - 优设网 - UISDC

设计师揭秘!超火的故宫HTML 5背后的设计故事

2016/07/20 15471评论区

forbidden-city-html5-design-story-1

猴哥:未来什么样的内容才可以脱颖而出?如何结合更多方式打破用户的固定思维,超出用户预期?今天腾讯游戏的设计师现身说法,以最近超火的故宫H5作为实战案例,和同学们分享背后的设计思考。

hb20160721

恩。小伙伴们都体验过了吗?献上二维码一只,没体验的小伙伴赶快体验一发吧!

asui2016072124

起初集团市场部联系到LAVA,经过初步沟通我们了解NEXT IDEA 和故宫将展开长期合作,故宫博物院将开放一系列经典IP,与“NEXT IDEA腾讯创新大赛”的两项赛事“表情设计”和“游戏创意”展开合作。除此之外,我们还将联手故宫,把“腾讯NEXT IDEA ×故宫”项目的案例成果开发成对全社会开放的系列分享课程,形成再一次更大范围的文化辐射,推动青年人与传统文化的深度交流。

目前的需求是即将有一场发布会,希望能通过一个创意素材作为切入点引起当下年轻朋友的关注,吸引更多有创意想法的人才加入到这次活动中来,从故宫的角度也希望能更开放的让年轻人了解故宫的文化、故事。两个强大IP的碰撞,激情四射,有很多可以挖掘、发挥的点。

创意构想

故宫是一个世界级的超级IP,这几年的变化很大,周边创意产品,借助移动互联网,故宫已经迅速地吸引了新一代的年轻粉丝。这次与NEXTIDAE的合作还能碰出怎样的火花呢?

回到项目中来看,“故宫”给我们的第一映像大多是一座大宫殿,一个文化宝藏,庄严绚丽,气质高雅,这似乎与平常的我们有些些距离感。这一印象与我们NEXTIDAE一直以来倡导创意、无边界……的理念,有些不同!所以整个项目我们需要解决的问题就是这个“距离感”,甚至是让故宫变得好像你身边的某个朋友一样,有些搞笑、欠扁,又难以割舍!爱不释手!这个差距似乎也是创意的一个突破口,是nextidea与故宫碰撞出火花的一个点。

没错,概念就是这么滴严肃,但是我们的表现手法可以千奇百遍!于是乎打开脑门子放脑子,当下的故宫应该是怎么样的呢!

方案思路

“嘿!那个故宫小伙子,注意看镜头”(想创意的时候没有时间想那么好的标题,随便YY)

从某种情况来说,故宫不是静止的,他是有生命的,他在不同的时代下扮演着不同角色,在不同人心中扮演着不同角色。像是整个历史的主角笼罩着主角光环,屹立不倒,又像是配角,在我们的故事中充当着最伟岸的背景……其实故宫这个人的生活琐事一直都在我们周围,当下他又扮演一个怎么样的角色呢?

说要把故宫拟人化,应该不会是想要这样吧?

asui2016072125

当然不是,故宫这么强大的IP,有茫茫多的元素可以应用,应该不需要局限在故宫这个“宫”上,可以聚焦在故宫这个宫里那些人与事身上,是他们让“故宫”有了个性。

A、初期想法:

1.用历史里和当下不同的信息载体,来承载这个故事,例如:以前的壁、书、画、和现在手机电脑里的各个平台,以及VR……一切你可以想到的)

asui2016072126

2.借助一些大家熟悉的宫廷故事,是方案变得有趣,例如,步步惊心,还珠格格……

asui2016072127

B、方案优化:

NEXTIDEA与故宫的碰撞,有哪些点可以碰撞呢?如何碰撞?先寻找一些代表性元素。

传统的:大家关注故宫点可能都不一样,有的人觉得故宫的历史书,有的人喜欢故宫里的人物故事,有的人喜欢故宫的古董字画……都是一些可以采用的元素。

asui2016072128

现代的:找一些最近大家关注的点像高科技VR,与传统有强烈的反差感。还有当下大家的一些行为习惯,想朋友圈自拍点赞,人人都是低头族。并且结合融入我们业务,和我们这次活动的内容。

asui2016072129

然后我们如何将传统与现代结合起来,让他们碰撞出强烈的火花。想要获得大家的亲睐,还是要从大家的喜好入手。

有很多网民,将传统艺术作品进行二次创作。

asui2016072130

这种戏剧感,似乎是用户care的某个点。这样新与旧的碰撞,撞出的火花,产生的效果,正是我们这次NEXTIDEA与故宫合作想要表达的那个点。

(初步的一些方向性想法不要太care历史细节)

对于初步的创意提案,我们与集团市场部的同学达成共识,在多个方案中这一方案比较成熟,与这次NEXT IDEA x故宫要表达的一些概念比较准确,方案比较成熟,可优化深入。

方案成型后,内部多媒体团队正处于需求爆发期,我们联络到合作伙伴青木团队,来一起完成最后的落地,虽只用了4周时间,但过程的不断尝试,大家都非常投入期间。

大致制作过程

第一周:落地创意草图,完善故事细节,并结合此次合作的公司内业务。

asui2016072131

将古代场景和现代可以结合,古代人物在干我们都在干的事,用不不同信息载体来联通画面,这个方案比最初的想法比较复合,新旧元素相互融入,相互碰撞的比较到位。

第二周:设计落地。整体的风格是在已有的素材上,进行二次设计。具体到画面细节的调整,一些脸部魔性表情,并且统一这些古代作品的色调。

asui2016072132

第三周:动画节奏的把控。除了整体的控制,还有很多细节上处理。其中最重要的一块儿是皇帝,皇帝的动作、面部表情,需要配合节奏,进行了多次调整,让皇帝更生动。

第四周:优化音乐,配合画面。音乐进行多次优化,最终效果理想。并且调整画面节奏配上音乐,把整体氛围烘托出来。不得不说音乐的创作为H5加了很多分。

数据表现

截至7月7日,总访问量已突破300W,点击报名转化率18.9%,平均播放时长:57秒

总结

未来什么样的内容才可以脱颖而出?结合更多方式打破用户的固定思维,超出用户预期才会带来主动传播,当然这一切不能偏离产品本身的传播核心及目标。

A:设计稿去哪儿了?

TG:怕文章太长观众老爷们又不想看了,扫下二维码自己嗨!

asui2016072133

「人气过万的优秀实战案例教程」

大众点评:《大众点评智慧餐厅LOGO设计全过程总结》

红包预热HTML 5:《聊聊刷一刷红包预热HTML 5背后的设计过程》

火影游戏HTML 5:《揭秘腾讯火影游戏HTML 5背后的设计故事》

原文地址:tgideas.qq

yestone-uisdc-2

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

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/forbidden-city-html5-design-story

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 设计师干货 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 设计规范 海报设计 用户体验设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里