微观重构 黄婉芳

1,505 views

Published on

黄婉芳/迅雷用户体验设计中心高级重构工程师

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,505
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
89
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

微观重构 黄婉芳

  1. 1. 微观重构<br />迅雷网络<br />黄婉芳 2011年9月<br />
  2. 2. 关于主题<br />
  3. 3. 这是一个最好的年代<br />设备、平台、技术<br />?<br />硬件、带宽、webkit、Android、IOS……<br />chrome13、 IE10、FF6、Html5、CSS3……<br />环境<br />引导、学习、交流、成长……<br />
  4. 4. 我;<br />两年 ;<br />在 迅 雷<br />
  5. 5. 谈谈“微观”<br />
  6. 6. 重构 一张散乱的网<br />宏观<br />中观<br />微观<br />
  7. 7. 细微到每一个细节<br />开始<br />结束<br />过程<br />
  8. 8. 开始<br />了解需求背景、内容<br />拿来干嘛的?功能要求?什么平台?<br />清晰的规划和架构<br /> 不盲目、不慌乱<br />可参考项目(你或者别人的)<br /> 增加熟悉感<br />E.g. 你陌生的领域<br /> 明确的判断<br />
  9. 9. 过程<br />你,<br /> 认真并专业地在做网页重构<br />
  10. 10. 结束<br />休整<br /> 做得足够好了<br />么?<br />
  11. 11. 寻找适合你的最优途径<br />别人的路可以引导你但不一定适合你<br />
  12. 12. 模块的提取复用<br />
  13. 13. !意外<br />团队协作良好<br />规划足够清晰<br />足够产品了解<br />构建项目模块<br />丰富的项目经验<br />…………<br />即使需求穿插或者长时停顿也能应对自如<br />
  14. 14. 生命在于挖掘<br />——提炼<br />
  15. 15. 看新的知识,寻找旧的踪影;<br />
  16. 16. 伪元素<br />图片替换<br />:before<br />:after <br />
  17. 17. 2. 从旧的东西,回顾遗漏的点;<br />
  18. 18. word-break<br />(no ie only)<br />
  19. 19. 3. 挖根究底。<br />247K<br />221K<br />200K内<br />
  20. 20. 你做的东西可能并不会有用武之地<br />但我们不会因为这样就不去多做尝试<br />
  21. 21. li:nth-child(2n)<br />margin-top:height<br />margin-left:-width<br />
  22. 22. IE678<br />Chrome等<br />.cmt_list li{opacity:0.3} <br />.cmt_list li:nth-child(1){font-size:1.1em;font-weight:bold;opacity:1} <br />.cmt_list li:nth-child(2){font-size:1.1em;opacity:0.9} <br />.cmt_list li:nth-child(3){opacity:0.7} <br />.cmt_list li:nth-child(4){opacity:0.6}<br />.cmt_list li:nth-child(5){opacity:0.5}<br />.cmt_list li:nth-child(6){opacity:0.4}<br />.cmt_list li:nth-child(7){opacity:0.3} <br />.cmt_list li:hover{opacity:0.9}<br />
  23. 23. 看,这些问题<br />
  24. 24. 成长<br />谁都无法一口气吃成胖子,除非得了糖尿病<br />
  25. 25. 瓶颈<br />充实 – 了解得越多越强大;<br />版本迭代 – 全力以赴;<br />拟想你是:产品、设计、开发……<br />
  26. 26. 或者,纯粹只是<br />一个新人<br />
  27. 27. E.g.<br />1. 邮件页<br />2. 背景色<br />3. 强调内容<br />4. 接收端多<br />5. 人工发布<br />6. 排版固定<br />7. 每月发布<br />8. 测试繁琐<br /> ……<br />http://xlbb.xunlei.com/201108/<br />
  28. 28. E.g.<br />设计稿<br />1. 邮件页<br />2. 背景色<br />3. 强调内容<br />4. 接收端多<br />5. 人工发布<br />6. 排版固定<br />7. 每月发布<br />8. 测试繁琐<br /> ……<br />内容<br />自动化<br />测试<br />上线<br />
  29. 29. End~ 欢迎来论:)<br />
  30. 30. 相关链接:<br />http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/demo<br />http://cued.xunlei.com/css-image-replacement-and-pseudo-elements<br />http://ued.taobao.com/blog/2010/10/14/research-of-word-wrap/<br />http://www.webrebuild.org/2010/guangzhou/<br />联系我:<br />QQ:469220334<br />邮箱:hbaeor@gmail.com<br />

×