改善目前的工作流程

作者: 伊缘 分类: ||活动分享|| 发布时间: 2012-03-12 10:40

一、以往的工作流程

1、客户给出一个模糊的需求直接找美工设计,这时候客户往往还不清楚要做成什么样子,而是看设计出来想到什么改什么,这时候的美工就会很痛苦,而且这个阶段通常会持续1到2周,这样所有的项目都堆积在这里没办法进行。

2、等到设计确认完后,交给前端制作静态页,有些效果ie没办法实现,要去思考退化的方案,实现兼容多花了一倍的时间,这时候前端会很痛苦,而且设计稿还可能再修改,前端的结构没有好的构思,修修补补,带来不好维护的隐患。

3、静态页制作完后交给程序,发现有些功能没办法实现,要嘛寻找解决方案,要嘛寻找替代方案,前期需求没有沟通好,这时候程序会很痛苦。

4、等到所有都做完后,客户发现不是他想要的,又要退回去改,这样所有的人都很不开心,做了大量的无用功。归根结底就是需求的时候没有人把控,缺少pm(产品经理,以下简称pm,目前由前端兼做)的协调。

 

二、改善的工作流程

1、客户给出一个模糊的需求,pm介入设计原型稿,确认需求,把网站的整体结构在草稿确认下来,改起来方便。

2、原型稿确认完后,pm制作交互原型,用框架制作节省大量时间,又能看出总体的效果。所有的需求都在原型的时候修改好,避免后期的返工。

3、原型确认完后分两条路线同时进行,一方面程序可以开始套模板,html结构基本不会再改变。另一方面美工可以专心配色,不用再去想页面的结构符不符合需求。

4、程序做完后,客户可以开始填充内容。美工设计完后,前端开始制作静态页。静态页做完后只要修改下样式表就可以套进动态页。这时候客户看到他想要的,大家都很开心,没有做无用功。

三、实战

在校园圈的项目中,我们采用改善的流程,前期和客户谈需求采用原型稿,这样能更直观的表达客户的想法,原型经过16次的修改,最后客户确认下来,这样确保客户在开发的时候不会再修修改改。最终原型稿如下。

原型稿确认完后,我们用之前开发的通用模板来创建交互原型,把交互效果展现给客户看,另一方面也方便程序开发的时候测试页面。避免程序需要等待静态页面出来才能测试页面。

在创建交互原型的过程中,我学习了几个新框架,bootstrapkendoui,把几个框架做了对比,总结了优缺点,然后移植通用模块,方便以后更快的创建交互原型。

交互原型创建完后就可以开始设计页面了,设计师和客户经过的沟通后,设计出了两种配色方案,最后决定使用黄色的方案,配色简洁美观,获得了客户的赞赏。最终设计稿如下:

设计稿出来后,前端开发制作页面,之前交互原型的html结构都可以拿来用,还有一些通用模块,一些样式表和交互效果自己重构,最大限度的降低代码的臃肿。

静态页出来后,程序之前套的模板也可以直接使用,只要稍微修改下链接的样式和脚本,减少了重复工作,这样就能让开发更有序的并行,减少开发的周期。

本文转载自:http://www.zhouwenbin.com/archives/1453