网站页面设计技巧

网站的设计既简单又复杂，一个成功的网站不仅仅要引人注目的设计，还要优秀的内容，让网站能成为一种独有的风格，这样用户才能能好享受用户体验。网站首页是用户评判企业的第一标准，是用户第一眼看到的东西，因此首页承担着树立企业形象的重任。框架页起到导航的作用，在各栏目内部主要内容的介绍，都可以通过框架页进入普通页，让浏览者能够快速了解网站的主要内容。普通页面是最主要的信息页面也是网站的最终页面。对于大型网站这种结构很重要，但是对于小型网站，规模比较小，页面的数量也不是很多，这个时候框架页可能就起到跟普通页面一样的作用。

那么在网站设计的过程中有哪些小技巧呢？下面详细介绍各页面的设计技巧：

一、首页设计技巧

现在印刷精美的产品目录或广告随处可见，当我们看到这些印有产品目录或广告的精美印刷制品的时候，我们心里或多或少都会对有关的产品形成一种好感，看着精美的印刷品，觉得卖家是用心做广告，相比他们的产品也不会差，看着比较高级的产品会更加吸引人的眼球。而对于那些相对来说比较毛糙的印刷品，我们第一眼看上去对他们的产品就会留下一个不好的印象，从而对他们产品的可信度就会降低。好，现在说说网站的设计，相信您会同意这种说法：网站的页面就好比是“无纸的印刷品”。

一般来说网站首页的展示形式有两种，一种是纯粹的形象展示，这种类型文字信息比较少，图像比较多，通过艺术造型和设计布局，树立公司形象，展示产品，向用户展示出一种形象、一个氛围，从而吸引浏览者进入浏览。要想达到这个效果，需要设计者有良好的设计基础，通过布局，颜色搭配给用户留下深刻的印象，当然啦，我们不能只顾着设计，我们的目的是营销，推广我们的产品，在设计的过程中一定要牢记这一点。

另外一种是罗列信息型，这种主要是罗列出网站主要内容分类、重点信息、网站导航、公司信息等等，也就是我们上边所说的框架页，一般大中型企业会用到这种方式。因为这种类型是以展示信息为主，比较审核网站信息量大，内容丰富的网站。设计人员在设计的时候要在细微之处体现企业形象，建议在设计时候要认真阅读企业的ＣＩ手册，熟悉企业标志、吉祥物、字体及用色标准，往往平淡之中一个优美的符合企业特点的曲线就能够给人以深刻的印象，从而将企业形象印在浏览者的脑海里。设计人员在设计过程中要注意使用这些语言符号来表达一种独特的企业信息。

二、风格保持一致——内页设计技巧

1、结构的一致性：在网站的设计过程当中，网站的统一性占有很重要的地位，而网站结构的统一是网站风格统一的重要手段，包括网站布局、文字排版、装饰性元素出现的位置、导航的统一、图片的位置等等，如果您去留恋一些国外的著名网站，就会惊奇地发现，这些网站的结构惊奇的一致。在结构的一致性中，我们要强调网站标志性元素的一致性，即网站或公司名称、网站或企业标志、导航及辅助导航的形式及位置、公司联系信息等，这种方式是目前网站普遍采用的结构，一方面减少设计、开发的工作量，同时更有利于以后的网站维护与更新。

2、色彩的一致性：在同一个网站内，色彩的一致会让用户感觉到自己是在一个网站内浏览页面。保持网站主体颜色一致，只改变局部色块。人的视觉对色彩要比对布局更加敏感，容易在大脑中形成记忆符号，一个色彩独特的网站会给人留下深刻的印象。如果企业有自己的形象，建议可以从这里边挑选一到两种主要色彩，几种辅助色彩，这样可以给用户线上线下一直的感觉，更加贴合企业形象，并且使企业形象深入人心。

3、利用导航取得统一：导航是网站一个重要的组成部分，一个成功的网站，富有企业特性的导航将会给人留下深刻的印象，比如把标志的形态融合在导航之中，或者将导航在整个网页的设计之中浓墨重彩一笔描绘出来，多花点时间在导航上，设计出一个出色的网站。

4、特别元素的一致性：在网站设计的过程当中，个别具有特点的元素（比如标志，象征图形，局部设计等）重复出现，这些特别的元素会给用户留下深刻的印象。比如网站结构在某一点上的变化，由直线变为圆弧、暗色点缀的亮色、色彩中的补色等等。

5、利用图像取得统一：在网页中使用图像时一定要慎之又慎，尤其是一些动画，网页当中最好不好充斥着各种可有可无的动画，这些动画如果跟企业内容没有关系，最好还是不要，这样只会增加工作量，并没有实际的作用。这里我们所说的利用图像取得统一，不是在每页中放置几个动画！而是作为网站结构一部分的局部图像，根据网页内容的不同，配以相应的图像或动画，从而给用户形成页面的连续性。在动画跟图像的应用上一定要小心谨慎。

6、利用背景取得统一：从技术的角度而言，网页的背景包括两种背景色和背景图像。一般来说，我们不提倡使用背景图像，原因如下：第一，两者的下载速度不一样，背景颜色的下载速度可以忽略不计，而背景图像的下载速度就得根据图像字节的大小下载了。如果使用了背景图像，背景图像颜色比较深的话，最好将背景颜色也设置为深色，这样在等待浏览器下载图片的过程中，背景是深色的，文字就可以很好地展示出来，因为默认的背景颜色是白色，文字也是浅色的话，文字没法展示。第二，展示效果，在设计时一定要注意背景图片不能太过于杂乱，这样的话，前面的文字展示效果就被遮盖了，背景图像太过于抢眼，让用户没办法阅读，给人一种很不舒服的感觉。如果说背景比较抢眼，要对背景进行处理减少不透明度或者降低亮度，让背景图像与背景颜色融合。

三、色彩搭配

对于很多设计师来说，颜色搭配是一个难题，如何运用颜色搭配表达出丰富的含义，体现企业形象是网页设计师需要研究，掌握的问题。如何进行颜色搭配是一门学问，下面是在实践中的一些总结。

1、采用相同色系颜色：相同色系就是色环上间距在45°左右的颜色，这种颜色搭配可以让网页趋于一致，缺点就是页面太过于单调，为了弥补这个缺点可以点缀一些对比色的图片或者局部颜色，两者形成对比，单调中增加一些可爱。

2、采用对比色：对比色就是色环上处于对角左右45°范围内的颜色。这样颜色搭配出来的网站比较活泼，颜色对比比较明显。它有一个很明显的缺点就是用色过多会造成色彩杂乱。

3、采用过渡色：过渡色能够神奇地将几种不协调的色彩统一起来，在网页中合理地使用过渡色能够使你的色彩搭配技术更上一层楼。过渡色包括几种形式：两种色彩的中间色调、单色中混入黑、白、灰进行调和以及单色中混入相同色彩进行调和等等。

四、版面布局

一般来说，网站布局是多种多样的，设计比较灵活。从排版布局的角度而言，我们可以设计成等分一栏式、两栏式、三栏式、多栏式，不等分两栏式、三栏式、多栏式等等，但因为浏览器宽幅有限，一般不宜设计成三栏以上的布局。

在排版布局中要着重考虑的是导航，标志等比较重要的部分放置位置，一般情况下，这些是放在顶部的位置，尾部是一些企业链接，或者导航也可以放在右侧等等。正文可以采用传统的布局，也可以做成一屏一屏展示的效果，这些要相互搭配，保证结构清晰合理即可。