申请网站
忘记密码
密 码：
登录名：
建站咨询热线：
0532-88781131
、
18562723728
知识普及 » 网页设计技巧系列之二浅谈布局
网页设计技巧系列之二浅谈布局
奈薇网页设计
于
2019-09-10 19:21
发表
阅读次数
2211
次
关于布局也许是大家最不放在眼里的地方，其地位如同文字的排版一样，随便可布，布即随便。但是看过我上篇《
网页设计
技巧》的朋友也许就会清楚，其实文字排版是一种不起眼但却非常重要的细节。做好了会让作品更为精细漂亮，做不好也许就成为作品失改的重要原因。其实布局也是一样，需要我们足够的重视起来。下面我要讲的不是网页布置成“左中右”、“左右”、“上中下”之类的问题。而是讲位置的重心与位置之间的对比关系。
众所周知，国外有一种叫黄金分割率的概念。下面我引用一段非常专业的解释：“黄金分割最早见于古希腊和古埃及。黄金分割又称黄金率、中外比，即把一根线段分为长短不等的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就正好在视觉中心点上了。而主要的信息文字同样也处在视觉中心的位置上。而一些不重要的文字都放在了角度去冷落他。
好了，关于布局就说这么多，这里总觉得这里还少些东西，细想可能是视觉平衡方面的问题。这里讲得很多了，视觉平衡方面的问题目就再想想过些日子再整理出来。
网页设计技巧系列之二浅谈布局相关标签：
网站制作公司
，
网站制作
，
网站开发
，
网络公司
相关热点推荐
青岛网站建设哪家公司建
网页设计中排版与布局的
网站优化排名为什么这么
站长们应当要知道的网站
网站优化之整站优化的过
网站推广做到有效，坚持
重磅！功能型网站建设的
网站建设中的交互设计模
网站优化目标及意义
谈网络广告发展的趋势
创造设计中的优雅与节奏
如果你被上个网络公司伤
网页顶尖设计师的思考与
网站建设：建网站的一般
网站的视觉设计
25个判断垃圾站的标准
中小企业网站建设技巧总
怎样制作一个专业的网站
企业建网站的必要性
12个来自Codrop
软件界面设计要素——视
青岛网站设计简约化有什
让网站外链在你睡着的时
网页设计过程中我们要关
优化用户体验，让网站呈
以“产品”思维搭建网站
小心交换友情链接中的陷
网页设计的色彩思考
网页中的图象格式
网站论坛管理经验
网站建设知识——从三个
网站设计中的简洁与简单
2015年网页设计十大
发布的高权重文章被转载
网站建设过程中怎样做好
网站建设：网站建设中应
设计网页页面内容要新颖
网站怎么做到快照收录的
网页设计的审美需求
青岛海信宽带多媒体—L
奈薇建站网青岛网站建设公司/青岛网站制作公司，专业提供"气质"型网站建设及精美网站制作服务，同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展
热点地区：
青岛网站建设价格
青岛即墨网站制作公司
开发区信息港
山东在线门户