• 认真清理自己
  
• 多喝水
  
• 适当的做一些伸展运动
  

有个很有意思的网站是Yahoo!, 看起来是固定宽度布局，实际上在CSS中只要去掉一行，就能摇身一变自适应宽度了：

#page {
    width: 70em;
}

为什么Yahoo!最后选择了定宽布局呢？这很可能是因为定宽布局比宽度自适应布局更容易控制。对于结构复杂的网站来说，可维护性和可扩展性非常重要。Yahoo!是以信息展示为主的门户型网站，960的宽度对于信息的阅读比较友善（Joe Clark写了一篇屏幕阅读时有关行长的有趣文章）。种种因素使得Yahoo!最后采用了定宽布局（Tommy Olsson总结了 每种布局设计的优缺点 ）。

这里将只关注定宽布局，适用的场景是搭建复杂的门户型网站。对于宽度自适应布局和相应的栅格系统，暂不讨论（根据实现的技术手段不同，宽度自适应布局又分为流体布局和弹性布局。我个人蛮喜欢弹性布局，以后有时间再研究）。

好了，已经将范围缩小到定宽布局的网页栅格系统，那我们开始吧。

并不遥远的750

还记得800×600的显示器不？虽然才时隔几年，感觉却好像是上个世纪的事了。Mark Boulton做了 最早的探索：

将750分割成均等的6份，这就形成了栅格系统，稍加组合划分就形成了两栏布局和三栏布局。Mark Boulton还研究了Gutter（垂直栏之间的间隙）对栅格的影响，有兴趣的可以阅读原文，或者跟着我往下看吧，下面将详细阐述。

几个术语和一个公式

一个标准的栅格系统，包括以下部分：

将Flowline的总宽度标记为W, Column的宽度标记为c, Gutter宽度标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得到以下公式：

W = c * N + g * (N - 1) + 2 * m

一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为：

W = c * N + g * (N - 1) + g = (c + g) * N

将c+g标记为C, 公式变得非常简单：

W = C * N

上面的公式就是栅格系统的基础，很简单吧。

950的来历

具体应用时，Margin其实是一个空白边，从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px, 这样Margin就是5px. 当W为960，分割成6列时，栅格如下图：

点击放大

上图的处理是左右Margin各为5px. 也可以将Margin集中放在一边，比如右边：

点击放大

无论Margin放在何处（这只影响技术实现，不影响设计），我们真正要关注的是去除Margin之后的部分：

点击放大

这就是我们要真正关注的950！将W的含义变为去除Margin的总宽度，公式变化为：

W = N * C - g

将上面的公式实例化一下：

950 = 12 * 80 - 10
950 = 16 * 60 - 10
950 = 24 * 40 - 10

这就形成了960蛋糕的三种常见切法。

12 x 80

点击放大

16 x 60

点击放大

24 x 40

点击放大

上面三种切法，N越大，灵活度越高。可以根据网页的实际复杂度来选用对应的切法。在960 Grid System首页中，展示了12 x 80的应用：

我们来看下 研究（1）中开头列举的网站的栅格应用情况。

Yahoo!是很标准的 24 x 40 栅格：

点击放大

淘宝网目前只有商城上部分使用了栅格系统（大的两栏布局遵守了 24 x 40 的栅格化，主体部分使用的另一套740的栅格划分）：

点击放大

网易很不错，采用的是 16 x 60 的栅格系统：

点击放大

研究（1）中的其它站点都没有真正严格地采用栅格系统。

栅格系统的优势

上面的“发现”是让人有点沮丧的。目前严格采用栅格系统的站点非常少，为什么我们还要努力的让网页栅格化呢？

栅格系统具有以下优势：

1. 能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。
2. 基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。
3. 对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。（详见《超越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栅格系统的模块化应用。

本文链接：http://www.blueidea.com/design/doc/2008/6248.asp

上面列举的都是 Alexa全球排名前100的站点 ，它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点：页面结构较复杂，都可以认为是门户型网站。

再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点，它们的首页宽度没什么固定规律，共同的特点是：功能专一，页面结构相对简单。

根据上面的简单分析可以认为：当搭建页面结构复杂的门户型网站时，开发工程师们不约而同地都选择将页面宽度定为950px/960px.

这是一件很有趣的事情，为什么要选择这个宽度呢？这个宽度值究竟有什么魔力？

神奇的960

设计师们对苹果情有独衷。在 1024 x 768 的分辨率下，打开Firefox：

自然状态下，Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框，网页的实际大小为上图中的红色部分，高宽为 960 x 650.

有趣的960就这样出现了。是的，可以认为一切就这么简单。栅格系统最早出现在平面设计领域，设计师们爱用苹果，苹果下浏览器的默认宽度为960px, 于是960就这么“自然”地出现了。

数字背后的奥妙
上面的“自然”出现，细究自然是不让人信服的。苹果系统的设计者们在没有喝醉酒的情况下选择了960，而不是其它什么1000之类的整数，自然另有奥妙。

科学界有很多问题都可以归结到数学问题上，我们也从数学着手：

960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍：

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是去掉1和960自身），我们标记为：

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

同理可以得到：

N(480) = N(2^5 * 3 * 5) = 6 * 2 * 2 - 2 = 22
N(750) = N(2 * 3 * 5^3) = 2 * 2 * 4 - 2 = 14
N(800) = N(2^5 * 5^2) = 6 * 3 - 2 = 16
N(1000) = N(2^3 * 5^3) = 4 * 4 - 2 = 14
N(1024) = N(2^10) = 11 - 2 = 9
N(1920) = N(2^7 * 3 * 5) = 8 * 2 * 2 - 2 = 30

根据直觉（严格证明也不难，不过还是留给数学系的学生去证明吧），我们得到一个有趣的结论：

要使得N(width)最大，width的取值必须是 …, 480, 960, 1920, …

N越大，可组合的宽度值就越多。对栅格系统来说，这意味着越灵活！

目前绝大多数显示器都支持 1024 x 768 及其以上分辨率，480太窄，1920则太宽（太宽也不利于阅读），因此960就成为网页栅格系统中的最佳宽度了。（补充：480可以应用在Flash的栅格设计中）

细心的你也许会记得，本文开头列举的宽度值中，950也出现了好几次。950是怎么来的？和960是啥关系？这些疑问，请关注本系列的下一篇文章。

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

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

网页设计中的栅格系统
我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

栅格系统在现在的网页设计中应用越来越多，从网络上搜罗了一篇关于栅格系统应用的文章：30个最顶尖的基于栅格系统的博客网站设计。

栅格系统的设计原理及应用
那么如何设计一个栅格系统？接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：

在网页设计中，我们把宽度为“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的值，这个根据网站的实际情况来制定。那么如何选择合适栅格系统，主要通过“构成 要素与程序、限制与选择、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法则、圆与构成、水平构成这些设计元素规划，来实现比例和谐的平 面设计”。比较深奥，我们在这里就不详细阐述了。

呵呵，说了一堆栅格系统的优点。大家可能会问：难道栅格系统真的是完美的么？答案是否定的：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到栅格了。当然，具体的情况还需具体的分析与解决，这就需要设计师们在实际的应用中不断的总结经验，不断实践了。

编译：Vinwin (不倒猫）

(转载请注明出处，标注链接，谢谢合作)

拥有一个抢眼的Logo对企业来乃一大幸事，毕竟Logo千千万，但真正让人过目不忘的作品可是屈指可数。好的Logo必须量体裁衣，迅速传递出企业的价值和理念。
但Logo不能只是金玉其外，还必须有思想、多功能。比如，可以用标准色在任何尺寸的纸张完美复制和再现。下面就晾出当前30个自认为很杰出的Logo，飨宴大家。

1.    Castle Print
一个打印机品牌，该Logo直截了当地体现了了企业的业务性质：利用减色模型，直指其打印行业背景，同时通过色彩的混合塑造出一个与其品牌相符的城堡（Castle）形象。

2.    Ryan-Biggs
负空间的运动使得这幅Logo有一种奇幻的效果，完全考验你的空间想象力！B和R两个字母代表了这个品牌，微微的倾斜让整个设计看起来更有深度和立体感。色彩搭配极为简单—红色，赋予了Logo更广的使用范围。

3.    One Leaf
One Leaf, 顾名思义，即一片树叶。以此为轴线，就呈现出了如此简洁巧妙的画面。

4.    Greener
设计师用粗细不同的灯芯体(San-serif)字体塑造出一种现代感。该Logo不但层次感强，更重要的是可以用单一色调复制重现（这也是评判Logo好坏的重要标准之一）。

5.    Talkmore
Talkmore字面意思是“多说点儿”。设计师采用象征的手法，用英文中的单引号分别代替字母“a”和“e”，从而在图形上给予品牌最鲜活的注解。

6.    Black Sparrow
看上去很简单的图标，但在细节处理上却达到了极致。从麻雀(即Black Sparrow的中文)的图案到字体，柔和的曲线与平滑的字体相得益彰，将完整的设计融入品牌表现。

7.    Swannie Lake
富有时代气息的Avenir字体配合平滑的图案，不但与该Logo完美贴合，而且增添了一许微妙的色彩。

8.    Elara Systems
先介绍一下，Elara Systems是一个动画和动态模型工作室，也必然要求2D和3D的结合。体现在Logo上，就是大家所看到的效果：柔软弯曲的字体配上3D的字母“e”（即首字母），很好的创意。

9.    Onwine
完美的字体搭配独到的理念，Onwine Logo为我们展现出一个酿酒商的特质，无论是图案还是字体设计都无可挑剔。

10.    Popp
什么叫一气呵成？这幅Logo将基于同一字体的设计方法带上了全新的高度。每个字母都包含字母“O”，只是做了细微的改动就成了“P”，独具匠心。

11.    Therauz Fashions
能看出这个Logo的绝妙之处吗？该公司从事时装设计业务，所以针线活是少不了的。画面中央的长针，不仅反映了公司业务，而且将中间一串字母给“缝”了起来，成了必不可少的一部分，内涵之深可见一斑。

12.    Alatau
无论是字母还是彩色远点，共同的特点就是间距较大，这种手法带来的效果就是严肃而前卫。这样排列的好处还在于以中间两个字母中心，整个Logo看起来非常平衡。

13.    Spiffy Sparrow
作品采用复杂的形状、线条和色彩，为以后的调整打好了基础。另外，用负空间来塑造鸟的躯干也是令人叫绝的地方。

14.    About Thyme
干净利落的线条和形状，是Logo设计的固有套路。不过，本作品似乎摆脱了这样的条条框框：粗糙的手绘图案，给人以一种亲和力，也给体现了品牌所有者作为调味品公司的价值。

15.    Ta Jevi
一个娱乐网站。Logo的每一部分都闪烁着欢乐感。箭头组成的笑脸传递出了这样的信息—欢乐无止境。跳跃的色彩和超酷的手写字更突出了该网站的娱乐价值。

16.    Anti Particle
中文名—反粒子，是一家电影制作公司。这里有必要做个小小的科普，反粒子其实很简单，比如负电子的反粒子就是正电子，质子的反粒子就是反质子……好了，回到Logo上，很明显，这又是一个用公司名做文章的范例。首先首字母“a”有无数颗粒组成，但里面恰恰有一颗蓝色颗粒，这就体现了“反粒子”的概念。

17. 69 Monos
不同于平面2D设计，有些Logo，就像69 Monos，通过3D效果给Logo增添深度和趣味。改变角度就能带来动感，何乐而不为？

18.    Green Dolphin
Logo使用海豚（Dolphin）的轮廓和绿色来传递品牌信息，同时也隐藏了次级画面—即大写字母G。

19.    Aramova
经典的莫比乌斯带（Mobius Strip http://hi.baidu.com/totogo/blog/item/629a233ff2239aec54e723ad.html）使用案例！柔软的质地+奇幻的色彩，整幅画面让人体会到永不停息的动感。

20.    Vize
并不是所有的Logo都需要附属图案，比如我们看到的这个。虽然只有字体，但由于在排版上做足了功夫，Logo同样可以表达品牌的理念。

21.    Friends in Places
交友网站，很明显。看似纷繁复杂的箭头构成了一幅世界地图，表现了互联网时代网络社交的全球性和广泛性，企业的品牌价值由此得到体现。

22.    Koloroo
一款色彩方案的软件产品。随机的颜色搭配勾勒出了一只袋鼠的形象，这也符合其产品形象。字体设计同样出众，因此可以说，该Logo两部分合起来是精品，拆开来也是优秀的图案和文字标识。

23.    Pangur
手工玻璃制造商。通常而言，透明的运用在Logo设计中是慎而又慎的，不过随着打印技术的改进，已经没有理由限制这种技法的使用了。设计师用不同色彩的玻璃碗进行简单堆砌，且呈现不规则倾斜，这恰恰抓住了玻璃手工艺的特点。Futura字体也给作品锦上添花。

24.    Tammy Lenski
美国一家争端解决公司（比如劳资纠纷等等）。现在，搭上千纸鹤，来一趟意境之旅吧。大多数Logo都直截了当地反映目标企业的各个方面，然而这个设计却通过千纸鹤的故事和寓意来展现企业形象（编者注：之所以这么说，是因为西方人并不了解千纸鹤的含义）。

25.    Eco Cafe
图案简洁又不是标识性，整幅作品看起来就像破土而出的生命。生态咖啡馆—该企业的名称—得到了最鲜明的宣示。而正因为标识本身的简洁，使得它贴在窗户上，也可以印在咖啡杯上。

26. Firefish
这又是一个运用流行技术—比如透明—塑造多层次标识的典范。火焰拼成的鱼（即Firefish，火鱼）搭配上经典的大写灯芯体(san-serif)字母，堪称一绝。

27. Boxbound
立体和透明同属当今Logo设计潮流，这幅作品同时运用了这两种技巧。生动的色彩加上浑圆可爱的字体，俨然一副基于网络的时代先锋形象。

28. AdMagik
看完这个Logo，你应该能学会用颜色区分信息。品红色部分突出了公司的名称“Magic”（魔术），而灰色字体暗示了该公司的身份，也是Logo的重点所在，即“Ad”（广告）。最后，在字母J和I上做图，使之成为兔子的形象（编者注：兔子在西方是魔术的象征），再一次强调了企业点石成金的业务能力。

29. Jivespace
这个Logo用爆炸性的手法给人以强烈的视觉冲击，既有深度又充满活力，同时，全部小写字母的排版方式体现出其时代气息。

30. Core
和前面提到的“Popp”Logo类似，它也是基于一个形状延续下去，线条干净利落，颜色单一，该Logo的功能性可想而知有多么强大。