数极客首页

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

TGideas与一切
互联网从业人员一样正在更深层次的拥抱移动

互联网,针对移动

端的互动网页尝试正在各个产品的营销计划

中铺开,我们不时

努力
于在保证优秀的用户体验基础

上为移动

页面寻觅
一些新意,这篇文章总结了我们在技术研讨
范畴
的一些突破

和沉淀,希望你能喜欢~!

一、硬件背景(重要)

易观智库的一个报告指出,2013年中国移动

互联网网民范围
达6.52亿,其中70.1%的用户运用
安卓手机,26.1%的用户运用
苹果手机。

高收入网民中,有一半以上都是用IOS系统,这个比重在低收入群体中只占17.71%。中低收入网民多运用
安卓系统的手机,占比分别为66.67%和76.09%。

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

先提出中国移动

互联网网民结构

是为了让大家在开端
项目构思的时分
,就要分明

面对的群体是什么,在项目的停顿
中遇到问题时,分别

时间和效果,能够

有所抉择。

这个问题很重要,就像我们在PC网页提出并且曾经
被普遍
接受

的“文雅
降级”准绳
:在Google Chrome、Firefox、Safari、QQ阅读
器极速方式

等阅读
器下,应用
新技术(HTML5、CSS3、Javas cript等)给用户发明

更多新颖
的体验。但是IE6、IE7、老系统下的QQ阅读
器兼容方式

等阅读
器,就只能查看到普通的没特效的网页。

这个问题在移动

端的展示

只需

过之而无不及。假定

说IE6是PC阅读
器的蛀虫,那安卓低端机就是手机阅读
器的蛀虫。

安卓手机配置和系统可谓千千万种,CPU跟网页展示

效果卡不卡息息相关,安卓系统版本跟网页基础

呈现也息息相关(例如安卓2.0不兼容CSS3的圆角属性border-radius等)。(CPU中文意义
是处置
器,手机反响
快慢,卡不卡,都跟CPU息息相关。往常

市面上低端机定义是CPU频率800M以下,800M至1.5G属于中端机,高端机就是双核1G以上的手机。)

在了解

这个问题的前提下,中止

手机移动

网页构思及重构的时分
,就会有针对性的中止

取舍,使得项目得到最大化的效率。

下面将会以我们近期制造
的比较

出色的手机专题网页作为案例,来通知
敬爱

的大家,我们前端能做什么,希望能够

对今后的创意参考有所辅佐

二、项目观赏

1、TGA移动

游戏官网

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

TGA城市拉力赛

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

2、UP+约请

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

3、天天酷跑里约进击版

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

三、技术创意点

普通
在制造
强交互、多动画效果的网页前,倡议

产品、设计、前端一同
开会讨论
完成
细节。同时央求

设计师有很良好的手机网页设计习气
和一定思绪
的展示

效果,以及央求

产品有很大的容纳

心、懂得取舍。

1、技术点:CSS3动画

适用范围:相互

联络
又相互

独立的元素

设备央求

:中高端手机

会发现UP+约请
函里用的最多的就是动画效果了,其实都是用CSS3写成的。

CSS3动画能够

了解

为一个元素的a状态,让它以逐帧展示

的方式变成b状态。基本

的变形有scale(缩放)、translate(位移)、rotate(旋转)、skew(倾斜)等,再加上color(颜色)、opacity(透明度)等,应用
transition(转换)和animation(动画)加上延时效果,动画就出来了。听着晕吧?看看下面的例子。

① 独立元素间的互动

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

这块动画并不是前期就想好的。在制造
过程中,发现每页的元素进入动画都差不多,这样用户容易觉得
无聊而没有兴味
往下翻页。

为了增加末页的触达率,需求
每翻一页都给用户带来一个信息:下面的内容会不一样的哦,请继续往下翻。

“我是玩家”这一屏的小元素都跟游戏有关系,英雄联盟的Q版盖伦,游戏玩家必备手柄,让他们互动起来。

手柄按常规方式进场(旋转+缩放+透明度),盖伦也依照

常规方式进场(位移+透明度),但是让盖伦的位移轨迹跟手柄有少许堆叠
,就构成

两者相撞的效果。手柄被撞需求
有反响

,就被弹开了一下(位移)。

② 单元素自我呈现

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

看到这一屏设计稿的时分
,真的不知道

从何下手,常规动画效果上面的页面都运用
了,这屏的元素还不多,怎样
不无聊?初期的想法是让小三角从圆里蹦出来(缩放+位移+透明度),跟首屏呼应

。可是只需

一个小元素蹦出来,略显单薄

。换了个方向思索

,小三角能够

自我呈现啊。

应用
它的外形
和方向,模仿

风筝或者飞机的动效,给予一个非直线运动轨迹,最终呈现效果就出来了(缩放+位移+旋转+透明度)。

③ 3D变换

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

这个在最开端
讨论的时分
产品就说了需求
有门被翻开
的动效。完成
办法

很多,最常规的是应用
图片帧的方式,多张不同状态的门的图片中止

切换,构成

门在逐步

翻开
的效果。

优点是能制造
各种动效,缺陷
是增加图片的数据量
,对页面加载速度构成

压力(更多能够

查看下面的sprite动画引见
)。好在这扇门是一个纯色矩形色块,能够

应用
CSS3的3D变换(旋转3D),做成门往里面翻开
的效果。

如下图右一的rotateY,把旋转的中心线定为门的左侧即可。

CSS3的变换属性不算多,但是把不一样的参数分别

起来,就成了不一样的展示

效果。假定

大家在开端
项目前都有这么些概念和认识,或许
不需求
前端参与前期讨论都能够

很顺的把流程走下来,提升效率。

2、技术点:Sprite动画

适用范围:单独形象有多帧动画

设备央求

:无

Sprite动画的想法来自传统的动画行业,多张图在一定时间内切换,构成
视觉上的动态效果。Sprite动画特别适合

多细节的逐帧动画展示

,但是对图片的央求

很高,需求
先生成每帧的图片,如下图。这张图片紧缩
之后都还有119K大小,本钱
是很高的。

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

原本

酷跑里约版简直

每页的小角色都有sprite动画的,文件加起来有1.5M。在PC网页里,几M都是可了解

的,但在手机,几百K都曾经
是致命的了(在中国国情下)。

所以在上线第二天,紧急处置
网页,只留下审问

女王的动画,访问延时从16秒直线降落
到6秒。所以假定

想在项目里应用sprite动画,需求
认真
揣摩

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

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

适用范围:相互

独立的元素

设备央求

:中高端手机

PC端的网页视差展示

靠鼠标动作(鼠标移动

或者滚轮),手机端的网页视差展示

能够

依托
设备特性——重力感应。

当手机的水平

方向改动
时,网页内给予重力感应的元素就会跟着改动
位置,并且依据

赋值的深度的不一样,位移速度也不一样,这样就能构成

视差的效果。

在用户发现网页跟自己

有互动时,好感度会立增。

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

除了在展示

性网页运用
重力感应做成视差效果之外,还能够

应用
它来制造
小游戏,增强

互动。例如最知名
的重力感应球游戏。

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

4、技术点:字体图标

适用范围:纯色矢量图

设备央求

:中高端手机

字体有一个十分

好的特性,能够

容易设置颜色大小或者变形,而CSS3的@font-face就是为了分别

字体和图标而生的。以约请
函为例,把页面上一切
纯色矢量图转化为字体文件之后,俭省
97.37%的带宽(约370k),这对手机网页加载是十分

大的一个辅佐

。但是对生成字体的图标的央求

是,只能包含一个颜色,且为矢量图。

所以在呈现作风
和文件大小之间的取舍,依据

项目而定。

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

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

适用范围:基础

图形

设备央求

:中高端手机

约请
函那条贯串
8个页面的折线是运用
SVG画出来的,优点是能够

依据

屏幕中止

自顺应
匹配,且大小能比切成png24的图片俭省
98%的带宽(约65k)。缺陷
是自顺应
的图形之间比较

难定位。例如iPhone4s竖屏的状况

下折线的角度为60°,横屏的状况

下折线的角度为25°,贯串
的位置可见不分歧

但是线条上面还放着其他元素,或者还有其他文字依据

它来定位,这样就呈现
问题了。

所以我们的处置
是选择一定的屏幕大小中止

细微优化,但是从概念上就放弃“线条必需
从元素正中间贯串
过去”的想法,这只是一种硬处置

办法

手机上SVG能够

制造
出很多图形、线条的组合体,但是也需求
产品阶段就明晰
哪些能做,哪些能舍弃,然后找出一个最适合

的处置

办法

就像约请
函,选择做折线,就放弃一定设备的元素定位问题。假定

选择元素定位第一,则需求
改换
贯串
线条的设计。(其实我不是很倡议

用贯串
线条的想法,难完成
。)

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

6、技术点:Loading进度条

适用范围:比较

大的页面

设备央求

:无

据 Compuware 的调查,用户在运用
手机时,假定

遇到加载超越
5秒的手机网站,74%的用户会选择分开
。即便

用户对手机应用相对有耐烦
,也只需

50%的用户会容忍加载超越
5秒。

之前内部的一项网速测试算出访问我们专题的手机平均

网速只需

70K/s,假定

容忍时间是5秒的话,我们的网页加起来需求
控制在350K以内,但有时分
内容多了图片大了加载时间想控制都没办法

有一个能够

称谓
为时间小偷的办法

,就是给网页增加loading进度条。loading需求
有动画来分散用户留意
力,简单的动画能够

为网页争取多5秒的时间,复杂的动画则能够

争取更多时间。在loading的时分
就先把前几屏的图片加载上,跳转到网页后就能够

直接呈现出来了。这种方式比让用户在空白首页干等体验更好。

美国研讨
生项目资讯网站上有五分之一的人招认

曾经对“怠慢”自己

的人发火,loading就是通知
我们的用户,我们在为他们着想,希望给他们更好的体验。

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

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

适用范围:内容或者色块有显然
辨别

设备央求

:无

PC网页普通
是直接垂直平铺内容的,取决于鼠标和键盘的操作方式。不举荐

内容横向平铺,不便当
查看,也不契合
用户运用
习气
,除非有对鼠标、键盘操作中止

相应的设置修正
,制造
本钱
比较

高。手机网页的呈现
却突破

了这种僵局,竖向滑动横向滑动,对手机用户来说都是十分

习气
的操作了。

但是必需
引入单屏滑动的概念,一滑一屏。竖向的可测试UP约请
函,横向的可测试TGA官网。单屏滑动央求

每屏内容不可过多,有合理的规划
布置
,假定

内容多且央求

衔接

性,则不适合

像约请
函这样内容不多,每块的颜色也有显然
辨别

的设计,用单屏滑动更能凸显质量

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

8、技术点:游戏

适用范围:分别

产品特性给用户带来强交互体验

设备央求

:中高端手机

手机网页由于
设备特性能够

发明

出很多特别的小游戏,如刮刮乐(canvas)、吹蜡烛(麦克风api)、跟手3D图像(sprite动画+手势)、接金币(CSS3动画+Javas cript+手势)等。

这些小游戏不只
能够

增强

产品和用户间的互动,还能够

展示

大公司的技术研讨
,带来好的市场口碑,可谓一箭多雕。但也有缺陷
:开发时间长,对设备央求

也比较

高。例如TGA官网前的接金币小游戏,搭框架需求
10天左右的时间。

关于
游戏这一块,也是我们TGideas网站重构三组在努力探求

的方向,置信
以后能够

给大家带来更好更快的小游戏,请关注后期的手机网页小游戏探求

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

9、技术点:天文
定位

适用范围:需求
分别

天文
位置不同展示

的网页

设备央求

:无

功用
跟天文
位置息息相关的应用例如大众

点评、地图、滴滴打车等,都会先获取用户的位置再中止

匹配性内容展示

,网页里有时分
也能够

应用
这个功用
。例如TGA的城市拉力赛里就应用了天文
定位,帮用户快速定位到所在城市,而不需求
中止

手动选择,立刻

给自己

的城市加油。

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

10、技术点:音频运用

适用范围:有特殊体验央求

设备央求

:中高端手机

声音能够

给用户带来更多新颖
体验。PC网页关于
声音的应用比较

局限是由于
台式机需求
有耳机或者声响
的辅助,手机网页则很容易用声音来吸收
用户留意
。但是音频紧缩
大小和质量还有待研讨
。TGA城市拉力赛里应用了音频作为用户的惊喜体验,等候

得到的反响

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

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

适用范围:每屏内容适中,增加少许动效提升质量

设备央求

:无

官网并不是只能规矩罗列平铺直叙的。模块和模块之间能够

运用
单屏滑动来衔接,模块内容比较

多的状况

能够

横向滑动延伸。初次进入官网,首屏内的元素应用
CSS3动画制造
酷炫效果,官网不再单调!

小屏,你好!——手机互动网页11大技术点突破总结【创意篇】

上面引见
的都只是手机互动网页的冰山一角,更多的还需求
产品+设计+前端一同
去探求

和研讨
,控制
了基础

的学问
点之后,相互

组合迸发出的新事物,就是我们用心发明

快乐的结果了。

本文版权:腾讯游戏TGideas 原创,如需商业用处

或转载请与 腾讯游戏TGideas 联络
,谢谢

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章