浅析网格系统在网页设计中的重要性

浅析网格系统在网页设计中的重要性

发表时间：2010-06-18T08:52:40.217Z 来源：《计算机光盘软件与应用》2010年第5期供稿作者：吴智君1，丘昊2

[导读] 在网页设计中合理利用网格系统来组织页面上的内容能大大改善页面的精确性和美观性。

吴智君1，丘昊2

（1.柳州市气象局，广西柳州 545001；2.广西区气象信息中心，南宁 530022）

摘要：在网页设计中合理利用网格系统来组织页面上的内容能大大改善页面的精确性和美观性。为更高层次的创作提供了一个框架，

网格系统在很大程度上使我们的排版工作压力得到了缓解。与传统印刷媒体有所不同，在网页中利用网格系统则要考虑到不同的浏览器、

操作系统、屏幕尺寸等不固定因素，网格系统必须能适应这些变化。如果加以合理利用，网格系统可以使整个网站的视觉效果得到提升。

关键词：网格系统；网页设计；美观；视觉效果

中图分类号：TP311.56 文献标识码：A 文章编号：1007-9599 (2010) 05-0000-01

The Importance of Grid System in Webpage Design

Wu Zhijun1,Qiu Hao2

(1.Liuzhou meteorology Bureau,Liuzhou 545001,China;2. Guangxi Meteorological Information Center,Nanning 530022,China)

Abstract:In the web design of rational use of grid system to organize content on the page the page can greatly im Keywords:Grid;Web design;Beautiful;Visual effects

当今一些大型的网站都有着非常美观的视觉效果，因为它们很可能都在网页设计过程中合理利用了网格系统。网格系统可以使页面布

局显得更加规律和稳定，给网页制作者在设计时提供了一个标准的模板。但使用网格系统并不意味着枯燥的、墨守成规的设计，一个优秀

的网页制作者不仅能够巧妙的应用网格系统的布局规则，而且还能适时地突破这些规则的瓶颈，为网络用户提供更具观赏性的网页。

一、网页网格系统的

（一）网页网格系统的定义

网页网格系统的作用就是：将网页中的信息分布以及版面布局用划分规则的网格阵列来进一步归范。网页网格系统产生和发展于从平

面网格系统中。对于网页设计者来说，合理的使用网格系统，不仅可以让网页呈现的信息更加美观易读，使之更具可用性。而且，在前端

开发的角度看，网页将会更加的灵活、规范。

（二）网格的基本作用

在网页设计流程中，网格系统占据着极其重要的地位，其作用十分明显。它和“排版”决定着信息的视觉组织形式，也就是我们看到

的网页样式。把页面中的信息组织到一起是网格的基本功能。合理利用网格系统来辅助网页设计，可以使我们更轻松地达到以下目的：让

网页界面上呈现的信息更易读，网页布局更加美观合理，让读者能在视觉方面感觉到舒适，同时还增加了网页的实用性。因为网格系统有

充分的美学依据以及科学理论依据做为辅助，可以让设计者避免以往仅凭感觉做设计的传统方法，效率较低，而且效果有时也不能令人满

意。在数码媒体中，合理的利用网格，可以让制作者设计出来的作品变得更加新颖，也增强了相互之间的关联性。

（三）网页网格系统的特殊性

经过印刷媒体多年的探索和改进，在不断的反复测试中发现了一些适合用来表现文本和图像信息的版式和规则。在经过几代人的改进

之后，这些版式和信息已经使读者形成了固定的阅读和浏览习惯。在传统印刷媒介中，设计者拥有一个固定大小的界面，比如一张纸或其

他材料，而它们的大小、尺寸都是固定的。但是在网络媒介就不同于传统印刷媒介，因为不同的浏览者使用的浏览器、系统操作平台以及

电脑屏幕大小和分辨率都是各不相同的；甚至通过手机、掌上电脑来浏览网页，它们的屏幕尺寸、屏幕分辨率等也是不尽相同的。优秀的

网页设计师会认识到，不同的用户对于相同网站的视觉效果需求是不一样的。与传统媒介相比，网页制作者在对版面视觉效果的控制方面

失去了很多主动权。我们需要做的只是：设计出可以适应这些变化的网格系统。

二、24x40，960网格系统

图 1 图 2

如图1所示，雅虎是一个以信息展示为主的门户型网站，该站使用的正是著名的960网格系统。对于信息的阅读来讲，960px的网页宽度

比较合适；因为比起自适应宽度布局，固定宽度的布局控制起来更容易，具有良好的可维护性和可扩展性。在Alexa全球网站的排行榜里，

雅虎位列第三。像这样一个大型的综合类网站，每天的浏览量、信息量都非常大，而且雅虎功能又多，又繁杂，会很容易使浏览者产生烦

躁情绪。比起纸质媒体的读者网络用户比较缺乏耐心，版式的不合理会更容易激起他们的烦躁心理。甚至，有的用户在数秒钟之内没有找

到自己所需要的信息，就毫不犹豫地退出网站，转而浏览其他网页。

以上这些因素不得不考虑，雅虎最终锁定了960固定宽度的网格布局。这是标准的24×40网格系统，它比12×80、16×60的网格系统相

比更加多样化，可以满足雅虎繁杂琐碎的信息组织需要，使各种信息的层级更加清晰，布局更加合理、美观。正确的选择了页面布局方

案，是雅虎能长期雄踞Alexa三甲的原因之一。

三、结语

在网页设计的过程中，网格系统是不可忽略的一个重要问题。如今愈来愈多的大型网站开始利用网格系统来打造和美化自己的网页，

这是一种趋势。为网络用户创造一个更舒适、更美观、更人性化的网页视觉环境是每个网页制作者的责任。只有在符合视觉科学规律的前

提下进行再创新，网页制作者才有可能更大程度的发挥自己的创造力，设计出更加独特，更加美观的网页作品。

参考文献：

[1]中国站长站———站长之家 网页栅格系统研究(1),(2),http:/ //Design/ Pages/ 052MJ262009.html.

[2](美)埃伦·鲁普顿.王毅译.字体设计指南[J]上海:上海人民美术

出版社,2006