网页的版式设计

网页的版式设计

发布日期：2007年10月16日  来源：网摘

除了文本之外，网页上最重要的设计元素莫过于图像了。一方面，图像的应用使网页更加美观、有趣；另一方面，图像本身也是传达信息的重要手段之一。与文字相比，它直观、生动，可以很容易地把那些文字无法表达的信息表达出来，易于浏览者理解和接受。 1.图像的格式 　　Web通常使用两种图像格式：GIF和JPEG。除此以外，还有两种适合网络传播但没有被广泛应用的图像格式：PNG和MNG。 2.图像的形式 　　同印刷排版一样，静态图像在网页排版中的运用不外乎四种形式：方形图、退底图、出血图以及这三种形式的结合使用。 　（1）方形图　即图形以直线边框来规范和限制，是一种最常见、最简洁、最单纯的形态。方形图使图像内容更突出且将主体形象与环境共融，可以完整地传达主题思想，富有感染性。配置方形图的页面，给人以稳重、可信、严谨、理性、庄重和安静等感觉，但有时也显得平淡、呆板。 　（2）退底图　将图像中的背景去掉，只留下主题形象。退底图形自由而突出，更具有个性，因而给人印象深刻。配置退底图的页面，轻松、活泼，动态十足，而且图文结合自然，给人以亲和感。但也容易造成凌乱和不整体的感觉。 　（3）出血图　图像的一边或几个边充满页面，有向外扩张和舒展之势。一般用于传达抒情或运动信息的页面，因不受边框限制，感觉上与人更加接近，便于情感与动感的发挥。 3.图像的编排 　 （1）四角与中轴四点结构 　　页面的四个角与对角线、中轴四点及水平与垂直的中轴线，具有支配页面结构的作用。 　　四角是页面边界相交形成的四个点，把四角连接起来的斜线即对角线，交叉点为页面中心。中轴四点指经过页面中心的垂直线和水平线的端点。这四个点可上、下、左、右移动。 　　通过四角与中轴四点结构的不同组合、变化，可以求得多样的页面结构。在图像排版时紧紧抓住这八个点，可以突出网页的形式美感，网页的版式设计、视觉流程的筹划也得到相应简化。 　 （2）块状组合与散点组合结构 　　块状组合，即通过水平、垂直线分割，将多幅图像在页面上整齐有序地排列成块状，这种结构具有强烈的整体感和秩序美感。各幅图像相互自由叠置或分类叠置而构成的块状组合，具有轻快、活泼的特性，同时也不失整体感。 　　散点组合，即图像分散排列在页面各个部位，具有自由、轻快的感觉。采用这种结构应注意图像的大小、主次，以及方形图、退底图和出血图的配置，同时还应考虑疏密、均衡、视觉流程等。 4.图像的处理 　　图像的外形、大小、数量以及与背景的关系，都与内容有着密切的联系。 　 （1）图像的外形处理 　　图像的外形能使页面的气氛发生变化，并直接影响浏览者的兴趣。一般而言，方形的稳定、严肃，三角形的锐利，圆形或曲线外形的柔软亲切，退底图及一些不规则或不带边框的图像活泼。 　 （2）图像的面积 　　图像在网页中占据的面积大小能直接显示其重要程度。一般地，大图像容易形成视觉焦点，感染力强，传达的情感较为强烈；小图像常用来穿插在字群中，显得简洁而精致，有点缀和呼应页面主题的作用。在一个页面中，如果只有大图像而无小图像或细密的文字，就会显得空洞，但只有小图像而无大图像又使页面缺乏视觉冲击力。 　　图像的大小不仅决定着主从关系，也控制着页面的均衡与运动。大小对比强烈，给人跳跃感，使主角更突出；大小对比减弱，则页面稳定、安静。这是因为，访问者在浏览页面时，首先会注意到大图像，然后再看到较小的图像，这种由大到小的引导，使浏览者的视线在页面上流动，便造成一种动势，使页面活泼起来。 　　因此，在网页设计时，应首先确定主要形象与次要形象，扩大主要图像的面积，使次要角色缩小到从属地位。只有大小图像主次得当地穿插组合，才能构成最佳的页面视觉效果。 　 （3）图像的数量 图像的数量是根据内容决定的。只用一幅图像，会使内容突出、页面安定。增加一幅图像，页面会因为有了对比和呼应而活跃起来。再增加一幅，则更加热闹、活泼。但是，限于目前网络的传输速度，使用图像时一定要谨慎，大的图像会降低页面显示速度，即使是小图像，如果运用数量过多，同样会使页面下载速度变慢。随着网络环境及技术条件的改善，这种情况已经有了很大的改观。 　 （4）与背景的关系 　　网页图像与背景是对比和统一的关系。也就是说，图像与背景在和谐统一的基础上，应存在一定的对比，以使主要图像更加突出。如精密的相机镜头以粗糙的岩石为背景，明亮的文字以深邃的星空为背景，或者使用没有背景及陪衬物的退底图像，周围留出大面积空白，都是利用对比对主体形象起到突出作用。 5.图像在长页面中的应用 　　网页一般都是纵向的(也有特意设计成横向滚屏的)，其长度从一屏到三屏不等，有时甚至更多。访问者在浏览页面时，通过拖动垂直滚动条使网页一屏一屏地显示，但这并不意味着我们可以将整个页面分割开来，孤立地进行每一屏的设计。页面的整体感是建立在形象的启承关系上，尽管页面被分割成几屏来显示，但图像或文字的延续性应使浏览者得到完整、统一的视觉感受。设计者所要做的就是进行通盘考虑，例如：寻找对比中的和谐、建立同一的视觉识别等，来处理好每一屏与整个页面的关系。