网页栅格化设计学习.pptVIP

网页设计栅格化布局 2012.10.18 一、栅格化概念 二、栅格化的优点、缺点 三、栅格化原理与运用（公式、方法） 一、网页设计栅格化系统 栅格系统英文为“grid systems”，开始是从平面栅格系统中发展而来，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布?。 通俗点讲是一种平面设计的方法与风格，运用固定的格子设计版面布局，其风格工整简洁。 对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。 ??????????????? 二、栅格系统的优势 能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。 基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。 栅格系统更多的是一种布局思想。对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。 三、栅格系统的设计原理及应用 在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：W =（a×n）+（n-1）i由于a+i=A，可得：(A×n) – i = W 三、栅格系统的设计原理及应用 Yahoo的网站页面宽度为W=950