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

 网页中的平衡、对比、连贯和留白

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

网页设计中需要把握好很多原则和细节,今天我们来谈谈网页设计中的平衡、对比、连贯和留白。  中国站长资讯网

一、平衡

  如果你的页面是平衡的,当用户浏览这个页面的时候就会感觉它们是一个整体,看得时候目光的跳转也会很自然。同时,构成页面的元素仍然是彼此独立(注意不是孤立)的,你不需要用线用颜色将它们直接地串接起来,这是为什么呢?因为它们彼此之间是平衡的。这就好比跷跷板,即便你看不到连接两端的人的木板,你也能感觉到他们是一个整体,因为“平衡”!
中国站长资讯网

1、对称平衡
  对称是最常见、最自然的平衡手段,这种方式通常用来设计比较正式的页面,不过也还需要和下面介绍的多种方式结合起来使用。比如图 1所示的网站,如果你在页面正中间划一条垂直向下的直线,你会发现页面的两边的布局是基本对称。

2、非对称平衡

  非对称其实并不是真正的“不对称”,而是一种层次更高的“对称”,如果把握不好页面就会显得乱,因此使用起来要慎重,更不可用的过滥。比如这个网站http://www.graphic.com.cn(图 2)就打破了常见的对称。但是如果仔细看的话还是能够感到某种“对称”的影子。中国站长资讯网

3、辐射平衡
  页面中的元素以某一个点为中心展开就可以构成辐射平衡。比如图3就是典型的例子,页面的正中是一个大大的LOGO,外侧环绕着多个链接 。

4、实战平衡
  下面我们通过一个LOGO设计实例来看一看平衡的多种变化。

二、对比
  如果说平衡搭起了一个稳定的页面框架,那么对比就是这个框架中的动态点缀。这里说动态并不是说要真的让元素动起来,而是要有“变化”。可以变化的因素包括:大小、颜色、字体、重心、形状、纹理等等。 我们还是通过简单的例子来介绍一下对比的应用,图 9是我们设计的底版,字体一样、大小一样、颜色一样,单调枯燥。

三、连贯
   前面谈到了对比,对比离不开变化,然而如果对比太多,变化也会太多,页面就会显得零乱,因此我们现在来谈“连贯”。在一个成功的页面设计中,有很多要素是必须保持一致的,这些要素通常包括:

1、布局
  页面的上下、左右,页面与页面中间要保持布局一致。比如如果页面上方的表格居中对齐而页面下方的表格却左对齐,那么整个页面就会很难看。

2、字体
  字体的大小、颜色应当基本保持一致。

3、导航栏
  导航栏应当保持完全一样,通常应单单独为导航栏建立一个框架页,这样就可以保证更新导航栏的时候,所有网页都会被自动更新。

四、留白
  国画中“画鱼不画水”的妙处就是留白的妙处。留白可以让访问者有更大的想象空间,就好像就如一个没有过多摆设的房间一样。上上下下、里里外外都塞得满满当当就是很糟糕的设计。

留白的原则包括:中国站长资讯网

1、元素之间的留白不能太大 这是基本的原则,留白过多,叶面会变得零碎。

2、文本中间的间隔不能太大 文本应当紧凑,尤其汉字文本,如果字与字之间或者行与行之间空白太大页面就会非常难看。

    总的来说平衡、对比、连贯和留白设四条原则是在网页设计中必须始终牢记,但绝不是教条,应当结合自己的实际需要灵活的应用。中国站长资讯网

  
 
 收藏本文  打印本文  论坛讨论  关闭窗口
· 上一篇:网页的版式设计---版式的基本类型
· 下一篇:网页的排版与布局
· 好习惯造就靓网页
· Javascript实例教程(14)
· Javascript实例教程(21-6)
· 用javascript获得地址栏参数的两种方法
· 实现Web代理功能


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