网页设计之栅格系统

新闻 2024-9-22编辑：深圳网站建设阅读（）标签： 栅格 网页设计

深圳网站建设公司 帮助企业【yè】提升【shēng】网站形【xíng】象,彰显公司实力,PC+手机+微信【xìn】+小程【chéng】序
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专属VIP的服务】24RX365 为您【nín】提供【gòng】1对1的专属VIP服【fú】务

　　栅格系统的形成

　　栅格系统(Grid system)最早【zǎo】使用【yòng】在【zài】17世纪末的法国印刷业，出版业【yè】。

　　维基百【bǎi】科对其定义为：栅格【gé】设计系统(又称网格设【shè】计系统、标准尺寸系统、程序版面设【shè】计、瑞士平【píng】面设计风格、国【guó】际主义平面设计【jì】风格【gé】)，是一种平面设计的方【fāng】法与风【fēng】格。

　　网页栅格系统是有【yǒu】平面栅格系统中【zhōng】发展而来，以规【guī】则【zé】的网格阵列来指导和规范网页中的版面布【bù】局以【yǐ】及信【xìn】息分布。

　　栅格系统的原理

　　栅【shān】格系统可以按栅格【gé】数分为12列，16列，24列等，可以【yǐ】自由设计栅格宽度【dù】和栅格与栅格间【jiān】宽【kuān】度。如下图【tú】所示，记页面或【huò】区【qū】块【kuài】宽度为W，A代表一个【gè】栅格【gé】单元的宽度【dù】，a代表一个栅格的宽度，i为栅格【gé】与栅格之【zhī】间的【de】距离，n为【wéi】正整数，则【zé】有W=(a*n)+(n-1)*i,由于A=a+i，可得(A*n)-i=W。

　　这个公式表述了【le】网页的布【bù】局与网页背后栅格系统之间的关系【xì】。来观察经典的【de】雅虎【hǔ】案【àn】例：

　　Yahoo的【de】网【wǎng】站页【yè】面【miàn】宽度【dù】为W=950px，每个区块与区块【kuài】的间隔为i=10px;如果应【yīng】用上【shàng】面的【de】公式，可以推【tuī】出A=40px，既Yahoo首页横向版式【shì】设计采用的栅格系统为：(40×n)- 10 = W。只要保证一个横向维度的【de】各个【gè】区块的n值相加等【děng】于【yú】24，即可保证【zhèng】页面的宽【kuān】度一定是【shì】950px，950px的宽度也恰好就是【shì】当n=24的时候，W的宽度值【zhí】。

　　在栅格系统【tǒng】中，设计师【shī】根据需要【yào】指定不同的版式或者【zhě】划分【fèn】区块改变A和i的值进行设计，这样，一个栅【shān】格系统的应用就【jiù】从此开始了。

　　经典960栅格

　　设计师们偏爱【ài】用苹果系【xì】统做【zuò】设【shè】计，苹果【guǒ】下浏览器【qì】的默认宽度为【wéi】960px, 在 1024 x 768 的分辨率下，我们再【zài】打开Firefox，自然状态下，Firefox窗【chuāng】体的大小约为 974 x 650. 减掉左右两边7px的边框，网【wǎng】页的实际【jì】大小为【wéi】上【shàng】图中【zhōng】的【de】红色部分，高宽【kuān】为 960 x 650.有趣的960就这样出现了【le】。960只是个符号，并不是【shì】标准数【shù】。

　　上【shàng】面列举的都是大型门户网站，它们的首页宽度为950px/960px。除了【le】微软的Live Search。根据上面的【de】简单分析可以认为：当搭【dā】建【jiàn】页面【miàn】结构复杂【zá】的门户型网站【zhàn】时【shí】，开【kāi】发工程师【shī】们不约而同地都选择将页面宽度定为950px/960px。为什么要选【xuǎn】择这个宽度呢【ne】?我【wǒ】们【men】从数学着手【shǒu】：960可以分解为2的【de】6次方乘【chéng】以3和5, 这使【shǐ】得960可【kě】以分割【gē】成以下【xià】宽度的整数倍：

　　2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

　　共26种(26 = 7 * 2 * 2 – 2, 减去2是去【qù】掉1和960自【zì】身【shēn】)，我们标记为：

　　N(960) = N(2^6 * 3 * 5) = 26

　　根据上面的算法，可以得到：

　　N(360) = N(2^3 * 3^2 * 5) = 22

　　N(480) = N(2^5 * 3 * 5) = 22

　　N(720) = N(2^4 * 3^2 * 5) = 28

　　N(750) = N(2 * 3 * 5^3) = 14

　　N(800) = N(2^5 * 5^2) = 16

　　N(960) = N(2^6 * 3 * 5) = 26

　　N(1000) = N(2^3 * 5^3) = 14

　　N(1024) = N(2^10) = 9

　　N(1440) = N(2^6 * 3^2 * 5) = 34

　　N(1920) = N(2^7 * 3 * 5) = 30

　　N越大，可组合的【de】宽度值就越【yuè】多。对栅格系统来说，这【zhè】意味着【zhe】越【yuè】灵活。

　　目前绝大多数显【xiǎn】示器都支【zhī】持 1024 x 768 及其以上分辨率。为了有效的利用屏幕【mù】宽【kuān】度【dù】同时保证栅格的灵活度，可以【yǐ】看出960是非常【cháng】合适的。这样，在目前主流显【xiǎn】示器【qì】下，960就【jiù】成为【wéi】网页栅格【gé】系统中的最佳宽度了【le】，也许【xǔ】不久的将来，将会流行【háng】1440。

　　使用栅格系统的优势

　　对于设计师来说，栅格【gé】系统【tǒng】更多的是【shì】一【yī】种布【bù】局思【sī】想，可【kě】以更有逻辑地进行设计工作【zuò】。灵活地运用栅格【gé】系统，不仅可以让整个网站各个页面的布局保持一致【zhì】，让【ràng】网页的信息呈【chéng】现更加美观易读，让【ràng】设【shè】计【jì】稿有更好的结【jié】构，更可以【yǐ】通【tōng】过匹【pǐ】配不同组【zǔ】合，做出很【hěn】多优【yōu】秀和独特的排版【bǎn】设计。

　　使【shǐ】用网格系统，可以使【shǐ】网页设【shè】计给【gěi】用户正式感和规范感【gǎn】，还【hái】具有一【yī】种结构分明的设计感【gǎn】，提升用【yòng】户体验。网格【gé】系统不意味着循规蹈矩，一味按照网【wǎng】格线【xiàn】来进【jìn】行布局。网格系统【tǒng】的意义在【zài】于更灵活的帮助设计师有序布局，而不是限【xiàn】制设计师的设计【jì】。

　　对于前端开发人员来【lái】说，栅格【gé】系【xì】统的使用，给整个网站【zhàn】的页面结【jié】构定义了一个标准，大【dà】大提高【gāo】了【le】网【wǎng】页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规【guī】律【lǜ】的，可重用【yòng】的，这对于大【dà】型网站【zhàn】的【de】开发和维护来说，能【néng】节约不少【shǎo】成【chéng】本。

　　随着响应式设【shè】计的流行【háng】，栅格【gé】系统开始被【bèi】赋予新的意义，那就是，一种响应式【shì】设计的实现方式。响应【yīng】式的要点是为同一个页【yè】面设【shè】计多【duō】种布局形【xíng】态，分别适配不同【tóng】屏幕【mù】尺寸【cùn】的【de】设备。

　　可以看到，一个页面可以拆分成多个区块来理【lǐ】解，而正是这些区块共同构成了【le】这【zhè】个页【yè】面的布局。根据不同的【de】屏【píng】幕【mù】尺寸情况，调整【zhěng】这些【xiē】区块的排【pái】版，就可以实现【xiàn】响应式【shì】设计。而借助栅格系统【tǒng】，设计【jì】与【yǔ】前端开发人员可【kě】以很容易的设计和创建响应【yīng】式【shì】的页面【miàn】布局。

　　栅格系统是一种【zhǒng】格【gé】式化的【de】设计工具，使用栅格【gé】系统【tǒng】是一种好的习惯，设计师可以更专注于内容【róng】呈递【dì】，更专注于强调重点。当【dāng】然，规矩是用来打破【pò】的，当【dāng】我【wǒ】们理【lǐ】解了布局的【de】理念，掌握了【le】栅格的手法之后，也无需拘【jū】泥于栅格的【de】形式，可以对其“革命”，进行创新。

• 上一章：网页设计师:原来Banner设计还有这么多套...
• 下一章：网页设计价格