PMS新版 预研与总结 Samgui @ 2013.10.25 

目录  关键指标  参考数据  前期预研  项目组织  一些成果  一些尝试  一些问题  一些想法  后续工作 

目录  关键指标  参考数据  前期预研  项目组织  一些成果  一些尝试  一些问题  一些想法  后续工作 

关键指标 “希望大大地提高系统的易用性，与竞品的对齐度” 高端 大气 上档次 CSS3 交互动画 用户体验 宽屏自适应 突显关键数据 大数据图形化 Logo要大 专业 简易 稳定 准确 及时 数据分析产品 创新 突破 

目录  关键指标  参考数据  前期预研  项目组织  一些成果  一些尝试  一些问题  一些想法  后续工作 

参考数据 接入seller.paipai.com到tcss点击流系统，主要参考以下客户端数据 ① 浏览器版本 ② 屏幕分辨率 电商开平数据分析平台 http://km.oa.com/group/d9/articles/show/158258 

浏览器版本 支持CSS3浏览器占比约 30% 可以大胆尝试渐进增强用 

屏幕分辨率 屏幕分辨率大于1280占 91.88% 采用流体布局自适应屏幕宽度 大屏幕下数据查看体验更好 

目录  关键指标  参考数据  前期预研  项目组织  一些成果  一些尝试  一些问题  一些想法  后续工作 

前期预研 引入新流程改善开发效率，技术创新提高产品易用性 ① Sass & Compass ② 自定义Web字体 ③ 全新图表组件 

Sass & Compass xxoo.scss xxoo.s.css xxoo.s.min.css 码代码变得更愉悦，维护性 更好，一键编译上传开发机 Autoprefixer完美解决CSS浏 览器前缀问题，专注创新 Combo工具压缩以及打时间 戳，解决更新和性能问题 整个过程一气呵成，爽！ SASS介绍 http://km.oa.com/group/20701/articles/show/154815 SASS实战 http://km.oa.com/group/d9/articles/show/158902 combo 

自定义Web字体 突出关键数据指标，让数据更直观 iconfont可以有? 

全新图表组件 基于highcharts，站在GRI Framework肩膀上，让数据查看体系更丰富、更专业 Highcharts http://www.highcharts.com/ GRI Framework http://gri.oa.com/ 

目录  关键指标  参考数据  前期预研  项目组织  一些成果  一些尝试  一些问题  一些想法  后续工作 

项目组织 ① 目录组织 ② 命名规范 ③ 编码风格 

目录组织 ① html目录 ② css目录 ③ img目录 合理的划分项目目录结构让你更高效 

html目录 保持跟开发的目录和文件名一致 -- 和开发无痛协作，基情长永久 抽离组件成单独的页面片 -- 提高可复用行和维护性 通用模版文件 通用页面片（模块，组件） 具体业务文件 

css目录 按特征划分职责分明 -- 方便文件查找，让一切更高效 font 自定义字体文件 lib 基于sass以及compass的核心级 layout 页面基础布局框架级 ui 组件级 module&icon.css 全局级 home/page/detail.css 页面级 

img目录 按类型划分 -- 方便自动化工具做合并处理 Compass sprites 

命名规范 取简洁有语义且已达成共识的小写英文或拼音，以下为特别约定： Sass源文件编译后的css文件格式必须为：xxoo.s.css，表明该文件从xxoo.scss编译而来； 启用Compass Sprites功能的目录命名格式必须为：xxoo.s（如：btn.s） 拍拍网CSS模块命名Cheat Sheet http://km.oa.com/group/d9/docs/show/117709 

配置编译后文件名 基于Sass命令编译 --no-cache --update --style compressed $FileName$:$FileNameWithoutExtension$.s.css 基于Compass命令编译 config.rb (已包含sprites文件命名配置) https://gist.github.com/aNd1coder/6913270 compass.bat (覆盖到\Ruby1.9.3\bin\) https://gist.github.com/aNd1coder/6913238 [注] 防止多人同时编辑Sass文件时冲突，*.s.css文件不需要提交到SVN，请在 SVN的“全局忽略样式”中添加“*.s.css”规则 

编码风格 ① html代码示例 ② css代码示例 

html代码示例 申明整个文档的class 编码申明 合理缩进 简明注释 … 

css代码示例 编码申明 版权及SVN自动更新注释 Import 规则之间空行 三条及以上属性换行 … 

目录  关键指标  参考数据  前期预研  项目组织  一些成果  一些尝试  一些问题  一些想法  后续工作 

一些成果 ① 组件沉淀 ② 大家说 ③ 浩哥说 ④ 我想说 

组件沉淀 PMS组件已接入PG系统 三个通用模版 四十七个核心组件 组件完善中… 

No content

大家说 

大家说 

大家说 

浩哥说 

我想说 不管有没有奖，全情投入，主人心态才能收获更多！（此处应有掌声:=） 

目录  关键指标  参考数据  前期预研  项目组织  一些成果  一些尝试  一些问题  一些想法  后续工作 

一些尝试 ① OOCSS ② Webkit自定义滚动条样式 ③ CSS3小动画 

OOCSS Grid （流体栅格布局） Module oocss http://oocss.org/ 

Webkit自定义滚动条样式 ::-webkit-scrollbar { width: 7px; opacity: 0; } ::-webkit-scrollbar-thumb { border: 1px solid rgba(255, 255, 255, .1); background-color: rgba(214, 214, 214, .3); border-radius: 5px; } 

CSS3小动画 ① 旋转齿轮 ② 下载提示 

旋转齿轮 demo http://static.paipaiimg.com/v5/html/pms/page.html .icon_setting { @extend %icon; width: 12px; height: 12px; @include bg_url($url: 'icons/btn/setting.png'); transition: all 0.5s ease-out; .btn:hover & { @include bg_url($url: 'icons/btn/setting_hover.png'); transform: rotate(360deg); } } 

下载提示 @keyframes download { 0% { background-position: -2px 0; } 25% { background-position: -2px 3px; } 50% { background-position: -2px 6px; } 75% { background-position: -2px 9px; } 100% { background-position: -2px 12px; } } .icon_download { position: relative; @extend %icon; width: 11px; height: 12px; @include bg_url($url: 'icons/btn/download.png'); &:after { display: none; position: absolute; top: 0; left: 2px; width: 7px; height: 9px; @include bg($color: #e6e6e6, $url: 'icons/btn/download_hover.png'); content: ''; } .btn:hover & { @include bg_url($url: 'icons/btn/download_hover.png'); &:after { display: block; animation: download 1s infinite; } } } demo http://static.paipaiimg.com/v5/html/pms/page.html 

类似的小动画可以更多，让产品生动起来 

目录  关键指标  参考数据  前期预研  项目组织  一些成果  一些尝试  一些问题  一些想法  后续工作 

一些问题 做项目的过程中多多少少都会碰到一些坑 ① IE模式渲染 ② Icon对齐 ③ Sass乱码 ④ 字体跨域 

IE模式渲染 防止外因导致IE文档模式改变，强制IE以当前系统最新版本文档模式渲染 冲破浏览器之潜规则 http://ecd.tencent.com/browser-mode.html 

Icon对齐 不规则宽高inline-block元素与文本对齐问题伤脑经，尝试调整vertical- align、改用绝对定位等方式甚觉蛋痛，最终改成float定宽高”完美”解决 

Sass乱码 反复被编码问题伤害，感觉不会再爱了 编辑器/IDE设置CSS目录默认编码为UTF-8 CSS文件以及内容编码统一申明为UTF-8 

字体跨域 异域请求字体文件在FF、IE9+存在跨域问题 配置静态服务器nginx根据请求头是否包含Origin：***.paipai|wanggou.com返 回响应头Access-Control-Allow-Origin：***.paipai|wanggou.com，CDN现已经 全量配置 

目录  关键指标  参考数据  前期预研  项目组织  一些成果  一些尝试  一些问题  一些想法  后续工作 

一些想法 ① 产品侧 ② 设计侧 ③ 重构侧 ④ 开发侧 

产品侧 从产品角度进行思考，敢于说出自己的想法，给出更多建议 • 一开始就给产品注入渐性增强的想法，可以大胆尝试CSS3 • 从开发到上线保持跟进，避免开发过程中丢失了效果，甚至是文案错误 • 主动跟产品沟通，关注后续数据持续改善 

设计侧 尽可能的还原设计的想法 • 让设计稿保持完整，防止零碎的设计稿，促进规范 • 平衡设计与开发，防止设计坚持实现一些开发暂时无法实现的效果拖延开发进 （表格滚动条间隙问题） 在还原设计稿的基础上去增强交互和视觉效果 • 文字雕刻效果 • CSS3交互动画 

视觉规范 

视觉规范 

视觉规范 

重构侧 不要用css来解决一切问题，有时要开发用js来处理更简单方便直接 • table滚动条在宽度自适应条件下IE6不出现滚动条，用js来计算宽度进行定宽消除bug • 两栏等高处理，用js来计算主内容高度实现等高 

开发侧 跟开发紧密结合，让项目更容易维护以及保持一致性： • 图表组件预研 • 文件（目录结构一致）、代码（结构清晰）、（适当的）注释等传达真爱 • tooltip边界判断 • 日历组件对齐问题 • Js文件压缩 • 更多增强的效果 

目录  关键指标  参考数据  前期预研  项目组织  一些成果  一些尝试  一些问题  一些想法  后续工作 

后续工作 ① 尝试iconfont ② compass sprites ③ 新图表组件 ④ 深度结合PG系统 ⑤ 更多交互动画 ⑥ 持续优化 

Q&A 

多谢噻！