您的位置: 首页 > 艺术设计 > 设计理论 > 网页设计技巧—布局
Netvibes注册用户流程 回到列表 网页设计技巧—文本排版
 网页设计技巧—布局

作者:小毅 时间: 2006-07-25 文档类型:原创 来自:蓝色理想

关于布局也许是大家最不放在眼里的地方,其地位如同文字的排版一样,随便可布,布即随便。但是看过我上篇《网页设计技巧》的朋友也许就会清楚,其实文字排版是一种不起眼但却非常重要的细节。做好了会让作品更为精细漂亮,做不好也许就成为作品失改的重要原因。其实布局也是一样,需要我们足够的重视起来。下面我要讲的不是网页布置成“左中右”、“左右”、“上中下”之类的问题。而是讲位置的重心与位置之间的对比关系。

众所周知,国外有一种叫黄金分割率的概念。下面我引用一段非常专业的解释:“黄金分割最早见于古希腊和古埃及。黄金分割又称黄金率、中外比,即把一根线段分为长短不等的a、b两段,使其中长线段的比(即a+b)等于短线段b对长线段a的比,列式即为a:(a+b)=b:a,其比值为0.6180339……这种比例在造型上比较悦目,因此,0.618又被称为黄金分割率。”大家也看清楚了什么叫黄金分割。我们中国也有一种类似于这样的概念叫九宫格。这个也许就有一些朋友不清楚了,这是一种用以临写碑帖的一种界格纸。基本形是一个长方形等分九格。在这个九宫格中中间部分就产生了四个交叉点,这四个交叉点就是视觉中心点。

图示:九宫格

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

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

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

小布局 也可以说是细节上的布局。我们可以把网页看成是由很多个小块组合而成的。通常要注意的就是标题与内容的关系以及这些块放置的位置。比如最核心的内容不要放在最顶、最后、或是最中间。而是顶部与中间的中部位置,有些人喜欢排位,并且会把最重要的放在最上面,其实不然啊,放在最上面的未必是最核心的位置。比如我们看一下各大门户网站的头条新闻的位置,是不是没有放在最顶部的?当然由于分辨率的问题目,这些头条可能位置也会有所变化。在800下头条是偏下的,而1024是居中一点,1600就偏上一点。但是从浏览器的大角度来看,这些头条也都是处于视觉中心点的。

图片 我们在处理图片的时候也会用到布局,比如我们的文字放在什么地方,标志放在什么地方这些都是布局的范畴。这里也要应用上述的概念,重要的要核心不要放在正中或是过于偏向角落。当然也会遇到重心的东西很大,基本上都占满了画面,下面让大家来看一张招贴:

大家看这图的重点是那个MP4,但是这个对象很大,不过没关系,把这个MP4的图做得有透视性,左右的重量就不一样了。这样向左去一点,那么重心就向左去了,再加上MP4偏上,这个MP4就正好在视觉中心点上了。而主要的信息文字同样也处在视觉中心的位置上。而一些不重要的文字都放在了角度去冷落他。

好了,关于布局就说这么多,这里总觉得这里还少些东西,细想可能是视觉平衡方面的问题。这里讲得很多了,视觉平衡方面的问题目就再想想过些日子再整理出来。

经典论坛讨论:
http://bbs.blueidea.com/viewthread.php?tid=2660151

出处:蓝色理想
责任编辑:moby

相关文章 更多相关链接
网页设计技巧—文本排版
CSS实现相同文档不同表现—40例
web标准布局实例教程
组合CLASS来完成网页布局风格
《网页设计与配色实例分析》
作者文章 更多作者文章
网页设计技巧—文本排版
web标准实现高效开发系列之三
《色彩解答》之一 色彩层次
《色彩解答》之三 色彩对比
《色彩解答》之二 色彩比例
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
国外创意名片设计欣赏
情感化界面
线下项目工作流程(归纳篇)
线下项目工作流程(分析篇)
简约而不简单-Practise平面设计
培养用户的使用习惯
优秀名片设计
专题头图的秘密武器
别让UED忽悠你(2):多少钱一斤
别让UED忽悠你(1):天生的矛盾
分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2