美学原理在网页设计中的应用

1、美学原理在网页设计中的应用唐一鹏（福建信息职业技术学院，福州 350003）摘 要 当代网页设计师除了掌握相关的Web技术外，还应具备一定的艺术修养。这样才能做出美观而又实用的网页。笔者从美学原理的角度出发，探讨网页布局、导航及LOGO的设计。关键词 色彩；布局；导航；LOGO 引言网页设计是一门新兴的边缘性的行业，在网络产生以后应运而生。当点击到网站时，首先映入眼帘的是该网页的界面设计，如内容介绍、按钮摆放、文字组合、色彩应用等等。这一切既是网页设计的范畴，也是网页设计师的工作。好的网页布局应该是把美学原理合理地融入到技术中去，为此，谈谈个人在这方面的认识。一、认识色彩色彩的魅力是无限的。信

2、息时代的快速到来，网络也开始变得多姿多彩。因此色彩在网站设计中占据相当重要的地位。设计者不仅要掌握基本的网站制作技术，还需要掌握网站的风格、配色等设计艺术。1.1基本概念自然界中色彩虽无以计数，但最基本的有三种（红、黄、蓝），其它的色彩都可以由这三种色彩调和而成。我们称这三种色彩为 “三原色”。任何一种彩色具备三个特征：色相、色度和色纯。色相，指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说紫色、绿色、黄色等等都代表了不同的色相。同一色相的色彩，调整一下亮度，或者纯度很容易搭配，比如，深绿、暗绿、草绿、亮绿。色度，指的是色彩的明暗程度。明度越大，色彩越亮

3、，比如一些购物、儿童类网站，用的是一些鲜亮的颜色，让人感觉绚丽多姿，生机勃勃；明度越低，颜色越暗，主要用于一些游戏、探险类网站，充满神秘感。有明度差的色彩更容易调和。如紫色 （#993399）与黄色（#ffff00），暗红（#cc3300）与草绿（#99cc00），暗蓝（#0066cc） 与橙色（#ff9933）等。色纯，指色彩的鲜艳程度，纯度高的色彩纯、鲜亮。纯度底的色彩暗淡，含灰色。相近色：色环中三原色左右构成的相邻颜色，如绿与黄、绿与蓝。相近色的搭配给人的视觉效果很舒适，很自然。互补色：色环中相对的两种色彩，如红与绿、蓝与橙、紫与黄等。对于互补色，调整补色的亮度，一方加强、一方减弱，这是

4、一种很好的搭配。暖色：暖色跟黑色搭配可以达到活泼、温馨的效果。暖色一般应用于购物类网站，电子商务网站，儿童类网站等等。冷色：冷色一般跟白色搭配可以达到严肃、稳重、神秘的效果。冷色一般应用于一些高科技，游戏类网站。绿色，蓝色，蓝紫色等都属于冷色系列。色彩均衡：意为每种色彩所占的比例、面积、位置要合理。网站要让人看上去舒适，协调，除了文字，图片等内容的合理排版，色彩的均衡也是相当重要的一个部分。1.2色彩的作用色彩在生活中是有丰富的感情和涵义的。比如：红色让人联想到玫瑰，联想到喜庆，联想到兴奋；白色联想到纯洁，干净，简洁；紫色象征着女性化，高雅，浪漫；蓝色象征高科技，稳重，理智；橙色代表了欢快，甜

5、美，收获；绿色代表了充满青春的活力，舒适，希望等。当然不是说某种色彩一定代表了什么含义，在特定的场合下，同种色彩可以代表不同的涵义。对一些明度较高的网站，配以黑色，可以适当地降低其明度。白色是网站用的最普遍的一种颜色。很多网站甚至留出大块的白色空间，作为网站的一个组成部分。这就是留白艺术。恰当的留白对于协调页面的均衡起到相当大的作用。当觉得两种色彩的搭配不协调，试试加入黑色，或者灰色，会有意想不到的效果。1.3确定网站主题色一个网站必须有一种或两种主题色，多则让人感觉轻浮、花俏；少则单调。当主题色确定以后，考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现什么样的效果。 另外，哪种因素占

6、主要地位，是明度、纯度还是色相。一般一个页面尽量不要超过4种色彩。二、网页的布局网页是网站构成的基本要素。网页布局的好坏直接影响到视觉效果。2.1网页布局类型网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、封面型、Flash型、综合框架型等，下面分别论述：1.“国”字型：也可以称为“同”字型，常用于大型网站，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见的最多的一种结构类型。 2.拐角型：这种结构与上一种只是形式上的区别，其实是很相近，上面是

7、标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 3.标题正文型：即最上面是标题或类似的一些东西，下面是正文，常见于一些文章页面或注册页面。 4.左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。这种结构较多出现在论坛中，也常用于企业网站。这种类型结构比较清晰。 5.上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。6.综合框架型：上面两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”，只是采用

8、了框架结构。 7.封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果处理得好，会给人带来赏心悦目的感觉。8.Flash型：这种类型采用了目前非常流行的Flash，页面内容随时间变化，所表达的信息更丰富，具有较强的现代感和视觉冲击力，如果处理得当，绝不差于传统的多媒体。在以上布局中，对于不同的形状，代表着不同意义。比如：矩形代表着正式、规则，很多ICP和政府网页都是以矩形为整体造型；圆形代表着柔和、团结、温暖、安全等，许多时尚

9、站点喜欢以圆形为页面整体造型；三角形代表着力量、权威、牢固、侵略等，许多大型的商业站点为了显示它的权威性常以三角形为页面整体造型；菱形代表着平衡、协调、公平，一些交友站点常运用菱形作为页面整体造型。目前的网页制作多数是结合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。2.2网页构成的元素1.页面尺寸页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于无法突破显示器的范围，浏览器的工具栏也是影响页面尺寸的原因。一般分辨率在800x600的情况下，页面的显示尺寸为：780 X 428个象素；分辨率在640 X 480的情况下，页面的显示尺寸为：620X311个象素；分辨率在1024

10、X768的情况下，页面的显示尺寸为：1007 X 600。从以上数据可以看出，分辨率越高页面尺寸越大。在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。基本上，一页显示不超过三屏，除非你肯定站点的内容能吸引大家拖动。2. 页眉页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。页眉是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页眉常放置站点名字的图片和公司标志以及旗帜广告。3.文本文本在页面中都是以行或者块(段落)的形式出现，过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页

11、面的任何位置，但要做到布局得当。4.页脚页脚和页眉相呼应。页眉是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。5.图片图片和文本是网页的两大构成元素，如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。6.多媒体除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。2.3网页布局的构思网页布局构思的方法有两种，第一种为纸上布局；第二种为软件布局。1.纸上布局法许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计软件里边设计布局边加内容。这种不打草稿的方法是很难设计出优秀

12、的网页来。所以在开始制作网页时，要先在纸上画出页面的布局草图来。2.软件布局法如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便地使用颜色、图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。三、导航导航栏能让我们在浏览时容易地到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目。3.1导航栏的位置一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏高度可能会小于435px，基于这点考虑，那种

13、横向放置的导航栏要优于纵向的导航栏。3.2第一屏所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分，在800*600的屏幕显示模式(这也是最常用的)下，能看到的部分为778px*435px。第一屏当然要放最主要的内容，据大量的调查显示，最醒目的位置为屏幕的右上方。3.3篇幅将篇幅过长的文件分隔成数篇较小的网页能大大增加界面的亲和性，但在导航按钮与超链接的配置上，网页设计者则要做更细心、更周全地安排：结构合理、标题清楚、导航方便。四、Logo设计Logo指的是网站标志，常用的工具软件有Photoshop ， Coreldraw ， Illustrator和 Flash等。灵活运用美学

14、原理中的比例、对比和重复可以设计出精美的Logo。4.1比例在牛津现代高级英汉双解词典中是如此对“比例”定义的：一物与他物在量、大小等方面的比率；部分与整体的关系。早在希腊与文艺复兴时代的建筑家就开始找寻一个“理想的”比例规则，其中最出名的就是图1所示的“黄金分割”。图1随着现代人审美观念的改变，纯数字的“黄金”比例已不再是放之四海皆行得通的标准；而且现代电脑技术的发达，使得我们可以轻易设计出复杂异常的形体与颜色，它们的交互影响又直接影响到物体比例的感观。因此对于比例的考虑，应将注意力更多地放在外形，可见性与突出性上面。“比例”最重要的原则是遵循客观规律，文字比例要使得其易读，形体比例要使得它

15、不会变形而且特色突出。事实上，只要有可能，无论什么时候我们都要找到作品中各个元素的相互关系，尽管它有时并不明显。如果能将两个完全不相称的元素安全地变换成一个固定的比例，如一样大或者成倍数关系，那就值得去试试。如图2：图2在日常设计中，决定比例规则的工作常常分成两部分：先是尽可能全面地查找作品内部的所有元素；然后找出它们之间的关系并为它们定身制作比例标准。4.2对比比例常常针对着尺寸大小，而对比则可以针对于各种属性，如颜色、大小、形状、字体、纹理，等等，没有一件事物不具备对比性。只要你静下心来认真进行比较，将会惊奇地发现那些外表相似的物体竟然还有如此丰富的对比因素。不少人只是简单地将它们进行孤立

16、看待，实际上所有的对立显示了不同程度的连续性，而正是这些对立程度的选择，往往是区别一位设计高手与业余设计者的标准！通常对比突出的并不是组件本身，而是组件彼此的关系与它们要传达的交互信息。如图3中的对立因素的连接点在“RWC”三个用于表达中心意思的字上；而对比因素就很多了：背景层尺寸较大，并有虚化效果；前景层小一些，色泽更暗；背景层用小写字体而前景层使用大写字体；背景层中的“W”是处于升格而前景层中的“W”处于降格；字体色彩不一致。这些正是由于多种对立面的分散锐化，使整个LOGO从矛盾中显得异常协调！图3将对比概念应用到LOGO设计中，可以这样认为：1.形体的对比，包括大对小，水平对垂直，方形对

17、圆形，等等。2.色彩的对比，包括色相，饱和度与亮度的对比，等等。3.字体对比，包括字型，大小写，尺寸等的对比。由于字体发展不平行的特性，使得我们很难在同一个LOGO中应用两种完全不同风格的字型，因此常常在大小写方面做文章。4.3重复跟对比强调组件的联系一样，重复并不是旨在突出组件的鲜明，而是用以强调一种发展趋向，一种变化顺序。这也从另外一个意义上暗示我们：重复物件最好按照一种线性流程进行定位，或者是直线，或者是曲线，或者是一种较为复杂的交互线程。在图5中三个多边形按照弧线定位，重在表现一种对称性。 图4图6？又给我们指明了另一种定位规则：一般地，重复组件用于表达一定的发展趋向，而且每个组件又有自己比较鲜明的特点，用上面的对称或弧线定位难于传送合适的趋向意识。因此我们采取简单的直线线