试析数字化背景下网页设计中版式设计的发展运用

1、引言

数字信息时代，网络成为人们不可或缺的一部分，尤其对年轻受众而言，已成为他们信息获取和娱乐的主要方式。随着人们对美的追求不断地深入，网页设计作为一种视觉语言，愈来愈讲究编排和布局，对网页中版式的构成元素进行艺术规划的创造性活动提出更高的要求。表面上看，它不过是关于网页版式设计编排的技巧与方法的问题，而实际上，它不仅是一种技能，更是艺术与技术的高度统一的结果。在新的时代背景下，网络技术的日新月异，未来网页设计中的版式设计将发挥更重要的作用。

2、网页版式设计

网页版式设计是指在有限的屏幕空间内，按照一定的艺术规律将文字、图像、色彩、动画、视频等多媒体传达要素进行有机的排列组合，使其形成整体视觉印象，最终达到有效传达信息的视觉设计。设计师将理性思维与感性思维个性化的表现出来，给人以视听上的美感和精神上的享受，是创造性、艺术性地传达信息的过程。

任何网页的版式设计都要依据主题内容来设定其风格与表现形式，只有形式与内容的完美统一，才能达到最佳宣传效果。网页风格的形成主要依赖于其版式设计，包括色调搭配，图文的组合形式等。目前网页主要分类有：新闻机构、政府机关、科教文化、娱乐艺术、电子商务等。性质不同的行业体现出的风格各异。新闻网页风格一般比较简洁有序；娱乐行业则动感活泼；文化教育类风格庄重严谨、高雅大方；商务网页则偏理性及现代化。

网页的版式设计同报纸杂志等平面媒体的版式设计都有着相同的视觉传达和审美目的，但又有诸多差异。印刷品都有固定的规格尺寸，网页是静、动态版面。由于表现形式、运行方式、社会功能和心理感受的不同，网页艺术设计的版式设计又有其自身的特殊规律。表现形式的不同，网页版式设计的主题更加鲜明；运行方式的不同，网页版式设计简洁而整体；[1]社会功能的不同，网页版式设计强调页面各组成部分的共性因素；心理感受的不同，网页版式设计更具互动的愉悦感。可以说，网页是一张特殊的“纸”。

3、网页版式设计的设计原则

目前国内网页中的版式设计存在着诸多的不足：① “堵”， 版面五花八门，不分主次，缺乏条理，极易造成排斥感及视觉疲劳，更无艺术美感可言。② “花”，页面五彩缤纷极不和谐，无整体感，不仅弱化了实用功能，还严重干扰了信息浏览和愉悦感的获取。③“千篇一律”，尤其是很多新闻网站，单调而乏味，缺乏特色，十分雷同。综合以上的分析，网页的版式设计应遵循以下五点设计原则。

（1）网页版式设计的布局要合理化

即设计主题鲜明突出，主体形象成为视觉中心，以确切的表达主题的思想。通过分类编排，合理规划各构成要素，使布局单纯、简练、清晰和准确，达到页面的形式与内容的有机统一，具有整体美感。

（2）网页版式设计要符合视觉流程规律

即符合人的视觉习惯，保持视觉引导的节奏感和流畅感。不单要保证有效的传达信息，更要突出主要信息。在进行网页设计时必须考虑到人们视觉流向的心理和生理特点，确定各种视觉构成元素之间的视觉关系和主次秩序，[2]并通过精心安排从而影响、引导受众的视线移动。

（3）网页版式设计要动态化

动态化是网页的特殊存在方式，在画面上表现为构成元素轮廓的不规则、张扬或是构成元素有动态动势，或是画面色彩的鲜明跳跃。[3]由于网页信息的更新和即时交互性，须经常地对网页版式进行调整和修改，来提高网站的关注率和新鲜度。

（4）网页版式设计要符合人的视觉心理空间

视觉心理空间是通过各个构成元素的比例关系、大小变化、色彩变化以及动静变化等空间因素表现出来的。它不仅是物理空间的使用，更多的是通过各种视觉手段去改变浏览者的视觉心理感受，以创造出舒适、和谐的视觉心理空间。[4]

（5）网页版式设计要符合审美需求

在满足功能需要的前提下，针对审美情趣的不断提高，需要采取一些美的形式去提升网站的形象使其赏心悦目。加入美的因素，要遵循一定的形式美法则。即：变化与统一、条理与反复、对比与调和、均齐与平衡、节奏与韵律等最贴近网页版式设计的形式美的规则。

4、网页设计中版式设计的应用

网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。其艺术表现手法、原则与平面设计中的基本相同，故而略之。本文从版式设计中点、线、面的关系、色彩的处理、文字的编排来对网页版式设计进行归纳总结。

4.1 网页版式设计中的点、线、面

对网页的各形态要素进行点、线、面的分割组合，是网页版式设计的基本方法之一。点线面之间相互作用可以构成多种多样的视觉形象，形成变化万千的视觉空间。点由于大小、形态、位置的不同，所产生的视觉效果和心理作用也不同。点的缩小起着强调和引起注意的作用，而点的放大有面之感。线的分割产生各种比例的空间，同时也形成各种比例关系的面。面在版面中具有平衡、丰富空间层次、烘托及深化主题的作用。多数情况下，点与线、线与面、面与点之间都是相对的，是相互依存、相互渗透的关系。

德国斯图加特大学的网页是德国最优秀的网页设计之一（见图1），运用点线面构成将其分成四栏，也就是将其版面分成了四个面。通过四个不同色面的交叉位置置入学院logo，其右侧平行导入学校标题使右下角板块成为版面中活跃的视觉焦点，这种突出主题的方式不同于其他的通过跨栏或者是专门的一栏线来划分。图片区可理解为面的密集或重复形成了线。在艺术性网页的版面安排中，文字以点、线、面的性质存在，以点成线，以线带面，或组成不同的形状，或留有大片的空间给人以遐想，以形成风格迥异的视觉形式，从而给人留下深刻的印象。[5]整个版面布局简洁明快，主次关系、呼应关系和形式关系确保了良好的视觉秩序感，带有浓厚的艺术特色，内容和形式既有机统一又有强烈的形式美在里面。

图1 德国斯图加特大学网页

4.2 网页版式设计中的色彩处理

色彩在网页设计中是最先被人感知的信息元素。优秀的网页设计除了首先应考虑其内容上的精益求精，合理有效的视觉编排外，其次就是对整体色彩的把握。如色相、明度、纯度的整体性、和谐性搭配，使基于色彩设计所表现的网页风格与情感得到统一，使信息之间产生必要的视觉联系，取得形象饱满而富有特色的目的。一个具有自身鲜明特色的，整体统一中发挥创造性和实施变化的和谐。

色彩是为主题服务的，总的应用原则是“总体协调，局部对比”。也就是，网页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在以实现对内容的组织和导航。优秀的网站无论是主题色还是辅助色，它们的位置面积、形式以及控制力都是基于对色彩的物理反应加以详细分析而得出的方案。[6]如儿童网页版式设计，要将复杂的信息进行大胆的分类与归纳是不容易的。儿童网站的趣味性，夸张性，色彩的多样性决定了网页的色彩不能是优雅恬淡的，不能是冷漠严肃的。它需运用大量高纯度，高明度，对比反差较明显，跳跃的色彩大来充分体现了儿童天真烂漫的特性。色彩多但并不杂乱无章法，符合儿童对色彩审美的需要。而一款商业性的化妆品网页设计，需运用纯度较低，对比反差较小，有序的色彩。在满足方便快捷地查看商品和进行交易的同时，以冷暖色调局部对比来渲染气氛，似乎能从画面中嗅到化妆品清新淡雅的味道，体现了女性的高贵柔美。

4.3 网页版式设计中的文字编排

网页设计中文字，包含标题字、副标题字、引文、说明文、正文等。与传统的版式设计相比，网页中的文字设计一方面在艺术原则、艺术处理手法上与传统的平面设计有共通之处。另一方面，它的艺术表现手法必然受到网络技术条件的制约，强调科学性、审美性、功能性三者的紧密结合。在设计时，其标题性字体或其他需要强调的地方选择以大方、醒目、突出的字体为宜，宋体、黑体等是其首选字体，也可根据不同需求选择比较有创意的艺术字体。

视觉经验告诉我们，正文大段的文字排版如果只分一栏，用户会产生疲劳和错行等问题。根据受众的视觉认知特征，通常将文字分栏处理为双栏、三栏和四栏或多栏等，既免了版面的繁杂零乱，又活泼而富于变化。此外，文字编排质量取决于文字部分与非文字部分之间的关系，应适当的考虑文字的行距、空间的安排，给眼睛一个休息的地方。忽略了文字编排外的空白空间是专业上不成熟的一个标志。所以每一种文字版面布置方法在设计过程中都要深思熟虑，以保持页面的整体性。

5、网页版式设计发展趋势

网络技术的革新发展，不同时代不同的设计审美观念和美学特征，客观上将网页设计推向了更高层的表现境界，通过新的设计观念、方法、元素构造新的视觉形式，各类网站的版式设计呈现多样化、个性化的特点，如个人类和门户类网站。结合平面版式的实际特征，作者分析了网页版式设计的发展趋势：

印刷式网页版式设计将占主导。印刷设计向来都是网页设计的灵感来源及参照。印刷版式的易读性、大标题的使用，极简化艺术风格等优势，将使更多的印刷样式的排版作为设计元素重点。由于技术功能上的限制和视觉心理的要求使网页字体等设计呈现为固定化的模式，辖制了艺术性的表达空间，网页版式形式远不如传统版式自由多变，设计师不得不寻找一个微妙的折中方案。随着越来越多的技术性改进，许多障碍将会得到解决，印刷式版式设计方法与审美将巧妙地融进网页中。

兼容手机网页的版式设计方兴未艾。在网络高速公路无处不在的信息时代，随着移动网络的茁壮成长，它的传播力、影响力渐强，许多公司都推出了适于手机等便携式载体的网页设计，其整体结构具有足够的灵活性兼容这种变化。虽然目前消费者还未对电视终端上网形成习惯，但相信未来网络电视的普及，会刺激更多适用于电视等大屏幕的网页版式设计新形象的出现。

结语

网页中的版式设计是一种新的视觉表现方式，在我国发展的时间不长，但它兼容了传统版式设计的特征，又具备其没有的优势，是对传统版式设计的延续和革新，就更离不开科学技术的发展。总之，版式设计在整个网页的艺术设计中占据着重要的地位。在顺应国际化发展趋势的同时，我国的网页设计师们应该不断探索具有本民族特色的网页设计视觉语言，不断发掘中国传统文化的精髓，按照美的要求进行合目的的设计，营造自己独特的风格，推动网页设计达到技术与艺术的统一、功能与审美的完美结合。

[1]彭辉.网页艺术设计中的版式设计原则[J].光盘技术,2007, 2:59-60

[2]彭刚等编著.网页艺术设计[M].北京: 高等教育出版社,2006,9

[3]曲美亭,伊延波.论网页设计中的视觉传达[J].赤子,2009 ,20

[4]张爽.浅谈网页设计中的版式设计[J].科技信息,2008,13:56

[5]郭欣欣.现代网页设计中静态文字的艺术表现[J].洛阳师范学院学报,2007,3:102-103

[6]沈雷,刘菲.论品牌服装网页色彩设计[J].艺术与设计,2010,4:48-50