1、网页设计栅格化布局,2012.10.18,一、栅格化概念 二、栅格化的优点、缺点 三、栅格化原理与运用（公式、方法）,一、网页设计栅格化系统 栅格系统英文为“grid systems”，开始是从平面栅格系统中发展而来，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布 。 通俗点讲是一种平面设计的方法与风格，运用固定的格子设计版面布局，其风格工整简洁。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。,二、栅格系统的优势,能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站
2、的开发和维护来说，能节约不少成本。 基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。 栅格系统更多的是一种布局思想。对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。,三、栅格系统的设计原理及应用,在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下： W =（an）+（n-1）i 由于a+i=A， 可得：(An) i = W,三、栅格系统的设计原理及应用,Yahoo的网站页面宽度为W=950px每个区块与区块的间隔为i=10px 如果应
3、用上面的公式，可以推出A=40px，既Yahoo首页横向版式设计采用的栅格系统为： （40n）- 10 = W,Yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时候，W的宽度值。,三、栅格系统的设计原理及应用,三、栅格系统的设计原理及应用,页面结构较复杂,门户型网站 首页宽度为950px/960px,Yahoo! 24 x 40,淘宝商城 大的两栏布局 24 x 40 主体部分使用740的栅格划分,网易 16 x 6
4、0,三、栅格系统的设计原理及应用,三、栅格系统的设计原理及应用,黄金分割 黄金分割可以归结为数学问题：对于长度为1的线段，将其分成两部分 x 和 1 x, 使得： x / 1 = (1 - x) / x 化为简单的二次方程： x2 + x - 1 = 0 正数解为： x = (sqrt(5) - 1) / 2 = 0.618 这就是黄金分割。 这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域，在管理、工程设计等方面也有着不可忽视的作用。 （这是个自然界的魔数，类似的还有真空光速、普朗克常数、精细结构等等）在平面设计领域，黄金分割点被广泛采用。比如下面这种图：,三、栅格系统的设计原理及应
5、用,960栅格，实际宽度是950. 对于 24 x 40 的情景， 最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15,宽度方向上的栅格但实际使用时，因为窄栏经常用来做导航或放辅助信息，并不需要350px这么宽。,三、栅格系统的设计原理及应用,高度方向上的栅格高度值560 可以让高宽比接近黄金分割。 针对560, 我们采用 14 x 40 栅格,很多大型网站并没有运用栅格系统，那它的用处在哪? 我认为栅格系统应是一种能适应自身业务的规范，能在实际工作中帮助我们提高公司产品的质量和效率。而在我们的活动和专题需求中，如果有合理的栅格，我相信能节约一部分花在思考原型的时间，也能让专题布局更加规范。 结构和表现、内容的分离能更易于后期的扩展和维护，尤其在专题中经常出现结构改动小，视觉表现变换大的情况。,Thank you!,
