下载首页 | 资讯中心 | 下载分类 | 最近更新 | 排 行 榜 | 国产软件 | 国外软件 | 汉化补丁 |
文章搜索: 分类 关键字 收藏本站设为首页
您的位置:首页网页设计网页特效 → 网页布局的位置重心与位置间的对比关系
网页布局的位置重心与位置间的对比关系
日期:2007-5-20 3:28:37 人气:39     [ ]
上一页 [1] 下一页

网页的布局也许是大家最不放在眼里的地方,其实布局地位如同文字的排版一样,随便可布,布即随便。但是看过我上篇《网页设计技巧系列 之 文本排版》的朋友也许就会清楚,文字排版是一种不起眼但却非常重要的细节。做好了会让作品更为精细漂亮,做不好也许就成为作品失败的重要原因。

布局也是一样,需要我们足够的重视。下面我要讲的不是网页布置成“左中右”、“左右”、“上中下”之类的问题,而是位置的重心与位置之间的对比关系。

黄金分割率的概念大家都知道。下面我引用一段非常专业的解释:“黄金分割最早见于古希腊和古埃及。黄金分割又称黄金率、中外比,即把一根线段分为长短不等的a、b两段,使其中长线段的比(即a+b)等于短线段b对长线段a的比,列式即为a:(a+b)=b:a,其比值为0.6180339……这种比例在造型上比较悦目,因此,0.618又被称为黄金分割率。”大家也看清楚了什么叫黄金分割。

我们中国也有一种类似于这样的概念叫九宫格。这个也许就有一些朋友不清楚了,这是一种用以临写碑帖的一种界格纸。基本形是一个长方形等分九格。在这个九宫格中中间部分就产生了四个交叉点,这四个交叉点就是视觉中心点。

图示:九宫格

我们为什么要讲这两个概念呢?是因为这两个概念是设计的决窍之所在。我们很多时间喜欢把重要的东西放在正中心,表示重视想吸引目光注意。但是我要告诉大家。正中心属于盲点区。也就是说按人的视觉习惯来讲正中心是常常被忽视的。并且放在正中心也不会引起视觉刺激。用句玩笑话来侃一下:两眼中间是看不清楚的。不信拿你的手指指着鼻尖看你的手。那什么地方是视觉中心点呢,这就要用到上面的概念了。不过什么a:(a+b)=b:a都太麻烦了谁会那么细致的去算呢。这里用中国的九宫格原理就清楚得多了。四个视觉中心点很显然大家也清楚是什么位置了。

那么在实际应用中我们要怎么用呢。这点很重要,实战意义要比空谈概念重要得多。下面我们就来说一下实战中的应用,这里虽说是“网页设计技巧”,同样可以应用在平面设计与摄影或是其它的设计中,但是必竟是讲网页设计,所以主要还是举网页例。我们先从大布局来谈,然后再讲小布局,最后讲设计图片的布局。

大布局

基本上网页的布局分为,上中下、左中右、左右、上下、与上下左右之混合几类。同时我们还要思考的是分辨率与网页大小的关系。现在大部分的机器都是1024以上的分辨率了,那我们的宽度是不是一定也要顺应变得宽一点呢。个人观点是大可不必。因为网页本身也会与浏览器产生视觉对比。如果塞得太满势必也不是很好看。如果留下空隙网面与留出来的空白也可形成一定的对比,其比例也较接近黄金分割率。所以我觉得还是不要塞满浏览器为好,给网页一个可以呼吸的空间。那网页自身的上下左右布局呢?同样的,如只是上下或是左右结构我们不能把上下或是左右平分,而是最好采用黄金分割比来进行划分。如果是上中下或是左中右呢。我们同样不能平分,我们我们要注意三者之间的关系,比如上中下结构,我们很清楚中间是主要内容需要大一点的空间,那么中空间的部分会尽量的点有大比例,一般来讲我们会让中间占大约百分之六十。而上面占百分之三十,下面占百分之十。那也就是说,下面是上面的三分之一,上面是中间的三分一。这样的分割就会比平面看起来要舒服很多。但是左中右的结构就不能这么分了。因为百分之十的宽度会很难放得下什么内容。一般左中右结构会有另一种分法:左占百分之四十,中右各占百分之三十。或是左右占百份之三十,中间占百分之四十。也可以进行532、622、442、的分配。也就是说大布局上要尽量避免平分的局面。

共2页: 上一页 1 [2] 下一页

出处:本站原创 作者:佚名
 阅读排行
01.精美qq空间横幅代码
02.最酷qq个性女生网名
03.最新又有免费QQ秀啦《..
04.巧用透明FlaSh扮靓你的..
05.花之神匠代码(最新代码..
06.最新QQ空间免费导航
07.最新免费个人形象设置..
08.最新qq空间flash代码m..
09.CSS技术结合图像实现动..
10.Photoshop光影魔术师:..
11.QQ音速种子狂刷
12.最新QQ空间透明代码
13.PS实例教程:教你制作结..
14.Photoshop光影魔术师:..
15.制作背景图__教程
16.用Photoshop制作漂亮的..
17.如何获得QQ音速种子
18.≤QQ空间代码≥在日志..
19.网页浮动广告的制作代..
20.用Photoshop制作大红灯..
21.常用CSS
22.Photoshop给靓丽美女打..
 推荐文章
·Photoshop 表现技法之..
·快速将你的相片矢量化..
·PHOTOSHOP制作炽热的太..
·用Photoshop制作美丽的..
·流行杀手的娃娃工厂__..
·打造8号台球__教程
·PHOTOSHOP制作待机MM图..
·用Photoshop帮MM做纹身..
·PHOTOSHOP美眉着色绝招..
·PHOTOSHOP花露的制作_..
·PHOTOSHOP渐变工具的巧..
·PHOTOSHOP手绘奥兰多-..
·高难度抠图两种方法__..
·Photoshop高尔夫球的制..
·Photoshop打造精美玉佩..
Eqxia_COM下载站 版权所有 Copyright© 2001-2005 Www.eqxia.COM, All Rights Reserved.