[WebRebuild 2013] 移动终端重构Workflow

833e24864c50b4044ba8c56afaf816a9?s=47 hzlzh
November 02, 2013

[WebRebuild 2013] 移动终端重构Workflow

WebRebuild 2013 介绍:
http://webrebuild.org/2013/gz/guest.html
现场录像视频在线播放:
http://www.56.com/u90/v_MTAwMTAyMTkx.html
完整版 Keynote 下载地址:
http://vdisk.weibo.com/s/z9dGioP9NHK7H

833e24864c50b4044ba8c56afaf816a9?s=128

hzlzh

November 02, 2013
Tweet

Transcript

  1. 移动终端重构 Workflow ⻩黄⾃自⼒力 (@hzlzh)

  2. ⾃自我介绍 !2 ⻩黄⾃自⼒力 @hzlzh http://hzlzh.io/ (Zed Huang)

  3. ⾃自我介绍 !2 ⻩黄⾃自⼒力 @hzlzh http://hzlzh.io/ (Zed Huang)

  4. ⾃自我介绍 !2 ⻩黄⾃自⼒力 @hzlzh http://hzlzh.io/ (Zed Huang) • 腾讯 ecd

    - 移动终端设计中⼼心
  5. ⾃自我介绍 !2 ⻩黄⾃自⼒力 @hzlzh http://hzlzh.io/ (Zed Huang) • 前端开发组(TmT) •

    腾讯 ecd - 移动终端设计中⼼心
  6. ⾃自我介绍 !2 ⻩黄⾃自⼒力 @hzlzh http://hzlzh.io/ (Zed Huang) • 前端开发组(TmT) •

    腾讯微购物、电商微信O2O线等 • 腾讯 ecd - 移动终端设计中⼼心
  7. WebReBuild:蜕变 !3

  8. WebReBuild:蜕变 !3

  9. WebReBuild:蜕变 !3

  10. WebReBuild:蜕变 !3

  11. WebReBuild:蜕变 !3

  12. WebReBuild:蜕变 !3

  13. !4 移动端的福利 • ⽀支持度⾼高 • 紧跟潮流 • No IE 做快乐的开发者

    • ⼀一致性好
  14. !4 移动端的福利 • ⽀支持度⾼高 • 紧跟潮流 • No IE ⽆无需在意各种

    IE hack 做快乐的开发者 • ⼀一致性好
  15. !4 移动端的福利 • ⽀支持度⾼高 • 紧跟潮流 • No IE 全⾯面拥抱

    HTML 5 + CSS 3 ⽆无需在意各种 IE hack 做快乐的开发者 • ⼀一致性好
  16. !4 移动端的福利 • ⽀支持度⾼高 • 紧跟潮流 • No IE 全⾯面拥抱

    HTML 5 + CSS 3 新的特性和技术会迅速在浏览器更新,玩法多样 ⽆无需在意各种 IE hack 做快乐的开发者 • ⼀一致性好
  17. !4 移动端的福利 • ⽀支持度⾼高 • 紧跟潮流 • No IE 全⾯面拥抱

    HTML 5 + CSS 3 新的特性和技术会迅速在浏览器更新,玩法多样 ⽆无需在意各种 IE hack 做快乐的开发者 • ⼀一致性好 HTML5 ⻚页⾯面 | App(如: 微信) 内浏览器调⽤用 App 内 hybrid ⻚页⾯面 | Web App
  18. !5 移动终端重构挑战 总有兼容不完的新设备冒出来

  19. !5 移动终端重构挑战 • 设备多 • 屏幕⼩小 总有兼容不完的新设备冒出来

  20. !5 移动终端重构挑战 • 设备多 • 屏幕⼩小 总有兼容不完的新设备冒出来

  21. !5 移动终端重构挑战 • 设备多 • 屏幕⼩小 总有兼容不完的新设备冒出来

  22. !5 移动终端重构挑战 • 设备多 • 屏幕⼩小 总有兼容不完的新设备冒出来

  23. !5 移动终端重构挑战 • 设备多 • 屏幕⼩小 640x960 | 480x800 总有兼容不完的新设备冒出来

  24. !5 移动终端重构挑战 • 设备多 • 屏幕⼩小 4 -> 4s ->

    5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  25. !6 移动终端重构挑战 • 设备多 • 屏幕⼩小 4 -> 4s ->

    5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  26. !6 移动终端重构挑战 • 流量贵 • 设备多 • 屏幕⼩小 4 ->

    4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  27. !6 移动终端重构挑战 • 流量贵 • ⺴⽹网速慢 • 设备多 • 屏幕⼩小

    4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  28. !6 移动终端重构挑战 • 流量贵 • ⺴⽹网速慢 • 设备多 • 屏幕⼩小

    4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  29. !6 移动终端重构挑战 • 流量贵 • ⺴⽹网速慢 • 设备多 • 屏幕⼩小

    4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  30. !6 移动终端重构挑战 • 流量贵 • ⺴⽹网速慢 • 设备多 • 屏幕⼩小

    0.01元/KB 〜~ 0.03元/KB 4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  31. !6 移动终端重构挑战 • 流量贵 • ⺴⽹网速慢 • 设备多 • 屏幕⼩小

    0.01元/KB 〜~ 0.03元/KB 10 kb/s ~ 40 kb/s [2G⺴⽹网速] 4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  32. !7 移动终端重构的挑战 • 流量贵 • ⺴⽹网速慢 • 设备多 • 屏幕⼩小

    0.01元/KB 〜~ 0.03元/KB 10 kb/s ~ 40 kb/s 4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  33. !7 移动终端重构的挑战 • 流量贵 • ⺴⽹网速慢 • 设备多 • 更新快

    • 屏幕⼩小 0.01元/KB 〜~ 0.03元/KB 10 kb/s ~ 40 kb/s 4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  34. !7 移动终端重构的挑战 • 性能变 • 流量贵 • ⺴⽹网速慢 • 设备多

    • 更新快 • 屏幕⼩小 0.01元/KB 〜~ 0.03元/KB 10 kb/s ~ 40 kb/s 4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  35. !7 移动终端重构的挑战 • 性能变 • 流量贵 • ⺴⽹网速慢 • 设备多

    • 更新快 • 屏幕⼩小 0.01元/KB 〜~ 0.03元/KB 10 kb/s ~ 40 kb/s 4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  36. !7 移动终端重构的挑战 • 性能变 • 流量贵 • ⺴⽹网速慢 • 设备多

    • 更新快 • 屏幕⼩小 0.01元/KB 〜~ 0.03元/KB 10 kb/s ~ 40 kb/s 4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来
  37. !7 移动终端重构的挑战 • 性能变 • 流量贵 • ⺴⽹网速慢 • 设备多

    • 更新快 • 屏幕⼩小 0.01元/KB 〜~ 0.03元/KB 10 kb/s ~ 40 kb/s 4 -> 4s -> 5 -> 5s | Google Glass | iWatch iOS 7 & Android 4.4 | Hybrid 内⻚页 & 微信内⻚页 640x960 | 480x800 总有兼容不完的新设备冒出来
  38. !7 移动终端重构的挑战 • 性能变 • 流量贵 • ⺴⽹网速慢 • 设备多

    • 更新快 • 屏幕⼩小 0.01元/KB 〜~ 0.03元/KB 10 kb/s ~ 40 kb/s 4 -> 4s -> 5 -> 5s | Google Glass | iWatch iOS 7 & Android 4.4 | Hybrid 内⻚页 & 微信内⻚页 640x960 | 480x800 设备性能跑分、GPU、CPU 总有兼容不完的新设备冒出来
  39. !8 解决关键点 • 性能变 • 流量贵 • 设备多 • ⺴⽹网速慢

    • 更新快 • 屏幕⼩小
  40. !8 解决关键点 • 性能变 • 流量贵 • 设备多 • ⺴⽹网速慢

    • 更新快 • 屏幕⼩小 Viewport 缩放 | Retina 2x
  41. !8 解决关键点 • 性能变 • 流量贵 • 设备多 • ⺴⽹网速慢

    • 更新快 图⽚片压缩 | Gzip | 请求合并 | CDN • 屏幕⼩小 Viewport 缩放 | Retina 2x
  42. !8 解决关键点 • 性能变 • 流量贵 • 设备多 • ⺴⽹网速慢

    • 更新快 LazyLoad 按需加载、延时加载 图⽚片压缩 | Gzip | 请求合并 | CDN • 屏幕⼩小 Viewport 缩放 | Retina 2x
  43. !8 解决关键点 • 性能变 • 流量贵 • 设备多 • ⺴⽹网速慢

    • 更新快 LazyLoad 按需加载、延时加载 Responsive Web Design (Location Response) 图⽚片压缩 | Gzip | 请求合并 | CDN • 屏幕⼩小 Viewport 缩放 | Retina 2x
  44. !8 解决关键点 • 性能变 • 流量贵 • 设备多 • ⺴⽹网速慢

    • 更新快 LazyLoad 按需加载、延时加载 Responsive Web Design (Location Response) 图⽚片压缩 | Gzip | 请求合并 | CDN 新特性、新技术的使⽤用 • 屏幕⼩小 Viewport 缩放 | Retina 2x
  45. !8 解决关键点 • 性能变 • 流量贵 • 设备多 • ⺴⽹网速慢

    • 更新快 LazyLoad 按需加载、延时加载 Responsive Web Design (Location Response) 图⽚片压缩 | Gzip | 请求合并 | CDN 新特性、新技术的使⽤用 • 屏幕⼩小 Viewport 缩放 | Retina 2x 适当的效果做减法
  46. !9 团队项⺫⽬目特点 以TmT团队为例

  47. !9 团队项⺫⽬目特点 • 产品线多 以TmT团队为例

  48. !9 团队项⺫⽬目特点 • 产品线多 同时多个产品线项⺫⽬目并发进⾏行 以TmT团队为例

  49. !9 团队项⺫⽬目特点 • 移动化 • 产品线多 同时多个产品线项⺫⽬目并发进⾏行 以TmT团队为例

  50. !9 团队项⺫⽬目特点 • 移动化 • 产品线多 95%的移动终端项⺫⽬目(HTML5⻚页、App内⻚页、Hybird) 同时多个产品线项⺫⽬目并发进⾏行 以TmT团队为例

  51. !9 团队项⺫⽬目特点 • 下游不同 • 移动化 • 产品线多 95%的移动终端项⺫⽬目(HTML5⻚页、App内⻚页、Hybird) 同时多个产品线项⺫⽬目并发进⾏行

    以TmT团队为例
  52. !9 团队项⺫⽬目特点 • 下游不同 • 移动化 • 产品线多 接⼝口多个不同的下游开发团队 95%的移动终端项⺫⽬目(HTML5⻚页、App内⻚页、Hybird)

    同时多个产品线项⺫⽬目并发进⾏行 以TmT团队为例
  53. !9 团队项⺫⽬目特点 • 下游不同 • 迭代快 • 移动化 • 产品线多

    接⼝口多个不同的下游开发团队 95%的移动终端项⺫⽬目(HTML5⻚页、App内⻚页、Hybird) 同时多个产品线项⺫⽬目并发进⾏行 以TmT团队为例
  54. !9 团队项⺫⽬目特点 • 下游不同 • 迭代快 • 移动化 • 产品线多

    接⼝口多个不同的下游开发团队 产品开发周期短、快速响应 95%的移动终端项⺫⽬目(HTML5⻚页、App内⻚页、Hybird) 同时多个产品线项⺫⽬目并发进⾏行 以TmT团队为例
  55. !9 团队项⺫⽬目特点 • 下游不同 • 迭代快 • 移动化 • 跨平台

    • 产品线多 接⼝口多个不同的下游开发团队 产品开发周期短、快速响应 95%的移动终端项⺫⽬目(HTML5⻚页、App内⻚页、Hybird) 同时多个产品线项⺫⽬目并发进⾏行 以TmT团队为例
  56. !9 团队项⺫⽬目特点 • 下游不同 • 迭代快 • 移动化 • 跨平台

    • 产品线多 接⼝口多个不同的下游开发团队 产品开发周期短、快速响应 95%的移动终端项⺫⽬目(HTML5⻚页、App内⻚页、Hybird) 组员可随时穿插与各个项⺫⽬目之间,跨平台 Windows & Mac 同时多个产品线项⺫⽬目并发进⾏行 以TmT团队为例
  57. !9 • 性能变 • 流量贵 • 设备多 • ⺴⽹网速慢 •

    更新快 • 屏幕⼩小 团队项⺫⽬目特点 • 下游不同 • 迭代快 • 移动化 • 跨平台 • 产品线多 接⼝口多个不同的下游开发团队 产品开发周期短、快速响应 95%的移动终端项⺫⽬目(HTML5⻚页、App内⻚页、Hybird) 组员可随时穿插与各个项⺫⽬目之间,跨平台 Windows & Mac 同时多个产品线项⺫⽬目并发进⾏行 以TmT团队为例
  58. !9 团队项⺫⽬目特点 • 下游不同 • 迭代快 • 移动化 • 跨平台

    • 产品线多 接⼝口多个不同的下游开发团队 产品开发周期短、快速响应 95%的移动终端项⺫⽬目(HTML5⻚页、App内⻚页、Hybird) 组员可随时穿插与各个项⺫⽬目之间,跨平台 Windows & Mac 同时多个产品线项⺫⽬目并发进⾏行 以TmT团队为例
  59. !9 团队项⺫⽬目特点 • 下游不同 • 迭代快 • 移动化 • 跨平台

    • 产品线多 接⼝口多个不同的下游开发团队 产品开发周期短、快速响应 95%的移动终端项⺫⽬目(HTML5⻚页、App内⻚页、Hybird) 组员可随时穿插与各个项⺫⽬目之间,跨平台 Windows & Mac 同时多个产品线项⺫⽬目并发进⾏行 以TmT团队为例
  60. !10 解决⽅方案 移动终端重构的 Workflow

  61. !10 解决⽅方案 移动终端重构的 Workflow

  62. !10 解决⽅方案 移动终端重构的 Workflow TmT Workflow

  63. 什么是TmT Workflow ? !11

  64. 什么是TmT Workflow ? !11 • 它是⼀一组流程?

  65. 什么是TmT Workflow ? !11 懒 • 它是⼀一组流程?

  66. 什么是TmT Workflow ? !11 懒 • 它是⼀一组流程?

  67. • 它是⼀一套解决⽅方案? 什么是TmT Workflow ? !11 懒 • 它是⼀一组流程?

  68. • 它是⼀一套解决⽅方案? 什么是TmT Workflow ? !11 懒 • 它是⼀一批⼯工具? •

    它是⼀一组流程?
  69. • 它是⼀一套解决⽅方案? 什么是TmT Workflow ? !11 懒 • 它是⼀一批⼯工具? •

    还是⼀一个模版? • 它是⼀一组流程?
  70. • 它是⼀一套解决⽅方案? 什么是TmT Workflow ? !11 懒 • 它是⼀一批⼯工具? •

    还是⼀一个模版? • 它是⼀一种思路! • 它是⼀一组流程?
  71. • 它是⼀一套解决⽅方案? 什么是TmT Workflow ? !11 Workflow • 它是⼀一批⼯工具? •

    还是⼀一个模版? • 它是⼀一种思路! • 它是⼀一组流程?
  72. 先要搞定什么? !12 圣战 ⼀一场永⽆无⽌止境的战⽃斗 注:⾼高亮⾊色为TmT⺫⽬目前选择⽅方案

  73. 先要搞定什么? !12 圣战 ⼀一场永⽆无⽌止境的战⽃斗 • Win vs Mac 注:⾼高亮⾊色为TmT⺫⽬目前选择⽅方案

  74. 先要搞定什么? !12 圣战 ⼀一场永⽆无⽌止境的战⽃斗 • Emac vs Vim vs Sublime

    vs IDEA 等等 • Win vs Mac 注:⾼高亮⾊色为TmT⺫⽬目前选择⽅方案
  75. 先要搞定什么? !12 圣战 ⼀一场永⽆无⽌止境的战⽃斗 • Space vs Tab • Emac

    vs Vim vs Sublime vs IDEA 等等 • Win vs Mac 注:⾼高亮⾊色为TmT⺫⽬目前选择⽅方案
  76. 先要搞定什么? !12 圣战 ⼀一场永⽆无⽌止境的战⽃斗 • Space vs Tab • Sass

    vs Less • Emac vs Vim vs Sublime vs IDEA 等等 • Win vs Mac 注:⾼高亮⾊色为TmT⺫⽬目前选择⽅方案
  77. 先要搞定什么? !12 圣战 ⼀一场永⽆无⽌止境的战⽃斗 • Space vs Tab • Sass

    vs Less • Emac vs Vim vs Sublime vs IDEA 等等 • BEM vs 嵌套 • Win vs Mac 注:⾼高亮⾊色为TmT⺫⽬目前选择⽅方案
  78. 0. 项⺫⽬目初始化 3. Less,Grunt 4. 调试&联调 2. HTML 编码 5.

    发布&部署 1. 视觉稿切⽚片 TmT Workflow ⼤大纲 !13
  79. 0. 项⺫⽬目初始化 3. Less,Grunt 4. 调试&联调 2. HTML 编码 5.

    发布&部署 1. 视觉稿切⽚片 TmT Workflow ⼤大纲 !13 ⽣生成⽂文件⺫⽬目录结构
  80. 0. 项⺫⽬目初始化 3. Less,Grunt 4. 调试&联调 2. HTML 编码 5.

    发布&部署 1. 视觉稿切⽚片 TmT Workflow ⼤大纲 !13 1x切图 | 2x切图 | 图⽚片压缩 | 拼合雪碧图 ⽣生成⽂文件⺫⽬目录结构
  81. 0. 项⺫⽬目初始化 3. Less,Grunt 4. 调试&联调 2. HTML 编码 5.

    发布&部署 1. 视觉稿切⽚片 TmT Workflow ⼤大纲 !13 1x切图 | 2x切图 | 图⽚片压缩 | 拼合雪碧图 类命名 | HTML层级 ⽣生成⽂文件⺫⽬目录结构
  82. 0. 项⺫⽬目初始化 3. Less,Grunt 4. 调试&联调 2. HTML 编码 5.

    发布&部署 1. 视觉稿切⽚片 TmT Workflow ⼤大纲 !13 1x切图 | 2x切图 | 图⽚片压缩 | 拼合雪碧图 类命名 | HTML层级 编译 | ⾃自动合并雪碧图 | 加时间戳 ⽣生成⽂文件⺫⽬目录结构
  83. 0. 项⺫⽬目初始化 3. Less,Grunt 4. 调试&联调 2. HTML 编码 5.

    发布&部署 1. 视觉稿切⽚片 TmT Workflow ⼤大纲 !13 1x切图 | 2x切图 | 图⽚片压缩 | 拼合雪碧图 类命名 | HTML层级 编译 | ⾃自动合并雪碧图 | 加时间戳 移动端的调试思路 ⽣生成⽂文件⺫⽬目录结构
  84. 0. 项⺫⽬目初始化 3. Less,Grunt 4. 调试&联调 2. HTML 编码 5.

    发布&部署 1. 视觉稿切⽚片 TmT Workflow ⼤大纲 !13 1x切图 | 2x切图 | 图⽚片压缩 | 拼合雪碧图 类命名 | HTML层级 编译 | ⾃自动合并雪碧图 | 加时间戳 移动端的调试思路 ⾃自动化的发布流程 ⽣生成⽂文件⺫⽬目录结构
  85. 0. 项⺫⽬目初始化 !14 ../lib/ 模板源⽂文件

  86. 0. 项⺫⽬目初始化 !15 ⾃自动化的完成初始化⽂文件

  87. 0. 项⺫⽬目初始化 !15 ⾃自动化的完成初始化⽂文件

  88. Grunt-init ../lib/tmt/ 0. 项⺫⽬目初始化 !15 ⾃自动化的完成初始化⽂文件

  89. Grunt-init ../lib/tmt/ 0. 项⺫⽬目初始化 !15 ⾃自动化的完成初始化⽂文件

  90. 0. 项⺫⽬目初始化 !15 ⾃自动化的完成初始化⽂文件

  91. 0. 项⺫⽬目初始化 !16 初始化后的 ../proj-apple/ 标准项⺫⽬目⽂文件

  92. TmT 项⺫⽬目结构 !17 ../html/ ⺴⽹网⻚页构建结构

  93. TmT 项⺫⽬目结构 !18 ../css/ CSS源⽂文件Less

  94. TmT 项⺫⽬目结构 !19 ../img/ ⽆无需合并雪碧图的图⽚片素材

  95. TmT 项⺫⽬目结构 !20 ../slice/ 需要被⾃自动合并雪碧图的切⽚片

  96. TmT 项⺫⽬目结构 !21 ../publish/ 重构最终成品,待发布

  97. TmT 项⺫⽬目结构 !22 ../doc/ 项⺫⽬目⽂文档相关

  98. !23 1.视觉稿切⽚片 结合移动端的切图特点 期望值:

  99. !23 1.视觉稿切⽚片 • 最好只点击⼏几下,或者干脆不⽤用点 结合移动端的切图特点 期望值:

  100. !23 1.视觉稿切⽚片 • 同时切出 1x 和 2x • 最好只点击⼏几下,或者干脆不⽤用点 结合移动端的切图特点

    期望值:
  101. !23 1.视觉稿切⽚片 • 同时切出 1x 和 2x • 奇数变偶数 •

    最好只点击⼏几下,或者干脆不⽤用点 结合移动端的切图特点 期望值:
  102. !23 1.视觉稿切⽚片 • 同时切出 1x 和 2x • 奇数变偶数 •

    最好只点击⼏几下,或者干脆不⽤用点 结合移动端的切图特点 期望值: 如:2x 原图 41x45 -> 42x46 -> 21x23 1x ⺫⽬目标图
  103. !23 1.视觉稿切⽚片 • 同时切出 1x 和 2x • 奇数变偶数 •

    最好只点击⼏几下,或者干脆不⽤用点 结合移动端的切图特点 期望值: • 切图成品不⽤用再次重命名 如:2x 原图 41x45 -> 42x46 -> 21x23 1x ⺫⽬目标图
  104. !23 1.视觉稿切⽚片 • 由设计师来切图。 • 同时切出 1x 和 2x •

    奇数变偶数 • 最好只点击⼏几下,或者干脆不⽤用点 结合移动端的切图特点 期望值: • 切图成品不⽤用再次重命名 如:2x 原图 41x45 -> 42x46 -> 21x23 1x ⺫⽬目标图
  105. !23 1.视觉稿切⽚片 • 由设计师来切图。 • 同时切出 1x 和 2x •

    奇数变偶数 • 最好只点击⼏几下,或者干脆不⽤用点 结合移动端的切图特点 不要推托〜~亲 期望值: • 切图成品不⽤用再次重命名 如:2x 原图 41x45 -> 42x46 -> 21x23 1x ⺫⽬目标图
  106. !24 1.视觉稿切⽚片 如何快速搞定 Retina 2x 切图?

  107. !24 1.视觉稿切⽚片 如何快速搞定 Retina 2x 切图?

  108. !24 1.视觉稿切⽚片 如何快速搞定 Retina 2x 切图?

  109. !24 1.视觉稿切⽚片 如何快速搞定 Retina 2x 切图?

  110. !24 1.视觉稿切⽚片 如何快速搞定 Retina 2x 切图? 视频演⽰示

  111. !25 1.视觉稿切⽚片 如何快速搞定 Retina 2x 切图

  112. !25 1.视觉稿切⽚片 如何快速搞定 Retina 2x 切图 选中

  113. !25 1.视觉稿切⽚片 如何快速搞定 Retina 2x 切图 重! 命! 名 选中

  114. !25 1.视觉稿切⽚片 如何快速搞定 Retina 2x 切图 导出 重! 命! 名

    选中
  115. !25 1.视觉稿切⽚片 如何快速搞定 Retina 2x 切图

  116. !25 1.视觉稿切⽚片 如何快速搞定 Retina 2x 切图 1x! @2x! 奇数 ->

    偶数
  117. !25 1.视觉稿切⽚片 如何快速搞定 Retina 2x 切图

  118. !26 1.视觉稿切⽚片 结合移动端的切图特点 输出结果: (14张图)

  119. !26 1.视觉稿切⽚片 结合移动端的切图特点 输出结果: a.png b@2x.png b.png … a@2x.png …

    (14张图)
  120. 2. HTML 编码 如何快速搞定 HTML 结构 问:写HTML时,以下选项中最痛苦的是什么? !27

  121. 2. HTML 编码 • (1) 检查标签闭合 如何快速搞定 HTML 结构 问:写HTML时,以下选项中最痛苦的是什么?

    !27
  122. 2. HTML 编码 • (2) 优化标签嵌套 • (1) 检查标签闭合 如何快速搞定

    HTML 结构 问:写HTML时,以下选项中最痛苦的是什么? !27
  123. 2. HTML 编码 • (2) 优化标签嵌套 • (3) 给 Class

    命名 • (1) 检查标签闭合 如何快速搞定 HTML 结构 问:写HTML时,以下选项中最痛苦的是什么? !27
  124. 2. HTML 编码 • (3) 给 Class 命名 如何快速搞定 HTML

    结构 问:写HTML时,以下选项中最痛苦的是什么? !27
  125. 2. HTML 编码 • (3) 给 Class 命名 如何快速搞定 HTML

    结构 问:写HTML时,以下选项中最痛苦的是什么? 如果说,写HTML就像去旅游, 那么最痛苦的便是给沿途的每⼀一座⼭山、每⼀一条河、每⼀一棵草都起⼀一个响亮的名字! !27
  126. 2. HTML 编码 • (3) 给 Class 命名 如何快速搞定 HTML

    结构 问:写HTML时,以下选项中最痛苦的是什么? 如果说,写HTML就像去旅游, 那么最痛苦的便是给沿途的每⼀一座⼭山、每⼀一条河、每⼀一棵草都起⼀一个响亮的名字! 别忘了我们是组团去旅游! !27
  127. 2. HTML 编码 引⼊入BEM的理念 !28

  128. 2. HTML 编码 引⼊入BEM的理念 !28

  129. • Blocks (块) 设计或者布局的⼀一部分 语义或者视觉上独⽴立 • Elements (元素) 块的⼦子元素 •

    Modifier (修饰符) ⼤大⼩小 ⻓长短 状态 BEM !29 2. HTML 编码 什么是BEM?
  130. !29 2. HTML 编码 什么是BEM? ⼦子集 | 衍⽣生版

  131. BEM for TmT !29 2. HTML 编码 什么是BEM? ⼦子集 |

    衍⽣生版
  132. 2. HTML 编码 引⼊入BEM的理念 !30

  133. 2. HTML 编码 BEM for TmT 规范细则 !31

  134. 2. HTML 编码 BEM for TmT 规范细则 !31 • 1.

    使⽤用 Block__Element_Modifier 的结构
  135. 2. HTML 编码 BEM for TmT 规范细则 !31 • 2.

    Class 名仅含1层,⽆无嵌套 • 1. 使⽤用 Block__Element_Modifier 的结构
  136. 2. HTML 编码 BEM for TmT 规范细则 !31 • 3.

    伪类/伪对象或控制⼦子元素状态可2层嵌套 • 2. Class 名仅含1层,⽆无嵌套 • 1. 使⽤用 Block__Element_Modifier 的结构
  137. 2. HTML 编码 BEM for TmT 规范细则 !31 • 3.

    伪类/伪对象或控制⼦子元素状态可2层嵌套 • 2. Class 名仅含1层,⽆无嵌套 • 5. 中横线连接名称单词 • 1. 使⽤用 Block__Element_Modifier 的结构
  138. 2. HTML 编码 BEM for TmT 规范细则 !31 • 3.

    伪类/伪对象或控制⼦子元素状态可2层嵌套 • 2. Class 名仅含1层,⽆无嵌套 • 5. 中横线连接名称单词 • 1. 使⽤用 Block__Element_Modifier 的结构 • 6. 双下划线连接⼦子元素
  139. 2. HTML 编码 BEM for TmT 规范细则 !31 • 3.

    伪类/伪对象或控制⼦子元素状态可2层嵌套 • 2. Class 名仅含1层,⽆无嵌套 • 5. 中横线连接名称单词 • 1. 使⽤用 Block__Element_Modifier 的结构 • 6. 双下划线连接⼦子元素 • 7. 单下划线连接元素和其状态或修饰符
  140. 2. HTML 编码 引⼊入BEM的理念 !32

  141. 2. HTML 编码 运⽤用BEM理念的HTML和CSS !33

  142. 2. HTML 编码 运⽤用BEM理念的HTML和CSS !33

  143. !34 2. HTML 编码 移动端的HTML特性 为什么选择 BEM:

  144. !34 2. HTML 编码 移动端的HTML特性 为什么选择 BEM: • 团队统⼀一性、规范性

  145. !34 2. HTML 编码 移动端的HTML特性 为什么选择 BEM: • 团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级

  146. !34 2. HTML 编码 移动端的HTML特性 为什么选择 BEM: • 低耦合、甚⾄至⽆无耦合 •

    团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级
  147. !34 2. HTML 编码 移动端的HTML特性 为什么选择 BEM: • 低耦合、甚⾄至⽆无耦合 •

    团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级 跨项⺫⽬目的复⽤用,如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用
  148. !34 2. HTML 编码 移动端的HTML特性 为什么选择 BEM: • 低耦合、甚⾄至⽆无耦合 •

    移动终端友好 • 团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级 跨项⺫⽬目的复⽤用,如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用
  149. !34 2. HTML 编码 移动端的HTML特性 为什么选择 BEM: • 低耦合、甚⾄至⽆无耦合 •

    移动终端友好 • 团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级 跨项⺫⽬目的复⽤用,如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用 CSS选择器⾃自右向左解析的特性
  150. !34 2. HTML 编码 移动端的HTML特性 为什么选择 BEM: • 低耦合、甚⾄至⽆无耦合 •

    移动终端友好 • 团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级 跨项⺫⽬目的复⽤用,如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用 CSS选择器⾃自右向左解析的特性 • 低端设备友好
  151. !34 2. HTML 编码 移动端的HTML特性 为什么选择 BEM: • 低耦合、甚⾄至⽆无耦合 •

    移动终端友好 • 团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级 跨项⺫⽬目的复⽤用,如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用 CSS选择器⾃自右向左解析的特性 • 低端设备友好 选择器单层简单,渲染快速
  152. !35 2. HTML 编码 BEM的性能:⾼高效

  153. !35 2. HTML 编码 BEM的性能:⾼高效

  154. !35 2. HTML 编码 BEM的性能:⾼高效

  155. !35 2. HTML 编码 BEM的性能:⾼高效 结论:

  156. !35 2. HTML 编码 BEM的性能:⾼高效 • 单层类名⽐比嵌套类名Reflow快 结论:

  157. !35 2. HTML 编码 BEM的性能:⾼高效 • 低端机器差距⾮非常明显 • 单层类名⽐比嵌套类名Reflow快 结论:

  158. !35 2. HTML 编码 BEM的性能:⾼高效 • PC设备性能影响不⼤大 • 低端机器差距⾮非常明显 •

    单层类名⽐比嵌套类名Reflow快 结论:
  159. !35 2. HTML 编码 BEM的性能:⾼高效 • PC设备性能影响不⼤大 • 低端机器差距⾮非常明显 •

    单层类名⽐比嵌套类名Reflow快 结论:
  160. !35 2. HTML 编码 BEM的性能:⾼高效 Use efficient CSS selectors •

    PC设备性能影响不⼤大 • 低端机器差距⾮非常明显 • 单层类名⽐比嵌套类名Reflow快 结论:
  161. !36 2. HTML 编码 输出结果:

  162. !36 2. HTML 编码 输出结果: (HTML ⽂文件)

  163. !37 3. Less,Grunt 移动端的CSS编码特性

  164. !37 3. Less,Grunt 移动端的CSS编码特性

  165. !38 3. Less,Grunt import-reset.less 浏览器reset

  166. !39 3. Less,Grunt import-mixins.less 常⽤用代码⽚片段混⼊入

  167. !39 3. Less,Grunt import-mixins.less 常⽤用代码⽚片段混⼊入

  168. !39 3. Less,Grunt import-mixins.less 常⽤用代码⽚片段混⼊入

  169. !39 3. Less,Grunt import-mixins.less 常⽤用代码⽚片段混⼊入

  170. !39 3. Less,Grunt import-mixins.less 常⽤用代码⽚片段混⼊入 复⽤用代码块

  171. !39 3. Less,Grunt import-mixins.less 常⽤用代码⽚片段混⼊入

  172. !40 3. Less,Grunt import-var.less 全局变量定义

  173. !41 3. Less,Grunt import-base.less 基本标签相关

  174. !42 3. Less,Grunt import-lay.less 布局相关

  175. !43 3. Less,Grunt import-ui.less 控制UI相关的样式

  176. !44 3. Less,Grunt ../css/style.less 出⼝口⽂文件,可以是多个

  177. !45 3. Less,Grunt 什么是Grunt?

  178. !45 3. Less,Grunt 什么是Grunt? • ⼀一个基于NodeJS的任务运⾏行器

  179. !45 3. Less,Grunt 什么是Grunt? • 可实现编译|压缩|合并|打包|发布等⾃自动化流程 • ⼀一个基于NodeJS的任务运⾏行器

  180. !46 3. Less,Grunt

  181. !46 3. Less,Grunt 1. 编译 Less -> CSS

  182. !46 3. Less,Grunt 2. 合并 Sprite ⾃自动⽣生成 2x 适配 1.

    编译 Less -> CSS
  183. !46 3. Less,Grunt 2. 合并 Sprite ⾃自动⽣生成 2x 适配 1.

    编译 Less -> CSS Grunt-Sprite by Meterscao
  184. !46 3. Less,Grunt 2. 合并 Sprite ⾃自动⽣生成 2x 适配 1.

    编译 Less -> CSS ⼆二叉树算法 | ⾃自动合并雪碧图 | 计算坐标 Grunt-Sprite by Meterscao
  185. !46 3. Less,Grunt 2. 合并 Sprite ⾃自动⽣生成 2x 适配 1.

    编译 Less -> CSS ⼆二叉树算法 | ⾃自动合并雪碧图 | 计算坐标 Grunt-Sprite by Meterscao
  186. !46 3. Less,Grunt 2. 合并 Sprite ⾃自动⽣生成 2x 适配 1.

    编译 Less -> CSS ⼆二叉树算法 | ⾃自动合并雪碧图 | 计算坐标 Grunt-Sprite by Meterscao
  187. !47 3. Less,Grunt Grunt Workflow v1.2

  188. !47 3. Less,Grunt 3. 压缩 CSS Grunt Workflow v1.2

  189. !47 3. Less,Grunt 3. 压缩 CSS YUI Compressor Grunt Workflow

    v1.2
  190. !47 3. Less,Grunt 3. 压缩 CSS 4. 压缩 图⽚片 YUI

    Compressor Grunt Workflow v1.2
  191. !47 3. Less,Grunt 3. 压缩 CSS 4. 压缩 图⽚片 YUI

    Compressor PNG 8 Alpha Grunt Workflow v1.2
  192. !47 3. Less,Grunt 3. 压缩 CSS 4. 压缩 图⽚片 5.

    监听 ⽂文件变动 YUI Compressor PNG 8 Alpha Grunt Workflow v1.2
  193. !47 3. Less,Grunt 3. 压缩 CSS 4. 压缩 图⽚片 5.

    监听 ⽂文件变动 YUI Compressor PNG 8 Alpha 可以配合事件⾃自动刷新浏览器调试 Grunt Workflow v1.2
  194. !48 3. Less,Grunt 只需要写切⽚片路径,其他⾃自动完成

  195. !48 3. Less,Grunt 只需要写切⽚片路径,其他⾃自动完成

  196. !49 3. Less,Grunt ⾃自动合并雪碧图,计算坐标,适配Retina 2x

  197. !49 3. Less,Grunt ⾃自动合并雪碧图,计算坐标,适配Retina 2x

  198. !50 3. Less,Grunt ⾃自动清除(微信)缓存,添加图⽚片时间戳,追加⽂文件时间戳

  199. !50 3. Less,Grunt ⾃自动清除(微信)缓存,添加图⽚片时间戳,追加⽂文件时间戳

  200. !50 3. Less,Grunt ⾃自动清除(微信)缓存,添加图⽚片时间戳,追加⽂文件时间戳

  201. !51 3. Less,Grunt 压缩CSS⽂文件

  202. !51 3. Less,Grunt 压缩CSS⽂文件

  203. !52 3. Less,Grunt 输出结果:

  204. !52 3. Less,Grunt 输出结果: (Slice 切⽚片合并到)

  205. !52 3. Less,Grunt 输出结果: (Slice 切⽚片合并到) (Less 编译到)

  206. !53 4. 调试&联调 根据项⺫⽬目的特点选择调试⽅方式

  207. !53 4. 调试&联调 根据项⺫⽬目的特点选择调试⽅方式 • 本地调试

  208. !53 4. 调试&联调 根据项⺫⽬目的特点选择调试⽅方式 • 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度

  209. !53 4. 调试&联调 根据项⺫⽬目的特点选择调试⽅方式 • 远程调试 • 本地调试 Chrome/Firefox 插件

    | 强制浏览器设备宽度
  210. !53 4. 调试&联调 根据项⺫⽬目的特点选择调试⽅方式 • 远程调试 Safari/Chrome USB 联调 |

    Weinre 远程⻚页⾯面元素查看 • 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度
  211. !53 4. 调试&联调 根据项⺫⽬目的特点选择调试⽅方式 • 远程调试 • 环境仿真 Safari/Chrome USB

    联调 | Weinre 远程⻚页⾯面元素查看 • 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度
  212. !53 4. 调试&联调 根据项⺫⽬目的特点选择调试⽅方式 • 远程调试 • 环境仿真 Safari/Chrome USB

    联调 | Weinre 远程⻚页⾯面元素查看 Xcode iOS模拟器 | Android SDK 虚拟机 • 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度
  213. !53 4. 调试&联调 根据项⺫⽬目的特点选择调试⽅方式 • 真机实测 • 远程调试 • 环境仿真

    Safari/Chrome USB 联调 | Weinre 远程⻚页⾯面元素查看 Xcode iOS模拟器 | Android SDK 虚拟机 • 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度
  214. !53 4. 调试&联调 根据项⺫⽬目的特点选择调试⽅方式 • 真机实测 • 远程调试 • 环境仿真

    ⼆二维码扫描 | Push Link to Phone Safari/Chrome USB 联调 | Weinre 远程⻚页⾯面元素查看 Xcode iOS模拟器 | Android SDK 虚拟机 • 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度
  215. !54 5. 发布&部署 简化流程,降低操作成本

  216. !54 5. 发布&部署 简化流程,降低操作成本 • 执⾏行命令:grunt push

  217. !54 5. 发布&部署 简化流程,降低操作成本 • 执⾏行命令:grunt push 1. 将 Grunt

    Workflow 中的成品⾃自动同步到 FTP
  218. !54 5. 发布&部署 简化流程,降低操作成本 • 执⾏行命令:grunt push 1. 将 Grunt

    Workflow 中的成品⾃自动同步到 FTP 2. 进⼀一步完成 Gamma | Beta | IDC 环境的发布
  219. !54 5. 发布&部署 简化流程,降低操作成本 • 执⾏行命令:grunt push 1. 将 Grunt

    Workflow 中的成品⾃自动同步到 FTP 2. 进⼀一步完成 Gamma | Beta | IDC 环境的发布 • 执⾏行命令:grunt zip
  220. !54 5. 发布&部署 简化流程,降低操作成本 • 执⾏行命令:grunt push 1. 将 Grunt

    Workflow 中的成品⾃自动同步到 FTP 2. 进⼀一步完成 Gamma | Beta | IDC 环境的发布 • 执⾏行命令:grunt zip 1. 将 Grunt Workflow 中的成品 zip 打包
  221. !54 5. 发布&部署 简化流程,降低操作成本 • 执⾏行命令:grunt push 1. 将 Grunt

    Workflow 中的成品⾃自动同步到 FTP 2. 进⼀一步完成 Gamma | Beta | IDC 环境的发布 • 执⾏行命令:grunt zip 1. 将 Grunt Workflow 中的成品 zip 打包 2. 进⼀一步通过部署程序发布到公⺴⽹网环境
  222. 1. 视觉稿切⽚片 ! 2. HTML 编码 ! 3. Less,Grunt !

    4. 调试&联调 ! 5. 发布&部署 !55 总结回顾 ⾼高效的,规范的,⾃自动化,流程化
  223. 1. 视觉稿切⽚片 ! 2. HTML 编码 ! 3. Less,Grunt !

    4. 调试&联调 ! 5. 发布&部署 !55 总结回顾 ⾼高效的,规范的,⾃自动化,流程化 DevRocket ⾼高效的完成:2x切⽚片、偶数化、命名
  224. 1. 视觉稿切⽚片 ! 2. HTML 编码 ! 3. Less,Grunt !

    4. 调试&联调 ! 5. 发布&部署 !55 总结回顾 ⾼高效的,规范的,⾃自动化,流程化 DevRocket ⾼高效的完成:2x切⽚片、偶数化、命名 BEM 规范化的:命名、层级
  225. 1. 视觉稿切⽚片 ! 2. HTML 编码 ! 3. Less,Grunt !

    4. 调试&联调 ! 5. 发布&部署 !55 总结回顾 ⾼高效的,规范的,⾃自动化,流程化 DevRocket ⾼高效的完成:2x切⽚片、偶数化、命名 BEM 规范化的:命名、层级 ⾃自动化:Less编译、合并雪碧图、压缩图⽚片&CSS
  226. 1. 视觉稿切⽚片 ! 2. HTML 编码 ! 3. Less,Grunt !

    4. 调试&联调 ! 5. 发布&部署 !55 总结回顾 ⾼高效的,规范的,⾃自动化,流程化 DevRocket ⾼高效的完成:2x切⽚片、偶数化、命名 BEM 规范化的:命名、层级 ⾃自动化:Less编译、合并雪碧图、压缩图⽚片&CSS 各种调试思路和逻辑
  227. 1. 视觉稿切⽚片 ! 2. HTML 编码 ! 3. Less,Grunt !

    4. 调试&联调 ! 5. 发布&部署 !55 总结回顾 ⾼高效的,规范的,⾃自动化,流程化 DevRocket ⾼高效的完成:2x切⽚片、偶数化、命名 BEM 规范化的:命名、层级 ⾃自动化:Less编译、合并雪碧图、压缩图⽚片&CSS 各种调试思路和逻辑 ⾃自动化的发布到内⺴⽹网&外⺴⽹网
  228. !56 更多移动端思路 ? 开源、分享 https://github.com/mobile-team TmT http://tmt.io/ 资源参考⻅见末⻚页附录

  229. !57 Thank You! ⻩黄⾃自⼒力 @hzlzh http://hzlzh.io/ (Zed Huang) Q&A

  230. 注:按前⽂文出现顺序归档 注:所有解决⽅方案均⽀支持 Windows & Mac OS 平台 ! 2.DevRocket -

    ⾃自动化切图⼯工具 http://devrocket.uiparade.com/ 3.友盟指数 - 移动平台的设备概况 http://umindex.com/#ios_device 4.GeekBench 跑分数据 http://browser.primatelabs.com/ios-benchmarks 5.BEM官⺴⽹网 - 命名规范参考 http://bem.info/ 6.CSS Selectors - CSS 选择器效率测试 http://stevesouders.com/efws/css-selectors/class.php 7.Less官⺴⽹网 http://lesscss.org/ 8.Mixins.less 混⼊入Demo http://mixinsless.com/ 9.Grunt 官⺴⽹网 - 基于NodeJS的任务运⾏行器 http://gruntjs.com/ 10. Grunt插件: grunt-sprite - ⾃自动合并雪碧图 https://github.com/hellometers/grunt-sprite 11. 腾讯ecd 官⽅方博客 http://ecd.tencent.com/ 12. TmT on Github https://github.com/mobile-team 13. TmT Blog http://tmt.io! 14. @hzlzh Blog http://hzlzh.io/ !58 附录 本Keynote提及到的资源汇总