阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
网页中的平衡、对比、连贯和留白
网页中的平衡、对比、连贯和留白 H @3$1h&YS
)a 4E&D
网页设计中需要把握好很多原则和细节，今天我们来谈谈网页设计中的平衡、对比、连贯和留白。 }0k"Sw X
NTpz)R
一、平衡 w\0Oz?N
K1m!S9d`x
如果你的页面是平衡的，当用户浏览这个页面的时候就会感觉它们是一个整体，看得时候目光的跳转也会很自然。同时，构成页面的元素仍然是彼此独立(注意不是孤立)的，你不需要用线用颜色将它们直接地串接起来，这是为什么呢?因为它们彼此之间是平衡的。这就好比跷跷板，即便你看不到连接两端的人的木板，你也能感觉到他们是一个整体，因为“平衡”! "k>{b:R|
9*G L@_c
1、对称平衡 c]cO[T_gGa
S>/I ?
(J
对称是最常见、最自然的平衡手段，这种方式通常用来设计比较正式的页面，不过也还需要和下面介绍的多种方式结合起来使用。比如图 1所示的网站，如果你在页面正中间划一条垂直向下的直线，你会发现页面的两边的布局是基本对称。 'W<a54T?z
@O @|M '
2、非对称平衡 j`LT`p"9S
L!G9O]WB
非对称其实并不是真正的“不对称”，而是一种层次更高的“对称”，如果把握不好页面就会显得乱，因此使用起来要慎重，更不可用的过滥。比如这个网站http://www.graphic.com.cn(图 2)就打破了常见的对称。但是如果仔细看的话还是能够感到某种“对称”的影子。 _umO)]Si
T }8r;<P6
3、辐射平衡 N# 2nH1C
rRA_'t;uK
页面中的元素以某一个点为中心展开就可以构成辐射平衡。比如图3就是典型的例子，页面的正中是一个大大的LOGO，外侧环绕着多个链接 。 D6pEQdX`
z- {"pI
4、实战平衡 d~Z:$&r
]R2Z-2
下面我们通过一个LOGO设计实例来看一看平衡的多种变化。 Is,*qrl :
\fQgiX
二、对比 &H p \("
J^ <j=a|D
如果说平衡搭起了一个稳定的页面框架，那么对比就是这个框架中的动态点缀。这里说动态并不是说要真的让元素动起来，而是要有“变化”。可以变化的因素包括:大小、颜色、字体、重心、形状、纹理等等。 我们还是通过简单的例子来介绍一下对比的应用，图 9是我们设计的底版，字体一样、大小一样、颜色一样，单调枯燥。 %]P @G^Bv
LcQ\?]w`]
三、连贯 Y
GcY2p<
8Vg`;_-
前面谈到了对比，对比离不开变化，然而如果对比太多，变化也会太多，页面就会显得零乱，因此我们现在来谈“连贯”。在一个成功的页面设计中，有很多要素是必须保持一致的，这些要素通常包括: >P]I&S-.
.q;RNCUt
1、布局 &55uT;7] a
og h2kht
页面的上下、左右，页面与页面中间要保持布局一致。比如如果页面上方的表格居中对齐而页面下方的表格却左对齐，那么整个页面就会很难看。 jr MGc=KL
0I AaPz/e
2、字体 y&O_Jyg <
C*6bR? I9
字体的大小、颜色应当基本保持一致。 %y^ Kw
qo&SJDG
3、导航栏 4j=@}!TBt
|H|eH~.yg&
导航栏应当保持完全一样，通常应单单独为导航栏建立一个框架页，这样就可以保证更新导航栏的时候，所有网页都会被自动更新。 a!6OE"?QQ
|GLn
9vw7S
四、留白 HpgN$$\@
R/KWl^oNj
国画中“画鱼不画水”的妙处就是留白的妙处。留白可以让访问者有更大的想象空间，就好像就如一个没有过多摆设的房间一样。上上下下、里里外外都塞得满满当当就是很糟糕的设计。 `S!uj <-
6`PGV+3j
留白的原则包括: Jut'x
A2Dr
tGy%n[ \
1、元素之间的留白不能太大 这是基本的原则，留白过多，叶面会变得零碎。 \=: g$_ l
$EHn ;~w T
2、文本中间的间隔不能太大 文本应当紧凑，尤其汉字文本，如果字与字之间或者行与行之间空白太大页面就会非常难看。 J ,2v~Dq
XzRWY\x
总的来说平衡、对比、连贯和留白设四条原则是在网页设计中必须始终牢记，但绝不是教条，应当结合自己的实际需要灵活的应用。
|
|
|
|
[楼 主]
|
Posted: 2006-04-05 08:55 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 网页中的平衡、对比、连贯和留白
