网页栅格化设计学习 PPT课件

1 网页栅格设计系统 09 12 14 2 3 版式设计1919年德国著名建筑家沃尔特 格罗佩斯 WaltGropius 在魏玛建立国立包豪斯学院 包豪斯的平面设计基本是在荷兰 风格派 和俄国 构成主义 的影响下形成的 因此 具有高度理性化 功能化 简单化 减少主义化和几何形式化的特点 1928年 朱斯特 施密特 JoostSchmidt 发展出了一套新的理性设计系统和方法 20世纪50年代 栅格设计系统终于在前西德与瑞士得到完善 通过瑞士平面设计杂志的宣传 将瑞士苏黎士和巴塞尔两个城市的设计家从20世纪40年代探索的成果全面展示 并影响世界各国 因此也被称为 瑞士平面设计风格 SwissDesign 由于这种风格简单明确 传达功能准确 因而很快得到世界范围内的普遍认可 成为战后影响最大的一种平面设计风格 也是国际最流行的风格 因此又被称为 国际主义平面设计风格 InternationalTypographicStyle 1965年 在美国的芝加哥成立了一家新的平面设计公司 尤尼马克设计公司 Unimark 主要设计人员包括有拉尔夫 依克斯特朗姆 RalphEckerstrom 詹姆斯 佛格曼 JamesFogleman 马西莫 维格涅里 MassimoVignelli 1934 等 尤尼马克设计公司的设计思想基本是国际主义的 强调平面设计上的标准化 采用方格网络为设计依据 目的是良好的视觉传达功能 这家公司发展很快 不久就成为一家拥有402名工作人员 在全世界设有48个设计事务所的大型国际设计公司 国际主义平面设计在这家公司的业务中得到很大的成功 而企业的规模又使得这个风格在世界各地得到进一步推广 字体设计1629年 法王路易十四命令成立一个管理印刷的皇家特别委员会 由数学家尼古拉斯 加宗 NicolasJaugeon 担任领导 委员会提出了新字体设计建议 以罗马体为基础 采用方格为设计依据 每个字体方格分为64个基本方格单位 每个方格单位再分成36小格 这样 一个印刷版面就由2304个小格组成 这是世上最早对字体和版面进行科学实验的活动 也是栅格系统的雏形 其实早在1539年就有字体设计专家乔佛雷 托利 GeoffroyTory 采用类似的方法设计字体 历史 4 网页设计中的栅格系统网页栅格系统是从平面栅格系统中发展而来 以规则的网格阵列来指导和规范网页中的版面布局以及信息分布 对于网页设计来说 栅格系统的使用 不仅可以让网页的信息呈现更加美观易读 更具可用性 而且 对于前端开发来说 网页将更加的灵活与规范 5 栅格系统的设计原理及应用 在网页设计中 我们把宽度为 W 的页面分割成n个网格单元 a 每个单元与单元之间的间隙设为 i 此时我们把 a i 定义 A 他们之间的关系如下 W a n n 1 i由于a i A 可得 A n i W 6 栅格系统的设计原理及应用 Yahoo的网站页面宽度为W 950px每个区块与区块的间隔为i 10px如果应用上面的公式 可以推出A 40px 既Yahoo首页横向版式设计采用的栅格系统为 40 n 10 W 7 Yahoo首页的布局完全是按照栅格系统进行设计的 每个区块的宽度对应的n值分别为 4 11 9 只要保证一个横向维度的各个区块的n值相加等于24 则即可保证页面的宽度一定是950px 然而 950px的宽度也恰好就是当n 24的时候 W的宽度值 栅格系统的设计原理及应用 8 栅格系统的设计原理及应用 将Flowline的总宽度标记为W Column的宽度标记为c Gutter宽度标记为g Margin的宽度标记为m Column的个数标记为N 我们可以得到以下公式 W 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 9 栅格系统的设计原理及应用 页面结构较复杂 门户型网站首页宽度为950px 960px 10 神奇的960 栅格系统的设计原理及应用 设计师们对苹果情有独衷 在1024x768的分辨率下 打开Firefox Firefox窗体的大小约为974x650 减掉左右两边7px的边框 网页的实际大小为上图中的红色部分 高宽为960 x650 栅格系统最早出现在平面设计领域 设计师们爱用苹果 苹果下浏览器的默认宽度为960px 于是960就这么 自然 地出现了 11 950的来历 具体应用时 Margin其实是一个空白边 从视觉上看并不属于总宽度 不少栅格设计里习惯性地设定Gutter为10px 这样Margin就是5px 当W为960 分割成6列时 栅格系统的设计原理及应用 12 W的含义变为去除Margin的总宽度 公式变化为 W N C g将上面的公式实例化一下 950 12 80 10950 16 60 10950 24 40 10这就形成了960蛋糕的三种常见切法 栅格系统的设计原理及应用 950的来历 13 12x80 16x60 24x40 栅格系统的设计原理及应用 14 Yahoo 24x40 淘宝商城大的两栏布局24x40主体部分使用740的栅格划分 网易16x60 栅格系统的设计原理及应用 15 栅格系统的设计原理及应用 16 黄金分割黄金分割可以归结为数学问题 对于长度为1的线段 将其分成两部分x和1 x 使得 x 1 1 x x化为简单的二次方程 x 2 x 1 0正数解为 x sqrt 5 1 2 0 618这就是黄金分割 这个比例不仅仅出现在诸如绘画 雕塑 音乐 建筑等艺术领域 在管理 工程设计等方面也有着不可忽视的作用 这是个自然界的魔数 类似的还有真空光速 普朗克常数 精细结构等等 感兴趣的Google吧 在平面设计领域 黄金分割点被广泛采用 比如下面这种图 栅格系统的设计原理及应用 17 960栅格 实际宽度是950 对于24x40的情景 最接近黄金分割的两栏布局是350 590 栏数比例为9 15 宽度方向上的栅格但实际使用时 因为窄栏经常用来做导航或放辅助信息 并不需要350px这么宽 栅格系统的设计原理及应用 18 高度方向上的栅格高度值560可以让高宽比接近黄金分割 针对560 我们采用14x40栅格 19 栅格系统的优势 能大大提高网页的规范性 在栅格系统下 页面中所有组件的尺寸都是有规律的 这对于大型网站的开发和维护来说 能节约不少成本 基于栅格进行设计 可以让整个网站各个页面的布局保持一致 这能增加页面的相似度 提升用户体验 栅格系统更多的是一种布局思想 对于设计师们来说 灵活地运用栅格系统 能做出很多优秀和独特的设计 20 Thankyou 21 Blueprint的实现Blueprint是一个完整的CSS框架 栅格系统是它的一部分功能 我们来看demo页面 以上三栏布局的代码为 container margin 0auto 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的特点简单总结如下 采用浮动来实现布局 简单明了950两侧没有margin 最后一列的class需要加上last采用额外标签来清除浮动 22 960 gs的实现谈到960栅格系统 不得不提960 gs NathanSmith在这篇文章中 详细阐述了他的想法和设计思路 这里有个demo页面 核心代码很简单 container 12 margin 0auto width 960px grid 4 float left margin 010px 有意思的几点 margin是均匀放在950两侧的所有grid除了宽度不同 左右边距都一致margin 010px 代码简单清晰 起始和结束列不需要添加额外class很明显 Blueprint和960 gs都是采用浮动来实现布局的 主容器需要添加额外标签来清除浮动 当然 这也不是什么大问题 不添加额外标签也可以清除浮动 23 YUI的实现接着来看大名鼎鼎的YUIGridsCSS 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 24 YUI的特点是 依旧是采用浮动布局 槽 G