网页的版式设计技巧探讨

摘 要： 要设计出主题突出、创意新颖、布局合理， 界面简洁美观的网页，版式设计起到了至关重要的作用。文章分析、探讨了版式设计在网页中的应用技巧，按照网页版式设计的要求，先对网页版式的整体布局进行设计，再对网页版式的文字、图片和色彩三大重要元素进行合理规划，尽可能在有限的版面空间中，将多种视觉元素进行整体排列，运用版式设计的美学原理做出更好的网页。

关键词： 网页； 版式设计； 整体布局； 文字； 图片； 色彩

中图分类号：TP393.0 文献标志码：A 文章编号：1006-8228（2016）10-50-04

Discussion on the layout design skills of web page

Pan Yan

（Fujian Vocational College of Agriculture， Fuzhou， Fujian 350007， China）

Abstract： In order to design a web page of topic-prominent， creative and rational layout， and has simple and beautiful interface， layout design played a crucial role. This paper analyzes the specific application of layout design skills in the web page. According to the requirements of page layout design， the overall layout of web page is designed firstly， then reasonably plans the three important elements of text， picture and color on the page layout， and makes the overall arrangement of a variety of visual elements in a limited space as far as possible， to make the better web pages with the aesthetic principles of layout design.

Key words： Web page； layout design； overall layout； text； picture； color

0 引言

在这网络飞速发展的时代，网页作为一种重要新媒体，不断冲击着大众的眼球。如何设计出主题突出、创意新颖、布局合理，界面简洁美观的网页，版式设计很关键。

在现代设计中，版式设计被定义为：在有限的版面空间中，将有限的视听元素进行有规律的排列和组合，它是一种创造性思维活动，是艺术与个人风格的视觉传递手段[1]。版式设计在网页中的应用，是根据主题的需求，利用视觉艺术，将多种视觉元素进行整体排列规划，向浏览者传递重要的资讯。它的视觉语言、视觉因素、设计原则、构成形式等，在网页的整体应用，对深化网页的整体性、构成性、条理性、艺术性、变化性有着至关重要的作用。

1 网页版式设计的要求

网页设计的理念为明确、简约、艺术地传达多种重要的信息。它的要求具体包括以下几方面。

1.1 主题突出

首先要明确主题的需求，这是网页设计的前提。优秀的网页版式设计有吸引人的视觉效果，增进阅读者对内容的理解，在有限的空间和时间里，更全面、快速地展现网站理念、价值标准等，达到最佳的宣传目的。

1.2 体现用户需求，创意新颖

网页设计必须了解用户的需要，明确设计网站的目标，在进行综合分析市场的状况后再制定设计的规划。鲜明的个性，是版式设计的创意灵魂。在网页版式规划过程中既不能过于个性化，大大偏离大众的“口味”，又必需有自己的特色创新。因此，在设计中要多动脑，多调查，多比较，多设计。

1.3 注重其风格

需注重网页的风格和功能，不只是简单追求形式的艺术美。需要契合浏览者的感情来设计网页版式的风格。例如音乐或娱乐类网站，网页就要设计成轻松快乐的风格；对于军事类网站，要设计成严肃庄重的风格；而对于新闻类网站，要设计成简捷明快的风格。

1.4 界面整洁，符合视觉习惯，具有艺术美感

有时为了追求网页的形式美，运用大量的静态和动态的图片、音乐、视频等多媒体元素来修饰页面，为了在网页上增加阅读的信息，甚至在文字排版上运用超出页面的做法。其后果导致网页文件的大小超负荷，大大影响大众浏览网站的速度。优秀的版式设计需要兼顾页面设计和网页技术，将二者综合考虑，既要网页界面简洁，又要兼顾网页的整体性。

由于现代人们习惯于从上到下、从左到右的方式阅读，因此网页中的版式设计应遵循视觉因素原理，包括视觉的移动规律、视觉的错视和视觉生理心理等，以使网页更人性化、更符合浏览者需求。视觉的中心为大众视野冲击力最强的部分，是版式设计的重点，它能让信息传递得更快。网页的版式设计要抓住视觉中心，有重点的设计，做到有条理、有主次。一般放在画面上方或正中间，视觉中心一般都是用强烈的对比色彩，动态的图片或立体效果来抓住大众的眼球。

网页若要设计成具有形式艺术美的界面，则需要溶入版式设计中的美学技巧。美学形式原理有平衡和对称、统一和变化、整合和分割、留白和虚实等，这些应用能提高设计界面的艺术美。

2 网页版式设计的整体布局设计

网页版式设计的整体布局，是要将设计的多要素，对它进行色彩的调整及结构上的编排[1]。首先，在整个版式或组织结构上应用视觉因素原理，抓住界面的视觉中心，将设计的主体与背景进行对比处理，强调网页各页面之间的主从关系。

2.1 网站类型的定位决定网页版面设计的不同要求

网站类型大致分为以下五类[2]。

⑴ 电子商务类网站

该类型是以电商为主的网站，要求有较高的网页稳定和安全性。该类网页在版式界面上要设计成简洁大方，颜色不要多而杂，让网页诚信感增强。

⑵ 企业类网站

该类网页对版式界面上有较高要求，不但需要准确地向浏览者传达网页的信息，而且需增强企业的社会影响，树立企业的形象。

⑶ 政府类网站

该类型是具有庄重严谨的权威网站。它需要在版式设计上树立政府的形象，整个界面清楚明了，以行政特色为主。

⑷ 门户类网站

这种类型的网站信息量大，信息丰富全面。在设计中要求界面具有亲和力，优化页面的结构，让内容上有较强的条理性。

⑸ 形象类网站

如一些广告主页或个人主页。这种类型的网站通过设计出带有较强的艺术美感的界面来使浏览者受到感染，它的规模会比其他类型网站小一些，设计中要体现个性特点。

2.2 版面布局的选择[3]

⑴ “厂”字型局

该布局是目前应用较广的一种。它的特征为将广告语与标志放在页面的最上方，接下来将正文信息放在右边，主菜单放左边。这样设计虽然能让人对页面结构一目了然。可是它要求界面颜色的选择要非常搭配，否则会让浏览者感觉呆板无趣，缺少艺术性。

⑵ “同”字型布局

这种布局方式是国内许多中等以上规模的网站会采用的。这种类型的设计常常会将网站的广告、导航栏及标志放在页面的顶部。将正文信息放在下方，正文的左右两边都设有栏目。将网站的基本信息放置在页面的底部。这样设计虽然充分利用了版面的有限空间来放置较大的信息量，可是页面让浏览者感觉视觉疲惫，缺乏艺术美感。

⑶ “框架”型布局

该类型常为左右型和上下型结构。分为正文信息和导航栏两块。也有三栏结构的，广告图片放在最上边，导航栏放在左边，内容放在右边。

2.3 网页的版面分割

运用表格来划分版面，并细心规划文字图片的背景颜色和版面位置。明确导航设计，既要符合网页浏览的习惯又要将界面设计成简洁美观的视觉效果。具体做法有以几点[4]：

⑴ 通过留白和虚实的美学处理技巧，将各视觉元素的周边留白空间加大。在留白处理上，一般来说大面积留白，可以给人奢华神秘冷清之感，反之面积小的留白，能让人有热闹、欢快、拘束之感。

⑵ 把握好重要及非重要的视觉元素所占比例，使界面主次分明。

⑶ 利用色彩的对比关系来加强色彩对比度。

⑷ 通过美学的重复技巧，界面中反复出现所宣传的物品的信息，强化宣传物品的整体形象。

⑸ 将对比与调和应用于网页中，用调和来规划网页整体，用对比来营造网页的局部美感，处理好对比与调和两者之间的辩证关系，避免单调和重复感。

3 网页版式的各重要元素设计

网页浏览者获得信息的主要视觉元素是文字、图片和色彩。优秀的设计必需要快速、有效、艺术地向浏览者传递信息。所以网页的版式上需要用美学方法来组织和编排各视觉元素，让界面产生无限的视觉美感。

3.1 视觉元素――文字的排版

合理运用文字能让界面的信息有序化、条理化。

3.1.1 网页的标题设计

好的标题设计可以吸引浏览者，识记和理解它。标题设计要简洁明了，体现精髓，体现网页的整体风格。一般在网页的上方放置标题，它可以用大一些的字号，背景可以使用动态或静态的图片。

3.1.2 文字的编排

版面离不开内容，而传达内容的重要方式是文字，文字的编排技巧决定了界面的艺术美观。具体有以下几种技巧。①字体大小和间距需讲究：正文是被浏览最多的文字，一般放在页面的中间部分，字号大小12磅是较适合的。网站域名、标志等重要信息，常被放在页面左上角，它们需要字号大些显示，以便浏览者识记。注册号、声明版权、联系的方式等资讯可以放在页脚，字号可以使用小一些的。文字间的距离包括字间距、行间距及段间距。字间距应要比行间距小，要不然浏览者分不清到底要竖着还是横着浏览。当字体较小时，为了让浏览者更容易看得清，应当相应将字间距加大。当字体较大时，为了让版面紧凑，则应当将字间距减小。设置行间距也会影响网页的阅读性。一般来说，行间距应以接近字体的大小为宜。②字体的选择也有技巧：例如字体强壮有力，造型规整，让人感到简洁清爽，适合于机械、建筑行业、男性用品等主题的网站；字体高雅细致，让人感到柔美和秀丽，更适合饰品、化妆品等女性用品及服务行业的网站。对于少儿类型的网站，设计时要考虑到浏览者的视觉感受，运用趣味、活泼的字体。③要考虑文字运动的速度：对于网页这种新媒体，常常有动态的文字，需规划好文字运动的快慢。为了让浏览者看清识记，文字至少要在网页中停留2秒钟。

3.2 网页版式设计中图形的排版

在界面设计中只应用文字是不适合浏览者长期阅读的，必需要将图片与文字巧妙的搭配。一切以可视的图画形式为信息载体的视觉形象均称为图形，它也是版式设计中重要元素。版式设计中的圆形代表亲切、方形代表整齐、梯形代表时尚、满图代表全面、出血图打破约束，退底图能够让主体形象突出。图形可以超越种族之间的语言、文字差异等因素，视觉冲击力强，在网页中合理运用它，能深化网页条理性，使网页更具号召力和感染力。虽然图形优点这么多，但并不是数量越多越好，如资讯类站点、门户网站访问量较大，图片数量过多则会让浏览速度减慢，故图片数量要求少而精；一些中小型的公司的形象类网站，这类网站设计的主要任务是利用图形宣传企业形象，图形则需要变化多样[5]。

此外，文字与图片的比例也要适当，若图太多，则会影响信息的传递。若字太多，则会让网站的吸引力降低。所以合理的比例应该是字和图各占一半。

3.3 网页版式设计中色彩的运用

好的色彩搭配会增强视觉效果，增加网页的气氛，方便阅读。合理运用版式色彩元素能让网页主题明确，深化网页的条理性，让网页具有瞬间吸引眼球，影响人的心理、生理状态的力量。具体可以有以几种方法。

3.3.1 先确定主体色的配色方法

一个网页常只会用两到三种标准颜色，颜色间需要合理搭配。网页色彩设计需要针对网站的类型，根据主题，充分了解网站的目标定位、规划。要尽可能用安全色调以确保网页的适应性。完成整个页面的配色方案可以先选一种能表现主题的主体色，接下来再根据需要，将主体色近似和对比的颜色挑选出来合理搭配。好的配色页面应该是一个整体的、和谐、赏心悦目的视觉效果。例如在设计宣扬环境保护类网站时，可以使用代表自然和生命的绿色，这样比较容易让浏览者产生信赖和共鸣。

3.3.2 采用特效的配色方法

对于需强调的部分或标题，在色彩上可以做些特效处理，挑选对比强烈的颜色。对于正文信息的色彩在设计时需挑选明度较底的柔和颜色，这样的处理比较适合浏览者长时间阅读。

3.3.3 根据网站类型来选择配色的方法[4]

⑴ 电子商务类网站：为了创造有利于商品交易的色彩心理环境，需要将页面要营造出舒适、温馨、的色彩氛围。

⑵ 公司企业类：为了让品牌和页面设计能高度溶合，也可以配合企业品牌来进行网页色彩设计。

⑶ 社区学校类：设计成能让浏览者自主选择的简洁、明晰、舒适的色彩页面。

⑷ 门户类：为了让浏览者更快速的阅读，页面上尽量选择清静、简洁的色彩。这种色彩选择有利于信息的快速读取。

⑸ 产品类：该网站的页面可以根据产品进行多样化的个性设计，体现独特品牌特性。

⑹ 个人网站、网页、博客、空间、社区：此类页面可以根据浏览者个人喜好和个性追求来选择配色的方案。这种设计方式较灵活，具有鲜明的个性特征。

4 结束语

伴随着时代的脚步，网页作为一种数字新媒体，越来越冲击着人们的眼球。为了吸引大众，如何设计出新颖独特、界面简洁美观，访问便捷的网页，版式设计就显得特别重要了。只有将网页中的文字、图形、色彩等视觉元素运用版式设计的技巧进行合理的编排处理，才能设计出生动有趣、视觉冲击力强的网页设计作品。本文只是重点探讨网页中静态元素的版式设计，在未来将着手对网页中的动态元素，如音频与视频、动画等元素的版式设计进行更好的研究。

参考文献（References）：

[1] 王青.InDesign从入门到精通[M].清华大学出版社出版，

2013.

[2] 戴文忠.版式设计在网页中的应用[J].赤峰学院学报，2011.8.

[3] 董海斌.平面视觉元素在网页设计中的应用研[J].科技信息，

2008.5.

[4] 殷实.以网页设计中的版式设计为例进行视觉审美分析[J].

大舞台，2012.9.

[5] 邓文达.网页界面设计与制作[M].人民邮电出版社，2012.