版式设计在网页中如何应用

王 欣

[摘要]上个世纪九十年代初期，现代互联网的模式开始初露端倪，当今，互联网已经十分普及。随之而来的是网页成了和大家息息相关的信息传达平台。这个平台在她外在的表现形式上不能脱离视觉传达这么一件华丽的外衣，这就是这里要讨论的——版式设计在网页中的应用，通过讨论这些内容，了解网页其实应该是功能性和美学完美结合的统一体。

[关键词]互联网信息传达视觉版式设计功能美学

中图分类号：TP3文献标识码：A文章编号：1671—7597(2009)1020115--01

一□网页版式设计应遵循的原则

网页的版式设计一定要遵循的就是功能性的突出表现，它是一个网页与用户互动的工具，要让浏览网页的人先从功能上对它有一个认知，之后再在这个基础上进行版面的设计。

二□网页版式设计的视觉流程

要做到符合网页版式设计的视觉流程，可以遵循以下原则：

(一)按照方向与位置安排视觉流程

现代设计的理念就是追求简约、明确、清晰，在这样的风格下传达各种美的概念。如从上到下、从左到右、从左上到右下等视觉流程方法，这些流程轨迹都是最符合人的视觉习惯的，也是视觉流程的最常见的表达形式。

(二)按照视觉中心安排视觉流程

在一个设计作品中，一个亮点是视觉的中心，通过这些如文字、色彩、符号、图形、线条等视觉形式的元素处理，主动引导视线向一定的方向运动。由主及次、由近及远、由实及虚的将版面的各个构成因素有序的联系起来，形成一个整体，就能发挥最大的信息传达功能。

(三)按照自由方式安排视觉流程

运用自有视觉流程的方法，版面的各视觉元素就应该是非并列的关系，元素的排列也是在非等量的空间内，将枯燥的元素付之新的视觉语言，使之更具视觉效果、更有冲击力。

三□网页版式设计的基本内容

(一)网页的标题设计

在网页的版式设计中好的标题设计可令人赏心悦目，能形成网页的整体风格，并且包括网站的1080、导航以及一些快捷的栏目等主要的信息。标题所在的栏目一般位于网页的上方，并且左右贯穿了整个网页，标题的背景可以使动态的图片也可以使一般的静态图片，这一点是有网页的交互式特性所决定的，就是因为网页是一个需要互动的页面t这一点在网页版式设计中一定要考虑到。并且，要在网页的美感和功能性两者之间找到一个合理的临界点来展示这个网页，让这两点都达到最大限度的发挥。

(二)栏目的分割设计

栏目分割的要点是分割后每个面积大小以及各个栏目的位置，这些决定了这个栏目在整个网页版式中的主次关系，过于平衡，容易让人觉得视线无处可放，没有吸引视线的点。

(三)主体的突出

这里的“红花”也就是主题，可以通过位置、面积大小、颜色等方式被突出出来的，就是主体的突出。一个事务是一个整体，整体又是由个体组成的，每个个体虽然都是个体，但也有主次之分。全部的主体就不能构成主体这一个概念，就像一定要用绿叶来配红花一样。这里的“红花”也就是主题可以通过位置、面积大小、颜色等方式被突出出来的，就是主体的突出。

(四)文字的编排

在前面我们把网页的版式设计当作是一个整体来看待，现在我们分析它的组成，主要的就是文字，文字可以说是任何视觉上展示的版面的设计主体。

1、点——文字在版面的设计中可以被我们当做点来设计，每个字都是一个个体也同时扮演着一个独立的整体，就是我们要表现的那个点。

2、线——线有时也是通过文字展现，这就是点动成线。一条线是由一个个点构成的，这一个个的点就是我们要设计的主要元素——文字。

3、面——线动成面，这样就产生了面积，也就是所谓“面”的形式。面分解开来也是有一个一个点——也就是文字——组成的。

(五)图文的结合

图文结合主要有两个表现形式，首先是文配合图这样的形式，这里图形是网页的主体，文字是辅助存在的，比如一些新闻类的网站，图不能表明一件事情的始末，所以要用文字配合说明。另外一种情况正好是反过来的——图配合文字。在这里要把握图和文的关系，根据不同类别的网站，网页中文和图应当灵活搭配。

(六)版块的使用

一个综合类的网站有很多的版块，所以在整个网页的设计上要以版块为整体的大的元素，是版块作为栏目的细节部分。比如说一个大的门户类网站，它可能会包括很多内容，像新闻、博客、体育、娱乐、音乐、社会、军事、房产、家居、数码、论坛等等，这些版块都要简单明确的展示给观者。

(七)页面的节奏

节奏是从音乐中派生过来的一个很感性的词汇，她需要根据设计的风格和观者本身的感情综合起来体会，一个实事类的网站给人的节奏就应该是快速律动的：一个军事类的网站给人的节奏就是严肃庄重的等等，这就是节奏。这一点要求设计师要从整体上把握，若不能在网页版式设计的美感和功能上做到完整或者有所突破而可以的追求节奏t反而会适得其反。

四□关于霸页的视觉冲击力

现在同类的网站多如牛毛，各种各样的网页也呈现出争奇斗艳的趋势，那么怎样能让一个网页在众多的网站中独树一帜、让人们能对它过目不忘呢?其实除了内容上的新颖，极具视觉冲击力的网页设计也是起到了极大的作用!让人们甚至在只看一眼的情况下能对这个网站产生兴趣就是这个网页版式设计的成功，因为现在很多网站之间彼此都做了链接，我们可以从这个页面登陆到另外一个同类网站上面，这时如果在形式上具有独到之处，视觉设计就起到了决定性的作用。视觉冲击力能使人们的视线在这个页面上停留，从而向人们传递信息。信息的传递是需要时间的，不管是花几秒钟粗略的扫一下页面或版面。①那么视觉冲击力是怎么形成的呢?

(一)层次性

图形和元素之间层次的关系可以达到干扰多余视线的作用并且更能让人注意到这个页面中的主体元素，但是这里用于层次的干扰图形必须是这个页面中的辅助图形。

(二)视觉牵引

利用元素来吸引观者视觉，让观者随着设计者的思维去观看作品，大多数这样的情况都是可以归类为使用点、线、面等的引导来实现的。

(三)颜色诱导。颜色——特别是一些纯的颜色，容易给人很强烈的视觉冲击1在这里运用对比等构成使得页面充满吸引力!

五、结论

网页的功能就是要传达给人们信息。那么有关于网页的设计就都不能离开这个最基本的出发点，网页的版式设计也是一样。不管版式设计的内容在网页的设计中应该得到怎样的应用，都要考虑到与功能的结合使用。所以在给一个网页设计版式的时候，要首先考虑到整个网站的使用功能，在这个基础上去发挥通过网页版式设计传达给人们信息的这么一个作用。最后把这些和我们所设计的结合在一起，形成一个完美的整体，各个方面都充分的发挥作用，使得人们在浏览一个网页的时候既接收到了需要的信息，又接受了这个网页传达给人们的整体设计风格，这才是一个台格的网页版式。