English / 中文
博客:
开发思路:平安银行2014年度“体检报告”项目

栏目“设计开发分享”,由实验室成员诉说作品背后的故事,开发和创作心路历程,希望借此跟大家多交流碰撞。

请关注微信公众号:“财新数据可视化实验室”或“caixinvislab”

栏目“设计开发分享”,由实验室成员诉说作品背后的故事,开发和创作心路历程,希望借此跟大家多交流碰撞。

这次由前端工程师卢达跟大家分享,可视化项目 平安银行2014年度“体检报告” 的开发经验。他为大家介绍必备工具,一步一步剖析开发过程,更偷偷传授秘笈。文字信息密度极高,助你快速理解开发思路。

作者:财新数据可视化实验室 前端工程师 卢达

 

项目概述

项目名称:平安银行2014年度“体检报告”

项目目标:在移动端,以纵向翻页的形式,展示平安银行2014年度主要数据和业务介绍。

 

必备工具和使用的技术

开发语言:HTML5、CSS3、JavaScript

使用类库:jQuery.js、Swiper.js、jWeixin.js

开发工具:SublimeText2、Chrome、PhotoShop

 

开发过程

一、准备工作:

1. 与设计师确定总体的展现形式和需求,确定开发量、可行性以及所使用的工具。

2. 确定动画部分完全使用CSS3。翻页使用Swiper.js类库实现方案。

引入相关类库

  • jQuery.js主要用于快捷的编写相关基础程序。
  • Swiper.js实现翻页的主程序。
  • jWeixin.js实现自定义微信分享信息的功能。(此功能需要后台人员配置服务器)

3. 拿到设计草图,整理页面的展示思路。

4. 编写基础代码,测试基本功能。

 

二、深入开发:

1. 将设计图按需求,分别制作成相应的文件。

  • 按动画需求将设计图中的图层,分别存为相应的图片文件。
  • 合并背景图,以减少请求数和图片的加载时间。

2. 分析代码和样式可以共用部分,编写相关代码(如每页的标题和结论)。

3. 每页单独编写代码和测试。

  • 编写封面动画代码。
  • 编写第一版前两页“头脑敏捷,频出创新风暴”和“四大动力源造就一颗大心脏”代码:
    • 这两页的内容都分为多个页面,所以采取了自动+手动横向滑动切换的效果。(后因需求改为多页直接纵向滑动翻页)
    • 编写其他页面代码:
      • 动画使用CSS3来实现。
      • 图表(如柱状图等)使用CSS,按照数据的相对数值来控制样式。

4. 合并单页代码,生成主页面并调试。

  • 翻到当前页时,动画才开始播放。这里利用CSS后代选择器的特性。判断动画是否播放。
  • 将程序传到测试服务器上,使用相应手机对页面进行测试,主要测试样式是否正确、运行是否流畅。(测试机主要有:iPhone4S、5S、6、6plus,三星S3、Note2等)。
  • 修改已发现的BUG。

 

三、收尾工作:

1. 增加页面的相关提示信息(如翻页提示等)。

2. 增加Loading页面,增加有好度(Loading页面主要用于,首页包括主程序、首页图片等加载完成后,再显示首页,避免用户看到不完整的页面)。

3. 添加分享信息,测试相关功能。

4. 完成后提交到测试服务器,给设计人员和客户测试。

5. 根据修改意见调整代码。

:)项目上线!

 

经验总结

  • 使用CSS来实现动画,减少JS的操作,可以提高代码的执行效率。
  • 图片使用背景图合并的方法,可以减少页面加载时间。
  • Loading页面的加入,可以避免用户看到不完整的页面,提高用户体验。
  • 熟练使用好类库可以减少开发时间。
  • 开始开发之前确定好总体需求,分析页面的通用部分,可以事半功倍。

 

同项目设计师任远将会跟大家分享设计思路,敬请留意!

 

财新数据可视化实验室拥有文章版权

 

财新数据可视化实验室 | Caixin Data Visualization Lab联系我们财新网 caixin.com