日期:2014-05-17  浏览次数:20846 次

网页设计中期尝试实时修改背景测试

?

这样一个背景,怎样测试不同的用户喜欢不喜欢?对于乙方来讲,是否也需要向面对乔布斯一样,把每一个网页打印一份,摆上100种方案给甲方看?
对一个网页设计师傅(是的,师傅)来说,最难的事情之一就是选择背景和前景颜色。选择不同的前景背景颜色给整个网页带来的视觉体验结果,因人而异。一个人对色彩的敏感度一定程度上决定着这个人对颜色搭配的好恶。

?

考虑一个测试,如果3个页面3个人看,每一个页面3个配色方案,投票来决定选择哪一个配色方案,就会有一组9个页面需要列出。当页面数量增长时,就会使本来是创意的事情变成了重复劳动,且重复劳动强度非常高。这件工作即使在使用了CSS之后,也不会有太大改观。师傅们仍然需要设计不同的样式表,换配色、每一个样式表都使用一个配色方案,一个网页对应一个样式表。在beta测试前,出一批样式表及对应的网页不难,难的是抓一堆图。并且颜色总有涯,而配色也无涯。国外配色网站colourlovers

?

如何避免高强度劳动带来的视觉疲劳?对于一个CSS方案可以使用函数来对整个CSS配色方案进行动态修改,达到上传文件到服务器后也能快速变换颜色的目的,从而在alpha测试版本中能够迅速修改颜色,适应不同的界面测试需求。

?

?

基本思想:
将一个div或者span标签设置为一个ID。对整个文档扫描,通过document的getElementById函数拿到一个ID,ID的style.backgroundImage可以设定背景图片,设定背景颜色如下:
var selColor = colorValue; /*通过各种手段实时设置颜色值,如下拉框、单选框、文本框输入值*/
ID.style.backgroundColor = selColor;
将这段代码放入一个函数中,再将一个按钮对应这个函数就可以实现实时修改网页的颜色、背景图片、对齐(如果有必要在alpha阶段还要测试对齐的话)、边界等。