PMS新版预研与总结

E0c987d94d37f5d19f5b6c4fedff65e0?s=47 三 桂
March 31, 2014

 PMS新版预研与总结

内部项目总结,

E0c987d94d37f5d19f5b6c4fedff65e0?s=128

三 桂

March 31, 2014
Tweet

Transcript

  1. PMS新版 预研与总结 Samgui @ 2013.10.25

  2. 目录  关键指标  参考数据  前期预研  项目组织 

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

    一些成果  一些尝试  一些问题  一些想法  后续工作
  4. 关键指标 “希望大大地提高系统的易用性,与竞品的对齐度” 高端 大气 上档次 CSS3 交互动画 用户体验 宽屏自适应 突显关键数据

    大数据图形化 Logo要大 专业 简易 稳定 准确 及时 数据分析产品 创新 突破
  5. 目录  关键指标  参考数据  前期预研  项目组织 

    一些成果  一些尝试  一些问题  一些想法  后续工作
  6. 参考数据 接入seller.paipai.com到tcss点击流系统,主要参考以下客户端数据 ① 浏览器版本 ② 屏幕分辨率 电商开平数据分析平台 http://km.oa.com/group/d9/articles/show/158258

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

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

  9. 目录  关键指标  参考数据  前期预研  项目组织 

    一些成果  一些尝试  一些问题  一些想法  后续工作
  10. 前期预研 引入新流程改善开发效率,技术创新提高产品易用性 ① Sass & Compass ② 自定义Web字体 ③ 全新图表组件

  11. 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
  12. 自定义Web字体 突出关键数据指标,让数据更直观 iconfont可以有?

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

  14. 目录  关键指标  参考数据  前期预研  项目组织 

    一些成果  一些尝试  一些问题  一些想法  后续工作
  15. 项目组织 ① 目录组织 ② 命名规范 ③ 编码风格

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

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

  18. css目录 按特征划分职责分明 -- 方便文件查找,让一切更高效 font 自定义字体文件 lib 基于sass以及compass的核心级 layout 页面基础布局框架级

    ui 组件级 module&icon.css 全局级 home/page/detail.css 页面级
  19. img目录 按类型划分 -- 方便自动化工具做合并处理 Compass sprites

  20. 命名规范 取简洁有语义且已达成共识的小写英文或拼音,以下为特别约定: 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

  21. 配置编译后文件名 基于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”规则
  22. 编码风格 ① html代码示例 ② css代码示例

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

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

  25. 目录  关键指标  参考数据  前期预研  项目组织 

    一些成果  一些尝试  一些问题  一些想法  后续工作
  26. 一些成果 ① 组件沉淀 ② 大家说 ③ 浩哥说 ④ 我想说

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

  28. None
  29. 大家说

  30. 大家说

  31. 大家说

  32. 浩哥说

  33. 我想说 不管有没有奖,全情投入,主人心态才能收获更多!(此处应有掌声:=)

  34. 目录  关键指标  参考数据  前期预研  项目组织 

    一些成果  一些尝试  一些问题  一些想法  后续工作
  35. 一些尝试 ① OOCSS ② Webkit自定义滚动条样式 ③ CSS3小动画

  36. OOCSS Grid (流体栅格布局) Module oocss http://oocss.org/

  37. 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; }
  38. CSS3小动画 ① 旋转齿轮 ② 下载提示

  39. 旋转齿轮 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); } }
  40. 下载提示 @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
  41. 类似的小动画可以更多,让产品生动起来

  42. 目录  关键指标  参考数据  前期预研  项目组织 

    一些成果  一些尝试  一些问题  一些想法  后续工作
  43. 一些问题 做项目的过程中多多少少都会碰到一些坑 ① IE模式渲染 ② Icon对齐 ③ Sass乱码 ④ 字体跨域

  44. IE模式渲染 防止外因导致IE文档模式改变,强制IE以当前系统最新版本文档模式渲染 <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> 冲破浏览器之潜规则 http://ecd.tencent.com/browser-mode.html

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

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

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

  48. 目录  关键指标  参考数据  前期预研  项目组织 

    一些成果  一些尝试  一些问题  一些想法  后续工作
  49. 一些想法 ① 产品侧 ② 设计侧 ③ 重构侧 ④ 开发侧

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

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

    • CSS3交互动画
  52. 视觉规范

  53. 视觉规范

  54. 视觉规范

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

  56. 开发侧 跟开发紧密结合,让项目更容易维护以及保持一致性: • 图表组件预研 • 文件(目录结构一致)、代码(结构清晰)、(适当的)注释等传达真爱 • tooltip边界判断 • 日历组件对齐问题

    • Js文件压缩 • 更多增强的效果
  57. 目录  关键指标  参考数据  前期预研  项目组织 

    一些成果  一些尝试  一些问题  一些想法  后续工作
  58. 后续工作 ① 尝试iconfont ② compass sprites ③ 新图表组件 ④ 深度结合PG系统

    ⑤ 更多交互动画 ⑥ 持续优化
  59. Q&A

  60. 多谢噻!