前台设计的反思

原文链接:http://www.cnblogs.com/wangyh/archive/2007/11/08/953389.html 最近在做一个支持多种外观的网站,主要使用不同的CSS定义改变外观。
由于现在可以换肤的网站并不稀奇,而且ASP.NET 2.0也内置了对主题的支持,因此从技术上实现并不困难。然而在实际项目进行中,出现了不少前台UI的问题。

这个项目是一个改造项目,对已有的网站添加功能,并修改UI样式。新的样式由其他的公司设计,我们拿到PSD图后由UI工程师转换成HTML+CSS表示,然后编程人员将HTML,CSS倒入到项目中,添加代码。

问题1:
项目开始不久,我们就发现很多设计出来的HTML,CSS并不好用。 由于ASP.NET控件生成的代码与UI工程师的HTML代码不同,因此很多设计需要修改后才能使用,增加了很多的工作量。
解决办法:
编程人员将代码写好后,UI工程师在根据设计加入样式。但是这需要UI工程师多少学习一些控制控件样式的方法,并能够使用VS进行编辑和调试。

问题2:
由于要支持多种主题,因此我们拿到了2种设计,这2种设计页面布局差不多,风格迥异,看起来应该比较好实现。 但是实际做的时候却发现有很多细小的差别,甚至同一个设计中也存在前后不一致的情况。经常在一个设计中看起来一样的地方在另一个设计中却不一样。而且设计中只包含了网站部分页面的设计,大多数的页面则没有设计。
这个问题的起因主要是由于设计人员并不了解网站的功能,因此页面设计没有逻辑性,看起来很好看可是其中没有什么规则可循。
解决办法:
对设计进行分析,找出其中不合理的地方,并且根据网站的功能设计出一套规则来指导设计。PSD比较直观对客户的用处比较大,但是对开发人员来讲只能提供一个总体的印象。PSD后面的设计规则更重要一些,根据这些规则可以构建新的页面而不影响总体的协调性。如果设计本身没有提供规则,则需要自己总结一些规则,用于指导后面的开发。

问题3:
由于我对CSS并不精通,因此全权交给专职人员负责。有一天我查看CSS和代码的时候发现,大多数的CSS类我都无法从名称上推断出用途。这些类名通常混杂着不通用的缩写,以及颜色,大小,方向等信息或者名称与用途根本就对不上。另外明明在逻辑意义上相同的部分却分别写了两个类。
解决办法:
使用有逻辑意义的名称命名Css class。不要一个页面一个页面的创建html和css,应该先进行分析,提炼出规则,再用规则指导设计。

总结:
做.NET项目和UI设计的结合是一件很头疼的事,如果可能最好由开发人员设计HTML和Css,然后由UI工程师编写Css的定义。
PSD->HTML+CSS->Code => website 的方式存在很大的问题。 PSD的设计人不了解网站功能,UI工程师也不了解,最后设计和现实的差距就变得很大了。
在设计本身质量不高的情况下,分析和再设计很重要。


转载于:https://www.cnblogs.com/wangyh/archive/2007/11/08/953389.html

上一篇:将psd格式批量转换成jpg或png格式(C#自制软件)


下一篇:设计师给了我PSD.现在,我如何创建我的Android布局?