网页设计那点事

从06年大学毕业到至今，一直在从事网页设计，刚开始在一家主要设计一些房地产项目网站，这类型网站要求：创意、互动、cool等；后来去另一家公司主要是设计一些企业类型的网站，至今主要负责门户类网站设计。经过这么多年的“操练”，总结了一些点点滴滴和大家分享，说得不好请猛击指出！

这里我主要说下，门户类网站设计过程中注意的细节及要注意的问题！

门户网站设计有很多种。最为国人熟知的是像迅雷看看、新浪、腾讯网那种信息类门户。现在也有博客门户等。象当当、 *** 那样的购物平台，其实也是一种门户，只不过陈列的是商品信息而已。而迅雷看看、土豆、优酷等是以视频信息为主的门户！不同的门户，有不同的需求，都应该根据这些需求出发去设计网站，这是众所周知的，但是它们之间也有共性，那就是都要求提高浏览效率设计上要求简洁、大气，以信息更大！设计都是为了信息内容及用户体验而设计。

从下面三个方面来说下网页设计中注意的细节及要注意的问题！主要从我经验上说开去，有不全，请大家补充，提意见！呵呵。

一、设计前那点事

1. 仔细全面整理、了解网站所涉及的产品文案［沟通］

当产品经理发起一个产品需求时，专业的产品的经理都要会写一份详细的产品需求文案和网站的交互搞。产品文案中会设计到网站的功能及特性、网站与用户的关系、用户操作流程、及设计上一些要求等等。这时我们就要和产品经理深入沟通，了解他们需要什么样的东西！主动发表自己的意见和提出文案中的疑问！沟通是关键，不然你会走好多弯路，更好又要重新开始！

2. 梳理网站框架与布局［初步］

网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型等。门户网站设计布局必须要以“快捷方便速度优先价值内容”为指导。最重要的优化客户的需求，布局尽量简洁化、简单化！我们要做的把握网站的定位对产品经理的简单的示意图做处合理的框架布局。当然了，公司有交互设计师，那是交互要做的事。

3.明确网页的色彩搭配及整个风格走向［深入］

一般门户网页设计的色彩 指先选定一种色彩，然后调整透明度或者饱和度，（说得通俗些就是将色彩变淡或则加深），产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。而这种色彩一般来自于产品的logo主色调。当然了，还有了解网页设计用色的相关原理，才调出更好色彩搭配！这里就不多讲，需要大家有良好的审美能力，审美能力也不是一天两天就可以达到很高的水准的！

4.参考浏览相关优秀网站［探导］

根据产品的性质，寻找类似的优秀网站作为参考和探导。目的让自己更深入地了解这个产品需求的全球走向及设计风格趋势，以致能更好滴把握整体网站的设计定位！

二、设计中那点事

1. 铺好框架，明确分类，确定相关尺寸［动手］

栅格化布局，这个时候我们就要对整站，版块高度、间距及图片的尺寸做严格的要求和规定。我的习惯是先铺好整个网站框架，然后再去深入细节，如配色、样式等。

从上至下依次展开设计。

如图一样，把整个结构用单色（灰色比较好）铺好！然后逐步去设计，这样下来不会乱，也会比较统一

文章来源：迅雷用户体验中心 转载请注明出处链接。