网页栅格化设计学习

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