HTML5富交互与社交传播

 HTML5富交互与社交传播

2014 iWeb 峰会 FEX 数据可视化方向的核心成员 潘征 借助一个案例,分享了 html5 技术在移动端图形可视化领域的应用,不仅向大家展示了 Web 图形技术的酷炫效果,而且向人们展示了 Web 技术可传播性这个优势和社交网络碰撞后所代来的惊人效果。

09ea2a62798550460527ab1cec5e8123?s=128

Baidu FEX Team

August 16, 2014
Tweet

Transcript

  1. 百度FEX HTML5富交互与 社交传播 潘征

  2. 移动互联⺴⽹网发展趋势报告(2014Q2)

  3. 通过社交⺴⽹网络进⾏行传播 ❖ 微信朋友圈的“刷屏”现象! ❖ 上线两天,PV70万! ❖ 引起了巨⼤大的反响(QQ群瞬间爆满)! ❖ 之前通过PC端的推⼴广并没有如此好的效果(世界杯专题 为例)

  4. None
  5. 传播物料的制作 制作适合移动端 社交传播的⻚页⾯面 你⽤用⼿手机看什么?

  6. 你⽤用iPhone4还是iPhone5? 不同分辨率下的页⾯面展⽰示 标题 页脚 图表区域 中! 间! 部! 分! 根!

    据! 屏! 幕! ⾼高! 度! ⾃自! 适! 应
  7. 固定最⼩小⾼高度 地址栏是抢夺⾯面积的⼤大⿇麻烦 同⼀一设备上! 不同打开场景的区别

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

  9. devicemotion事件 accelerationIncludingGravity

  10. 图表部分的实现 SVG+css3动画+图⽚片

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

  12. 减少⻚页⾯面DOM数量 原本是这样 现在是这样

  13. 更低端的情况? 当 遇上 css3动画 svg 拖动特效 狂拽酷眩的

  14. 卡死啦!

  15. 低端⼿手机降级⽅方案 ⽤用图⽚片代替复杂的交互,传达信息

  16. 然后就可以——

  17. 通过UA判断需要加载哪⼀一套⻚页⾯面 ios设备和安卓4.0以上版本加载⾼高端版 其他移动端加载简略版 PC端加载pdf

  18. 移动端是传播的⼤大户 ❖ 微信! ❖ 微博! ❖ 百度移动⾸首页

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

  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. http://shushuo.baidu.com

  29. 半⼩小时=五千万PV 的神话 “硬的”⼩小游戏平台 end.baidu.com

  30. “硬的”游戏

  31. 流量⾼高峰的引爆点——疯狂⼿手指 扫⼆二维码开始玩疯狂⼿手指

  32. 完全没有进⾏行刻意推⼲⼴广 ❖ 朋友圈的病毒式传播! ❖ ⽆无脑+可分享+有⼀一定趣味性

  33. ——潘征 “Thank you”