网页栅格系统研究:蛋糕的切法（4）
作者：玉伯 来源：Taobao.com UI Team 发布时间：2008-10-24 17:07:00
栅格系统的优势
上面的“发现”是让人有点沮丧的。目前严格采用栅格系统的站点非常少，为什么我们还要努力的让网页栅格化呢？
栅格系统具有以下优势：
能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。
基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。
对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。（详见《超越CSS》一书）
对于大型网站来说，我相信栅格化将是一种潮流和趋势。
下面讨论栅格系统中的黄金分割。
黄金分割
黄金分割可以归结为数学问题：对于长度为1的线段，将其分成两部分 x 和 1 - x, 使得：
x / 1 = (1 - x) / x
化为简单的二次方程：
x^2 + x - 1 = 0
正数解为：
x = (sqrt(5) - 1) / 2 ~= 0.618
这就是黄金分割。这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域，在管理、工程设计等方面也有着不可忽视的作用。 （这是个自然界的魔数，类似的还有真空光速、普朗克常数、精细结构等等，感兴趣的Google吧）
在平面设计领域，黄金分割点被广泛采用。比如下面这种图：
数一数上面有多少黄金分割？
对于960栅格，实际宽度是950. 两栏布局时，黄金分割为：
对于 24 x 40 的情景，最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15. 但实际使用时，因为窄栏经常用来做导航或放辅助信息，并不需要350px这么宽。因此实际情况下经常被采用的布局是：
上面讲的都是宽度方向上的栅格化，下面我们看看高度方向上如何应用。
高度方向上的栅格
还记得研究（1）中那张红红的很刺眼的图吗？注意高度值560也是很神奇的。
N(560) = N(2^4 * 5 * 7) = 18
560 / 960 ~= 0.583
N(560)比较大，同时可以让高宽比接近黄金分割。针对560, 我们采用 14 x 40 栅格：
这样，我们就在宽度和高度两个方向上都实现了栅格化。
下一篇将详细阐述960栅格系统的模块化应用。
0
投稿猜你喜欢
- 原理：第一步：应用程序把查询SQL语句发给服务器端执行。我们在数据层执行SQL语句时,应用程序会连接到相应的数据库服务器,把SQL语句发送给
- <form name="frm"><select name=school onchange="
- 全文索引在 MySQL 中是一个 FULLTEXT 类型索引。FULLTEXT 索引用于 MyISAM 表，可以在 CREATE TABLE
近日大家热议的盗版XP黑屏问题想必很多人都知道了，在这里就不多说。据媒体报道，微软公司将实施逐步投放策略，预计本周将投放5％黑屏，下周投放2- 在sql语句中，如果查找某个文本字段值为空的可以用select * from 表 where 字段=''但是如果
- <％@ Language=VBScript ％><％Option Explicit ％><％Dim strUR
- 好东西找起来很麻烦，好用的又不太容易找到，之前看到很多用JS写的，固定漂浮这种效果拖动时难免会产生抖动，自己对CSS还是蛮有好感的，找来找去
- 就我个人经验来讲：除了oracle，没有比HP 客户支持中心更糟糕的体验了。刚买不到一个月的HP MINI笔记本，莫名其妙键盘上的引号键松动
- Oracle是世界上用得最多的数据库之一，活动服务器网页(ASP)是一种被广泛用于创建 * 页的功能强大的服务器端脚本语言。许多ASP开发人
- 这篇论坛文章详细的讲解了使用SQL Server 2008管理非结构化数据的具体方法，更多内容请参考下文：microsoft SQL Ser
- 如果你正在运行使用MySQL的Web应用程序，那么你把密码或者其他敏感信息保存在应用程序里的机会就很大。保护这些数据免受黑客或者窥探者的获取
- 段时间作项目中，遇到使用视图的问题，以前的工作中很少遇到视图，认为直接用表就ok了，何须视图呢?下面我来讲述一下它的功用：以往当我们查询数据
- 例如:我们在百度中搜索 词典网，则网址后面的参数就是http://www.baidu.com/s?cl=3&wd=％B4％CA％B5
- 网页编程中，在与数据库打交道的时候我们经常会碰到乱码的经常。本文就将介绍一种ASP读取MySQL数据库出现乱码的解决办法。情景再现：使用My
- 1，SELECT 语句 在SQL的世界里，最最基础的操作就是SELECT 语句了。在数据库工具下直接采用SQL
- 一、为表创建自增长自段有两种，一种是不同的表使用各自的Sequence，方法如下： 1、在Oracle sequence首先创建sequen
- 在向大家详细介绍Linux mysql之前，首先让大家了解下Linux mysql，然后全面介绍Linux mysql，希望对大家有用。1.
- 有时在项目中会遇到通过在页面中采用iframe的方式include其它页面，这时就会考虑不要因出现滚动条而影响页面效果，但include页面
- 你用过css么？当然，我是指你喜欢做网页的话，用过？很好，那你用过它的特效么？没有？那请跟我来。让我先通俗的介绍一下css，cs
- 很多人错误地认为ASP是简单、低效的代名词，认为ASP是低能的，不足挂齿的，也很简单，一学就会，一琢磨就精通。有人讲ASP不安全，写ASP的
