你的位置:创意公社- ideaer >> 百科 >> 网站设计 >> 详细内容 在线投稿

网页设计中排版与布局小基础

排行榜 打印 发给朋友 举报 发布者:ys7131
热度781票  浏览111次 【共0条评论】【我要评论 时间:2010年11月08日 07:49
创意公社- ideaerH2K qJ;x J B"F _$@

有些人始终认为,网页最主要是内容,不需要再搞些门面上的东西,还拿出MUD来比 喻。可是,红花还需要绿叶陪衬。想想,若MUD不只是单纯的文本,还有画面出来, 那么,它所吸引的何止现在的这些MUD迷呢? 那么,我所要说的到底是什么呢?初学者如果能够了解一些设计上的东西,那么, 自己的页面不会显得乱,自己看了也开心,别人看了也开心,何乐而不为呢?创意公社- ideaerx-rF6] M ] caa

创意公社- ideaerGw2R5JGd

  我们的主页,说到底,只是一个800*600的画面,那么,我们要怎么对它进行安排 才合理呢? 首先,也是最重要的一点,就是先停下创作,先想好一个主题?quot;设 计,是一种有目的的创造"。若在动手之前并不了解自己将要做什么及要怎么做, 而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话,那么,最终做出来的 东西最多局部看得觉得挺不错的,但全局就显得太复杂了。 页面上的构成,如果要让别人一眼望去觉得很BEAUTIFUL,这里面实际上是有很大 的学问的。

,um;J{4\ d8X1

n [\e0d6R5|u2zR1  我们先来说说构成,"构成:是将造型按视觉效应、视觉力学和精神力学等原则组成的,具备美好形态的造型"。 构成形式里,有空间构成(平面构成和立体构成) 和时间构成(静和动)。 我们的创作,就是要协调这里面的种种关系,顺应视觉 感受,才能够打动观看者的视觉,得到我们想要的效果。在这些形形式式里,都有 着如下的部件: 点:我们一般认为,点是指圆形的,但这是不正确的。只要在空间里有非常少量的 面积,无法形成一个视觉上感觉的图形,都是一个点。无论什么形状都可以。 线:点集合在一起就形成线。 面:一个平面。 体:一个物体。一般是指物体占据的空间,有三维形状。创意公社- ideaer8l,r VT2e&L

创意公社- ideaerJ3F2bD7I8s9nV

  那么,当点、线、面与体集结在一个页面上时,它们的关系要怎么协调呢?它们之间都有什么作用呢?创意公社- ideaer;J(Po'agQ q(`*X

*~5zA-aL4UR;L1  点有集中视线、紧缩空间、引起注意的功能。 两个点相距不远而且形状不等时,一般由小向大看。 近距离的点引起面的感觉。 灵活运用点,可使你的页面有一些本质上的变化。 当点占据不同的空间时,它所引起的感觉是不同的。创意公社- ideaer0vrt4B ?] X-X

创意公社- ideaerllO.lf+b:k ~B

  (1) 居中引起视觉集中注意 。

B7yFm#o4B }SP1

9UH1IoE j \F1  (2) 上引起下跌落感。

,q'qsRo0tfR1 创意公社- ideaer;g"n.uQ5I2X C3m

  (3) 在上左或上右引起不安定感。

&Z![ E%@V+M5ty2|1

Rla$S;?y?s{3E2F n1  (4) 下方中点,产生踏实感。

$K0T'c5E8z%gd%]%b1

#dR^6Yr LfT1  (5) 左下右下,增加了动感。创意公社- ideaerRW6W6GW&Yb

MSM'tyz `!Y d @1  为什么会这样呢?因为人的视觉,都是经过对生活的感觉都得来的。 在下方的东西,一般联想到大地。 在上方的东西,一般联想到浮云。线、面、体亦然。创意公社- ideaerZ1Htee'Oi

创意公社- ideaer6z9lo WN

  线,又分为直线和曲线。直线:给人以速度,明确而锐利的感觉,具男性感。曲线,则优美轻快,富于旋律。曲线的用法各异,需结合自己的需要。 而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔,具踏实感。垂直线则有强烈的上升及下落趋势,可增加动感。斜线,一般我没有怎么使用,因为它造成视觉的一种不安定。创意公社- ideaerJ U$k+B$P)o+W q

创意公社- ideaer^9]]8`X!w%P5G5v

  人们每看到一个东西,都试图用横直来分析,斜、歪是人们所不愿意见到的,但 适当运用部梢源锏揭恍┨厥庑Ч ?这个要靠个人的感觉。 面,指的是二度空间里的形。 面又分为几何形和任意形,我个人比较喜欢任意形,因为它往更具人情味。 几何形使人有一些机械感,但是,每一个图形里都会要用到几何形,请看它们各代表什么:创意公社- ideaer u9C4Q|l0m;H

创意公社- ideaer/XvE2R+ODG

  (1) 圆形:运动及和谐美创意公社- ideaer_\\)G,s|Tp

创意公社- ideaerT o;M"z!p2b^xX j

  (2) 矩形:单纯而明确,稳定创意公社- ideaer1i1@.SH?.n6qFb

F o3wnB7pc;T*k1  (3) 平行四边形:有向一方运动的感觉。创意公社- ideaeriZme {db;d

创意公社- ideaerz hUH'v/p7W4CB

  (4) 梯形:最稳定,令人联想到山。创意公社- ideaer(ki8Uw qyM

7G3rP~9J"q1  (5) 正方形:稳定的扩张。

3g9@Q2V u#^c }F+N1 创意公社- ideaer$l-GXo*M Z+\&F

  (6) 正三角形:平稳的扩张。创意公社- ideaer r5f#`WB

7Th J4\&@^1  (7) 倒三角形:不安定,动态及扩张、幻想。

8lDocGzs1

+SW(?3Miq(@9T1  我们在日常生活中所看到的东西,都是由于形与形、图与底的相互关 系。图形之间,图底之间,正由于对比产生差异而被我们所感知所接 受。 图与底的视差越大,图形越清晰,对视觉的冲击力越大。 那么,平面上 有那么多的东西,我怎么才能够确定它是否是最主要的呢?请看:易于 成为"视觉中心"的条件:

GJ&_e Ai xI"Q1 创意公社- ideaerZh[3X8['\&e$d

  (1) 居于画面中心。

1|tD6zc@ rmT1

(O,Q)D{N1  (2) 垂直或水平的比倾斜更易成为中心。创意公社- ideaer"Ha'AH'@^:M\&D R

创意公社- ideaer5a,]cUpWe4L8N

  (3) 被包围。创意公社- ideaer1`.U Tv f|

创意公社- ideaerlR cz m{(~#DgZ

  (4) 相对于其它图形较大的。

GP{/Zp e@Z/P1 创意公社- ideaer7d;?,_ l`za

  (5) 色感要素强烈。创意公社- ideaer:gi6AW!O lYO

创意公社- ideaerT&c.lnm"[!f `0^_

  (6) 熟悉的图案,如果这件东西我们很熟,则一定会以它为焦点。创意公社- ideaer}2A}9M"o.hJS;f

(L"Mxr R1C F~1  可以把自己认为最主要的东西做大一点,突出一点,色彩鲜艳一点,其它的东西小 而且色调不要那么鲜明,以免抢了主题的"风头"。 注意:图与底之间的关系是很重要的。 如果我们确定了背景,再确定主题,在做页面时不注意而将图与底的关系设置为 1:1,那么,我们也许发现,底与图的力场争夺非常激烈,即有时底被我们认为是图。它们之间的关系只是相对,而非绝对。一般来说,底要大于图,而图要鲜于底。创意公社- ideaer#k|-U*h3Oj(T

创意公社- ideaer#Ao0K(iy)]OVO

  一副图,我们怎样才认为它是美的呢?这涉及到形、声、色的有机结合,打动视知 觉,使观者产生美的共鸣。一般来说,有如下几点: (1) 稳定性:我们的视知觉总是试图找一个平衡点,若找不到则产生混乱。 (2) 对称性:相应的部位等量,易产于统一的秩序感,但比较单调,可采用增加 局部动势的方法,以取得鲜明、生动的效果。 (3) 非对称平衡:可以平衡为基础,调整尺寸形态结构。或者以形态各异的形, 经视觉判断,放置在确定的位置,以得到预想的平衡。这个和个人的审美有关系。

rBs1I"uOD1 创意公社- ideaer {ml`w+a;b*}(xT

事实上,通过上述的一些方法,我们主要是为了创造秩序,使相互的东西能够在 没有互相干扰的系统中起作用。 混乱与秩序之间的对照唤起了我们的视知觉,我们于是通过平衡、比例、节奏、 协调,在迷乱中建立秩序,形成我们自己的风格。 形成自己作品的独特气质。 而如果注意自己作品的律动性,即旋律性,可通过重要一个基调实现,对于整个 页面应该有画龙点晴之效。 但要清楚的认识到,并非所有的节奏都产生律动性,有时候,听到一些音乐时觉 得它是垃圾,原理是一样的。

.^%K@Q K0Sw1 创意公社- ideaer|!FJn?

  旋律要有情感因素,富于变化而又统一的节奏和总体的和谐。 流动的旋律,活泼、明快、自由、变化、生机勃勃。 也要注意到,反复、周而 复、单纯或渐变重复虽给人以视觉印象,但过于单调会使人疲劳并产生厌烦。必须 在反复中寻找动与静的完美结合,寻求单纯与复杂、细腻与奔放、定向与不定向之 间的对比,在构成方式上多探索,多借鉴,求新求变。 以下介绍这方面的方法:

u+k _q.Vq:v l1 创意公社- ideaer~5Ej@#Jpy(V

  (1) 同质要素的统一,这个比较容易,只要自己多摸索就行了。创意公社- ideaer/@ |*vTm;W

4z[Q}/I M'qO1  (2) 类似要素统一,大小类似,色明度类似就可以了。

\EJ?yb1 创意公社- ideaer7K5BEc/z?` }0] u D tE

  (3) 不一样的要素的统一,由于形成对比,因此一般会形成对比,造成零散、 不统一的感觉,要令它产生节奏,一般是在要形成强烈焦点时才使用。 总之,我们要记住这一点: 在相同中求变化,在不同中求统一,使大部分相同,使小部分相异,可取得统一 又富有变化的感觉。 但是,也要注意差异的大小问题。差异是对规律进行突破及形成对比,富于变 化。但是,差异过大,易失去总体协调,过小易被规律淹没,就注意把握尺度, 以不失整体观感的适度对比为准。创意公社- ideaer*FD2D qvl

'J/i j(?/a/k'V1  我们怎样才能够让别人觉得我们的图片很协调呢?方法如下:创意公社- ideaer| OpvP'\

*Zl D a H0sb3?f1{1  (1) 保留一个相近或近似的因素,自然的过渡创意公社- ideaer;pj@;{1Dh

创意公社- ideaerg+?7xS ]&|l MG

  (2) 相互渗透创意公社- ideaer$\L t,jq4E|

5X,IPz+apSX;E1  (3) 利用过渡形创意公社- ideaer*HPam~&y

5Y$?&bARu1  在对比方面,必须有周密的编排,具体如下:

r^^YT;a#X(g/B%V$T(xl1 创意公社- ideaer E$kv3T5g Y_&N

  (1) 方向对比 在基本有方向的前提下,大部分相同,小部分不同可形成对比

$W)vF.S-wp1

OD%^y:I1  (2) 位置对比 在页面的安排不要太对称,以避免平板单调。应在不对称中找到 均衡,由此得到疏密对比。

.J Ce-D!hV^5V1I1

$Y#LI%~2]1  (3) 虚实对比 事实上,虚与实是同等重要的,画黑则白出,造图则底成。应注 意双方平衡。创意公社- ideaerz@r/\5z

ve2fQ9B[5vzR8u1  (4) 隐显对比 图与底比较,明度差大者显示,明度差小者隐藏。显与隐相辅相 成,能造成丰富的层次感。

{ k-s7\LK#R1

Ta@o[U c1  在空间感方面,可以以点、线、面的排列,形成不同的空间感。 如以下方法:创意公社- ideaeramLs m;It

u3T"RI&I:CI)l!r/J1  (1) 重叠

,D}W,[[ E1 创意公社- ideaer+v ZZuh2~&V(I

  (2) 大小

^};^)F?E1

$E6t&Q&g*U)UF1  (3) 倾侧,旋转,深度

g3f0ZK?t4v:u'g T1 创意公社- ideaer2UST eTwY8P2D?z

  (4) 弯曲创意公社- ideaer7Z~#Z-L-V p.N/}M

创意公社- ideaerr7o!eq:lf;S'U`

  (5) 明度

GmF)C+k1

/Rc0[Qcj1  (6) 投影创意公社- ideaer7[ Li,H~y

创意公社- ideaer o.t w3S6xOUt

  (7) 透视创意公社- ideaerg&AdAfdcx _ \2y

顶:28 踩:35
对本文中的事件或人物打分:
当前平均分:0.27 (235次打分)
对本篇资讯内容的质量打分:
当前平均分:-0.43 (214次打分)
【已经有269人表态】
40票
感动
31票
路过
36票
高兴
28票
难过
35票
搞笑
34票
愤怒
23票
无聊
42票
同情
上一篇 下一篇
发表评论
换一张

网友评论仅供网友表达个人看法,并不表明本网同意其观点或证实其描述。

查看全部回复【已有0位网友发表了看法】