$30 off During Our Annual Pro Sale. View Details »

转化的灵感

 转化的灵感

w3ctech 2012 Mobile 专题会议 http://w3ctech.com/2012

Yan Shi

June 16, 2012
Tweet

More Decks by Yan Shi

Other Decks in Programming

Transcript

  1. 转化的灵感
    mockee@douban
    http://bit.ly/LkIZvz

    View Slide

  2. 在漫长的时间里,一些变量消失
    了、一些变量被修改,还有新的
    变量加入进来,总有一些经得起
    时间的磨砺,保留了下来。

    「舌尖上的中国 --- 转化的灵感」8'10''

    View Slide

  3. View Slide

  4. github:enterprise
    IRC
    Trello

    View Slide

  5. View Slide

  6. Py
    http://pypi.python.org/pypi/pyjade
    https://github.com/Kronuz/pyScss

    View Slide

  7. Google Analytics 2012.5 - 6

    View Slide

  8. 排版 阅读器 书店
    Web App iPad
    Kindle
    Android
    Web App
    Web
    Web App
    桌面浏览器
    原生应用
    移动浏览器

    View Slide

  9. 阅读器的实现方式?
    当然是 Native App
    Web App 很适合
    开发速度快,自适应多设备
    Webkit 天生丽质的排版引擎
    不涉及典型的复杂 UI 组件
    随时随地上线发布新版
    速度快、操作流畅
    方便使用第三方字体
    大量基础交互组件,省时省力
    上架于商店,有利于推广

    View Slide

  10. 不要局限于特定设备
    避免刻意模仿 Native UI
    响应性设计的误区
    The Web
    优化也需权衡

    View Slide

  11. 响应性设计就是一
    次 Web 设计满足
    所有设备需求,对
    App 也同样奏效~

    View Slide

  12. 从统计中看,豆瓣阅
    读用户的手机型号都
    很新,终于不必再纠
    结于性能了~

    View Slide

  13. 现有产品的转化
    转化的方向与形式
    适合的产品

    View Slide

  14. View Slide

  15. 豆瓣阅读排版系统面向个人作者与内
    容编辑,专业性强;系统涉及复杂的图
    文交互,用户操作的元素或控件种类
    多且需要足够大的预览空间,并不适
    合小屏幕设备使用。

    View Slide

  16. View Slide

  17. Web 版书架的设计与
    Android 版完全相同,
    在平板设备及桌面浏
    览器中也延续类似的
    风格;而这些适应性
    的工作只需要添加一
    些 CSS 规则。
    DEMO

    View Slide

  18. 豆瓣阅读器面向广大读者,以中短篇
    作品展示为主,交互简单、易用,适合
    且有必要在全平台设备上运行。

    View Slide

  19. iOS 6 Safari Mobile 全屏
    需要调整之前的地址栏隐藏策略

    View Slide

  20. iOS 6 Safari Mobile
    不必将网页添加到主
    屏幕依然可以使用黑
    色状态栏
    移除底部工具栏?
    你的应用真的做好准
    备了么?

    View Slide

  21. View Slide

  22. View Slide

  23. 书店是用户所阅读作品的来源,除了
    要增强对各类设备可访问性的支持,
    支付安全也是必须要考虑的问题。

    View Slide

  24. 干货呢?
    http://bit.ly/IAhFE5
    * 小兔子和熊先生来自 LINE 原创贴图

    View Slide

  25. 谢谢:)
    [email protected]
    blog: mockee.com twitter: @mockee
    douban.com/people/mockee/

    View Slide