网页的栅格系统设计（2）
作者：青云 来源：Taobao.com UED Team 发布时间：2008-09-19 21:13:00
栅格系统的设计原理及应用
那么如何设计一个栅格系统？接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：
在网页设计中，我们把宽度为“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首页横向版式设计采用的栅格系统为：
（40×n）- 10 = W
下面我们列出当n等于不同数值时W变化的数值表格 ：
从表格可以看出：yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。在这里我们看到一个很有意思 的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时 候，W的宽度值。由此我们得出以下的应用模式：
在栅格系统中，设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的那张对应表进行设计。这样，一个栅格系统的应用就从此开始了。我们 看到，使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为 设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了……
当然只要你愿意，我们可以衍生出任何一种栅格系统，只要改变A和i的值，这个根据网站的实际情况来制定。那么如何选择合适栅格系统，主要通过“构成 要素与程序、限制与选择、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法则、圆与构成、水平构成这些设计元素规划，来实现比例和谐的平 面设计”。比较深奥，我们在这里就不详细阐述了。
呵呵，说了一堆栅格系统的优点。大家可能会问：难道栅格系统真的是完美的么？答案是否定的：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到栅格了。当然，具体的情况还需具体的分析与解决，这就需要设计师们在实际的应用中不断的总结经验，不断实践了。
0
投稿猜你喜欢
- 以下示例显示如何在 XPath 查询中指定轴。这些示例中的 XPath 查询都在 SampleSchema1.xml 中所包含的映射架构上指
- MySQL 5.0.16的乱码问题可以用下面的方法解决：1.设置phpMyAdminLanguage:Chinese simplified
- 十要：第一：要认真规划和分析。这是网页设计灵魂工作。创建站点之前，要明确你的网站主要针对哪些访问者，为哪些用户服务，要把握准主页题材第二：网
- 一直以来都有这样一个困惑，那就是打开页面间的链接时是在原窗口转换还在新窗口打开呢？如果是在原窗口里转换页面的话，那我还想使用原页面的信息呢？
忽然想起一个CSS的特性，写一段代码玩玩：<style type="text/css">body {font- 这个功能现在很多网站，论坛都有，本站也有呵呵！如果您还不知道如何实现这个功能，没关系看看本文吧！我将给你介绍怎么给你的网站加上运行代码框的功
- 我们平日办公时用得最多的软件是Execl、Word或WPS Office等，你的计算机中一定储存着大量的XLS、DOC、WPS文件吧！网页制
- 请问鼠标移过去就出现二级菜单代码怎么写啊 <head><style type="tex
- 为什么能实现在线编辑呢? 首先需要ie 的支持，在 ie 5.5以后就有一个编辑状态，就是利用这个编辑状态,然后用javascript 来控
- 最近因工作需要，要在静态页面上实现分页，想了下，决定用AJAX来实现，所以就捣鼓了下面这么个东西，截图如下：更多关于分页的文章演示地址：ht
- 有两张表a表id val 1 a 2 b 3 c 4 d 5 e b表 a_id val 1 null 2 null 3 null 4 nu
- 1、选取最适用的字段属性MySQL可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建表
- 对想要在可视化的环境下制作复杂网页的专业网页制作者来说，Dreamweaver 已经渐渐在网页编辑工具市场中展露头角，成为专业人士
- 对于每个类型拥有的值范围以及并且指定日期何时间值的有效格式的描述见7.3.6 日期和时间类型。 1、这里是一个使用日期函数的例子。
- 在印刷排版中“point”是一个绝对的单位，它等于 1/72 英寸。可以用尺子丈量的，物理的英寸。但在CSS中pt的含义
- 学习WEB标准的朋友一般都是从学习CSS开始，为什么呢？因为CSS是一种很有意思的语言，它能让我们的网页千变万化。也许我们一开始的接触只是因
- 本月第一天日期SELECT FirstDayOfCurrentMonth = dateadd(mm,datediff(mm,0,getdat
- 互联网充斥着枯燥的设计，惠普、IBM、戴尔、微软，以及其他数不尽的网站（相似的布局，相似的配色）。可能有人会说通过这样一种标准化的界面可以使
- 问题描述：使用 SQL 2005 w/ SP2 的汇出汇入精灵将数据从 Access 汇入到 SQL2005 发生了错误，但使用在SQL 2
- jQuery是一个非常优秀的JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效
