阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
网页设计中排版与布局基础
有些人始终认为，网页最主要是内容，不需要再搞些门面上的东西，还拿出MUD来比 喻。可是，红花还需要绿叶陪衬。想想，若MUD不只是单纯的文本，还有画面出来， 那么，它所吸引的何止现在的这些MUD迷呢？ 那么，我所要说的到底是什么呢？初学者如果能够了解一些设计上的东西，那么， 自己的页面不会显得乱，自己看了也开心，别人看了也开心，何乐而不为呢？ ^gm>!-Gx
S8*> kM
'
我们的主页，说到底，只是一个800*600的画面，那么，我们要怎么对它进行安排 才合理呢？ 首先，也是最重要的一点，就是先停下创作，先想好一个主题?quot;设 计，是一种有目的的创造"。若在动手之前并不了解自己将要做什么及要怎么做， 而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话，那么，最终做出来的 东西最多局部看得觉得挺不错的，但全局就显得太复杂了。 页面上的构成，如果要让别人一眼望去觉得很BEAUTIFUL，这里面实际上是有很大的学问的。 .YiaXP
我们先来说说构成，"构成：是将造型按视觉效应、视觉力学和精神力学等原则组成的，具备美好形态的造型"。 构成形式里，有空间构成（平面构成和立体构成） 和时间构成（静和动）。 我们的创作，就是要协调这里面的种种关系，顺应视觉 感受，才能够打动观看者的视觉，得到我们想要的效果。在这些形形式式里，都有 着如下的部件： 点：我们一般认为，点是指圆形的，但这是不正确的。只要在空间里有非常少量的 面积，无法形成一个视觉上感觉的图形，都是一个点。无论什么形状都可以。 线：点集合在一起就形成线。 面：一个平面。 体：一个物体。一般是指物体占据的空间，有三维形状。 jM\ %$_/
l:z };
那么，当点、线、面与体集结在一个页面上时，它们的关系要怎么协调呢？它们之间都有什么作用呢？ !w=,p.?V=
;Id"n7W
点有集中视线、紧缩空间、引起注意的功能。 两个点相距不远而且形状不等时，一般由小向大看。 近距离的点引起面的感觉。 灵活运用点，可使你的页面有一些本质上的变化。 当点占据不同的空间时，它所引起的感觉是不同的。 v$JLD t_
wi BuEaUkW
（1） 居中引起视觉集中注意 。 j]4,6` b\
（2） 上引起下跌落感。 OequU'j
（3） 在上左或上右引起不安定感。 \d5}5J]a&n
（4） 下方中点，产生踏实感。
JilKZQmk
（5） 左下右下，增加了动感。 hG~ Uz
5C65v:Q`N
为什么会这样呢？因为人的视觉，都是经过对生活的感觉都得来的。 在下方的东西，一般联想到大地。 在上方的东西，一般联想到浮云。线、面、体亦然。 4%> +Wh[
lux9o$
%
线，又分为直线和曲线。直线：给人以速度，明确而锐利的感觉，具男性感。曲线，则优美轻快，富于旋律。曲线的用法各异，需结合自己的需要。 而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔，具踏实感。垂直线则有强烈的上升及下落趋势，可增加动感。斜线，一般我没有怎么使用，因为它造成视觉的一种不安定。
T "B8;|
|} 9GHjG
)Kr(Y.w
人们每看到一个东西，都试图用横直来分析，斜、歪是人们所不愿意见到的，但 适当运用这个要靠个人的感觉。 面，指的是二度空间里的形。 面又分为几何形和任意形，我个人比较喜欢任意形，因为它往更具人情味。 几何形使人有一些机械感，但是，每一个图形里都会要用到几何形，请看它们各代表什么： U#$:\fT
|/t K-c6J
（1） 圆形：运动及和谐美 Lm.Ik}Gli
（2） 矩形：单纯而明确，稳定 Up
u%.[7
（3） 平行四边形：有向一方运动的感觉。 wb@]>MJ}[s
（4） 梯形：最稳定，令人联想到山。 'oT|cmlc
（5） 正方形：稳定的扩张。 r@;$V_I
（6） 正三角形：平稳的扩张。 oX2r?.j#M
（7） 倒三角形：不安定，动态及扩张、幻想。 &9k"9
n/Or
~@pHD
我们在日常生活中所看到的东西，都是由于形与形、图与底的相互关 系。图形之间，图底之间，正由于对比产生差异而被我们所感知所接 受。 图与底的视差越大，图形越清晰，对视觉的冲击力越大。 那么，平面上 有那么多的东西，我怎么才能够确定它是否是最主要的呢？请看：易于 成为"视觉中心"的条件： ;Xz(B4 N~o
zab w!@]
（1） 居于画面中心。 *pY/5? g
（2） 垂直或水平的比倾斜更易成为中心。 &C\=!r0j^
（3） 被包围。 EwC5[bRjUp
（4） 相对于其它图形较大的。 9j9Y Q2
（5） 色感要素强烈。 "Fo
（6） 熟悉的图案，如果这件东西我们很熟，则一定会以它为焦点。 ^"PfDTyA
c,+iU R<
可以把自己认为最主要的东西做大一点，突出一点，色彩鲜艳一点，其它的东西小 而且色调不要那么鲜明，以免抢了主题的"风头"。 注意：图与底之间的关系是很重要的。 如果我们确定了背景，再确定主题，在做页面时不注意而将图与底的关系设置为 1：1，那么，我们也许发现，底与图的力场争夺非常激烈，即有时底被我们认为是图。它们之间的关系只是相对，而非绝对。一般来说，底要大于图，而图要鲜于底。 }3LBbG0Bw
?=TL2"L
一副图，我们怎样才认为它是美的呢？这涉及到形、声、色的有机结合，打动视知 觉，使观者产生美的共鸣。一般来说，有如下几点： （1） 稳定性：我们的视知觉总是试图找一个平衡点，若找不到则产生混乱。 （2） 对称性：相应的部位等量，易产于统一的秩序感，但比较单调，可采用增加 局部动势的方法，以取得鲜明、生动的效果。 （3） 非对称平衡：可以平衡为基础，调整尺寸形态结构。或者以形态各异的形， 经视觉判断，放置在确定的位置，以得到预想的平衡。这个和个人的审美有关系。 Zjw!In|vC
tvG g@Xs\
事实上，通过上述的一些方法，我们主要是为了创造秩序，使相互的东西能够在 没有互相干扰的系统中起作用。 混乱与秩序之间的对照唤起了我们的视知觉，我们于是通过平衡、比例、节奏、 协调，在迷乱中建立秩序，形成我们自己的风格。 形成自己作品的独特气质。 而如果注意自己作品的律动性，即旋律性，可通过重要一个基调实现，对于整个 页面应该有画龙点晴之效。 但要清楚的认识到，并非所有的节奏都产生律动性，有时候，听到一些音乐时觉 得它是垃圾，原理是一样的。 "h^A]t;qe
= E##},N"
旋律要有情感因素，富于变化而又统一的节奏和总体的和谐。 流动的旋律，活泼、明快、自由、变化、生机勃勃。 也要注意到，反复、周而 复、单纯或渐变重复虽给人以视觉印象，但过于单调会使人疲劳并产生厌烦。必须 在反复中寻找动与静的完美结合，寻求单纯与复杂、细腻与奔放、定向与不定向之 间的对比，在构成方式上多探索，多借鉴，求新求变。 以下介绍这方面的方法： 9;}L{yve
# i'C
（1） 同质要素的统一，这个比较容易，只要自己多摸索就行了。 b\<lNE!L
（2） 类似要素统一，大小类似，色明度类似就可以了。 \HBVNBY
（3） 不一样的要素的统一，由于形成对比，因此一般会形成对比，造成零散、 不统一的感觉，要令它产生节奏，一般是在要形成强烈焦点时才使用。 总之，我们要记住这一点： 在相同中求变化，在不同中求统一，使大部分相同，使小部分相异，可取得统一 又富有变化的感觉。 但是，也要注意差异的大小问题。差异是对规律进行突破及形成对比，富于变 化。但是，差异过大，易失去总体协调，过小易被规律淹没，就注意把握尺度， 以不失整体观感的适度对比为准。 [i2A
{(x
ahK?]:&QO
我们怎样才能够让别人觉得我们的图片很协调呢？方法如下： WsG"x>1n
g6x/f<2x
（1） 保留一个相近或近似的因素，自然的过渡 !Qj)tS#Az
（2） 相互渗透
hg<"Yg=
（3） 利用过渡形 }3
fL V
[u!p-
在对比方面，必须有周密的编排，具体如下： \}]=?}(
=%:n0S0C"
（1） 方向对比 在基本有方向的前提下，大部分相同，小部分不同可形成对比 &etL&s v
（2） 位置对比 在页面的安排不要太对称，以避免平板单调。应在不对称中找到 均衡，由此得到疏密对比。 j 3sz*:
（3） 虚实对比 事实上，虚与实是同等重要的，画黑则白出，造图则底成。应注 意双方平衡。 =H .<"7
（4） 隐显对比 图与底比较，明度差大者显示，明度差小者隐藏。显与隐相辅相 成，能造成丰富的层次感。 Qd&d\w/
i{1)=_$Vt`
在空间感方面，可以以点、线、面的排列，形成不同的空间感。 如以下方法： |,M#8NOp:
ue^?/{ OuT
（1） 重叠 ( Fjs
N5
（2） 大小 #Of<1
（3） 倾侧，旋转，深度 ZYl-p]\*y
（4） 弯曲 9}'l=b:Jms
（5） 明度 >h/)r6
（6） 投影 P@! Q1pr
（7） 透视 U:etcnb4w>
|
|
|
|
|
|
[楼 主]
|
Posted: 2006-04-06 08:37 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 网页设计中排版与布局基础
