网页设计中视效艺术要素

一、网页界面设计的特征

网页界面设计是一将艺术与技术相结合的一门学科，早期人们会有一种误解，认为网页设计主要体现在“技术”的应用上，而忽视了“设计”的层面，导致许多网页布局不合理、页面平淡无奇、内容杂乱无章等。因此，在充分传达内容和信息的基础之上，网页界面还必须具备一定的艺术特征，这种艺术是基于功能性之上，并且为其服务的。

（一）以功能性为主网页界面设计和平面设计一样，必须遵循一定的设计原则，在必须具备平面设计特征的同时，网页设计还具有其特有的基本特性。网页界面设计应时刻围绕“信息传达”这一主题来进行。因此，它是一种以功能性为主的设计。主要体现在以下两个方面：1.信息传达的功能网页界面设计以信息传达为主要功能，并且信息必须准确、清晰明了，具有明确的受众对象和宣传目标，注重时效性。2.一定的审美功能网页界面的审美功能具有一定的综合性。以内容为主，艺术为辅，除了界面布局合理，色彩搭配美观，有清晰的导航功能，内容吸引人等，还必须考虑到用户操作的简易性和信息接受心理等因素。

（二）形象明确，易于接受格罗佩斯在他的《艺术家与技术家在何处相会》一文中提到：“如果物体的形象很适合于它的工作，它的本质就能被人看得清楚明确。”明确地指出了“形象”在信息传递和接纳过程中所起到的重要作用。人们在接触外界事物的时候，总是先通过视觉来接受信息，从而触发一系列的心理活动。例如：看到天空飞翔的小鸟，会联想到自由，看到长城、故宫，会联想到中国传统文化。因此，在设计网页界面的时候，必须以通俗易懂的形象来传递信息，同时，也要考虑到网页受众的年龄、职业、文化层次、兴趣的差异性，尽可能地使用简单的宣传形式来满足所有层次的受众。在可口可乐的网页中，用户可以从水珠、人物等形象中充分联想到活力四射、清凉的感觉，形象通俗易懂，传达的信息易于接受，具有良好的传达效果。

二、网页界面设计的视觉构成要素

网页无论其类型、大小、功能，风格，其具备的基本要素都是一致的，与平面设计相比，除了图像和文字之外，网页界面包含更多的要素，如声音、视频、动画等多媒体要素，以及由Javascript、VBscript等动态语言实现的网页特效和交互功能。

（一）网页界面中的文字设计文字是网页界面的主体，也是传达网页信息的基本载体，虽然在今天多媒体元素的种类繁多，但文字依然占据它不可取代的地位，因为文字具有存储空间小、易于下载和显示的功能。网页界面中的文字分为两种：ASC文本和像素文本。网页中大部分文字都是直接在HTML代码中编写，或者在dreamweaver设计窗口中自行输入，这部分文字主要以ASC码存储，占取空间小，易于修改和编辑，在排列文字样式的时候，一定要结合CSS样式表来排版，CSS样式表的强大功能可以同时对文字的字体、字形、大小、颜色、间距、边距和特殊效果等进行精心的设置，以达到较好的浏览效果。但是如果在网页中使用特殊字体，不同的用户可能由于未安装此字体而无法正常显示，所以，有的时候我们可以把文字在photoshop或者fireworks等图像图像处理软件中保存为jpg或gif格式的图片切片，再应用到网页界面中，这样就可以达到任意想要的艺术效果了。像素文本主要应用于网页界面中的标题、LOGO、Banner或者广告的部分。

（二）网页界面中的图形图像设计图形在网页界面中占据着十分重要的地位。在上网浏览时，图形图像往往比文字更容易吸引用户的眼球，因为它可以最直观、最形象地表达网页的主题，其给人的视觉印象往往比文字要强烈得多。图形必须要符合网页的主题，每张图片都必须要有其存在的价值，善用图形，可以生动形象直观地表达网页的主题，增强网页的宣传力、号召力和感染力，吸引浏览者的注意和兴趣。网页中的图形格式主要有：JPG、GIF和PNG三种。JPG具有压缩比高、压缩质量好、色彩连续性强的特点，因此，使用最为广泛。GIF虽然色彩数目不如JPG，但是可以制作透明背景，以及动态图像，也被大量应用于网页界面中。PNG是Fireworks的默认图像文件格式，集前者的优点于一身，可以对图像进行全面的优化并且导出任何想要的格式。所以，根据图形图像的使用功能，合理地采用这三种格式，是网页设计人员必须掌握的技能。

（三）网页界面中的色彩设计1.色彩设计的基本作用色彩对于事物的表现能力有着其它形式无法比拟的超强效果。作为一个网页设计师，只有掌握色彩的原理，熟知各色彩间的相互关系及各种色彩的生理或心理作用，结合自己所具备的平面构成知识，在网页设计中准确用色，才能实现传达特定信息和渲染页面的效果的目的。色彩在网页设计中起着重要的作用。首先，彩色网页较单色网页更具吸引力；其次，色彩本身具有象征作用，浏览者易于产生联想；第三，彩色网页具有赏心悦目、装饰性强等特点。2.网页界面中色彩搭配的技巧用一种色彩。这里是指先选定一种色彩，然后调亮度、透明度或者饱和度，生成新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。用两种色彩。先选定一种色彩，然后选择它的对比色。比如当我们需要突出橙色的主体内容时，使用蓝色作为背景是最好的。这样整个页面色彩丰富但不花稍。用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。在网页配色中，忌讳的是：不要将所有颜色都用到，尽量控制在三种色彩以内。背景和前文的对比尽量要大，（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。

（四）网页界面中的版式设计在进行版式设计时，仍然需要应用到前面提到过的Photoshop或者Fireworks等图形处理工具，直观地看到网页的版面效果，在Photoshop或者Fireworks中画好网页布局后，先切片，再导出切片，然后在dreamweaver中使用DIV+CSS集成网页，这是目前主流的网页布局方式。根据视觉流程和网页版式的实例，可以总结出以下版式构成的类型：水平分割、垂直分割、水平—垂直交叉分割、中轴型、倾斜型、曲线型、重心型、反复型、点散型等。通过这些划分方式，我们可以把一个平淡的界面划分成若干个视觉区域，增强界面的层次感和空间感。

（五）网页界面中的多媒体设计1.音频音频在网页界面中主要用于背景音乐、按钮提示音等。另外，某些以音乐为主的网站还提供在线音乐下载和播放的功能。音乐成为网页与浏览者进行交互的一种重要手段。网页中的音频格式主要有：MIDI、WAV、MP3、ra、ram、rpm等，各具特点，应区别对待。2.动画网页中的动画主要分为：FLASH动画、GIF动画、交互动画等。FLASH动画具有体积小、整体性强的特点，主要用于banner、导航等。GIF动画可以做成一些小图标，而交互动画主要是通过Javascript、VBscript等动态脚本语言结合HTML语言来实现网页的一些特殊效果，如：鼠标跟随、幻灯片切换、动态导航等。3.视频视频由于其体积大的特点，在网页中用得相对较少，但它具备其它网页元素都没有的特点—信息丰富，传达便捷，对浏览者的文化水平、年龄层次要求也不高，具有较强的吸引力。常用的文件格式有：AVI、RM等。

三、总结

以功能性为第一指导原则，以技术因素为主要考虑对象，以完成或实现必要的功能为目标，在进行网页界面设计时，遵循这样一个设计原则，那么，要设计出成功的界面并非难事。对网页界面设计的基本艺术要素进行系统的研究，是促进网络发展的重要环节，对提高网页设计者的制作水平，培养对网页界面设计的审美能力而言，都具有相当现实的意义。