网页栅格化设计学习ppt

1、网页栅格设计系统 09.12.14 栅格设计系统 “grid systems”（又称网格设计 系统、标准尺寸系统、程序版面设计、瑞士平面 设计风格、国际主义平面设计风格），是一种平 面设计的方法与风格。运用固定的格子设计版面 布局，其风格工整简洁，在二战后大受欢迎，已 成为今日出版物设计的主流风格之一。 版式设计 1919年德国著名建筑家沃尔特格罗佩斯（Walt Gropius）在魏玛建立国立包豪斯学院。包 豪斯的平面设计基本是在荷兰“风格派”和俄国“构成主义”的影响下形成的。因此，具有 高度理性化、功能化、简单化、减少主义化和几何形式化的特点。 1928年，朱斯特施密特（Joost Schm

2、idt）发展出了一套新的理性设计系统和方法。 20世纪50年代，栅格设计系统终于在前西德与瑞士得到完善。通过瑞士平面设计杂志的宣传， 将瑞士苏黎士和巴塞尔两个城市的设计家从20世纪40年代探索的成果全面展示，并影响世界 各国，因此也被称为“瑞士平面设计风格”（Swiss Design）。由于这种风格简单明确，传 达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格， 也是国际最流行的风格，因此又被称为“国际主义平面设计风格”（International Typographic Style）。 1965年，在美国的芝加哥成立了一家新的平面设计公司尤尼马克设计公司（Un

3、imark）， 主要设计人员包括有拉尔夫依克斯特朗姆（Ralph Eckerstrom）、詹姆斯佛格曼（James Fogleman）、马西莫维格涅里（Massimo Vignelli，1934-）等。尤尼马克设计公司的设 计思想基本是国际主义的：强调平面设计上的标准化，采用方格网络为设计依据，目的是良 好的视觉传 达功能。这家公司发展很快，不久就成为一家拥有402名工作人员、在全世界设 有48个设计事务所的大型国际设计公司。国际主义平面设计在这家公司的业务中 得到很大的 成功，而企业的规模又使得这个风格在世界各地得到进一步推广。 历史 网页设计中的栅格系统 网页栅格系统是从平面栅格系统中发展

4、而来。以规则的网格阵列来指 导和规范网页中的版面布局以及信息分布 。 对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更 加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的 灵活与规范。 栅格系统的设计原理及应用 在网页设计中，我们把宽度为“W”的页面 分割成n个网格单元“a”，每个单元与单元 之间的间隙设为“i”,此时我们把“a+i”定 义“A”。他们之间的关系如下： W =（an）+（n-1）i 由于a+i=A， 可得：(An) i = W 栅格系统的设计原理及应用 Yahoo的网站页面宽度为W=950px 每个区块与区块的间隔为i=10px 如果应用上面的公式，可以推

5、出 A=40px，既Yahoo首页横向版式设 计采用的栅格系统为： （40n）- 10 = W Yahoo首页的布局完全是按照栅格 系统进行设计的，每个区块的宽 度对应的n值分别为：4，11，9。 只要保证一个横向维度的各个区 块的n值相加等于24，则即可保证 页面的宽度一定是950px。然而， 950px的宽度也恰好就是当n=24 的时 候，W的宽度值。 栅格系统的设计原理及应用 栅格系统的设计原理及应用 将Flowline的总宽度标记为W, Column的宽度标记为c, Gutter宽度 标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得 到以下公式： W

6、= c * N + g * (N - 1) + 2 * m 一般来说，Gutter的宽度是Margin 的两倍，上面的公式可以简化为： W = c * N + g * (N - 1) + g = (c + g) * N 将c+g标记为C, 公式变得非常简单： W = C * N 网站首页页面宽度 px Yahoo!950 淘宝950 MySpace960 新浪950 网易960 Live Search958 搜狐950 优酷960 AOL960 栅格系统的设计原理及应用 页面结构较复杂,门户型网站 首页宽度为950px/960px 神奇的960 栅格系统的设计原理及应用 设计师们对苹果情有独衷

7、。在 1024 x 768 的 分辨率下，打开Firefox： Firefox窗体的大小约为 974 x 650. 减掉左右两边 7px的边框，网页的实际大 小为上图中的红色部分， 高宽为 960 x 650. 栅格系统最早出现在平面 设计领域，设计师们爱用 苹果，苹果下浏览器的默 认宽度为960px, 于是960 就这么“自然”地出现了。 950的来历 具体应用时，Margin其 实是一个空白边，从视觉 上看并不属于总宽度。不 少栅格设计里习惯性地设 定Gutter为10px, 这样 Margin就是5px. 当W为 960，分割成6列时 栅格系统的设计原理及应用 W的含义变为去除Margi

8、n的总宽度， 公式变化为： W = N * C - g 将上面的公式实例化一下： 950 = 12 * 80 - 10 950 = 16 * 60 - 10 950 = 24 * 40 - 10 这就形成了960蛋糕的三种常见切法。 栅格系统的设计原理及应用 950的来历 12 x 8016 x 60 24 x 40 栅格系统的设计原理及应用 Yahoo! 24 x 40 淘宝商城 大的两栏布局 24 x 40 主体部分使用740的栅格划分 网易 16 x 60 栅格系统的设计原理及应用 栅格系统的设计原理及应用 黄金分割 黄金分割可以归结为数学问题：对于长度为1的线段，将其分成两部分 x 和

9、 1 x, 使得： x / 1 = (1 - x) / x 化为简单的二次方程： x2 + x - 1 = 0 正数解为： x = (sqrt(5) - 1) / 2 = 0.618 这就是黄金分割。 这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域，在管理、工程设计等方 面也有着不可忽视的作用。 （这是个自然界的魔数，类似的还有真空光速、普朗克常数、 精细结构等等，感兴趣的Google吧） 在平面设计领域，黄金分割点被广泛采用。比如下面这种图： 栅格系统的设计原理及应用 960栅格，实际宽度是950. 对于 24 x 40 的情景， 最接近黄金分割的两栏布局是 350 : 590,

10、栏数比例为 9 : 15 宽度方向上的栅格 但实际使用时，因为窄栏经常用来做 导航或放辅助信息，并不需要350px 这么宽。 栅格系统的设计原理及应用 高度方向上的栅格 高度值560 可以让高宽比接近黄金分割。 针对560, 我们采用 14 x 40 栅格 栅格系统的优势 能大大提高网页的规范性。在栅格系统下，页面中 所有组件的尺寸都是有规律的。这对于大型网站的 开发和维护来说，能节约不少成本。 基于栅格进行设计，可以让整个网站各个页面的布 局保持一致。这能增加页面的相似度，提升用户体 验。 栅格系统更多的是一种布局思想。对于设计师们来 说，灵活地运用栅格系统，能做出很多优秀和独特 的设计。

11、Thank you! Blueprint的实现 Blueprint是一个完整的CSS框架，栅格系统是它的一部分功能。我们来看demo页面： 以上三栏布局的代码为： .container margin: 0 auto; width: 950px .span-8 float: left; margin-right: 10px div.last margin-right: 0 hr clear: both; height: 0; border: none 上面是基本功能，Blueprint还支持append-n, prepend-m, border等“高级”功能，这些 就不细说了。Blueprint

12、的特点简单总结如下： 采用浮动来实现布局，简单明了 950两侧没有margin, 最后一列的class需要加上last 采用额外标签来清除浮动 960.gs的实现 谈到960栅格系统，不得不提960.gs. Nathan Smith在这篇文章中，详细阐述了他的想法和设计思路。这里有 个demo页面，核心代码很简单： .container_12 margin: 0 auto; width: 960px .grid_4 float: left; margin: 0 10px 有意思的几点： margin是均匀放在950两侧的 所有grid除了宽度不同，左右边距都一致margin: 0 10px;

13、代码简单清晰，起始和结束列不需要添加额外class 很明显，Blueprint和960.gs都是采用浮动来实现布局的，主容器需要添 加额外标签来清除浮动。当然，这也不是什么大问题，不添加额外标签 也可以清除浮动。 YUI的实现 接着来看大名鼎鼎的YUI Grids CSS. YUI的CSS框架由三个文件组成： reset.css - 样式重置 fonts.css - 版式字体控制 grids.css - 栅格系统 我们从demo开始： 注意，demo链接中的宽度是750的，但我们只要将中的id改为doc2, 页面宽度就自动变为 950宽了（YUI非常强大o）。来看下dom结构： 采用的也是浮动布局，简化后的CSS代码为： .doc2 margin: auto; width: 73.076em .yui-u float: left; margin-left: 1.99%; width: 32% div.first margin-left: 0 #ft clear: both YUI的特点是： 依旧是采用浮动布局，槽（