青岛网站建设公司,青岛网站制作公司-奈薇建站网
建站咨询热线:0532-8878113113165158935 
知识普及 » 网页设计技巧系列之二浅谈布局

网页设计技巧系列之二浅谈布局

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

  众所周知,国外有一种叫黄金分割率的概念。下面我引用一段非常专业的解释:“黄金分割最早见于古希腊和古埃及。黄金分割又称黄金率、中外比,即把一根线段分为长短不等的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就正好在视觉中心点上了。而主要的信息文字同样也处在视觉中心的位置上。而一些不重要的文字都放在了角度去冷落他。

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

网页设计技巧系列之二浅谈布局相关标签:建网站制作网页网站制作网站开发
相关热点推荐
那些即将在网页设计中被
微信营销推广的特性-奈
企业和个人建立网站的好
网站建设财富秘籍:高手
企业建站网页设计规划
网络营销之电子邮件营销
网站软文推广的作用及写
如何让蜘蛛频繁爬行你的
SEO技巧,爬虫及网页
网站制作入门十则
网站建设之美观与营销需
提高百度权重的有效方法
企业网站推广技巧一二
网站设计制作的流程控制
网页编码和搜索引擎优化
用百度知道做网站推广9
网页设计灵感的起源地
网站策划的方法与方案?
如何建立一个网站?规划
网站建设知识——从三个
搜索引擎优化:软文营销
常用CSS缩写语法总结
6个外贸网站优化技巧
青岛网站建设之网页如何
网络营销,搜索引擎营销
交互设计(8)—深广度
网站的设计要注意的七大
网站建设中友情链接的作
如何有效进行网站的设计
博客推广秘笈之如何推广
HTML5响应式网站地
真正成功的关键IP是坚
谈用户体验,别落下商业
网站建设之企业的产品和
SEO 题目分析
行之有效的网络推广方式
怎样交换友情链接
SEO网页质量直接测度
三种链接方式的介绍及应
建设一个成功的网站必不
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

热点地区:青岛网站建设价格 青岛即墨网站制作公司 开发区信息港 山东在线门户
  • 备案号
  • 鲁ICP备13010283号
建站咨询热线0532-88781131 15166683288 13963906391
版权所有© BangJianZhan.Com & Nev.Cn 青岛网站建设/网站制作公司
青岛雨后网络科技有限公司 - 青岛市市北区福州北路90号,景泰尚都6层
已经为您服务了
162个月 10