网页栅格设计系统.pdf

《网页栅格设计系统.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页栅格设计系统WebGridSystems目录•栅格系统定义•栅格系统历史•网页设计中的栅格系统•网页栅格化原理及应用•网页栅格化优势栅格系统定义•栅格设计系统“GridSystems”（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。•运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。栅格系统历史•字体设计历史1.1629年2.法王路易十四3.数学家尼古拉斯·加宗4.罗马体5.64个基本方格单位6.36单

2、元格7.2304个小格形成栅格系统的雏形1539年字体设计专家乔佛雷·托利已用此方法栅格系统历史•版式设计历史1.1919年2.德国著名建筑家沃尔特·格罗佩斯3.魏玛国立包豪斯学院4.荷兰“风格派”和俄国“构成主义”5.1928年，朱斯特·施密特新6.20世纪50年代前西德与瑞士完善7.1965年芝加哥尤尼马克设计公司Unimark网页设计中的栅格系统•特征与原则1.网页栅格系统是从平面栅格系统中发展而来，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布2.重视比例、秩序、连续感和现代感3.对存在于版面上的元素进行

3、规划、组合、保持平衡或者打破平衡，以便让信息可以更快速、更便捷、更系统和更有效率的读取4.负空间的规划（即：留白）网页栅格化原理及应用•原理在网页设计中，我们把页面分割成n个网格单元“a”，可视宽度为“W”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：W=（a×n）+（n-1）i=an+in-i由于a+i=A，可得：(A×n)–i=W网页栅格化原理及应用•布局应用将Flowline（页面）的总宽度标记为FColumn（列）的宽度标记为cGutter（列间距）宽度标记为gMargi

4、n（外边距）的宽度标记为mColumn的个数标记为N公式1：F=c*N+g*(N-1)+2*m我们可以得到公式1公式2：一般来说，Gutter的宽度是Margin的两倍F=c*N+g*(N-1)+g=(c+g)*N公式1可以简化为公式2公式3：将c+g标记为C,变为公式3F=C*N网页栅格化原理及应用网站首页页面宽度pxYahoo!950•关于950&960淘宝950MySpace960这些尺寸是前几年的流行趋势，在那个年头，新浪950为毛会有950&960这两个宽度频繁出现？网易960LiveSearch958搜狐950

5、WHY优酷960950&960AOL960？网页栅格化原理及应用•关于950&960设计师们对苹果电脑情有独衷。在1024x768的分辨率下，Firefox窗体的大960px小约为974x650.减掉左右两边7px的边框，网页的实际大小为左图中的黑色部分，高宽为960x650.………网页栅格化原理及应用•950的应用具体应用时，Margin其实是一个空白边，从视觉上看并不属于总宽度。不少栅格设计里习惯960px-10px性地设定Gutter为10px,这样Margin就是5px.将W的含义变为去除Margin的总宽度，之前

6、的公式变化为：W=N*C-g………………网页栅格化原理及应用•950的切法将上页的公式实例化一下：950=12*80-10950=16*60-10950=24*40-10这就形成了960蛋糕的三种常见切法。网页栅格化原理及应用•切法12x8016x6024x40网页栅格化原理及应用•实例Yahoo淘宝商城网易24x40大的两栏布局24x4016x60主体部分使用740的栅格划分网页栅格化原理及应用•黄金分割数学问题：x/1=(1-x)/x二次方程：x^2+x-1=0正数解为：x=(sqrt(5)-1)/2~=0.618绘画

7、、雕塑、音乐、建筑；管理、工程设计。网页栅格化原理及应用•栅格化系统的黄金分割960栅格，实际宽度是950.对于24x40的情景，最接近黄金分割的两栏布局栏数比例是图1所示：图19：15，宽度比为：350:590实际并不需要350px这么宽。因此实际情况下经常被采用的布局为图2所示。图2网页栅格化原理及应用•应用Yahoo网站页面宽度为W=950px每个区块与区块的间隔为i=10px如果应用公式，可以推出A=40px，既Yahoo首页横向版式设计采用的栅格系统为：（40×n）-10=W网页栅格化原理及应用•应用只要保证一个

8、横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。网页栅格化优势网页栅格设计系统•优势WebGridSystems1.规范性，规律性——易于维护，节约成本。2.一致性——提升用户体验。3.灵活性——便于整体布局和区域设计。4.模块化——便于模块化设计，重复利用。完TheEnd你