百度FEX

HTML5富交互与 社交传播



潘征

移动互联⺴⽹网发展趋势报告（2014Q2）

通过社交⺴⽹网络进⾏行传播

❖ 微信朋友圈的“刷屏”现象! ❖ 上线两天,PV70万! ❖ 引起了巨⼤大的反响（QQ群瞬间爆满）! ❖ 之前通过PC端的推⼴广并没有如此好的效果（世界杯专题

为例）

传播物料的制作

制作适合移动端 社交传播的⻚页⾯面



你⽤用⼿手机看什么？

你⽤用iPhone4还是iPhone5？



不同分辨率下的页⾯面展⽰示

标题 图表区域

页脚



中! 间! 部! 分! 根! 据! 屏! 幕! ⾼高! 度! ⾃自! 适!

应

固定最⼩小⾼高度

地址栏是抢夺⾯面积的⼤大⿇麻烦

同⼀一设备上! 不同打开场景的区别

利⽤用重⼒力感应实现封⾯面效果——移动端特有的体验

devicemotion事件

accelerationIncludingGravity

图表部分的实现

SVG＋css3动画＋图⽚片

动画效果性能优化

❖ 尽可能⽤用css3动画代替js更改margin等属性! ❖ 减少页⾯面dom数量

减少⻚页⾯面DOM数量



原本是这样



现在是这样

更低端的情况？

当 狂拽酷眩的



遇上



css3动画 svg

拖动特效

卡死啦！

低端⼿手机降级⽅方案

⽤用图⽚片代替复杂的交互，传达信息

然后就可以——

通过UA判断需要加载哪⼀一套⻚页⾯面

ios设备和安卓4.0以上版本加载⾼高端版 其他移动端加载简略版 PC端加载pdf

移动端是传播的⼤大户

❖ 微信! ❖ 微博! ❖ 百度移动⾸首页

内容＋效果＋平台＝传播

❖ 好的内容不⼀一定能引起传播! ❖ 通过新颖的形式勾起传播欲望! ❖ 社交⽹网络是传播的天然平台

http://shushuo.baidu.com

半⼩小时＝五千万PV 的神话

“硬的”⼩小游戏平台 end.baidu.com

“硬的”游戏

流量⾼高峰的引爆点——疯狂⼿手指

扫⼆二维码开始玩疯狂⼿手指

完全没有进⾏行刻意推⼲⼴广

❖ 朋友圈的病毒式传播! ❖ ⽆无脑＋可分享＋有⼀一定趣味性

“Thank you”

——潘征