1. 首页
  2. 网页设计
  3. 正文

网页设计之栅格系统

  栅格系统的形成

  栅格系统(Grid system)最早使用在17世纪末的法国印刷业,出版业。

  维基百科对其定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。

  网页栅格系统是有平面栅格系统中发展而来,以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。


  栅格系统的原理

  栅格系统可以按栅格数分为12列,16列,24列等,可以自由设计栅格宽度和栅格与栅格间宽度。如下图所示,记页面或区块宽度为W,A代表一个栅格单元的宽度,a代表一个栅格的宽度,i为栅格与栅格之间的距离,n为正整数,则有W=(a*n)+(n-1)*i,由于A=a+i,可得(A*n)-i=W。


  这个公式表述了网页的布局与网页背后栅格系统之间的关系。来观察经典的雅虎案例:


  Yahoo的网站页面宽度为W=950px,每个区块与区块的间隔为i=10px;如果应用上面的公式,可以推出A=40px,既Yahoo首页横向版式设计采用的栅格系统为:(40×n)- 10 = W。只要保证一个横向维度的各个区块的n值相加等于24,即可保证页面的宽度一定是950px,950px的宽度也恰好就是当n=24的时候,W的宽度值。


  在栅格系统中,设计师根据需要指定不同的版式或者划分区块改变A和i的值进行设计,这样,一个栅格系统的应用就从此开始了。


  经典960栅格

  设计师们偏爱用苹果系统做设计,苹果下浏览器的默认宽度为960px, 在 1024 x 768 的分辨率下,我们再打开Firefox,自然状态下,Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框,网页的实际大小为上图中的红色部分,高宽为 960 x 650.有趣的960就这样出现了。960只是个符号,并不是标准数。


  上面列举的都是大型门户网站,它们的首页宽度为950px/960px。除了微软的Live Search。根据上面的简单分析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都选择将页面宽度定为950px/960px。为什么要选择这个宽度呢?我们从数学着手:960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍:

  2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

  共26种(26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身),我们标记为:

  N(960) = N(2^6 * 3 * 5) = 26

  根据上面的算法,可以得到:

  N(360) = N(2^3 * 3^2 * 5) = 22

  N(480) = N(2^5 * 3 * 5) = 22

  N(720) = N(2^4 * 3^2 * 5) = 28

  N(750) = N(2 * 3 * 5^3) = 14

  N(800) = N(2^5 * 5^2) = 16

  N(960) = N(2^6 * 3 * 5) = 26

  N(1000) = N(2^3 * 5^3) = 14

  N(1024) = N(2^10) = 9

  N(1440) = N(2^6 * 3^2 * 5) = 34

  N(1920) = N(2^7 * 3 * 5) = 30

  N越大,可组合的宽度值就越多。对栅格系统来说,这意味着越灵活。

  目前绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度,可以看出960是非常合适的。这样,在目前主流显示器下,960就成为网页栅格系统中的最佳宽度了,也许不久的将来,将会流行1440。


  使用栅格系统的优势

  对于设计师来说,栅格系统更多的是一种布局思想,可以更有逻辑地进行设计工作。灵活地运用栅格系统,不仅可以让整个网站各个页面的布局保持一致,让网页的信息呈现更加美观易读,让设计稿有更好的结构,更可以通过匹配不同组合,做出很多优秀和独特的排版设计。

  使用网格系统,可以使网页设计给用户正式感和规范感,还具有一种结构分明的设计感,提升用户体验。网格系统不意味着循规蹈矩,一味按照网格线来进行布局。网格系统的意义在于更灵活的帮助设计师有序布局,而不是限制设计师的设计。

  对于前端开发人员来说,栅格系统的使用,给整个网站的页面结构定义了一个标准,大大提高了网页的规范性。在栅格系统下,页面中所有组件的尺寸都是有规律的,可重用的,这对于大型网站的开发和维护来说,能节约不少成本。

  随着响应式设计的流行,栅格系统开始被赋予新的意义,那就是,一种响应式设计的实现方式。响应式的要点是为同一个页面设计多种布局形态,分别适配不同屏幕尺寸的设备。


  可以看到,一个页面可以拆分成多个区块来理解,而正是这些区块共同构成了这个页面的布局。根据不同的屏幕尺寸情况,调整这些区块的排版,就可以实现响应式设计。而借助栅格系统,设计与前端开发人员可以很容易的设计和创建响应式的页面布局。

  栅格系统是一种格式化的设计工具,使用栅格系统是一种好的习惯,设计师可以更专注于内容呈递,更专注于强调重点。当然,规矩是用来打破的,当我们理解了布局的理念,掌握了栅格的手法之后,也无需拘泥于栅格的形式,可以对其“革命”,进行创新。

    延伸阅读

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.lnbdc.com/article/4219.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();