Web界面设计中的美学理论

徐燕飞 张驰骋

【摘要】网页界面设计是将技术性与艺术性融为一体的创造性活动。本文在分析当前网页设计中存在的问题的基础上，认为美学与网页有着很深的联系。在网页中我们可以享受到美，欣赏到美，网页设计中应结合色彩设计、图形图像设计、视觉传达的设计、版式的构成、文字的编排设计、动画设计效果六要素充分利用美学理论。

【关键词】网页设计界面设计艺术美学

一、网页设计的现状及问题分析

（一）什么是网页设计

网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的。设计是把一种计划、规划、设想通过视觉的形式传达出来的活动过程。人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。设计是造物活动进行预先的计划，可以把任何造物活动的计划技术和计划过程理解为设计。因而，网页设计便是创造出一个新的网页的过程。

（二）网页设计现状及问题

1.网页设计的环境。不可否认，国内网页设计环境目前还停留在初级的认知阶段，也就是说，绝大多数人不知道网络的真正的可用之处，你去做一个业务的时候，不得不去做大量的说服教育工作。以乙方的身份去说服甲方，以专业角度去教育非专业认识，结果是可想而知的。也正是这种全体社会普遍的低认知水平，导致了大量网络垃圾的产生。

2.网页设计缺乏美感。网页技术更新很快，一个网站的界面设计寿命仅仅2-3年而已。网络正在以强大的冲击力影响着人们的生活。

二、设计中的美学理论

（一）美学理论的概念

就以“美的本质”来说，不同时代、不同流派的美学家对于美学中的这个基本问题的看法，是各不相同的，甚至是千差万别的。大致可分为以下几类：内容与形式的关系，理性与感性的关系。有的强调形式，忽视内容；有的只重内容，轻视形式；也有的企图使形式和内容、理性和感性按照他们的需要而相互结合。

（二）美学理论与网页的联系

美学与网页有着很深的联系。在网页中我们可以享受到美，在欣赏美的同时会不自觉认为，这就是美的网页。美在以不同形式的网页表现着，不同类别的网页呈现出不一样的美。

网页界面可以依据其传达信息内容的特点来进行类型的划分，主要可分为6种形式：

1.信息查询类。以实用功能为主，注重视觉元素的均衡排布，较少装饰性的元素。如Yahoo!

2.大众媒体类。集广告宣传，行业资讯，广告联盟，广告资讯为主的网站。如新浪网新闻中心。

3.宣传窗口类。从企业特有形象入手，充分表现企业文化特征，如Adidas。

4.电子商务类。使浏览者在访问时进行愉快的交流是设计的重点，要求既要具备人们乐于接受的交互性，又要有吸引浏览者注意的页面形式，如当当书店。

5.交流平台类。以方便使用为主要特点，指示性强，易于理解，如BBS。

6.网络社区类。由于网络社区通常不带有商业性质，因此它的界面设计可以根据社区内容充分发挥创造性，营造一个自由、舒适、愉快的氛围。

更好的掌握网页界面设计中不同类型网页的不同市场设计需求。让更多的人从新手到入门，甚至有更好的突破。当然，纯粹的技术更新是于事无补的，如今的市场已经不单单注重于技术，美在技术中的体现更为重要。

三、美学理论在网页设计中的运用

对于设计者们来说，网站的整体风格及其创意设计是最难以学习的，难就难在没有一个固定的模式可以参照和模仿，给你一个主题，任何两人都不可能设计出完全一样的网站。以下是网页界面设计中的六要素便于我们更好的理解：

（一）网页设计中的色彩设计

无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的板式或者是美丽的图片，而是网页的色彩。

关于色彩的原理有许多，在此我们不可能一一阐述，大家可以看看相关设计书籍，有利于系统地理解。在此我们仅仅想告诉大家一些网页配色时的小技巧。

1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

2.用两种色彩。先选定一种色彩，然后选择它的对比色。

3.用一个色系。简单地说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

4.在网页配色中，还要切记一些误区。不要将所有颜色都用到，尽量控制在三种色彩以内。背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

（二）图形图像设计

图形图像能将信息传达得更具体、真实、直接、易于理解，从而高效率高质量的表达设计理论，使网页充满强烈的感情色彩。在网页中合理的应用图形图像，能够形成视觉信息的中心，有利于重要信息得传达。

1.标志（LOGO）。标志具有象征功能、识别功能，是网站形象、特征、信誉和文化的浓缩，一个设计杰出的、符合网站理念的标志，会增加网站的信赖感和权威感，在社会大众的心目中，它就是一个网站或某品牌的代表。图形的标志能够避免文字做标志所给人的单调感，图形标志是一种简洁但不简单的图形符号，具有以小见大、以少胜多、以一当十的特点。在现代社会生活中，经过精心设计而具有高度实用性和艺术性的图形标志，以其特有的功能和新颖别致的艺术效果，感染和影响着人们，指导人们的认知和选择。

2.背景插图。背景插图可以把浏览器变成一个真实的环境，用图形为背景来衬托主题，可以增加层次感，可与网页主题图像形成对比或共鸣，从而突出主题形象，彰显网页的风格。

3.主图。网页主图是指网页中表达主题、突出主题的较大幅面的图形图像。一幅好的主图，可以使浏览者见其图即知其内容，主图能够形成整个页面的视觉中心，它具有直观性强的特点，不需要像文字那样去逐字逐句地阅读，可以不受文化水平的限制，并能在瞬间给人以深刻印象。

4.超级链接。将图形设计成超级链接形式，能够使网页链接变得样式丰富，可以使网页更为美观。若能利用标志性符号，便可以减弱语言的障碍。图形按钮具有直观、形象的特点，可以为单调的文字信息增添活力，可以更加明确地表现它所要进行的操作。

（三）视觉传达的设计

网页作为一种新的视觉表现形式，它兼容了传统平面设计的特征，又具备所没有的优势，是将技术性与艺术性融为一体的创造性活动。网页界面设计所涉及的范围非常的广泛，包括消费者心理学、视觉设计美学、人机工程、语言学、计算机技术等诸多方面。本文从视觉传达的角度进行了一些阐述与分析，结合人们在浏览网页媒体信息时的视觉习惯，探讨了网页界面设计的原则、内容，提到通过视觉信息有效的编排，增强网页信息传达的有效性。

1.网页中视觉传达的元素。做一个既要美观有便利的个性化网站界面，不但要考虑网页的banner、还是导航条的美观和实用性，更要去考虑网页设计的多种要素，例如文字、图片、声音、视频、动画等其他的视觉元素。网页中使用的动画，必须符合网页的主题，动画的数量、变化不能过多，否则会削弱动态效果，分散观者的注意力。[3]

2.网页界面设计中的应用方法。设计网页界面所包含的因素是极为广泛的，但在运用中却只能有侧重、有强调的把握。设计因素虽多，但她仍是一个不可分割的整体。它的结果是物化的形，但这个形却是代表了时代、民族等方面的意识，并最终反映出人的“美”的心理活动。

（四）版式的构成

页面版式也称页面的构图，版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配置，使页面整体视觉效果美观和谐，便于阅读，实现信息传达的最佳效果。

1.满版型页面。满版型页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。

2.骨骼型页面。网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。

3.分割型页面。分割型把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。

4.中轴型页面。中轴型沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。曲线型的图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。倾斜型页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。

5.对称型页面。对称的页面给人稳定、严谨、庄重、理性的感受。对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四个角安排的任何内容都能产生安定感。控制好页面的四个角，也就控制了页面的空间。越是凌乱的页面，越要注意对四个角的控制。

6.自由型页面。自由型的页面具有活泼、轻快的风格。网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。

7.焦点型网页。焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况:以对比强烈的图片或文字置于页面的视觉中心。视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。

（五）文字的编排设计

在网页设计中，字体的处理与色彩、版式、图形等其他设计元素的处理一样非常关键。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。

1.字体的使用。字体的最大特点就是每种字体给人带来不同的情感和风格属性。字体具有两方面的作用：一是实现字意与语义的功能，二是美学效应。从加强平台无关性的角度来考虑，正文内容最好采用默认字体。因为浏览器是用本地机器上的字库显示页面内容。在网页设计中准确选择字体，是每个网页设计师首先要考虑的问题。

2.两端对齐。文字编排可以横排也可竖排，只要左右或上下的长度对齐，这样的字群组合就显得整齐、端正、严谨、大方、美观。但要注意避免平淡，可选取不同形式的字体穿插使用，这种方式容易与图片混排。

3.一端对齐。一端对齐能产生视觉节奏与韵律的形式美感。通过左对齐或右对齐的方式使行首或行尾自然形成一条清晰的垂直线。另一端任其长短不同，能产生虚实变化，又富有节奏感。左对齐符合人们的阅读时的习惯，有亲切感。右对齐可改变人们的阅读习惯，会显得有新意，有一定的格调。

4.居中排列。以中心轴为准，文字居中排列，左右两端字距相等。这种编排形式可令视线集中，中心突出显得优雅、庄重、有个性。不足之处是阅读起来不太方便，此形式适宜文字不多的版面编排。将文字居中排列，用于网络广告中，有利于主题信息的传达。

5.文字绕图编排。文字围绕图形边缘排列，这样穿插形式的应用非常广泛，能给人以亲切、自然、生动和融洽的感觉。海尔公司简介的网页中，将文字绕图排列，极具亲和力。

6.自由编排。在综合甚至打破上述几种方式的基础上，使版式更加活泼、更加新颖，具有较强烈的动感。但要注意保持版面的完整性，还要注重有一定的编排规律。倾斜的文字适合版面活泼动感的特点，突出视觉焦点。

7.标题与正文的编排。标题的字体、位置、大小、排列方向能够直接影响编排版式的艺术风格。标题完全可以打破一般视觉的常规导向，可横排、竖排、居中或边置等排列。标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理，甚至可以直接插入字群中，以新颖的界面来打破旧有的规律。

一般情况下，正文不做分栏处理，因为分栏将使浏览者将面临反复拖动滚动条的麻烦。如果想打破一栏的单调，可采用图文混排的形式。

（六）动画设计效果

如今互联网发展越来越明显，单一的静态页面已经不能满足浏览者的需求，而网页不是视频，这时在网页中加入了动画效果，是不二之选。而网页界面设计中动画设计效果主要分为以下两种：

1.整体运用。这一类运用通常运用在门户网站首页，国外的很多网站都使用了这一方法，吸引浏览者，更加新颖，直击浏览者的心扉。同样它也有不足之处，比如缓冲较慢。

2.局部运用。此类运用比较普遍，通常以轮显嵌入的视频表现。让原本静止的网页“动”起来，变得不那么单一。

进行网页设计要有效利用美学原理，设计出漂亮的网页吸引顾客，同时也应该注意网页的实用价值，并定期维护网页，使其发挥更大作用。

参考文献

[1]殷辛，段芸.《网页设计》了解网页设计基本理论.华中科技大学出版社，2011年1月1日

[2]数据来源参见百度文库中教育专区高等教育《网页设计基本理论》第三章，2012年1月20日

[3]王愉，隋涌.论网页视觉要素设计[J].北京印刷学院学报，2005（04）

作者简介：徐燕飞（1990-），女，宁波大红鹰学院信息工程学院学生；张驰骋（1990-），男，宁波大红鹰学院机电学院学生。