论文部分内容阅读
摘要：伴随着网络的高速发展，使用者对网页的要求也越来越高。不仅要求网页运行快捷迅速，同时也追求网页的视觉审美效果。因此设计人员就需要制定新的研究战略，通过对计算机技术和网络媒体艺术特色的研究，使二者有机整合，以此满足人们对网页使用与审美的双重需求。
关键词：网页设计；视觉效果；浏览速度；整合
中图分类号：TP393文献标识码：A文章编号：1009-3044(2007)06-11540-01
1 引言
国内网站的建设最初是仅仅重视功能性要求，经过多年的发展，随着技术的完善和审美需求的提升，当前的网页已经日趋注重页面的视觉效果，强调页面的风格，体现主体的理念，因而高水平的网页设计需求大幅增加。但同时也出现了一些新问题，很多毕业于美术专业的设计人员在设计网页时，仅从视觉效果的方面考虑，而完全忽略了网络自身的特点，结果常常会出现网页打开速度过慢，媒体元素和符号的运用不近合理等等问题。经过多年的实践，笔者深刻地体会到，在网页设计中将技术和艺术整体考量，有机结合，才能设计出高质量、高速度的网页。
2 页面的颜色向度
我做过这样的实验，在同样大小的图形上进行不同明度，不同纯度的变化，然后将每个变化的图形文件存储，进行文件大小的比较，结果发现：纯度较高的图片或单色背景，文件量比较大；明度较高的图片或单色背景文件量较小。因此在进行网页设计的时候，可以根据这一规律控制页面的颜色，尽可能地使用一些纯度低的，明度高的颜色进行视觉传达，会大大提高网页浏览速度。
3 分类符号的运用
网页的信息量很大，通常需要分门别类，所以分类所用的符号就需精心的设计和组织，网页中经常出现的分类符号如：
这些图形符号的宽度一般为10～20个象素左右，大小一般为1000字节左右。我认为键盘自身的一些元素符号做为分类符号会比上面的图形分类符号要好。因为，它们不是图形，是电脑自身二进制码输出的正常文字符号，所以一个字符，就占一个字节。如果能做为分类符号使用，那么一个分类符号和上面所述的图形符号相比，文件量要少近1000多个字节。所以在网页制作中，只要满足设计审美要求，这样的符号要多利用。国外的一些大型网站，如微软公司的网页中就大量的运用了这些符号，不仅具有较强的数字化特点，最重要的是大幅地加快了网页的使用速度和效率。
4 图像存储格式
在制作和设计网页时，除了大量的文字信息外，图形图像也在大量应用。为了提高网页浏览速度，经常使用的方法是通过将图像的尺寸减小来降低他们的文件量，以达到快速使用网页的目的。
其实，图像的存储格式对文件量大小的影响也不可忽视。下面这个实验就能说明这个问题，如图所示：“”是一个简单的分类图标，如果将其尺寸固定在 19×19 pixels，分别存成颜色模式为RGB的JPEG格式和颜色模式为Index的GIF格式，结果是：JPEG的文件量是14KB，而GIF的文件量是1KB，相差了14倍！所以，在网页设计制作时，所用的图像可以存为颜色模式为Index的GIF格式。虽然这种格式相比JPEG格式在视觉效果上有一定的差距，但在网页上我们肉眼是很难区分的。
5 一个象素的位图应用
编写网页所用的HTML语言中，当对图形进行填充，而宽度不足时，会将图形自动横向和纵向复制，这个原理可以有助于减少图案设计的文件量大小，从而加快网页的速度。如图所示：一个大幅面的渐变效果，可以运用宽度为一个象素的纵向渐变图，将其放入一个比较宽的表格内，就会自动横向重复，形成大面积的渐变效果，而文件量仅仅是开始的那个文件大小（一个象素宽），通常都是很小的，所以网页速度会很快。如果做一个长宽均为一个象素的小位图，通过HTML语言改变其长和宽，就可以很轻松地在页面上画出横向或纵向线条，这就解决了网页中画线比较困难的现状。同样也可以制作很多其它效果。所以利用HTML语言的特点，巧妙运用宽度为一个象素的位图可以使文件量减小，加快网页速度。
6 CSS的应用
CSS是用来控制网页上文字的字体字号和修改超级连接属性的程序。在CSS中的一些设置有助于实现某些视觉效果。如在CSS样式的设定中，有个调整下划线的选项，可以调整线的粗细、线的颜色、线的种类等等，这是用语言计算出来的，而非额外的图形，所以文件量非常小。这种性质的下划线是现在设计网页时很常用的设计手段。CSS样式中，还有调整不同的连接方式，调整字符，调整图形透明度等等很多的选项，这些都是通过语言计算法形成的，就象页面上的文字一样，不但不会影响网页速度，还可以表现出较好的视觉效果。诸如此类特点，网页视觉效果设计人员往往不甚了解，在一些线条的应用、图形的透明度等效果制作时，经常是通过图形的方法来解决，效果相同但文件量却增加不少，影响了网页速度。因此，网页设计人员应深入了解一下CSS样式的功效，对网页的视觉传达设计是很有帮助的。
7 页面及表格背景色的妙用
网页中页面和表格中的背景色是进行设计时要考虑的元素。由于HTML语言的限制，向网页中导入图像时，必须是方方正正的。所以很多网页的图像边缘生硬，整个页面显得死板。如果将图像边缘的颜色调整与背景色一致，画面中的主体形态绘制的较为活跃一些，在网页上就可以出现灵活的没有固定边界的图案效果。如图所示：这是一张网页的局部，整个页面是黑色背景，中间的大块暗红色块就运用了边缘渐深的技巧，从而使图像以矩形图块置入网页中时，因图块边缘与背景黑色紧密相连，使得最终的视觉效果中看不出规整的边缘，呈现出的是一种灵动的、不规则的艺术表现效果。这是一种非常实用的网页技术与艺术效果结合的表现手段。
8 JAVA程序的应用
Java Script是Sun公司和Netscape公司合作开发的用于制作动态网页的简易程序，它在网页的视觉效果方面作出了很大的贡献。最典型的例子是做水波效果。早先这种效果只能用动画软件来制作，现在用Java就可以解决了。一幅图或一行字，编写一段小程序，设定好强度、波纹的数目、波宽等，就可以作出动态水波纹效果。另外，如果觉得鼠标的小箭头太单调，也可以用Java编写一个小程序。鼠标所到之处就会伴随出现一些奇异的效果。如图所示。这些效果同样是用程序编写的，所以比起用传统二维动画软件制做的动画在网页上显现的速度要快的多。所以运用Java程序是加快网页浏览速度好方法。但要注意一两个这种程序的运用对浏览页面的速度影响不大，如果运用多个java程序，对页面的浏览速度就会有较大影响了。
运用上述网页技术进行艺术效果的设计，既能够提高网页浏览速度，又可以提升视觉效果。希望能有助于网页视觉设计人员创作出更快捷更迷人的网页！
参考文献：
[1] (美)丹尼乐, 多恩雷. www设计：环球网页[M]. 中国轻工业出版社,2001:7-8.
[2] 马谧铤. Flash网站建设实录[M]. 北京希望电子出版社,2003: 42-45.
[3] (美)Dan Cederholm. 无懈可击的Web设计[M]. 清华大学出版社,2006:145-147.
本文中所涉及到的图表、注解、公式等内容请以PDF格式阅读原文。
关键词：网页设计；视觉效果；浏览速度；整合
中图分类号：TP393文献标识码：A文章编号：1009-3044(2007)06-11540-01
1 引言
国内网站的建设最初是仅仅重视功能性要求，经过多年的发展，随着技术的完善和审美需求的提升，当前的网页已经日趋注重页面的视觉效果，强调页面的风格，体现主体的理念，因而高水平的网页设计需求大幅增加。但同时也出现了一些新问题，很多毕业于美术专业的设计人员在设计网页时，仅从视觉效果的方面考虑，而完全忽略了网络自身的特点，结果常常会出现网页打开速度过慢，媒体元素和符号的运用不近合理等等问题。经过多年的实践，笔者深刻地体会到，在网页设计中将技术和艺术整体考量，有机结合，才能设计出高质量、高速度的网页。
2 页面的颜色向度
我做过这样的实验，在同样大小的图形上进行不同明度，不同纯度的变化，然后将每个变化的图形文件存储，进行文件大小的比较，结果发现：纯度较高的图片或单色背景，文件量比较大；明度较高的图片或单色背景文件量较小。因此在进行网页设计的时候，可以根据这一规律控制页面的颜色，尽可能地使用一些纯度低的，明度高的颜色进行视觉传达，会大大提高网页浏览速度。
3 分类符号的运用
网页的信息量很大，通常需要分门别类，所以分类所用的符号就需精心的设计和组织，网页中经常出现的分类符号如：
这些图形符号的宽度一般为10～20个象素左右，大小一般为1000字节左右。我认为键盘自身的一些元素符号做为分类符号会比上面的图形分类符号要好。因为，它们不是图形，是电脑自身二进制码输出的正常文字符号，所以一个字符，就占一个字节。如果能做为分类符号使用，那么一个分类符号和上面所述的图形符号相比，文件量要少近1000多个字节。所以在网页制作中，只要满足设计审美要求，这样的符号要多利用。国外的一些大型网站，如微软公司的网页中就大量的运用了这些符号，不仅具有较强的数字化特点，最重要的是大幅地加快了网页的使用速度和效率。
4 图像存储格式
在制作和设计网页时，除了大量的文字信息外，图形图像也在大量应用。为了提高网页浏览速度，经常使用的方法是通过将图像的尺寸减小来降低他们的文件量，以达到快速使用网页的目的。
其实，图像的存储格式对文件量大小的影响也不可忽视。下面这个实验就能说明这个问题，如图所示：“”是一个简单的分类图标，如果将其尺寸固定在 19×19 pixels，分别存成颜色模式为RGB的JPEG格式和颜色模式为Index的GIF格式，结果是：JPEG的文件量是14KB，而GIF的文件量是1KB，相差了14倍！所以，在网页设计制作时，所用的图像可以存为颜色模式为Index的GIF格式。虽然这种格式相比JPEG格式在视觉效果上有一定的差距，但在网页上我们肉眼是很难区分的。
5 一个象素的位图应用
编写网页所用的HTML语言中，当对图形进行填充，而宽度不足时，会将图形自动横向和纵向复制，这个原理可以有助于减少图案设计的文件量大小，从而加快网页的速度。如图所示：一个大幅面的渐变效果，可以运用宽度为一个象素的纵向渐变图，将其放入一个比较宽的表格内，就会自动横向重复，形成大面积的渐变效果，而文件量仅仅是开始的那个文件大小（一个象素宽），通常都是很小的，所以网页速度会很快。如果做一个长宽均为一个象素的小位图，通过HTML语言改变其长和宽，就可以很轻松地在页面上画出横向或纵向线条，这就解决了网页中画线比较困难的现状。同样也可以制作很多其它效果。所以利用HTML语言的特点，巧妙运用宽度为一个象素的位图可以使文件量减小，加快网页速度。
6 CSS的应用
CSS是用来控制网页上文字的字体字号和修改超级连接属性的程序。在CSS中的一些设置有助于实现某些视觉效果。如在CSS样式的设定中，有个调整下划线的选项，可以调整线的粗细、线的颜色、线的种类等等，这是用语言计算出来的，而非额外的图形，所以文件量非常小。这种性质的下划线是现在设计网页时很常用的设计手段。CSS样式中，还有调整不同的连接方式，调整字符，调整图形透明度等等很多的选项，这些都是通过语言计算法形成的，就象页面上的文字一样，不但不会影响网页速度，还可以表现出较好的视觉效果。诸如此类特点，网页视觉效果设计人员往往不甚了解，在一些线条的应用、图形的透明度等效果制作时，经常是通过图形的方法来解决，效果相同但文件量却增加不少，影响了网页速度。因此，网页设计人员应深入了解一下CSS样式的功效，对网页的视觉传达设计是很有帮助的。
7 页面及表格背景色的妙用
网页中页面和表格中的背景色是进行设计时要考虑的元素。由于HTML语言的限制，向网页中导入图像时，必须是方方正正的。所以很多网页的图像边缘生硬，整个页面显得死板。如果将图像边缘的颜色调整与背景色一致，画面中的主体形态绘制的较为活跃一些，在网页上就可以出现灵活的没有固定边界的图案效果。如图所示：这是一张网页的局部，整个页面是黑色背景，中间的大块暗红色块就运用了边缘渐深的技巧，从而使图像以矩形图块置入网页中时，因图块边缘与背景黑色紧密相连，使得最终的视觉效果中看不出规整的边缘，呈现出的是一种灵动的、不规则的艺术表现效果。这是一种非常实用的网页技术与艺术效果结合的表现手段。
8 JAVA程序的应用
Java Script是Sun公司和Netscape公司合作开发的用于制作动态网页的简易程序，它在网页的视觉效果方面作出了很大的贡献。最典型的例子是做水波效果。早先这种效果只能用动画软件来制作，现在用Java就可以解决了。一幅图或一行字，编写一段小程序，设定好强度、波纹的数目、波宽等，就可以作出动态水波纹效果。另外，如果觉得鼠标的小箭头太单调，也可以用Java编写一个小程序。鼠标所到之处就会伴随出现一些奇异的效果。如图所示。这些效果同样是用程序编写的，所以比起用传统二维动画软件制做的动画在网页上显现的速度要快的多。所以运用Java程序是加快网页浏览速度好方法。但要注意一两个这种程序的运用对浏览页面的速度影响不大，如果运用多个java程序，对页面的浏览速度就会有较大影响了。
运用上述网页技术进行艺术效果的设计，既能够提高网页浏览速度，又可以提升视觉效果。希望能有助于网页视觉设计人员创作出更快捷更迷人的网页！
参考文献：
[1] (美)丹尼乐, 多恩雷. www设计：环球网页[M]. 中国轻工业出版社,2001:7-8.
[2] 马谧铤. Flash网站建设实录[M]. 北京希望电子出版社,2003: 42-45.
[3] (美)Dan Cederholm. 无懈可击的Web设计[M]. 清华大学出版社,2006:145-147.
本文中所涉及到的图表、注解、公式等内容请以PDF格式阅读原文。