腾讯移动游戏官网设计观赏与技术总结(多图)

来自 葡萄谷游戏网>2019-05-17
深度

[ 葡萄谷游戏网原创专稿,未经允许请勿转载 ]

腾讯移动游戏官网设计观赏与技术总结(多图)

腾讯TGideas以TGA移动游戏官网、UP+约请函、天天酷跑里约攻击版官网为例,总结了手游官网开拓的经验。

目录

一、硬件配景

二、项目观赏

1、TGA移动游戏官网

2、UP+约请函

3、天天酷跑里约攻击版

三、技术创意点

1、CSS3动画

2Sprite动画

3、重力感应+视差

4、字体图标

5、自顺应SVG图形

6、Loading进度条

7、单屏滑动

8、游戏

9、地舆定位

10、音频应用

11、手机重度新官网


一、硬件配景


易观智库的一个申报指出,2013年中国移动互联网网民规模达6.52亿,此中70.1%的用户应用安卓只,26.1%的用户应用苹果只8咧出网民中,有一半以上都是用IOS体系,这个比重在低支出群体中只占17.71%。中低支出网民多应用安卓体系的只,占比分离为66.67%76.09%

0

0

先提出中国移动互联网网民布局是为了让大家在开端项目构思的时候,就要清楚面对的群体是什么,在项偏向进展中碰到成就时,结合光阴和效果,可以或许或许有所抉择。这个成就很重要,就像咱咱咱们在PC网页提出而且已经被普遍接受的“优雅降级”原则:在Google Chrome、Firefox、Safari、QQ浏览器极速情势等浏览器下,利用新技术(HTML5、CSS3、Javascript等)给用户创造更多新鲜的体验。但是IE6、IE7、老体系下的QQ浏览器兼容情势等浏览器,就只能检查到通俗的没特效的网页。

这个成就在移动端的展现只要过之而无不及。如果说IE6是PC浏览器的蛀虫,那安卓低端机便是机浏览器的蛀虫。安卓机设置设备摆设和体系可谓千千万种,CPU跟网页展中Ч卡不卡息息相干,安卓体系版本跟网页基础呈现也息息相干(例如安卓2.0不兼容CSS3的圆角属性border-radius等)。(CPU中文意思是处理器,机反应快慢,卡不卡,都跟CPU息息相干。如今市面上低端机定义是CPU频率800M如下,800M至1.5G属于中端机,高端机便是双核1G以上的机。)

在懂得这个成就的条件下,停止手机移动网页构思及重构的时候,就会有针对性的停止取舍,使得项目获得最大化的效力。

下面将会以咱咱咱们近期制作的比较精彩的手机专题网页作为案例,来奉告亲爱的大家,咱咱咱们前端能做什么,盼望可以或许对今后的创意参考有所帮助。

二、项目观赏

1TGA移动游戏官网

0

TGA都邑拉力赛

0


2UP+约请函

0

3、天天酷跑里约攻击版

0

三、技术创意点

一样平常在制作强交互、多动画效果的网页前,建议产品、设计、前端一路开会探究实现细节。同时请求设计师有很优越的手机网页设计习惯和一定思绪的展现效果,和请求产品有很大的包容心、懂得取舍。


1、技术点:CSS3动画

适用规模:互相联系又互相自力的元素

设备请求:中高端手机

会发现UP+约请函里用的至多的便是动画效果了,其实都是用CSS3写成的。CSS3动画可以或许懂得为一个元素的a状况,让它以逐帧展现的办法变成b状况。基本的变形有scale(缩放)、translate(位移)、rotate(旋转)、skew(倾斜)等,再加上color(色彩)、opacity(透明度)等,利用transition(转换)和animation(动画)加上延时效果,动画就进去了。听着晕吧?看看下面的例子。

①自力元素间的互动

0

这块动画并不是后期就想好的。在制作过程中,发现每页的元素进入动画都差不多,如许用户容易感觉无聊而没有兴趣往下翻页。为了增长末页的触达率,必要每翻一页都给用户带来一个信息:下面的内容会不一样的哦,请持续往下翻。

“我是玩家”这一屏的小元素都跟游戏有相干,豪杰同盟的Q版盖伦,游戏玩家必备手柄,让他咱咱们互动起来。手柄按常规办法出场(旋转+缩放+透明度),盖伦也按照常规办法出场(位移+透明度),但是让盖伦的位移轨迹跟手柄有少许重叠,就形成两者相撞的效果。手柄被撞必要有反。就被弹开了一下(位移)。

②单位素自我呈现

0

看到这一屏设计稿的时候,真的不知道从何下手,常规动画效果上面的页面都应用了,这屏的元素还不多,如何不无聊?初期的设法主意是让小三角从圆里蹦进去(缩放+位移+透明度),跟首屏呼应。可是只要一个小元素蹦进去,略显单薄。换了个偏向思虑,小三角可以或许或许自我呈现啊。利用它的形状和偏向,模仿风筝或许飞机的动效,给予一个非直线运动轨迹,最终呈现效果就进去了(缩放+位移+旋转+透明度)。


3D变换

0

这个在最开端讨论的时候产品就说了必要有门被打开的动效。实现办法很多,最常规的是利用图片帧的办法,多张分歧状况的门的图片停止切换,形成门在逐渐打开的效果。优点是能制作各种动效,缺点是增长图片的数目,对页面加载速率形成压力(更多可以或许或许检查下面的sprite动画介绍)。好在这扇门是一个可匦紊,可以或许或许利用CSS3的3D变换(旋转3D),做成门往里面打开的效果。如下图右一的rotateY,把旋转的中央线定为门的左侧即可。

0

CSS3的变换属性不算多,但前不一样的参数结合起来,就成为了不一样的展现效果。如果大家在开端项目前都有这么些概念和认识,也许不必要前端介入后期讨论都可以或许或许很顺的把流程走下来,晋升效力。


2、技术点:Sprite动画

适用规模:单独形象有多帧动画

设备请求:无

Sprite动画的设法主意来自传统的动画行业,多张图在一定光阴内切换,构成视觉上的静态效果。Sprite动画分外得当多细节的逐帧动画展现,但是对图片的请求很高,必要先天生每帧的图片,如下图。这张图片压缩之后都另有119K大小,本钱是很高的。

0

本来酷跑里约版几乎每页的小角色都有sprite动画的,文件加起来有1.5M。在PC网页里,几M都是可懂得的,但在手机,几百K都已经是致命的了(在中国国情下)。所以在上线第二天,紧急处理网页,只留下审判女王的动画,访问延时从16秒直线下降到6秒。所以如果想在项目里应用sprite动画,必要仔细斟酌。

0

3、技术点:重力感应视差

适用规模:互相自力的元素

设备请求:中高端手机

PC端的网页视差展现靠鼠标举动(鼠标移动或许滚轮),手机端的网页视差展现可以或许或许依靠设备特性——重力感应。当手机的程度偏向改变时,网页内给予重力感应的元素就会跟着改变地位,而且根据赋值的深度的不一样,位移速率也不一样,如许就能构成视差的效果。在用户发现网页跟自己有互动时,好感度会立增。


除了在展现性网页应用重力感应做成视差效果之外,还可以或许或许利用它来制作小游戏,增强互动。例如最出名的重力感应球游戏。

0

4、技术点:字体图标

适用规模:纯色矢量图

设备请求:中高端手机

字体有一个非常好的特性,可以或许容易设置色彩大小或许变形,而CSS3的@font-face便是为了结合字体和图标而生的。以约请函为例,把页面上统统纯色矢量图转化为字体文件之后,节省97.37%的带宽(约370k),这敌手机网页加载是非常大的一个帮助。但是对天生字体的图标的请求是,只能包含一个色彩,且为矢量图。所以在呈现作风和文件大小之间的取舍,根据项目而定。

0

5、技术点:自顺应SVG图形

适用规模:基础图形

设备请求:中高端手机

约请函那条贯串8个页面的折线是应用SVG画进去的,优点是可以或许或许根据屏幕停止自顺应匹配,且大小能比切成png24的图片节省98%的带宽(约65k)。缺点是自顺应的图形之间比较难定位。例如iPhone4s竖屏的环境下折线的角度为60°,横屏的环境下折线的角度为25°,贯串的地位可见不同等。但是线条上面还放着其余元素,或许另有其余文字根据它来定位,如许就出现成就了。所以咱咱咱们的处理是抉择一定的屏幕大小停止细微优化,但是从概念上就放弃“线条必需从元素正中央贯串曩昔”的设法主意,这只是一种硬解决办法。

手机上SVG可以或许或许制作出很多图形、线条的组合体,但是也必要产品阶段就清楚哪些能做,哪些能舍弃,然后找出一个最得当的解决办法。就像约请函,抉择做折线,就放弃一定设备的元素定位成就。如果抉择元素定位第一,则必要更换贯串线条的设计。(其实我不是很建议用贯串线条的设法主意,难实现。)

0

0

6、技术点:Loading进度条

适用规模:比较大的页面

设备请求:无

Compuware 的调查,用户在应用只时,如果碰到加载超过5秒的只网站,74%的用户会抉择离开。即便用户敌只τ孟喽有耐心,也只要50%的用户会容忍加载超过5秒。之前内部的一项网速测试算出访问咱咱咱们专题的只平均网速只要70K/s,如果容忍光阴是5秒的话,咱咱咱们网页加起来必要节制在350K以内,但有时候内容多了图片大了加载光阴想节制都没办法。有一个可以或许或许称呼为光阴小偷的办法,便是给网页增长loading进度条。loading必要有动画来分散用户注意力,简略的动画可以或许或许为网页争取多5秒的光阴,复杂的动画则可以或许或许争取更多光阴。在loading的时候就先把前几屏图片加载上,跳转到网页后就可以或许或许间接呈现进去了。这种办法比让用户在空资滓掣傻忍逖更好。美国研究生项目资讯网站上有五分之一的人承认已经对“怠慢”自己的人发火,loading便是奉告咱咱咱们的用户,咱咱咱们在为他咱咱们着想,盼望给他咱咱们更好的体验。

0

7、技术点:单屏滑动显示

适用规模:内容或许色块有显著区分的

设备请求:无

PC网页一样平常是间接垂直平铺内容的,取决于鼠标和键盘的操纵办法。不推荐内容横向平铺,不便利检查,也不相符用户应用习惯,除非有对鼠标、键盘操纵停止相应的设置修改,制作本钱比较高。手机网页的出现却打破了这种僵局,竖向滑动横向滑动,敌手机用户来说都是非常习惯的操纵了。但是必需引入单屏滑动的概念,一滑一屏。竖向的可测试UP约请函,横向的可测试TGA官网。单屏滑动请求每屏内容不行过量,有正当的布局支配,如果内容多且请求连贯性,则不得当。像约请函如许内容不多,每块的色彩也有显著区分的设计,用单屏滑动更能凸显品格。


8、技术点:游戏

适用规模:结合产品特性给用户带来强交互体验

设备请求:中高端手机

只网页因为设备特机可以或许或许创造出很多分外的小游戏,如刮刮乐(canvas)、吹蜡烛(麦克风api)、跟手3D图像(sprite动画+手势)、接金币(CSS3动画+Javascript+手势)等。这些小游戏不只可以或许或许增强产品和用户间的互动,还可以或许或许展现大公司的技术研究,带来好的市场口碑,可谓一箭多雕。但也有缺点:开拓光阴长,对设备请求也比较高。例如TGA官网前的接金币小游戏,搭框架必要10天阁下的光阴。

对付游戏这一块,也是咱咱咱们TGideas网站重构三组在极力探究的偏向,相信以后可以或许给大家带来更好更快的小游戏,请存眷后期的手机网页小游戏探究。


9、技术点:地舆定位

适用规模:必要结合地舆地位分歧展现的网页

设备请求:无

功效跟地舆地位息息相干的应用例如民众点评、地图、滴滴打车等,都邑先获得用户的地位再停止匹配性内容展现,网页里有时候也可以或许或许利用这个功效。例如TGA的都邑拉力赛里就应用了地舆定位,帮用户疾速定位到地点都邑,而不必要停止手动抉择,立刻给自己的都邑加油。

0

10、技术点:音频应用

适用规模:有分外体验请求的

设备请求:中高端手机

声音可以或许或许给用户带来更多新鲜体验。PC网页对付声音的应用比较局限是因为台式机必要有耳机或许音响的辅助,手机网页则很容易用声音来吸引用户注意。但是音频压缩大小和品格另有待研究。TGA都邑拉力赛里应用了音频作为用户的欣喜体验,等待获得的反馈。

0

11、手机强互动情势新官网(上述多个技术点的综合应用)

适用规模:每屏内容适中,增长少许动效晋升品格

设备请求:无

官网并不是只能规矩罗列平铺直叙的。模块和模块之间可应用单屏滑动来衔接,模块内容比较多的环境可以或许或许横向滑动延长。初次进入官网,首屏内的元素利用CSS3动画制作酷炫效果,官网不再单调!

上面介绍的都只是手机互动网页的冰山一角,更多的还必要产品+设计+前端一路去探究和研究,控制了基础的知识点之后,互相组合爆收回的新事物,便是咱咱咱们居心创造快活的结果了。


文章评论
葡萄谷游戏网订阅号
友情链接:广州美容在线学习网  中国商贸协会网  中国调研报告网  广东省党员教育网  机电工程师网  商职财经  连接科技资讯网  最新利率资讯网  南京电子资讯网  股票入门网