平面构成在网页设计中的运用

易 星

目前，中国互联网的发展已经形成相当规模，据中国互联网网络信息中心（CNNIC）报告显示，预计中国网民数量在未来5年后将要超过美国，互联网已是继报纸、广播、电视等之后的第六大媒介。

随着互联网的发展，各类网站有如雨后春笋般。然而，有的站点日访问量高达几千万人次，而有的站点访问者寥寥无几。究其原因，访问量大的站点，除资源丰富外，网站的策划和精美的外观也是吸引访问者的重要因素。所以将美的形式规律和平面构成的手法结合到网页设计中，是当前网页设计的重要理论依据。

一、当网页设计遇上平面构成

（一）了解网页设计

网页有如门面，小到个人主页，大到政府及国际组织等，是构成一个网站的最基本单位。而网页实际上只是一个纯文本文件，它通过各种标记对页面上的元素进行描述（如颜色、大小），网页上传到互联网之后再由用户的浏览器对这些标记进行解释并生成页面，于是便有了现在千姿百态、百花齐放的互联网络。

打开一个网站，首先映入眼帘的是该网页的界面，如按钮的摆放、文字的组合、色彩的应用等等，这些都是网页设计的范畴。其实在网络刚兴起时，没有太多视觉设计的概念，很多网站都是程序员用HTML语言设计出只有功能取向的网页，那时候网页无法一边写一边观看，只能写好后到浏览器上执行，所以程式设计常常无法和基本的美观结合在一起。然而，在一个个可视化的网页编辑器相继问世，特别是许多平面设计师投入网页设计的行列后，整个网页视觉设计的行业起了重大的变化！

随着这几年网络的飞速发展及人们对美的不断追求，网页设计逐渐受到人们的重视，形式了一门新兴的学科。简单的讲，网页设计就是从审美入手，结合平面设计的特点，运用平面构成中的基本形式到网页中，让网页更加富有美感。例如将平面构成中的节奏与韵律、骨格与肌理溶入到网页中，会使内容繁多的页面更加有条理、主次分明，因此对平面构成的掌握与了解是关系到网页成功与否的重要基础。

（二）了解平面构成

艺术设计是人类文明的重要部分，涵盖了当代人类生活的各个领域。构成是一个近代造型概念，含义是指将不同或相同形态的几个单元重新组合成为一个新的单元，是以研究视觉语言的特性、构成原理以及审美规律为目的，重在研究和分析视觉的形态、空间、运动、比例等因素的变化和形式。

平面构成的认识源于自然科学和哲学认识论的发展，是建立在量子力学基础之上的微观认识论，这种由宏观到微观认识的深化，逐渐影响了造型艺术的发展。构成观念早在西方绘画中就可见其影子，如立体主义绘画、俄国的构成主义、荷兰的新造型主义，到后来的德国包毫斯设计学院的不断完善发展，形成一个完整的现代设计基础的教学体系，奠定了构成设计观念在现代设计应用中的地位和作用。二十世纪七十年代以来，平面构成作为一门设计基础课程，已广泛应用于工业设计、建筑设计、平面设计等领域。

（三）何为网页平面构成

平面设计在网页设计中占有相当大的比重，而平面设计的重要理论基础则是平面构成，所以说，平面构成也是网页设计的重要理论依据和知识基础。

在一堆杂志中，人们往往会拿起色彩丰富、图片艳丽、结构清晰的那本。同样，一个布局合理、重点突出、富有美感的网页，它不但能吸引用户点击，更能够完美表达网页的创意思维。所以，平面构成的出现，不得不让我们对单调、乏味、缺乏美感的HTML页面进行反思，为了拓展网页设计的艺术视觉，丰富网页设计的思维及表现手段，我们引进了网页平面构成的理论，这有点类似于传统平面设计中的构成理论，一般包含风格策划、页面构图、布局与色彩等方面，我们不妨将平面构成理论作为网页设计的理论指导，即“网页平面构成”。

把网页设计看成是平面设计的一种审美方式的延伸，而点线面作为平面构成中的基本元素，在网页中巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，完美表达设计意境。因此，网页设计作为一种视觉设计，特别讲究编排和布局，虽然主页设计不同于平面设计，但它们有着许多相近之处，如：对比、渐变和节奏美、韵律美，图/底关系或通过文字与图形的组合形成空间上的立体感。所以，灵活运用平面构成中的各种手法，通过页面各元素之间的有序排列使浏览者达到某种共鸣产生一种和谐的美感。

平面构成是一种设计语言，已为当今社会各个艺术设计领域所应用，它以一个全新的造型观念，给我们的网页设计注入新鲜的血液。

二、为网页设计注入新的血液

（一）人性化的网页设计与策划

“人们总以为设计有三维：美学、技术和经济，然而更重要是第四维：人性。”------美国设计师普罗斯

人类的艺术设计是一种审美活动，设计的任务是要实现设计者或用户的意图。网页设计是指设计师将客户要表现的主题和达到的效果，组合页面元素，通过艺术手法创造出符合大众审美观的界面。开始进行网页设计前，需要做很多调查，如客户的需求、站点的性质等，这些要求的不同设计出的网页也会不同，用现在最时髦的话来讲就是更具有人性化。

在网络的虚拟世界，互联网提供了天下大同的机会，充斥着无数站点，然而大多数网站的设计都缺乏灵魂和主旨，页面结构都比较松散、混乱，其原因就在于缺乏有效的策划。因此要想使你的网站从那些数不清的站点中脱颖而出，就必须对整个站点作好统筹规划，对所有的内容进行斟酌，再合理组织页面结构与色彩。

首先，了解一下同类站点的风格、特色，吸取他们的长处，找出自己的优势，做好市场调查，明确自己网站的主题、规模、主要特色及主要受众目标，再确定整个网站的整体风格。其次，网页的制作，设计者先要在纸上用笔画出大概的设计草图，等待客户确认后，才用计算机绘图软件画出平面效果图（色彩与页面结构），之后才能投入实际的制作。

（二）网页平面构成手法

平面构成是一种视觉形象的构成，其形态的抽象性特征和产生不同视觉引导作用的构成形式，组成严谨而富有节奏和动感的画面，营造一种秩序之美、理性之美和抽象之美。其构成形式主要有重复、近似、浙变、变异、对比、集结、发射、特异、空间、分割、肌理及错视等等。它的研究对象主要是在平面设计中，如何构造形象，怎样处理形象与形象之间的关系，如何掌握美的形式规律，并按照美的形式法则，构成设计所需要的图形。

平面构成中最基本的形态要素是点、线、面，其构成要素有大小、方向、明暗、色彩等，以这些基本要素为条件，加以组合构成，便会创造出无数理想的抽象造型。

网页上的所有元素都可以看作构成的基本要素。在一幅成功的作品里，需要点、线、面的共同组合来构造整个页面。通过三者的组合，可以突出页面上的重要元素，突出设计的主题，增强美感，让访问者在感受美的过程中领会设计的主旨。

1、构成的基本元素点、线、面及其在网页设计中的运用

在页面构图中凡是表现视觉图形或文字，都可以简化或趋近于点、线、面的视觉感受。网页版面中的各种视觉元素正是以点、线、面的形式相互依存、相互作用，组合成各种视觉信息，形成千变万化的视觉空间和感受。因此，只有协调处理好点、线、面之间的相互关系，才能设计出最佳视觉效果的网页。

（1） 点的运用

点是可见的最小的形式单元。在网页中，点是相互比较而言的，任何一个单独的细小的形象都可称之为点：按钮、字符、小色块等等。在网页中合理的安排点的布局，或者在页面设计中将某些视觉形象进行点化处理，并运用恰当的构成手法进行版面布局，不但可以协调画面，甚至可以起以画龙点睛的作用。图1为个人主页，所以在形式上比较轻松活泼。网页中大面积的空白与中间的四个点形成强烈的对比，而且在点的处理上采用传统的中国水墨画的手法，更富有意境。在点的位置安排上也体现了一种节奏与韵律，形成视觉上的跳跃。

图１．点的运用（来自www.cq20.com）

（2）线的运用

线是点的移动轨迹，不同的移动方式形成线的直、曲、折、弧等变化。

线是网页设计中不可缺少的元素，相对点而言，线具有更为明显的情感特征，如：水平线端庄整齐使人安静平和；垂直线强直有力使人严肃庄重；曲线温和柔软，具有亲和力。线的布局安排，主要体现为线的空间分割。分割是网页设计的主要手段之一，在利用线进行页面分割时，既要考虑单独形态元素的美感，又要注意其在空间中所具有的联系，这样才能形成良好的形式秩序美感。

文本在页面中都以行或块(段落)出现，其在视觉上可作为线来处理，图2为北京开伦随园网页，该设计最大特点在于文字的排版和配图的选择上。文字采用了中国古典文字排法“纵向排列”，配图使用的是水墨风景画，符合网站整体风格，极具古典特色，整个页面看起来就像一幅传统中国水墨画。

图2．线的运用（来自www.bjtlsy.com）

（3）面的运用

面是点和线的沿伸与扩张，它综合着点和线的特性，通常分为直线形、曲线形和偶然形。直线形面它具有明快、简洁的特征；曲线形面比直线形面要复杂，并富于变化和动感，它所表现出来的流动性给人以无限想象；偶然形面是在现实生活中偶然获得的一种视觉形态，在平面设计领域的大部分偶然形面是通过特殊技法（如绘图软件中的特效滤镜）获得，它表现出来的是一种自然的、无序的形态，有着丰富的象征意义。面是构图中常用的视觉元素，它的大小、曲直、变化都在影响着页面的整体布局，在网页设计中，我们都在有意或无意的进行着面的组织和面的创造，运用面的分割、组合、虚实交替等手法来增强页面的整体效果。

网页中面的元素主要指图片或色块。使用图片时要考虑美学和技术两方面的问题。首先，图片的色彩、形状及风格一定要与网页的整体风格相适应，图片所要传达的理念或信息应当尽可能清晰、准确。其次，要注意的是页面上不能只使用大篇幅的图片而不注重细节，会非常空洞无主题，所以只有大小、主次得当的穿插组合各类图片，才能形成最佳构图，使得整个页面丰富立体，充满层次而富有美感，如图3所示。

图3．面的运用（来自www.ifeel.com）

2、平面构成的语言

平面构成有着丰富的语言，包括重复、渐变、错觉、变异等，在这里由于篇幅关系，着重探讨其中的一种在网页设计中的运用。肌理在构成中是指形象表面的纹理，是物质表面的形态，通常是指物体的纹理感觉。它具有粗糙、细腻、柔软、生硬、干燥、湿润等特性，既有自然形态的肌理（如沙漠、树皮、波纹等），也有人为形态的肌理。

因为平面构成中肌理的形式结构能引起的审美主体的各种感受。具体地说，是构成肌理形态的形式要素，如点、线、面、质地本身及其相互关系所形成的节奏、韵律、均衡、对称、对比等使人产生的各种感受。而这种形式感的产生，是人们经过长期的社会生活实践。积累各方面的感觉经验并凝聚各种记忆而成，因而人们从这些抽象的形态中能感觉到某些肌理所特有的美。

所以，肌理形态在网页表现上是通过纹理、色彩、形态等引发各种联想而形成的审美感受，而浏览者正是通过这种感受来体会网页所要表达的思想和情感。由于肌理给人以各种感觉，并能加强形象视觉冲击力与感染力，达到一种抽象的表现，因此在网页设计中，肌理应用较为普遍，尤其是在只有文字、页面单调的情况下，用恰当的肌理作背景图案，将起到很好的视觉调节作用，如图4所示。

图4．肌理的运用（来自www.dreamgarden.com）

（三）网页布局

刚开始，网页就像一张白纸，需要我们在上面精心设计、合理布局，所以布局在网页设计中有着非常重要的作用。

先要了解一下网页的大小，现在显示器的分辨率大多是1024*768，页面大小为1007*600最为合适。一般网上冲浪者对一个网站的阅读常常就是匆匆一瞥，最大的耐心不会超过30秒，在安排页面时不要让访问者拖动页面超过三屏。

图5是2008年中国奥运网，网站最大的特色就是内容丰富，色彩稳重大方。但最大的缺点也是首页内容过多，页面拉得过长，超过三屏，让访问者拖动鼠标太久，造成访问者视觉上的疲劳和心理上的烦躁。

所以，在布局时使用适当的空白对整个页面来讲也是一种艺术，如何利用空间中的留白是非常重要的，中国国画中有一句话描述这种艺术形式的空间布局比较经典，就是“计白当黑”，表明空的地方和着的墨一样都是画面的一部分，也是提升艺术性的途径，尽管有些网页花了很大心思投入很多精力，但是看起来不舒服，就是没有重视留白，造成了画面的整体上的失败。网页上的留白同其它文本、图片、动画一样，是非常重要的构成要素之一。

（四）网页常用构图形式及原理

1、常用构图形式

艺术家们发现在美的事物中总是存在一定规律，这一美学理论完全可以应用到网页构图上，以下一些构图法常常被应用在网页的设计上。水平方向的构图，平稳安定；垂直方向的构图积极向上，如雨后春笋；斜线构图动感强；边角构图视野拓展，想象空间大；中心构图直截了当，比较大气；满构图法，丰满匀称；大面积空白的构图，对比强烈，更易突出主体。

网页设计中的构图，通常也是指布局。是在考虑造型因素和网站本身的性质和特色的基础上创建的，将视听元素进行有机的排列组合，将理性思维、个人风格和艺术特色个性化的表现出来，使其在传达信息的同时，也产生感官上的美感和精神上的享受。

图6为政府网站，在结构上可以看到采用了比较稳重大方的水平分割型。导航栏采用了横向处理，页面清晰栏目划分科学，在色彩上都采用了暖色调，图片明度高，信息量大但布局安排合理，是比较成功的网站。

图６．广东省人民政府（来自www.gd.gov.cn）

图7为国外大型企业网站，能看出来国外设计师在用色上非常老道，采用了很多渐变色填充，且页面结构丰富，采用垂直式构图，配合适当曲线，直角、圆角相结合，在图片处理上，运用时下最流行的“苹果式”，且图片做了阴影效果，加强立体空间感，显得即平稳大方又亲切温和。

图7．国外企业网（来自www.dw8.cn）

图8为个人主页，首先在结构设计上采用上下均衡式构图。第一屏采用全图片方式，色彩艳丽富有故事情节。第二屏采用深棕色渐变，与上屏形成强烈对比。整个页面在空间上的层次非常丰富，结构清晰，富有美感，让观看者留下非常深刻的印象。

图8．个人主页《苹果树下》（来自www.appleshow.cn）

2、常用构图原理

为什么有些构图形式给能给人美感，而有些却怎么看也不舒服，这是为什么呢？因为在自然界中存在着一些美的法则和规律，把这些法则运用到我们的网页设计中，使之产生美，创造美。例如，我们日常生活中说“九头身的美女”，并不是有九个头的美女，而是指其身体长度与头部长度的比例约等于9:1，这种规律符合人的审美观，才会产生美感。

勤劳聪明的人类在不断创造物质生活的同时，也逐渐产生了对精神文化的需求，发现了自然界中一些美的规则。

①黄金分割法则 “黄金分割最早见于古希腊和古埃及，即把一根线段分为长短不等的a、b两段，使其中长线段的比（即a+b）等于短线段b对长线段a的比，列式即为a:(a+b)=b:a，约等于0.618”。符合这种比例的造型在视觉上比较悦目，网页中运用黄金分割法则，主要表现在点、线、面的运用中。黄金分割点，在构图中，多是主要表现对象，或是视觉中心所处的位置。黄金分割线，多用作水平线或分割线所处的位置，在视图上起到分割网页界面的作用。但是，客观事物有着丰富的变化，创作意图也各不相同，黄金分割的形式，并非能完全满足变化与创作者的要求。因此，在构图上讲究的是灵活运用，不要生搬硬套。

②几何图形法则 因其轮廓简洁有力，形态变化，深受人们喜爱，常用网页构图的几何图形有：三角形、矩形、菱形、梯形、弧形、圆形等。在网页中运用适当的几何图形构图，如时下比较流行的圆角式，或将不同的方形图以相同大小组织排列起来，又或者如图9所示，采用椭圆形作为构图元素，页面中间的4个圆大小不等，位置摆放错落有致，主要元素均衡而有变化分布在椭圆上，显得极有空间层次感。

图9．几何图形的运用（来自www.4mdesig.com.cn）

由这两个典型的例子可以看出，无论是什么样的法则都源自设计者本能的审美观的驱使，再应用到实际当中，当然在设计时不必十分刻意追求什么法则。应该从日常生活中，从自然界的事物中观察美的规律，培养构图的艺术美感。

（五）网页色彩构成

1、色彩的基础知识

“接天连叶无穷碧，映日荷花别样红。”-------杨万里

每次读这首诗，闭上眼睛仿佛就能看到：碧波万顷，微风吹拂，满塘荷叶轻轻摇曳，艳阳下的荷花鲜红欲滴。这句诗里的“碧”、“红”其实就是色彩。所以色彩对我们来讲是不陌生的，因为我们生活的世界中无处不存在着色彩。色彩以一种特别的方式传达信息，这些信息会影响观看者的心理和感受，左右他们的判断和选择，色彩对于设计而言实在太重要。

首先熟悉一下色彩的基本概念，三原色——红、黄、蓝，三间色——橙、绿、紫，三种间色互为“补色” 。将图10中圆环中的任意一种颜色和黑色、白色、灰色按照不同比例混合就可以得到更多的颜色。例如，当色彩RGB值为（0，0，255）时为纯蓝色，饱和度100%。随着饱和度的逐渐降低，颜色会越来越接近灰色。

2、色彩心理

色彩，在不知不觉中作用于人的心理，据说伦敦泰姆士河附近有一座黑色的桥，它因每年在桥上自杀的人数惊人而著名，后来人们将

它改成了绿色，自杀人数剧减。有专家分析，如果将它改成粉红色、天蓝色等更明亮的色彩就可能使自杀人数将趋于零。

当你看到色彩时，首先会勾引起对生活的联想与情感作用。蓝色来自天空和大海，它给人一种心胸开阔，文静大方的情操。绿色是大自然的颜色，它能令人充满青春活力。黄色饱含智慧与生命力，让人显得年轻有朝气。看到白色，使人觉得纯洁可爱，而紫色却有着神秘高雅的感觉，这些对于网页设计而言特别重要。我们经常说“第一印象最重要”，用户在访问网站时的第一印象实际上是来自整个网页的色彩！

所以色彩具有一定的含义和感情上的象征作用，人类确实存在色彩联想的共通性。在炎热的夏天人们更容易接收蓝色的“百事可乐”，而在较为冷的天气喝红色的“可口可乐”人是不是更多一点。在我们谈到这种象征印象时，不能过于主观、片面地看问题，人们对色彩的联想是相对，不同的色彩组合在一起也会起到不同的效果。

3、合理搭配色彩

色彩是艺术表现的要素之一。在网页设计中，设计师根据和谐、均衡和重点突出的原则，及色彩对人们心理的影响，合理地加以运用。将不同的色彩进行组合、搭配来构成丰富的页面。单纯的颜色并没有实际的意义，和不同的颜色搭配，它所表现出来的效果也不同。比如绿色和金黄、淡白搭配，可以产生优雅，舒适的气氛。蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。但也要考虑到网页的适应性，应尽量使用网页安全色。不同网站应当使用不同的色彩方案，与站点的主题相吻合的色彩方案决不仅仅可以让网站 “更加好看”，更重要的是在访问者心目中建立对这个网站的感性认识。所以，色彩方案的选择决不能草率，是网站建设的第一步。

按照色彩方案中色彩使用方式的不同，可以将色彩方案划分为几种常用类型，单色方案、相似色方案、对比色方案等。

（1）单色方案，是指在网页设计中使用一种基本颜色，通过调整这种基本颜色的灰度和亮度来得到更多的颜色。单色方案是一种比较稳重的方案，或者说比较保守的方案。给人整洁、经典的感觉，商业网站也比较适合使用此种颜色方案，使访问者容易建立对网站的信任感。

（2）相似色方案，在色彩圆环上彼此相邻的几种颜色构成的配色方案就是相似色方案。例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。通常，相似色配色方案可以给人非常协调的感觉，因此在网站设计中非常实用。典型的运用方法就是，用一种颜色作为页面背景，而另外一种在颜色环中与其相邻的颜色作为前景色。

（3）对比色方案，把一个颜色和它补色的左右边的色彩配合起来，可以得到强烈的视觉效果。运用这种方式容易塑造活泼、运动的网页效果，在设计时要注意主体色彩的运用，即以一种或两种色彩为主，其他色彩为辅。

4、色彩构成在网页设计中的细节体现

-----中国移动网与MTV网之色彩比较

图11．中国移动网（来自www.chinamobile.com） 图12．MTV网（来自www.mtv.com）

由两幅图比较可以看出，企业的不同性质决定了网页的用色，首先，中国移动是一家面向全国用户的大型企业，他所服务的对象决定了网页用色必须考虑到所有用户的接受能力，必须稳重大方，可以看出整个界面采用冷静开阔的蓝色调，但是页面色彩却不单调，当用户将鼠标移动到导航栏上，蓝色的横线变成了明快的翠绿色，就这一点小小的细微动作却增强了用户的交互性。但整体而言，色彩还是比较单一，稳重有余而活力不足，作为一家年轻的企业，应该要有年轻人的活力。所以在大片的蓝色中夹杂了鲜艳的橘红色作为点缀，立刻整个页面就会显得比较活泼，再用渐变色丰富了色彩的层次。整体来看是一个比较成功的功能与美感并存的企业网站。

另外再来看看第二幅图，感觉立即不一样了，全黑的底与白色的文字形成视觉上的冲击力，而页面中间被等分成四块，分别用了淡、浅、深三种灰色引起视觉上的分割。并且在色彩上明显比第一幅图丰富，有桔色、黄色、绿色、青绿色、紫色等等。这是一家以娱乐服务为主的网站，他所面向的用户是以年轻人为主，符合潮流，走在时尚前沿。在用色上也大胆出位，全黑色的底，象征年轻人的叛逆与不羁，以及时尚感较强的紫色和青绿色的搭配更能吸引人的视线。

在细节上的设计与处理最能体现一个网站是否成功，可以看出来两个网页都是比较注重在这方面的用色，总的主色调不变，以丰富多彩的小色块点缀，起到画龙点睛的作用。所以一幅比较成功的网页在色彩的设计上也要独具匠心，充分合理的利用细节，结合色彩的感情，才可以使作品具有更加深刻的艺术文化内涵，才能够让网页设计的个性创造和审美意识得到淋漓尽致的展现，设计出的网页会更加富有生命力。

三、不同审美文化中的网页设计

（一）文化背景对网页设计的影响

美学 (Aesthetics)，德文原义为“感性学”，是一门研究人类审美活动的学科。“审”者，看也。通俗地说，就是人们对现实生活中各种美好现象的感受和欣赏，是人类最基本的精神文化活动，因而也最通俗、最具大众化，在东西方都有着极为悠久的历史。

21世纪是一个经济飞速发展的时代，是一个时时事事讲求审美格调的时代，其实审美就是一个民族精神世界的流露。中国的审美观是中国人的人格、修养、品行、文化、艺术的高度统一的综合表现。具有时代的、民族的和阶级的烙印。也就是说不同时代、不同民族和不同阶级在文化艺术审美格调的追求上有着不尽相同的倾向和标准。且不说汉代人如何会在卢浮宫不屑一顾；古希腊人如何会在故宫拂袖而去，就是同为中国的唐汉两代对美的欣赏都不一致。所以说，各国的地域环境、气候条件、经济情况、人文思想不同所形成的审美观也会不同，从网页设计方面来看，各国都有自己的特色。

1、欧美风格的网页设计

欧美国家进行工业化比较早，经济相对比亚洲发达。美国早在二十年代就已经是世界上工业化程度化最高的国家，特别是二战后，更成为世界上的经济大国。随后进入90年代，计算机业迅速发展，高度的工业机械化对其网页设计也有一定影响，除注重实用性之外特别在细节元素上的处理更显精致，网页的艺术表现更是别具一格，其中肌理的表现形式独具特色。另外，美国是一个移民国家，有着一个多元化的社会，其短暂的历史，自由的人性，在网页设计中表现出丰富的幽默感与创造性。图13中所示：整个网页由机械化式的线条相互组合构成，刚强有力，将金属的质感充分的表现出来。

图13．欧美网页中肌理的表现形式（来自www. hostile.fm）

再比如说法国，地处温带海洋气候，温暖的海风，发达的经济，绅士和淑女身着时装、香水款款而行，人们追求美妙而浪漫的生活，在网页设计上形成了一种华丽、精美的法国浪漫风格。图14是以香水和时装著名全球的法国名牌GUCCI网站，华丽的色彩与精致的图片，无不体现出大家风范。

图14．法国名牌GUCCI网（来自www.gucci.com/fr）

德国则不同，气候干燥而寒冷，地形复杂多山的自然环境造就了严肃的德国人，因而，德国设计更加体现其科学性和逻辑性，德国网站设计也充分体现了 “实用”和“简洁就是美”的观点，如图15所示。

图15．简单实用的德国网页（来自www.border-lands.de）

2、日韩风格的网页设计

日本在度过了漫长的幕府统治之后，逐渐从腐朽、落后中走了出来，乐于接收西方的先进技术，特别是二战之后，得到了西方国家的大力支持，经济得到飞速发展，教育也受到美国影响，特别是设计方面更成为亚洲最早接受设计教育的国家之一。由于日本是个岛国，自然资源贫乏，养成了特有的民族性格，加上受到西方影响，其网页设计不光注重外表地光鲜亮丽，在功能上也以实用精致著称，如图16所示。

图16．时尚亮丽的日本网页（来自www.dw8.cn）

韩国，由于受到中国及日本的影响，佛教极为盛行，佛学所推崇谦和、内敛等思想观念延续至今，最典型就韩国的国旗，称为太极旗，是以儒家和道家思想绘制。在现今的网页设计界，韩国设计异军突起，迅速形成了鲜明的设计特点，其网页表现形式丰富、色彩艳丽，特别是在细节上喜欢用渐变、描边、阴影等效果，设计大方紧跟时尚，无论其框架结构、内容排版、色彩搭配、图片运用上达到了非常和谐的统一。图17为韩国企业网，当你浏览时，感觉就像一次美妙的旅程，风景优美、清新自然。

图17．清新自然的韩国网页（来自www.dw8.cn）

3、阿拉伯国家的网页设计

阿拉伯世界幅员广大，国家众多，具有悠久的历史和灿烂的文化，是人类文明发祥地之一，尼罗河畔的古埃及文化和两河流域的文化在人类文化宝库中放射出奇光异彩，被誉为世界七大奇迹之首的金字塔及巴比伦“空中花园”就出自阿拉伯世界。因其错综复杂的文化、宗教和历史等因素，阿拉伯国家的网页计设相比较欧美发达国家而言其设计并不为人所知，显得默默无闻。其网页设计风格与现下十分流行日韩网页设计相比，更具有独特的民族风格，图18是Fubon工作组的典型案例之一，此网站继承了其一贯的淳朴、民族的设计风格，在每个细节上都流露出其独特的文化氛围。观赏该网站时就如同在魔幻世界中的一次奇异之旅。

图18．阿拉伯Fubon工作组（来自www.fubon.co.uk）

不同的国家在其文化、历史、地域背景的作用下形成了独有的审美倾向。这些审美标准潜移默化地体现在当代艺术设计的作品中，而构成又是艺术和文化的间接成果，是自然形态的概括和总结，吸收了各个民族传统文化的精华及先进技术成果，所以网页设计作为艺术设计的一种，无处不存在平面构成理论的表现与依据。

随着世界文化的不断融合，人们的审美观念也逐渐变化，网页设计风格将更加多元化，其创作手段更加灵活，既有传统民族特色又有现代国际审美情趣的网页将会被更多的人们接收。

四、实践与思考

(一）自己动手设计网页

前面讲了很多平面构成与网页设计的理论知识，也例举了一些别人的网页实例来证明。不过，理论一定要结合到实践中，会更有说服力。下面以自己做的网页为例，综合前面的理论，分析实际制作时网页中平面构成的一些运用方法。

图19．自做网页示例

图19是本人在上学期《网页设计》课程期未考试时的作品，根据老师所定要求，以南京古城为主题制作的网页，考虑到此网站链接不多，在导航栏的安排上不应用常规横向或竖向导航栏，在处理时以南京在中国地图上的地理位置为寓意，以各栏目相关图片为链接，起到丰富页面结构的作用。

在构图时考虑到作为六朝古都，应稳重大方、深沉厚重，所以采用左右对称、上下平衡的框架，中间以白色曲线分割页面，起到柔和画面、平衡过渡的作用。在BANNER上以塔型中国古代建筑物为视觉点，右边放置南京辟邪图平衡视觉。棕色是大地的颜色，体现古都南京的古色古香。调整棕色的亮度，变化出三种基本颜色。因棕色属暖色，所以采用小部分棕红色点缀，上部分的古代建筑与下图的红枫林图片遥相呼应，协调整体结构。为突出地图的视觉中心效果，采用了明亮的蓝色。并以少量绿色点辍，色彩丰富，强化视觉效果。最后为平衡冷暖色调采用灰色为过度色，让整个页画看起来更协调。

此网页设计时运用了部分平面构成中的知识，虽然不是十分优秀的作品，不过老师还是给了我很高的分数。在此十分谢谢网页设计老师，正因为如此，我才会选择这篇论文，因此也要感谢我的论文指导老师的帮助，感谢南京大学网络学院给我们创造的学习机会。

(二) 未来网页设计中的平面构成

1、行业现状

“适者生存”是事物繁衍发展的自然规律。随着网络技术的飞速发展，国内网站总数从短短的几年已发展到今天这样庞大的数字，真可称得上是日新月异，事物的发展都有自己的步伐和章程，发展得太快将会导致整行业中存在越来越多弊端。

国内网页设计行业仍处在初期阶段，行业标准及审美准则都不尽成熟。网络刚起步时，随便打开一个网站，会发现其页面上被塞满无数的信息，版式结构混乱，用色随心所欲，各种风格迥异的图片和动画闪得你头晕眼花。像这样对所有元素不加构思一古脑全堆在页面上的现象，随着专业网页设计师的增加会越来越少，可以看到现在国内网页设计已逐步走上正轨，不少公司、政府和学校等大型网站越来越注重网页的外观美，正如人们在重视产品的实用性之余越来越多地注重产品的外观设计一样，网页设计也越来越接近于一门艺术而不仅仅是一项技术，如果我们的网页设计师没有一定的审美素质和平面基础，即便拥有高超的技术，制作出的页面也只有“匠气”而无“灵气”。尽管现今行业中仍存在很多问题，但发展迅速有着极强的生命力，相信过不了几年，国内网页设计业就会呈现出让我们欢喜的新面貌。

2、展望未来

尽管未来离我们好像还很遥远，但是根据目前网络发展速度，想想那时的网页设计将更多地考虑如何更好地为人类服务。在未来网络的新格局中，将对网页的构成元素进行更有效的艺术规划。在过去的网络服务中，由于用户群几乎都来自于计算机终端，所以表现形式非常单一，只提供简单的WEB方式即可满足浏览者的需求。现今，互联网新技术层出不穷，使未来网络终端应用更加丰富，用户获得的手段正在逐步多样化。特别以IPv6为核心的下一代网络的实现，将会对互联网的格局造成新冲击，这一切不单单只局限于普通的计算机用户，还包括庞大的手机用户群和新一代的数字电视用户。他们将会在未来的3G时代亲自体验到“电话或电视互联网络”。

网页设计包括平面视觉构成的各个元素和布局，还包括动态多媒体交互元素等网页特有视觉元素，其中每个元素都能向用户传递不同的信息。所以，不论是手机或是电视，我们的网页都不能按照现今计算机的WEB所规定的显示比例来制作。如果只是简单的改变WEB页面的大小，对整个版面胡乱划分，元素与元素之间搭配不协调，这样的网页肯定不可能获得用户的好感。此时平面构成的理论便可派上用场。例如，手机屏幕小、分辨率低，为了让手机更好的显示网站内容，必须对现有的Web网页重新格式化，需要将纷繁复杂的Web页面重新调整为简单结构（图20），同时对版面进行智能编排。比如，手机不适合左右滚屏，应避免使用过长图片或文字，人性化的浏览设计将使手机用户可以更便利，更轻松的浏览页面。同时，对图片也要进行艺术处理（如图20），对字体、字型及字号的选择除要符合审美标准外还要考虑到显示屏的大小，及整个页面结构的把握，是借助框架（也叫骨骼）或是其他，以及如何更有效的在手机上使用多媒体技术，使得网页艺术设计的表现力更加丰富。

在未来，网页的显示模式将会发生翻天覆地的变化，不论是在电脑、手机、手表抑或是电视上，我们看到的网页对美的追求会更加彻底，平面构成中的重复、变异、韵律、连续以及图/底关系处理等，是任何一种设计的基本原理，尽管处于不同文化背景中的设计师在运用这些视觉构成元素时都不经相同，但是，所有的文化都涉及到这些视觉基本要素，都离不开形式美的法则。美与技术并存将会在未来完美体现，所以，在未来网页设计将真正走进每个人的生活，设计将会不再不拘于形式，更加的灵活，看重的是网页设计的灵魂。因而，平面构成也就必然成为网页设计的重要基础。

五、主要参考资料

①．毛溪，2003．平面构成(第一版)．上海：上海人民美术出版社，122．

②．李凇，2000．中外美术对谈录（第一版）．中国工人出版社，2

③．姜伟，2004．网页美工传奇（第一版）．机械工业出版社，2

④．徐希景、陈笋，2003．网页平面构成的创意手法分析．福建商业高等专科学校学报，47

⑤．刘永翔、唐良瑞，2004．网页设计中的视觉构成分析．北京工商大学学报，58

⑥．杨萍，2005．抽象形、空间、肌理——平面构成在教学实践中的思考．黔南民族师范学院学报，78

平面构成在网页设计中的运用