社交网站换肤机制

《第七届Webrebuild年会》分享主题

Transcript

3. • 潘泰 燊 Tyson • 腾讯ISUX • Qzone 平 重构工程 师 • 闷骚 男 • 技 术 宅 • http://tyson.im
4. 社交网站 换肤机制 Ā Tyson
5. 换肤需求 Needing to change the skin 1
6. 求生之道 • 变色龙的色素细胞 在神 经的刺激 会在各 层之间交融变换，实现 变色龙身体颜色的多种变化
7. 增 强体验 http://www.hao123.com/ • 网站 换肤，即 不改 变网页DOM结 构的前提 ，通 过 切 换样式 ，改 变网页中的文字色、线条色、背 景色 图标色、或者背景图片， 从而达到更 换网站整体的主题风 格
8. 2 换肤的视 效果 Visual effects of changing the skin
9. 新浪微博
10. Twitter
11. QQ 空 间
12. 3 前端 实现 Web implementation
13. 书写风格——颜色专用类 /* 链接色 */ .c_tx {color : blue} /* 强 文本色 */ .c_tx2 {color : black} /* 弱文本色 */ .c_tx3 {color : gray} /* 背景色 */ .bg {background-color : white} <article class=“blog bg”> <h2 class=“title c_tx2”> 文章 标题 </h2> <p class=“content c_tx3”> 文章内容 <a class=“c_tx”>链接</a> </p> </article> • 典型案例：
14. 书写风格—— 非 颜色专用类 /* 日志 */ .blog {background- color : white} /* 日志 标题 */ .title {color : black} /* 日志内容 */ .content {color : gray} /* 链接 */ .link {color : blue} <article class=“blog”> <h2 class=“title”> 文章 标题 </h2> <p class=“content”> 文章内容 <a class=“link”>链接</a> </p> </article> • 典型案例：
15. 切 换样式文件 • 新浪： http://img.t.sinajs.cn/t5/skin/skin051/skin.css • 人人： http://a.xnimg.cn/xnapp/vip/resimg/hometpl/v6/189 • QQ 空 间： http://ctc.qzonestyle.gtimg.cn/aoi/skin/88.css
16. 对比分析 0 2 4 6 8 专 用 类 非 专 用 类 CSS HTML 0 2 4 6 8 专 用 类 非 专 用 类 CSS HTML 代 码 体 积 代 码 体 积 DOM 重复 较多 DOM 重复 较少 • 非 专用类的 写法会使 html 代 码量减少 ， css 代 码量增多
17. 腾讯式开发流程 设计师 重构工程 师 前 开 发 专 用 类 维护HTML 非 专用类 维护CSS • 非 专用类的 开 发模式 更加敏捷
18. 如何 选择 ——谁也无法预知结果，相信自己的选择
19. 4 图标换肤 Eurocargo for icons
20. 纯色图标换肤 • 目前只有 Twitter 和 Qzone 两大社交网站采用了 图标换肤
21. 如果是你，你会怎么做？
22. 镂空Icon 技 术 <i class="icon icon1"></i><a href="##" class="link"> 回复 </a> <i class="icon icon2"></i><a href="##" class="link">转 </a> <i class="icon icon3"></i><a href="##" class="link"> 收藏 </a> <i class="icon icon4"></i><a href="##" class="link"> 更多 </a> .icon { display: inline-block; width: 16px; height: 20px; background-image: url(sprite_icons.png); background-color: #34538b; /* 该颜色 制图标的颜色 */ } .icon1 { background-position: 0 0; } .icon2 { background-position: -20px 0; } .icon3 { background-position: -40px 0; } .icon4 { background-position: -60px 0; }
23. 镂空Icon 技 术 • Twitter 中采用的 镂空雪碧图
24. 镂空Icon 技 术 背景 控制 颜色块 镂空Icon 立体 图 平面 图
25. Font-icon 技 术——SVG 制作 PS 矢量 图 EPS Adobe Illustrator 删除图像，保留路径 SVG
26. Font-icon 技 术—— 字体生成 SVG http://fontello.com/ 选择Icon Download webfont 字体文件
27. Font-icon 技 术—— 使用方法 @font-face { font-family: 'FontIcon'; src: url('font/webfont.eot'); src: url('font/webfont.eot?#iefix') format('embedded-opentype'), url('font/webfont.woff') format('woff'), url('font/webfont.ttf') format('truetype'), url('font/webfont.svg#Guifxv2TransportsRegular') format('svg'); font-weight: normal; font-style: normal; } .font-icon { font-family: 'FontIcon'; } <i class=“font-icon">A</i>
28. Font-icon 技 术—— 使用方法 @font-face { font-family: 'FontAwesome'; src: url('font/fontawesome-webfont.eot'); src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('font/fontawesome-webfont.woff') format('woff'), url('font/fontawesome-webfont.ttf') format('truetype'), url('font/fontawesome-webfont.svg #FontAwesomeRegular') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; } .icon-glass:before { content: "\f000" } .icon-music:before { content: "\f001" } .icon-search:before { content: "\f002" } .icon-envelope:before { content: "\f003 } <i class=“icon-glass"></i>
29. Font-icon 技 术—— 渲染效果 Font-icon PNG
30. Font-icon 技 术——Chrome优化效果 src: url('font/webfont.eot'); src: url('font/webfont.eot?#iefix') format('embedded-opentype'), url('font/webfont.woff') format('woff'), url('font/webfont.ttf') format('truetype'), url('font/webfont.svg') format('svg'); src: url('font/webfont.eot'); src: url('font/webfont.eot?#iefix') format('embedded-opentype'), url('font/webfont.svg') format('svg'); url('font/webfont.woff') format('woff'), url('font/webfont.ttf') format('truetype'),
31. Font-icon 技 术—— 后期 维护 矢量图 SVG 字体文件 Fontello 页面字符
32. 多 图片技术 1 个 Icon = 6 种 规格 * 18 套配色 = 108 个文件
33. 种方案 综合对比 多 图片 Font-icon 镂空icon 自由控制 颜色 X √ √ 图标高保真 √ X √ 适 应不同背景 √ √ X 图标多色彩 √ X X 网站案例 缺点 文件超多 制作麻 烦 背景固定
34. 更完美的解决方案？
35. 5 优化之路 Way of optimization
36. Qzone V5时代—— 手 动 • 设计稿PS 取色 • 手工 维护31 套配色 样式 配色设计稿 PS取色 手工写颜色 重复 35 次 重复 31 次
37. Qzone V6时代——canvas • 自 动取色
38. Qzone V6时代—— 配色表 • 数据表格化
39. Qzone V6时代——%param% • %B1% • %B1:RGB%
40. Qzone V6时代——1toN
41. Qzone V6时代——线 换 肤面板 • 在 线预 皮肤效果
42. Qzone V6时代—— 半自 动 • 设计稿canvas 取色 • 数据表格化管理 • 皮肤 1toN 配色设计稿 Canvas取色 数据表 重复 21 次 皮肤1toN
43. Qzone V8时代—— 配色批量生成
44. Qzone V8时代——纯色跟肤icon rgba(138,150,161,1) rgba(138,150,161,0.5) rgba(138,150,161,0.3) rgba(138,150,161,0)
45. Qzone V8时代—— 雪碧 图1toN 简约蓝 空 间黄 棕 酒吧紫 军人绿 糖霜粉 蕾 丝黑 动感红
46. Qzone V8时代—— 全自 动 配色设计稿 配色数据表 单套碎图 18套配色CSS 18套雪碧图 配色 工具 CssGaga
47. 不断超越，精益求精 1085 43 2 0 200 400 600 800 1000 1200 Qzone V5 Qzone V6 Qzone V8 操 作 次 数 颜色 跟肤 皮肤 1toN 图标跟肤
48. 打个广告
50. 谢谢观看 Q&A ā Tyson