论页视觉要素设计.docVIP

论网页视觉要素设计 北京印刷学院设计艺术学院 王愉 引言 网页设计是一门边缘学科。它是一门技术，也是创造美的过程；它是传播的工具，也是表现多媒体技术的一部分。网页要给访问者留下深刻的印象，使信息被用户接收传播，只有美观与实用相结合，设计与用户相沟通，与相联系。？表1-1 1-1-3 PNG格式 PNG格式是一种存储32位信息的位图文件格式，其图像质量要胜过GIF格式的图像，也使用无损压缩方式来减少文件量的大小。PNG格式图像可以是16位的灰阶、48位的彩色，也可以是8位的索引色。它的特点是显示速度快，因为它使用高速交替显示方案，只需要1/64的图像信息就可以显示出低分辨率的预览图像，但不支持动画。当前并非所有版本的浏览器都支持此格式。而MNG支持动画。 1-2图像的色彩模式 RGB显示器色彩原理：电脑显示器的颜色属于光源色，属于基于RGB三原色的色彩原理。显示器中的所有颜色都是通过红色（Red）、绿色（Green）、蓝色（Blue）这三原色的混合、叠加来实现的，这种颜色的混合原理被称为加色法混合。 CMYK印刷颜色混合原理：印刷三原色是洋红（Magenta）、黄色（Yellow）、青色（Cyan），印刷品的颜色是通过三原色以及黑色（Black）的混合来实现的，印刷颜色的混合原理属于减色法。 基于HTML语言的网页色彩只能解析显示RGB色彩，而不支持CMYK色彩。如果在网页制作时使用了CMYK色彩模式的图片，即使是JPEG格式的图片在互联网上也将无法显示该色彩模式的图片。这在制作网站前的色彩规划中尤为重要。 1-2图像文件的大小 从图像格式就可以看出，网页中的图像质量不需要很高。因为网页中的图像最终于计算机的显示器上显示，受显示器的最小分辨率的限制，一般来说，分辨率为72dpi(dot per inch)是大多数图像的最佳选择；对颜色深度来说，8位(256色)或24位的颜色深度在多数情况下就已足够。另外，网页的中的图像由于需要适合网络传输的要求，受到带宽的限制，其文件尺寸在一定范围内越小越好。 1-3图像的优化处理 优化网页中的图像首先要使用高质量的原始图像。分辨率不能低于72dpi，具有24位以上颜色深度。若使用扫描图像，最好使用照片原稿，尽量避免使用印刷的相片复制品。扫描时选用较高的颜色深度，如24位；最好用100dpi或更高。母图要保存好，按该图像处理软件相应的文件格式存储以保证以后的编辑改动。通过减小图像的尺寸、分辨率和颜色深度来优化处理。但是既要求图像质素高，又要文件量少，这两者往往存在矛盾。我们可以在不同设置下输出图像，比较其屏幕显示效果，选出符合视觉要求且尽量小的图像文件。如图（1-1），家具用品的图像质素清晰，视觉效果好，通过切割图像替换单元格背景色减小文件量，减少下载时间。 图1-1 另外，虽然在HTML中可以重新设定图像的尺寸大小，但是，对低质量的图像放大会影响视觉的精度要求，出现马赛克；而对过大的图像进行缩小，由于文件量不变，网页的下载速度不会变快。所以，在前期设计网页版面布局时尽量设计好图像的长宽，需要多大的尺寸就制作相应尺寸的图像。 1-4动态图像的使用 动态图像常用于广告、演示、卡通动画、动态按钮等。格式为Gif动画、Flash动画、Java动画、Shockwave及Dhtml动画。动画比静态图像更吸引浏览者注意力，但布局分散或过多的动画反而不利于信息的传达并且造成浏览者的视觉疲劳。 网页中的文字设计 一般使用HTML的font标签来设定文字的字体、字号、颜色,其它样式EM与I产生斜体，strong与B产生粗体，U产生下划线，strike与S产生删除线，sup上标字sub下标字，big略大些small略小些。 目前，网页中常用的层叠样式表（Cascading Style Sheets）是一系列格式规则，它可以非常灵活地精确控制网页的外观，设计整洁漂亮的页面，从布局到特定的字体和样式。它有有三种定义方法：在线定义，常规定义，外部定义。如图（2-1）IBM公司网站使用基本的Arial及Helvetica字体，以层叠样式表来控制页面文字及布局的统一。 图2-1 我们知道，网页是利用系统字体来显示文字的，设计者必须考虑浏览者计算机中有哪些常见字体而不能随心所欲地使用各种字体，否则浏览者看到的页面就并非设计者希望其看到的。所以，对于网页中文字的字体，有三种处理方法：一、利用基本的系统字体 ；二、提供可下载字体；三、在图中设置字体 。第一种方式会限制网页的外观设计。而第二种方式由于需要占用大量的下载时间，通常浏览者不会耐心等待而跳转至其它网站。最后一种方式仍然存在一定的缺陷：1）图形中的文本不可搜索； 2）图形文件的加载速度比文本慢；3）浏览器不支持图形的人们无法看到它们。例如在IE中”工具”——Interne