做有价值的网站,助力企业发展!

专注于企业网站建设、营销型网站建设、Web/微网站建设、企业营销推广

百度地图|网站地图|RSS地图

服务热线:

133-8386-7325

当前位置:郑州伟之琦计算机科技 > 新闻中心 >> 建站相关 >>

系统分析网页设计中的排版布局技巧

  网页设计排版布局往往是很难的,因为其直接影响网页设计的美观程度,但是页面内容的多少又影响着布局的设计,大多数网站页面结构都会包括网页标题,网站LOGO,导航栏,功能列表区,主内容区和状态栏等。在进行网页布局设计时不要把所有内容都放在页面里,需要把网页内容进行合理的排版布局,才能给浏览者赏心悦目的感觉,增强网站的吸引力。在设计布局的时候需要注意把文字,图片在网页空间上均匀分布,不同形状和色彩的网页元素要相互对比,以形成鲜明的视觉效果。
  一、网页布局的构成
  构成是将造型按视觉效应,视觉力学和精神力学等原则组成的具备美好形态的造型。构成形式包含:空间构成(平面构成和立体构成)和时间构成(静和动),在网页设计中要协调这里面的种种关系,顺应视觉感受,才能打动用户的视觉,得到想要的效果。下面具体讲解下这这些形式里包含的部件:
  1、点:一般认为点是指圆形的,但这是不正确的,只要在空间里有非常少量的面积,无法形成一个视觉上感觉的圆形,都是一个点,无论什么形状都可以。
  2、线:点集合在一起就形成线。
  面:一个平面。
  3、体:一个物体。一般指物体占据的空间,有三维形状。
  当点,线,面与体集结在一个页面时,它们的关系要怎么协调呢?它们之间都有什么作用呢?
  1、点有集中视线,紧缩空间,引起注意的功能。两个点相距不远而且形状不等时,一般由小向大看,近距离的点引起面的感觉;灵活运用点,可使页面有本质上的变化,当点占据不同的空间时,它所引起的感觉是不同的:居中引起视觉集中注意;上引起下跌落感;上左或上右引起不安定感;下方中点产生踏实感;左下右下,增加了动感。
  2、线,又分为直线和曲线。直线给人以速度,明确而锐利的感觉,具男性感;曲线则优美轻快,富于旋律,曲线的用法各异,需结合需要;而直线又分为斜线,水平线及垂直线,水平线代表平稳,安定,广阔,具踏实感;垂直线则有强烈的上升及下落趋势,可增加动感;斜线,造成视觉的不安定感。
  3、面,指的是二度空间里的形。面又分为几何形和任意形:任意形具人情味;几何形使人有些机械感;但是,每个图形都会用到几何形,请看它们各代表什么:
  (1)圆形:运动及和谐美。
  (2)矩形:单纯而明确,稳定。
  (3)平行四边形:有向一方运动的感觉。
  (4)梯形:最稳定,令人联想到山。
  (5)正方形:稳定的扩张。
  (6)正三角形:平稳的扩张。
  (7)倒三角形:不安定,动态及扩张,幻想。
  在日常生活中所看到的东西,都是由于形与形,图与底的相互关系,图形之间,图底之间,由于对比产生差异而被我们感知和接受。与底的视差越大,图形越清晰,对视觉的冲击力越大,那么,平面上有那么多的东西,怎么才能够确定它是否是最主要的呢?居于画面中心;垂直或水平的比倾斜更易成为中心;被包围;相对于其它图形较大的;色感要素强烈。可以把最主要的东西做大点,突出点,色彩鲜艳点,其它的可以小点,色调不要那么鲜明,以免抢了主题的“风头”。注意:图与底之间的关系是很重要的,如果确定了背景,再确定主题,在做页面时不注意而将图与底的关系设置为1:1,会发现底与图的争夺非常激烈,即有时底被我们认为是图,所以,它们之间的关系只是相对,而非绝对,一般来说,底要大于图,而图要鲜于底。
  二、网页布局的旋律性
  事实上,通过上述方法主要是创造了秩序,使相互的东西能够在没有互相干扰的系统中起作用,混乱与秩序之间的对照唤起了我们的视觉,然后通过平衡,比例,节奏,协调,在迷乱中建立秩序,形成设计的风格和独特的气质,如果能够注意设计的律动性,即旋律性,可通过重要基调实现,对于整个页面应该有画龙点晴作用,但也需要清楚认识不是所有节奏都能产生律动性。
  旋律要有情感因素,富于变化而又统一节奏和总体的和谐。流动的旋律,活泼,明快,自由,变化,生机勃勃,但也要注意:反复,周而复,单纯或渐变重复虽然给人视觉印象,但过于单调会使人疲劳并产生厌烦,必须在反复中寻找动与静的完美结合,寻求单纯与复杂,细腻与奔放,定向与不定向之间的对比,在构成方式上多探索,多借鉴,求新求变。
  三、几种常见的布局结构
  常见的布局结构有“同”,“厂”,“国”,“匡”,“三”,“川”等字型布局。
  1、“同”字型布局:所谓“同”字型结构,就是整个页面布局类似“同”字,页面顶部是主导航栏,下面左右两侧是二级导航条,登录区,搜索区等,中间是主内容区。
  2、“厂”字型布局:整个页面布局类似“厂”字,页面顶部和左部都可以是主导航栏,右下面是主内容区。
  3、“国”字型布局:它是在“同”字形布局上演化而来的,它在保留“同”字形的同时,在页面的下方增加横条状的菜单或广告。
  4、“匡”字型布局:这种布局结构去掉了“国”字形布局的右边的边框部分,给主内容区释放了更多空间,内容虽看起来比较多,但布局整齐又不过于拥挤,适合下载类和贺卡类网站使用。
  5、“三”字型布局:壹般应用在简洁明快的艺术性网页布局,这种布局采用简单的图片和线条代替拥挤的文字,给浏览者以强烈的视觉冲击。
  6、“川”字型布局:整个页面在垂直方向分为三列,网站的内容按栏目分布在这三列中,最大限度地突出主页的索引功能,适用在栏目较多的网站里。
  最后,在实际设计中不要局限于以上几种格式,有时候稍作适当的变化会收到意想不到的效果,另外,平时在浏览网页时要多留心别人的布局方式,遇到好的布局就可以保存下来作为参考, 正所谓“勤能补拙是良训,一分耕耘一分才。”

原创声明:本站文章未经许可请勿擅自转载,如需转载请注明出处<郑州网络公司>

案例展示