header_v0.7.2

UP2017线上视觉包装(粒子预热站篇)

85天前发布

原创文章 / 平面 / 教程
腾讯游戏TGideas 原创,如需商业用途或转载请与腾讯游戏TGideas联系,谢谢配合。

和往常一样2017年UP线上主要有三大内容组成,这些内容按照时间轴排布分为:前期预热站、正式的官网(直播互动)、互动类传播H5。

腾讯互娱年度发布会,自2012年开始打造“UP”主题已成为这一活动乃至腾讯互娱的重要品牌标签,发布会上提出的“泛娱乐”战略也已获得行业的认可与跟随,成为公认的互联网八大趋势之一,奠定了腾讯互娱在行业的引领地位。

 

5f7d590ad2dda80121455042b5dc.jpg


每年的UP除了对行业发声,我们也希望可以对玩家用户发声,甚至希望我们之间可以互相影响互动,让每位玩家用户对UP有所了解也是线上内容所需要做的,和往常一样2017年的UP在线上主要也是有三大内容组成,这些内容按照时间轴排布分为:前期预热站、正式的官网(直播互动)、互动类传播H5,除了更好把UP2017的主题传达给每个用户,如何在以往的形式上有所突破也成了这次UP所面临的挑战!


话不多讲先用一张图让大家了解一下线上的视觉包装的内容


f732590adbeaa8012145504bb161.jpg

f962590adbf7a801214550eb4890.jpg

6b7b590adc05a801214550df65e7.jpg

ded8590adc1aa80121455020f6fe.jpg




预热站:耐心是以梦为马的探索


腾讯互娱年度发布会UP2017的主题为“奇点• 共生” 以空间形态展示个体存在,是奇点也是起点,解读主题海报和表达的内容即是预热站的重要功课,网页的形态长期以来已经从单一的内容+图片演化为动态演绎+音频,在结合UP2017的主题画面动态演绎无疑是我们首选之一,但如果以视频形式那即丢失了和用户互动,不用视频又达不到视频所呈现的视觉效果,如今新的浏览器内核的更新迭代,让网页形式有更多空间去探索,WebGL技术让我们看到动态和交互体验的良好结合,团队对这个技术也是刚接触不久,如何快速的掌握并运用给重构同学带来不少压力,作为视觉如何配合好技术呈现显得尤为重要。


一起看下整体展示效果:


 

让奇点从LOADING开始

 

da66590ad987a801214550d41528.jpg


让今年的UP网站能动起来有区别于以往的形态一直是比较明确的方向,在设计网站图形时,第一想到就是三角形线条的运用,三角形作为UP的主要图形元素,当三角图形内旋转运动起来起来时,一个动态的图形就出现了,也呼应了奇点的海报图形,因此这个图形也成了今年UP右上角的主题图形。

 

e5c6590ad9b0a801214550896202.jpg

为了让预热站在节奏和代入感上更抓人,我们按照业务模块的内容流程拟定了预热站的故事板,按照相应的内容整理了每个模块的文案内容,两套文案:一套走的是概念阐述,一套则是走情怀表达。


7553590ad9f4a8012145503f9a0a.jpg

 

对于图形的纠结,其实也是从两套方案中抉择的,本次UP的主图元素走的就是概念化的路线,对于业务模块,如果走这样的概念化路线也是合情合理,但最终结合到已经拟定的文案,担心这样的图形不能配合文案更好去理解,所以配合文案内容快速拟定了几组图形,我们希望大家看到由粒子聚合的图形搭配上这样的文案,可以很自然的理解到我们的四大业务。

 

192b590ada1da8012145500e8794.jpg


在图形建模初期,由于并不了解three.js库对3D图形解析的方式,常规的3D模型在生成粒子后图像相对比较密集,尤其一些细节较多的3D模型,出现大量的聚集点,造成整个图形点分布不均衡,因为我们的3D模型其实并不需要很细节的内容,尤其一些形状和形状叠加的部分和模型内部结构,WebGL所识别的3D图形只是外部的轮廓线条,图形的分段交接点即是一个粒子颗粒,懂得3D的同学都知道分段越多呈现的图形越饱满细腻,在这里并不是越多越好,因此建模的要点就是将模型的分段调整的相对均匀,这样最终生成的3D图形颗粒分布就会比较均衡。


94ed590ada3ba8012145501f9600.jpg 


左图书本分段相比比较密集  呈现图形效果并不好 减少分段后,我们得到了一个既有轮廓颗粒也分布均衡的书本形态。

 

4b6c590ada6ca801214550ba3f0c.jpg

模块切换与弹窗


 7a2d590ada9ba80121455062e5f0.jpg

落版主题画面


预热站的小彩蛋 粒子二维码

 

be69590adad9a801214550ce4d0b.jpg


预热站承载着前期发布会开启告知和预约的重要功能,在搭建好预热站所需的内容图形后,为了让大家不只是上来看看也能玩起来,我们在预热站做了互动H5的入口,起初只是想加个二维码图片,但总感觉这样的形式并不好,于是我们考虑把二维码也建模,让他成为第六个粒子组合图形,有了之前建模的经验自然一个平面二维码图形也不是什么难事! 世事难料,我们费心完成的3D二维码居然不能扫!这是什么原因?


2ea7590adaf5a80121455038a662.jpg

其实这里面涉及到一个二维码识别尝试,通常生成二维码之后我们都会提取他的图形轮廓来使用,但用在黑暗环境这种反白的图形就不能被识别了,原因是二维码只能识别深色线条,因此在深色背景使用二维码时提取的图形是外形轮廓。


9ff1590adb15a801214550e21ee5.jpg

 

在建模阶段又遇到了图形粒子分部不均匀的问题,前面讲到解析粒子的点是3D图形里分段的交接点,但如果用面去建立二维码会形成很多点,因此我们只能用点直接来代替二维码图形的面,为了更好的理解二维码面的关系,这里使用50px的二维码作为基础图形,而我们将它放大到3200%,二维码图形在ps的CC版本里自然被图形网格化,按照网格化的图形去建面更好理解,最后将方块的四个点合并为一个点,这样在读取顶点信息的时候就可以按照我们预设好的方式去呈现了。


打通双端的任督二脉

 

 

移动端H5


在这个看移动端的时代,如果你说你的网站不支持移动端,你都不好意思把网址发给别人,没错,此刻WebGL强大的技术再次体现出来,得力于如今大家手机越来越贵也越来越好,我们把移动端做了适配,阉割了很多内容和功能点,但在一些低端手机上看起来会卡卡的,为了减少这种卡顿,减少了很多颗粒运算,基本上满足了很多手机的正常浏览,随着预热站的发布,这个买一送一的适配H5页面也得到了很好的传播,也得到了行业人士的认可和解读,通过这样一个以内容和富有形式感为主的预热站,吸引了更多人对UP2017的关注。


关于预热站前端类的技术解析可以查阅bob的分享文章:了解详情


在此感谢上海思烁团队和bob、栗子姐姐、xy等同事的大力支持~


BY:小瑞瑞


991

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功