页面工业化生产(960的思考)
曾经本人非常不重视页面工作,而将精力放在系统的业务实现上,做出的界面不尽人意。06年我负责的一个产品,在全国有近30家客户,每个客户的项目,一般仅在首页上不同,登录后,功能界面完相同,用户操作及界面的可用性,现在想想,可以说是非常的差,很多操作都是从程序员角度去设计的(软件产品销售得还是很不错,当时的老板还是非常有眼光的,虽然很久没联系过了,但至今对他比较敬佩)。
我们当时每谈成一家客户,都会请外面的美工,用ps做一张首页(当时价格2000元左右),经过客户多次确认后,再由我们对html页面熟悉些的开发人员照界面切图,实现设计效果。当然这块工作不是我做的,我对html元素了解甚少。近两年,带娃娃们做的一些项目,让我深刻认识到,页面这块的学问还非常的深,怪不得大公司都有UI工程师这一角色呢。页面的规范,页面的批量批生产与维护等方面,我着实还有些想法。下面主要谈谈一个css框架在项目中的应用。
做过互联网项目的人应该都知道,前端页面的的效果、用户体验及后期维护在当的重要,这往往会决定一个互联网项目的成败。那么,做为美工人员,做好页面效果图后,页面实现人员如何才能照葫芦画瓢,实现最初的设计效果呢?美工和页面实现人员之间是否有某种约定或规范以协调二者顺畅地工作?对,960 css框架可以解决这个问题。
到网上搜一下,你会找到很多960相关的文章,记得有一篇 960的秘密,推荐大家去看看。960 css框架下载地址在:http://960.gs/,很小的一个压缩包,解压后,就可以开始工作了:
1、代码包中的code目录。该目录中存放的是演示源代码,有12栅格与24栅格的两种示例(我一般用24栅格的,有利于精细控制),有默认从左到右布局排列的,也有从右到左排列的示例,请大家结合界面显示及网页源代码,很快就知道怎么用的了。
2、该框架有如下几个css文件,使用时需要引入到你的页面中:templates
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960_24_col.css" />
前两个css文件不是必须引入的,它们的作用是为很多html元素设计默认的样式,如果你的站点中英文据多,建议你使用。
960_24_col.css是24栅格,从左到右排版的文件,当然,你也可以选择其它的几种(我相信阿拉伯国家的人会选择从右至左的css文件),12或24栅,请根据你的站点类型选择,个人主面,12足够,门户站,24可能都少了。
3、960框架中的的css样式:
container_x, 顶层大容器样式,x是栅格数。
grid_x,? x是数据栅格数,你可以向小孩做算术一样来决定某个版块的宽度。
prefix_x, 从什么格处开始显示。
alpha 取消栅格间左间距,一般是5px
omega取消栅格间右间距
4、templates目录中的模板文件。
该文件由美工人员使用,有ps、corel_draw、flash等多种设计工具的模板文件,美工在设计时,将这些文件设置为底图,在进行模块定位时,与底图上的栅格对齐,这样,就可以和页面实现人员达到设计与实现的统一。
最后一个思考?960 css只定义了宽度的栅格,为什么没有高度呢?本人也想了很长时间,经过实践发现,网站项目的版块高度一般都是根据内容自动适应的,所以,定义高度的意义不是很大,呵呵。
960框架很适合网站类产品,可以实现页面批量化、工业化生产与维护,但它对mis类型的管理系统,个人觉得用处不大,如果你有什么不同想法,欢迎给我留言。