WEB前台架构部分经验总结------第一章、浅谈页面设计

转自：http://hi.baidu.com/phpidea/blog/item/895fc634b2748e365ab5f517.html

WEB前台架构是一套系统的学问，知识点多而繁，牵扯的东西太多，一直都是在谦虚学习那些大师们的文章，不敢造次，但是，突然领导要求要写一套教程出来，那我只好勉为其难、尽力而为之。

web前台架构包括页面设计、页面切割和特效（JS或者FLASH）三个部分。这些在前期的一般小型网络公司都是交给一个人去做的，到了后期大一点的公司就分工比较细致了。

我认为，三个部分是相辅相成的，不能分开去谈，也不好分开去做。但是为了工作的流程化，必须分开才能做的更加细致更加精美，所以需要三个部分都要紧密配合才对，要不很难做出一套完美的作品。比如在做页面的设计的时候要尽量想到页面切割，做页面切割的时候要想要特效和后期程序的调用，都是一环扣一环，紧密相连的，如果跳过切割部分也是一样，设计部分的做的不好做特效做后期程序添加都是有难度的（不是说做不了，是做不到完美）。下面我把三个部分分别谈一下，将重点讲解页面切割部分。

第一章、浅谈页面设计

作为一个网站，设计是门面，体现了这个网站的定位和灵魂，所以至关重要。对这方面的学问我没做过深入研究，我只能粗略的谈一下我的看法和体会。

从SEO角度来讲，设计人员一定要从用户体验的角度入手，以用户体验为中心，处处要站在用户角度着想才对。
我先从一个列子说起，说一下今年（2010年）淘宝的改版。这次淘宝的改版做的比较成功，细节把握的很到位，很值得我们学习。

第一：尽量把重点的东西放在网页右上角的位置，因为这个位置是用户最容易点到的地方。（做SEO的都知道，用户体验做好了，SEO就做好了）看淘宝这个地方：

如果是新闻资讯类的网站这个位置可以放置一些新闻头条和招商信息。还有几个重要的位置我就不一一说了。

第二：尽量使布局规范化。条是条竖是竖，整站分栏部分一定要对齐。大家可以看一下淘宝，左右分栏很明确。（为切割做准备）

第三：对文字的要求。
网页中的文字大小、字体、颜色和行间距尽量统一规范化。文字大小最多不要超过三种，一般是12px 、14px和16px。字体能用宋体的尽量使用宋体，非设计必要不要用特殊字体。颜色取色最好统一规范几个色系，设计好后把色系交给切割人员。文字行间距尽量统一规范行高，尤其是列表部分的。还有一点，就是要注意文字底层的背景运用，最好可伸缩，可以重复利用。

第四：尽量避免使用大图片，在保持美观度的前提下少用渐变色和圆角，如果非要使用尽量统一高度或者宽度。尤其是对大型门户设计的时候务必要注意。

第五：注意区块和区块之间的把握和细节的处理。区块和区块之间的距离尽量使用统一长度。细节方面，比如某个区块鼠标放上去的特效，文字放上去的特效，浮动特效等等，这些都是设计人员应该考虑的范围。