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

网页设计的布局与用色技巧摘要：网页设计是一们新兴的设计类和网络的交叉学科，近几年`随着网络的发展而逐渐收到人们的重视，它本身以网络为载体,把各种信息以最快捷、方便的方式传达给民众。

在这种标准的要求下，逐步产生了审美的需求。

人们对美的追求是不断深入的，网页设计同样如此。

一个内容空洞无物的网页既使做得再漂亮也不会吸引人，顶多赢得几声赞叹，没有任何的用处。

没有实用性的东西是不会具有生命力的。

要想将页面做的更漂亮，就要求设计师要用较好的审美方面的素质，同时要有丰富的平面设计的经验。

这样才能在设计时驾轻就熟。

关键词：网页，布局，用色一、网站首页设计、风格定位、色彩搭配、版面布局的技巧首先我们需要了解一下网站的页面组成，网站一般包括以下几部分：首页：网站的门面，如同公司的形象，特别注重设计和规划。

框架页：网站的主要结构页面，又称次首页、内页，大型网站往往框架页即首页，如一些门户网站。

框架页主要是网站内部主要栏目的首页，讲究风格的一致性，并于主页呼应。

普通页：网站主要的承载信息的页面，设计要求不高，但要求链接准确、文字无误、图文并茂，并沿袭网页的风格。

弹出页：一般用于广告、新闻、消息、到其他网站的链接等等，一般用的很少。

从功能上来看，首页主要承担着树立企业形象（当然不仅仅是首页）的作用，框架页在导航方面起着重要的作用，比如各栏目内部主要内容的介绍，都可以在框架页中体现再进入普通页，让浏览者能够迅速了解网站各栏目的主要内容，择其需要而浏览，而普通页则是主要的信息页面，也是网站的最终页面.二、色彩搭配1、运用相同色系色彩：所谓相同色系，是指几种色彩在色相环上位置十分相近;左右或同一色彩不同明度的几种色彩这种搭配的优点是易于使网页色彩趋于一致，对于网页设计新手有很好的借鉴作用，这种用色方式容易塑造网页和谐统一的氛围，缺点是容易造成页面的单调，因此往往利用局部加入对比色来增加变化，如局部对比色彩的图片等。

2、运用对比色或互补色：所谓对比色，是指色相环相距较远，视觉效果鲜亮、强烈，而互补色则是色相环上相距最远的连种色彩，其对比关系最强烈、最富有刺激性，往往使画面十分突出，这种用色方式容易塑造活泼、韵动的网页效果，特别适合体现轻松、积极的素材的网站，缺点是容易造成色彩的花，使用中注意色彩使用的度。

3.使用过渡色：过渡色能够神奇地将几种不协调的色彩统一起来，在网页中合理地使用过渡色能够使你的色彩搭配技术更上一层楼。

过渡色包括几种形式：两种色彩的中间色调、单色中混入黑、白、灰进行调和以及单色中混入相同色彩进行调和等等。

二、现今网页存在问题及拟解决主要方法网页不光是把各种东西放上去，能看就行，这是远远不够的！。

运用一些平面设计中美的基本形式到网页中去就能是网页更加富有美感，例如将平面设计中的节奏与韵律和骨格的形式溶入到网页中，这样会使内容繁多的页面更加有条理，也会是人浏览起来主次分明。

一、1、“塞”。

这是很多的网页都具有的特点，它将各种信息诸如文字、图片、动画等不加考虑的塞到页面上，有多少挤多少，不加以规范化，条理化，更谈不上艺术处理了。

2“花”。

这类网站也有不少，显然这是很多不懂设计的人来制作的。

比较多是他们把页面做的很花哨，但是非常不实用，例如采用很深的带有花哨图案的图片作为背景，严重干扰了浏览，获取信息很困难。

3“千篇一律”。

缺乏自己的特色，当我们打开电脑，上网一看，好像哪个网站都是一样的。

从标题的放置，按钮的编排到动画的采用都是如此。

用色时随心所欲，只要能区分开文本和背景就达到目的。

4、“纯技术化”。

在这种网页上，充斥了许多的纯为了炫耀技术的东西，如多个风格迥异的动画，还有大量的利用javascript和动态HTML的技术，然而始终没有把握住整体这个中心，造成页面的混乱。

综合以上的分析，可以找出很多目前网页设计上设计的不足，使网页做得更加有生气，更吸引人。

那么加入美的因素，也要遵循一定的形式美的法则。

去追求一种和谐的单纯，即追求清晰的视觉冲击力和巨大的张力，我们应该把美的形式规律同现代的网页设计的具体问题相结合起来。

二、1、变化和统一。

变化是各个组成部分之间的区别，统一是个部分之间的内在关联。

在图形设计中运用变化与统一的规律，是处理形象和组织的对立统一过程，在我们把大量的信息塞如到网页上去的时候，考虑怎样把它们合理的用统一的方式来排布，使整体感强同时又要有变化，这样使页面更丰富，更有生气，看起来就不感到枯燥。

2、条理与反复，其中反复是有规律的连续与延伸，有组织的变化与扩展并加以归纳，概括而富于条理化。

条理与反复的原则是图形构成整体的秩序美的基础，是变化中的统一，也是运动发展中求得协调一致的表现方式，由他可以演化出多种多样的图形变化。

3、对比和调和。

对比是指在质或量方面相互差异甚大的两个要素同时配置在一起时，两者之间有相互作用的性格，更加令人感到彼此强烈地相互衬托。

对比是为了使主题画面具有变化和生气而运用的方法。

而调和是构成美的对象在部分与部分之间的相互关系。

4、均齐与平衡，这是动力与中心两者矛盾的统一所产生的形态，是设计中求得中心稳定的两种组织形式，均齐的组织方法是无论在哪一个中轴和中心支点各方面配置同形同量的图形，都要求图形整体结构严谨，形态安定整齐，平衡。

5、节奏与韵律。

节奏可以说是条理与反复的发展。

它带有机械的秩序美，韵律是每个节拍间运动所表现的轨迹，它带有形象特征。

作为形式美的法则，随着时代的不同而不断发展进步，特别在生活节奏如次快的互联网时代，由于追求的目标的变化，人们的审美观念也在不断的变化，但是美的本质是一样的，同时随着技术的发展，很多的目前不容易实现的审美形式也逐渐被克服，突破带宽的瓶颈。

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

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

2、拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。

在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

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

4、左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。

我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。

这种类型结构非常清晰，一目了然。

5、上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。

6、综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

7、封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。

这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

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

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

三、形象展示型和信息罗列型首页设计技巧网站首页是企业网上的虚拟门面，决不能敷衍了事、马马虎虎。

精良和专业网站的设计，如同制作精美的印刷品，会大大刺激消费者（访问者）的购买欲望，反之，您公司所提供的产品或服务将不会给消费者（访问者）留下较好的印象。

一般来说，网站首页的形式不外乎有两种：1、纯粹的形象展示型，这种类型文字信息较少，图像信息较多，通过艺术造型和设计布局，利用一系列与公司形象和产品、服务有关的图像、文字信息，组成一幅生动的画面，向浏览者展示一种形象、一个氛围，从而吸引浏览者进入浏览。

这需要设计者具有良好的设计基础和审美能力，能够努力挖掘企业深层的内涵，展示企业文化。

这种类型的首页在设计过程中一定要明确要以设计为主导，通过色彩、布局给访问者留下深刻的印象，当然，我们不能为了设计而设计，我们的目的是营销，在设计过程中一定要牢记这一点！2、是信息罗列型，一般的大、中型企业网站和门户网站常用的方式，即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等等，也就是我们上面谈到的框架页，这种风格比较适合网站信息量大，内容丰富的网站，因为是以展示信息为主，这是的设计就要在细微之处体现企业形象，建议设计人员最好仔细阅读企业的ＣＩ手册，熟悉企业标志、吉祥物、字体及用色标准，在网站的局部体现出来，往往平淡之中一个优美的符合企业特点的曲线就能够给人以深刻的印象，从而将企业形象印在浏览者的脑海里。

设计人员在设计过程中要注意使用这些语言符号来表达一种独特的企业信息。

四、风格保持一致内页设计技巧如何保持网站风格的一致，是进行内页设计过程中考虑的重要方面。

一）1、结构的一致性：我们知道，网站的统一性在网站营销中占重要地位，而网站结构是网站风格统一的重要手段，包括网站布局、文字排版、装饰性元素出现的位置、导航的统一、图片的位置等等，2、色彩的一致性：方式是保持站点主体色彩的一致，只改变局部色块，优点是一个独特色彩的网站会给人留下很深刻的印象，因为人的视觉对色彩要比布局更敏感，更容易在大脑中形成记忆符号。

3、利用导航取得统一：导航是网站的一项重要组成部分，一个出色的富有企业特性的导航将会给人留下深刻的印象，比如将标志的形态寓于导航之中，花点力气在导航上，也会设计出一个出色的站点。

4、特别元素的一致性：在网站设计中，个别具有特色的元素（如标志、象征图形、局部设计等）重复出现，也会给访问者留下深刻印象。

5、利用图像取得统一：这里我们所说的利用图像取得统一，决不是在每页中放置几个动画！而是作为网站结构一部分的局部图像，根据网页内容的不同，配以相应的图像或动画，从而给浏览者形成页面的连续性。

6、利用背景取得统一：认识到并不是所有的图片都可以作为背景，加强与前景的明暗对比，即要么淡化背景，隐隐约约可以看到即可，要么加深背景，而将前面的文字亮化。

二）在版面布局中主要是考虑导航、必要信息与正文之间的布局关系。