动网论坛,站长建站首选,国内使用量最多的论坛软件 动网论坛官方技术讨论区 站长工具 申请属于您自己的免费论坛
首页 | 新闻资讯 | 网站运营 | 网络编程 | 数据库 | 服务器 | 网页设计 | 图像媒体 | 网络应用 | 搜索优化 | 资源下载 | 动网主机 | DVBOX
    本站内  互联网 ASP论坛  ASP.Net论坛  PHP论坛
   网页设计 → 阅读文章

 网页的版式设计---图像设计

作者来源: 
阅读 数 481 人次 , 2006-2-16 14:59:00 

copy的木JJ除了文本之外,网页上最重要的设计元素莫过于图像了。一方面,图像的应用使网页更加美观、有趣;另一方面,图像本身也是传达信息的重要手段之一。与文字相比,它直观、生动,可以很容易地把那些文字无法表达的信息表达出来,易于浏览者理解和接受。

1.图像的格式
  Web通常使用两种图像格式:GIF和JPEG。除此以外,还有两种适合网络传播但没有被广泛应用的图像格式:PNG和MNG。

2.图像的形式
  同印刷排版一样,静态图像在网页排版中的运用不外乎四种形式:方形图、退底图、出血图以及这三种形式的结合使用。

 (1)方形图 即图形以直线边框来规范和限制,是一种最常见、最简洁、最单纯的形态。方形图使图像内容更突出且将主体形象与环境共融,可以完整地传达主题思想,富有感染性。配置方形图的页面,给人以稳重、可信、严谨、理性、庄重和安静等感觉,但有时也显得平淡、呆板。

  (2)退底图 将图像中的背景去掉,只留下主题形象。退底图形自由而突出,更具有个性,因而给人印象深刻。配置退底图的页面,轻松、活泼,动态十足,而且图文结合自然,给人以亲和感。但也容易造成凌乱和不整体的感觉。

  (3)出血图 图像的一边或几个边充满页面,有向外扩张和舒展之势。一般用于传达抒情或运动信息的页面,因不受边框限制,感觉上与人更加接近,便于情感与动感的发挥。

3.图像的编排

  (1)四角与中轴四点结构
  页面的四个角与对角线、中轴四点及水平与垂直的中轴线,具有支配页面结构的作用。

  四角是页面边界相交形成的四个点,把四角连接起来的斜线即对角线,交叉点为页面中心。中轴四点指经过页面中心的垂直线和水平线的端点。这四个点可上、下、左、右移动。

  通过四角与中轴四点结构的不同组合、变化,可以求得多样的页面结构。在图像排版时紧紧抓住这八个点,可以突出网页的形式美感,网页的版式设计、视觉流程的筹划也得到相应简化。

  (2)块状组合与散点组合结构
  块状组合,即通过水平、垂直线分割,将多幅图像在页面上整齐有序地排列成块状,这种结构具有强烈的整体感和秩序美感。各幅图像相互自由叠置或分类叠置而构成的块状组合,具有轻快、活泼的特性,同时也不失整体感。

  散点组合,即图像分散排列在页面各个部位,具有自由、轻快的感觉。采用这种结构应注意图像的大小、主次,以及方形图、退底图和出血图的配置,同时还应考虑疏密、均衡、视觉流程等。

4.图像的处理

  图像的外形、大小、数量以及与背景的关系,都与内容有着密切的联系。

  (1)图像的外形处理
  图像的外形能使页面的气氛发生变化,并直接影响浏览者的兴趣。一般而言,方形的稳定、严肃,三角形的锐利,圆形或曲线外形的柔软亲切,退底图及一些不规则或不带边框的图像活泼。

  (2)图像的面积
  图像在网页中占据的面积大小能直接显示其重要程度。一般地,大图像容易形成视觉焦点,感染力强,传达的情感较为强烈;小图像常用来穿插在字群中,显得简洁而精致,有点缀和呼应页面主题的作用。在一个页面中,如果只有大图像而无小图像或细密的文字,就会显得空洞,但只有小图像而无大图像又使页面缺乏视觉冲击力。

  图像的大小不仅决定着主从关系,也控制着页面的均衡与运动。大小对比强烈,给人跳跃感,使主角更突出;大小对比减弱,则页面稳定、安静。这是因为,访问者在浏览页面时,首先会注意到大图像,然后再看到较小的图像,这种由大到小的引导,使浏览者的视线在页面上流动,便造成一种动势,使页面活泼起来。 copy的木JJ

  因此,在网页设计时,应首先确定主要形象与次要形象,扩大主要图像的面积,使次要角色缩小到从属地位。只有大小图像主次得当地穿插组合,才能构成最佳的页面视觉效果。

  (3)图像的数量
  图像的数量是根据内容决定的。只用一幅图像,会使内容突出、页面安定。增加一幅图像,页面会因为有了对比和呼应而活跃起来。再增加一幅,则更加热闹、活泼。但是,限于目前网络的传输速度,使用图像时一定要谨慎,大的图像会降低页面显示速度,即使是小图像,如果运用数量过多,同样会使页面下载速度变慢。随着网络环境及技术条件的改善,这种情况已经有了很大的改观。

  (4)与背景的关系
  网页图像与背景是对比和统一的关系。也就是说,图像与背景在和谐统一的基础上,应存在一定的对比,以使主要图像更加突出。如精密的相机镜头以粗糙的岩石为背景,明亮的文字以深邃的星空为背景,或者使用没有背景及陪衬物的退底图像,周围留出大面积空白,都是利用对比对主体形象起到突出作用。

5.图像在长页面中的应用
  网页一般都是纵向的(也有特意设计成横向滚屏的),其长度从一屏到三屏不等,有时甚至更多。访问者在浏览页面时,通过拖动垂直滚动条使网页一屏一屏地显示,但这并不意味着我们可以将整个页面分割开来,孤立地进行每一屏的设计。页面的整体感是建立在形象的启承关系上,尽管页面被分割成几屏来显示,但图像或文字的延续性应使浏览者得到完整、统一的视觉感受。设计者所要做的就是进行通盘考虑,例如:寻找对比中的和谐、建立同一的视觉识别等,来处理好每一屏与整个页面的关系。copy的木JJ

  
 
 收藏本文  打印本文  论坛讨论  关闭窗口
· 上一篇:网页的版式设计---文字的格式化
· 下一篇:网页的版式设计---版式的基本类型
· JavaScript 小技巧(第五集)
· 网站设计65条原则
· Dreamweaver MX进阶教程(十九)防止英文字符撑破表格
· Dreamweaver一句话技巧
· 网页背景设计技巧全攻略


关于本站 | 联系我们 | 业务合作 | 客户案例 | 诚聘英才 | 广告合作 | 收藏本站
海口动网先锋网络科技有限公司版权所有
Copyright © 2000 - 2006 Cndw.Com
中华人民共和国电信与信息服务业务经营许可证编号 琼 ICP 020077