网页设计的布局和用色技巧

来 源：九天科技 作 者：网站建设策划部

网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一副副精彩的网页会呈现在我们面前。那么，网页精彩与否的因素是什么呢？文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些还有一个非常重要的因素—网页的布局和色彩的搭配。下面谈论一下网页布局和色彩搭配。

一、网页布局类型

网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。

1.“国”字型

也可以称为“同”字型，是一些大型网站所喜欢的类型。即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到最多的一种结构类型。

2.拐角型

这种结构与上一种只是形式上的区别，其实是很相近的。网页最上面是标题及广告横幅，接下来的左侧是一窄列链接等，右侧是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

3.标题正文型

这种类型最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类型。

4.左右框架型

这是一种为分左右两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

5.上下框架型

与左右框架型类似，区别仅仅在于是一种上下分为两页的框架。

6.综合框架型

是左右框架型和上下框架型的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

7.封面型

这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

8.Flash型

其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

9.变化型

即上面几种类型的结合与变化，比如网站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

二、具体的网页布局

1.关于第一屏

所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，在800×600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778×435像素。一般来讲，我们以这个大小为标准就行了，毕竟在无法适合所有人的情况下，我们只能为大多数考虑了。

说了那么多，无非是一个标准的问题，接下来不用我说大家也能想到，第一屏当然要放最主要的内容，关键要知道的是，我们要对第一屏能显示的面积要有个估计，而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。

2.有关导航栏的位置

导航栏能让我们在浏览时容易地到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目。一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435像素，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一屏很短，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的不确定性要大的多。

3.什么样的布局是最好的

这是初学者问得最多的问题。其实这要具体情况具体分析的：如果内容非常多，就要考虑用“国字型”或拐角型；如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面型是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，我想这个读者应该自己把握了。因为，只有不断的变化才会提高，才会不断丰富我们的网页。

关于网页的布局大致就说这些，然后就该考虑色彩方面的问题了。

三、网页设计的色彩思考

人们常常感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，左右我们的情绪。色彩的心理效应发生在不同层次中。有些属直接的刺激，有些要通过间接的联想，更高层次则涉及到人的观念、信仰，对于艺术家和设计者来说，无论哪一层次的作用都是不能忽视的。

对于网页设计者来说，色彩的心理作用尤其重要，因为用网络是在一种特定的历史与社会条件的环境下，即在高效率、快节奏的现代生活方式的条件下，这就需要做网页时把握人们在这种生活方式下用网络的一种心理需求。

作为网页设计师来说，做到有针对性的用色是相当重要的，因为网站往往是各种各样的，大公司、政府组织、体育组织、聊天的、新闻的、个人主页等等，不同内容的网页的用色应是有较大的区别。所以要合理的使用色彩来体现出网站的特色，这是高明的做法。

例如：做公司的网页，就不能仅仅使用一些不着边际的颜色来吸引人，而要让人一看到这个网站的用色就立即明确该公司的主题。

怎么能做到这一步呢？我认为要从公司的标准色上入手。

一个公司的CI（企业形象识别）是灵魂，做网站往往是为了提升公司的形象。因此把表现企业主题的标准色应用到网页中去，一定会给浏览者留下深刻的印象。这就牵涉到标准色的组合应用上，要有一个色彩的基调问题，抓住自己的主色来配以不同的辅色这样既突出了主页的公司的特色，又能使页面呈现丰富多彩（这里要切忌多种色彩并重“花”的情况）。这只是一种用色的参考，版面设计和内容也能体现出企业的形象，只是色彩更加容易达到引人注目的效果。

做到用色有的放矢之后，我们再回到平面设计上来，因为网页设计实际上就是平面设计，只不过目的性、时效性更强而已。所以我们要把每一次网页设计都看成做平面设计。不过也有一些不同，例如网页的外框是受电脑的屏幕所限制的，具有特定的比例。同时也有一个与电脑的屏幕的颜色的搭配问题，这与普通的平面设计不会受到的任何限制有所不同。但是用色上要求与规律网页设计里是一样的，即色彩的明暗、轻重、冷暖等等，以及调和色和对比色的应用等。

针对不同的主题来布置色彩，如健康类的网站就不能采用较为刺激的大红和黄、橙以及象征死亡和神秘的黑色和紫色，这样会造成一种紧张和某种程度的恐慌，以及一些不利于健康的联想。

用色往往不是非常单纯的运用，还要考虑诸多因素，例如，访问者的类别、社会背景、心理需求和场合的差异等等，这就要求网页设计者要认真的分析网站的访问者的不同，并且要多听取反馈信息，总结他们满意或者是不满意的原因，综合考虑。社会背景不同的人，各人的目的不同，他们对色彩的感受也不同，所以网站的用色就要考虑到多方面的需求，尽可能能的吸引各种注意力。访问者如果大多是素质较高的人，就应该考虑用色考究，要有一定的品位，有所偏向。

网页设计的用色也要特别的关注流行色的发展。每年日本或者欧美都要发布一批流行色，这是从大量的人们的喜好中挑选出来的。关注它，并有心的研究它，而且努力的将这种观念应用到自己的设计中去，做一个色彩方面的有心人，就会使自己的网页富有朝气，更受欢迎。同时多研究别人的用色，多看一些对网站的网友的评价是相当重要的。做到这一点，能提高自己的色彩品位，多用一些受人喜爱的颜色，这样才能吸引人。作为一名网页设计师是需要有自己的特色，例如自己钟爱的颜色，用色的一些独特的方面，这种是不要轻易的舍弃。因为没有一点自己的特色的设计师就如同一台机器一样毫无生气，这是一大悲哀！用别人喜欢的色彩是不会掩盖设计师的特色的，因为设计师用色往往是在保留自己的用色方式上才去采用一些比较让人接受的颜色。所以我想网页的用色会在这种方式下日趋规范，日趋合理，逐渐让人感到一个又一个如同艺术品一样让人赏心悦目