网页的栅格系统设计

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

1、栅格系统的形成1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能性的新字体。委员会由数学家尼古拉斯加宗（NicolasJaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方各单位，每个方各单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是是世界上最早对字体和版面进行科学实验的活

2、动，也是栅格系统最早的雏形。栅格系统英文为“gridsystems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。网页设计中的栅格系统 我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅

3、格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。栅格系统在现在的网页设计中应用越来越多。基于栅格系统的设计在网络上越来越流行了。一个设计优良的基本栅格系统不但让你的设计更漂亮和易读，还更具可用性。栅格由一系列的垂直线和水平线组成，几乎所有的视觉媒体都以之为基础。清晰的结构将内容分割成愉悦视觉的比例。下面是30个最顶尖的基于网格系统的Weblog设计。http://www2.jeffcroft

4、.com/http://ryanbrill.com/http://www.subtraction.com/http://www.bs-markup.de/http://www.alvarocastano.com/http://www.achtentachtig.com/http://eswat.ca/http://5thirtyone.com/http://www.peterpixel.nl/http://blog.criticalwebdesign.co.uk/http://www.youtilize.c

5、om/http://warpspire.com/http://www.emanuelblagonic.com/http://www.andyrutledge.com/http://jonasboner.com/http://journal.barleyhut.com/http://www.quicksprout.com/http://thefightspot.com/http://www.gapersblock.com/http://dfckr.com/http://meiert.com/en/http:/

6、/usabletype.com/http://ideasonideas.com/http://intensify.org/http://www.jambor-ee.com/http://www.buzzingo.de/http://svenigson.com/http://riverfrontpark.com/http://design.weblogsinc.com/http://www.invalidresponse.com/栅格系统的设计原理及应用那么如何设计一个栅格系统？接下来我们将通过实例，详细的介

7、绍一下网页栅格系统的原理与应用：在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：W=（a×n）+（n-1）i由于a+i=A，可得：(A×n)–i=W这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。我们拿yahoo作例，来看一下栅格系统的应用：yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，既yahoo首页横向版式设计采

8、用的栅格系统为：（40×n）-10=W下面我们列出当n等于不同数值时W变化的数值表格：从表格可以看出：yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。在这里我们看到一个很有意思的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时候，W的宽度值。由此我们得出以下的应用模式：在栅格