当前位置：首页 → 问答吧 → 网页的栅格设计思考

网页的栅格设计思考

时间：2007-11-09

来源：互联网

网页设计中的脏、乱、差，是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的，而色彩使用不当产生的不好效果也分为："花、灰"，花哨、灰头土脸也就是这里所说的"脏"。我已经在早前的一些文章中谈过我对设计中运用色彩的看法。有兴趣的朋友可以查阅一下《色彩解释》。而"差" 基本上是由于我们的技法上不够娴熟所产生的。比如细节上的处理不到位，某个局部的效果制作得粗糙。这可以称之为"差"，特别是在处理带有2D效果的设计作品时，这种情况常会出现。但是我今天在本文中所要谈的是"乱"。什么是乱？这里的乱不是指用色乱，也不是指内容乱，而主要是指布局乱。以前我有幸接触了平面设计，并且从中学到了很多平面设计上的一些知识与技法。其中"栅格设计"就是平面设计中用于处理布局的一种理论。到目前为止我还在研究"栅格设计"。因为着实没有什么比较好的语言可以非常简洁明了的概括这个词。这更像是需要不断用实践去理解的。所以很多时候我们们都无法去讲述。但是在设计中这个栅格却是能帮助我们完成更好作品的一个非常好用的利器。对于栅格设计我也不能说是认识深刻，我这里只是依据我对于栅格设计的理解，将之用于网页设计中，希望能给更多的朋友们一点启示，或许能打开一些朋友的思路。

单纯的文字是没办法让设计师们耐心的看下去的，所以还是老办法，用示图来作为讲解模型。这次我们使用的网页是微软、IBM、ASTRO三个公司网站来讲解。希望通过分解这三个公司的网站设计，能把我所理解的栅格设计传达出来。废话少说，看示图：

我们看到微软公司的网站设计中并没有什么明显的线去区隔不同的区块，但是当我们把当蒙上一层纱，然后用实线把每个部分都画出来这时我们发现这个网站其实是处在一个栅格阵列中。那么这个阵列中的内容已经很明显了，并且我们从中发现了很多区块在页面中的位置居然是那么的有条理，并且有一些并不在一起的区块，居然也有一定的规律。当然有人可能会说，都用线画出来了当然显得条理，整齐了。问题就在于这里，我们的网站都可以用纵横线区分开。但是一些设计得不好的网站的纵横线可能数量非常的多，纵横线的数量过多并且都挤在一直，这就说明网站的布局显得太乱。或者是过于条理而变得布局平均，没有对比，缺乏美感。其实只要用这样的方法去分析一下自己设计的作品也许就能从中看到问题所在。

下面我们再来看一下IBM的网站的分解图：

我们看到IBM的栅格与MS的有很大的不同，IBM中还出现了一些差不多大的栅格，但是这里要注意其实这些栅格是由于底部很小的几个区块所产生的，并且这凡个区块还可以看作是一个横向的区块。我们从这里可以看到IBM的布局设计是对称的。但是这种对称却是在离在纵横线上却不容易注意到的。这是很高明的手法。

我们再来看看ASTRO公司的网站，这个网站比起上面两个公司的网站就更娱乐化，更有趣了。

从这三个网站中我们可以看到三种不同风格的栅格设计，虽然有所不同，但我们依然可以发现三者都会尽可能的把最重要的信息放在视觉中心点上，不论是放在左边的还是右边的或是中间的，他们都得到了最大的栅格区，得到了足够的重视！我们的视觉中心也自然盯在了上面！

说到这里我依然觉得没能把栅格设计的作用讲明白。这里就需要来访的朋友们提提你们的看法了。我将会在以后的时间继续关注栅格设计，希望能将其在网页设计中的作用弄得更为清楚！

原文地址：http://andymao.com/andy/post/82.html

作者: 小毅发布时间: 2007-11-09

从这种角度来分析页面结构，很独到

希望楼主能够在深入研究，形成完善的理论……

作者: mienflying 发布时间: 2007-11-09

再顶一下，刚开始学CSS时就是看老大的教程来的

作者: mienflying 发布时间: 2007-11-09

不是很明白``

作者: lichunhua 发布时间: 2007-11-09

一块弯曲的金属板，一块光滑平直的金属板，人们往往喜欢观看平直的那块。
趋于文字的影响，人们喜欢从左到右观看信息，并且视线的移动是平移的。
大阅兵时，整齐的队形，统一的服饰，会让我们感到很舒服。

由此可以看出，平整的，顺序的，规律的，是有亲和力的表现方式。网页的栅格就是辅助我们达到此设计的目的。
浏览者的视线是很挑剔的，他们不喜欢观看太多无用的东西，也不喜欢让自己的视线在网页里走太多的“弯”路。

除了视线的平和浏览，色彩对视线的牵引显得更为重要，毕竟我们接受信息还是色彩，如上三图栅格，设计师在设计页面的时候，我想除了几条固定版式的栅格线，其他栅格线都是有很多余地的，也许会随着设计的效果而改变。主栅格线约束全局，次栅格线被全局设计约束！

作者: blovefeather 发布时间: 2007-11-09

引用:

原帖由 blovefeather 于 2007-11-9 11:08 发表
一块弯曲的金属板，一块光滑平直的金属板，人们往往喜欢观看平直的那块。
趋于文字的影响，人们喜欢从左到右观看信息，并且视线的移动是平移的。
大阅兵时，整齐的队形，统一的服饰，会让我们感到很舒服。

...

栅格设计理论的基础还需要对黄金比例、九宫格等知识要有所了解。只有积累了这方面的知识才能对栅格设计的核心意义有所领悟！

作者: 小毅发布时间: 2007-11-09

小毅的话里我听到了一个在设计界里面流传很久的介定：

不入流的设计师，不知道什么是网格，因此你看不到任何“规矩”。

入流的设计师学会了在网格中创作，你可以在他的作品中看出来。

高阶的设计师把网格藏起来，你看不到他怎么藏的，是在纸上还是心里。

作者: QUESTER 发布时间: 2007-11-09

那么，apple的这个页面应该可以说是非常完美了！

确实这样分析过之后，页面的结构是非常清晰的……

作者: mienflying 发布时间: 2007-11-09

如果从九宫格，根方二上讨论，帮小毅补充两张图！
就拿第一个图开刀。
大家可以思考几个问题：
1.为什么第一眼不自觉地看logo呢？
2.为什么logo下面字体在那个位置呢？
3.为什么白块download区域高度是下面黑块的1/2呢？

原因就是因为主体形象图部分设计师采用的九宫格法。
九宫格中四个交汇点是最吸引视线的位置。
左上点为logo、
左下点为字体中心
右上点，右下点把白块，黑块区域三等分。
见图01

细心的人会发现右侧白块,黑块部分没有完全布满格子.下面你会感受到微软的设计师确实够严谨.
见图02

跳出九宫格,以整个页面为对象,以九宫格上下线为单位,整个页面是以根方二分割线法为主框架.白黑块没有布满的部分以局部服从整体跟随右纵线对齐,左纵线卡上logo与九宫格左线吻合.

已经可以清晰地看出微软主站是以二分割线法为主框架嵌入九宫格法确定的版式!
以上我个人见解,希望大家踊跃讨论!

附件

01.jpg (78.4 KB)

2007-11-9 22:54

图01

02.jpg (79.52 KB)

2007-11-9 22:54

图02

作者: blovefeather 发布时间: 2007-11-09

我这段时间在思考一个问题：浏览者在看一个作品时潜在的栅格对于浏览者审美的影响。也就是说为什么有的作品可以得到大部分人的认可与肯定，其中栅格占有了什么样的作用？得不到肯定的作品是否与栅格的紊乱有关？耐看的作品其栅格有什么样的特性？

作者: 小毅发布时间: 2007-11-12

韩国的就和欧美的风格差异比较大了

以后要在设计中多融合栅格的思想

谢谢楼主受益了

作者: Marilynma 发布时间: 2007-11-12

引用:

原帖由小毅于 2007-11-11 19:11 发表
我这段时间在思考一个问题：浏览者在看一个作品时潜在的栅格对于浏览者审美的影响。也就是说为什么有的作品可以得到大部分人的认可与肯定，其中栅格占有了什么样的作用？得不到肯定的作品是否与栅格的紊乱有关 ...

其实很简单，你看到一个别出心裁的建筑的时候，你在欣赏和惊叹之余，会去想到它再建造过程中的脚手架吗？

这里给出一个建筑设计图，是我所在的卫星城市未来即将建成的新地标建筑，很令人赞叹的是，该建筑的设计师是中国人，叫马岩松，此事被媒体称为：加拿大超高层项目中标,中国建筑师的新时代。自豪一下吧！

另：有很多“新兴”设计师，觉得没有束缚才是艺术，才能成为大师作品。其实我想说：心中有“规矩”，但是不表现在外；和心中没规矩，根本表现不出来。这是两种完全不同的境界。对于外行来讲，可能看起来没有区别，甚至有些人还会沾沾自喜，觉得自己也有点“大师气”，由他！能发现自己的不足，并学会正确的思考，知“今是而昨非”，就是成长的开始。

作者: QUESTER 发布时间: 2007-11-24

继续啊,虽然今天设计的东西被淘汰了,但是在这里又受益了不少...非常高兴..

作者: 80882267 发布时间: 2007-11-24

好贴子，学到不少，顶。。。。。。

作者: ouyangwei 发布时间: 2008-01-20

不错~~
但不知道12楼的签名是什么意思~~

作者: azoe 发布时间: 2008-01-21

不是很明白

作者: mosesdesign 发布时间: 2008-01-27

12楼是说，他们两个之间是另一个在和他保持距离

作者: wqxjx 发布时间: 2008-01-27

谢谢..已经认真阅读...

作者: allcx 发布时间: 2008-01-29

不明白``````

作者: MEI0207 发布时间: 2008-01-29

先顶了再仔细看

作者: slj20 发布时间: 2008-01-29

学习了。。不过不事很明白。如何进行栅格化设计呢？

作者: xiaoyu23 发布时间: 2008-01-30

学习中...

作者: blmei0086 发布时间: 2008-01-30

不明白，九宫格在网页中怎么用，我只知道根据摄影的黄金分割原理布局，恩，这个黄金分割也是用到九宫格，但感觉和楼主说的不太一样

作者: huxj62488 发布时间: 2008-01-30

其实这个理论简直是废话。。。。没有人会把web当作平面来设计（特殊应用另当别论）

我这个说法的意思是，所有的web designer都会自然的把水平和垂直的区块对齐。

像第三个例子的图，完全就是瞎凑合。

希望新人不要被困惑了。

作者: VitaminC 发布时间: 2008-01-30

好多东西啊，真是勤劳

作者: milaoshu1234567 发布时间: 2008-01-30

谢谢小毅和羽蓝的讲解``很好``期待续集``小弟开始涉足平面设计领域``知识还很肤浅``看到你们的讲解``太感动了``心开始燃烧!

作者: tianao723 发布时间: 2008-01-30

顶一下这类帖子我喜欢可以认知好多东西

作者: hanyuying 发布时间: 2008-02-01

请问羽蓝:根方二分割线法是怎么回事?

作者: bluefire2006 发布时间: 2008-02-04

完全不同意这种说法.众所周知的.欧美网站页面相对简洁对称.如果说这是一种设计的"必要"的话.那韩国网页可谓完全无美感可言.可实际上.韩国网页还是比较能让大众认可的

作者: wxjbull 发布时间: 2008-03-03

很认同，但是还不是特别明白啊

作者: shuny 发布时间: 2008-03-03

引用:

原帖由 bluefire2006 于 2008-2-4 20:30 发表
请问羽蓝:根方二分割线法是怎么回事?

不好意思才看到。
黄金分割比例是1：1.618 根方二比例其实就是1：1.414

我简单画了一个根方二比例矩形，你参考一下。

附件

未标题-1.gif (8.32 KB)

2008-3-3 21:20

作者: blovefeather 发布时间: 2008-03-03

学到了不少东西.
这里真是高手如云啊..刚来论坛的第一贴给你..举例子看懂了5 6.呵呵..继续学习..

作者: xieweizz 发布时间: 2008-03-04

收益非浅啊.学到很多。

作者: nopromble 发布时间: 2008-03-04

是不是我们现在的时代走的太超前了
大家都忘了吗  网页是新兴的多媒体  报纸是老式的传统平面媒体
但是不管怎么样总是有媒体两个字  既然都是媒体肯定有相通的地方
回头看看各大报纸杂志  哪个不是网格式布局字都是方块的  肯定得像蜂窝一样的码放怎么会不形成格子呢
所配的图片也“暗合着格子的道理”  那只是为了活跃氛围填充空白这种设计理念早在百年前就兴盛起来了

多说无益  同志们应该学会比较观察总结楼主转的这贴总结的没错只是大伙的反应让我吃惊  更有＋3更为惊叹
过了是有点过了

注意：此帖不是攻击楼主版主  有点感时悟事罢了

作者: artofmine 发布时间: 2008-03-05

总结：黄金分割九宫格

作者: mythosworld 发布时间: 2008-03-14

引用:

原帖由 artofmine 于 2008-3-5 09:14 发表
是不是我们现在的时代走的太超前了
大家都忘了吗  网页是新兴的多媒体  报纸是老式的传统平面媒体
但是不管怎么样总是有媒体两个字  既然都是媒体肯定有相通的地方
回头看看各大报纸杂志  哪个不是网格式布 ...

我想可能是因为，并不是这里所有的人都去做过报纸或者平面媒体的设计，但是看到这里的大部分的人却是在学习着做web的设计。
做报纸这类传统设计的时候要求非常严格，因为就是那么几个报社，他们不允许出错，所以设计者都必须经过培训；
但是世界上的网站却多的数不过来……没办法对每个网页设计者都进行培训，而他们都是在自学，这种理论的知识接触的比较少。
所以我一看到这篇文章的时候，马上收藏了。

作者: anuiz 发布时间: 2008-05-05

真的是学海无边啊！

作者: tonijoy 发布时间: 2008-05-05

感谢楼主和羽蓝的讲解,谢谢羽蓝对根方二分割线法的讲解!~开始有点糊涂看了下图明白了!~学习中......

作者: ivan19840320 发布时间: 2008-06-16

阅读了！

作者: eagle0101 发布时间: 2008-06-25

恩,好贴。
总是想打破这种格子式的设计方法，原来还有很多道道在里面，受教了。

作者: magicjam 发布时间: 2008-07-14

我可以这样理解吗？
  div是这种栅格在页面上应用的呈现方式？

  另外我觉得韩国佬的style更有市场的说，可能喜好也不一样吧，其实我也觉得欧版页面很耐看、很耐用的

作者: loversnie 发布时间: 2008-07-14

貌似好多页面都能画出这样的格子来吧,无关美丑.

作者: TBlack 发布时间: 2008-07-14

正白研究IBM的首页的层次感
没想到栅格也很重要啊
谢谢分享

MS IBM的层次感来自于阴影的使用
现在比较喜欢阴影这东西了
对层次感突出内容很有用啊

作者: kongwoo 发布时间: 2008-07-14

又是一帮红学家……

作者: billylin 发布时间: 2008-07-14

不错~！

作者: luqingwt 发布时间: 2008-07-14

哇塞。没看明白。

收藏了慢慢学习。

作者: lengsehuoyan 发布时间: 2008-07-14

24楼的说得有道理，能不能讲几个反面的例子，最好是大公司做得不好的。

作者: ling3492 发布时间: 2008-07-26

说的很对。。。

有一本书是专门讲这个网格的。书很薄，内容很深厚

作者: scoo 发布时间: 2008-08-08

此言差也。。。有本专门讲网格的书。去看看吧。。你会受益匪浅的。

作者: scoo 发布时间: 2008-08-08

将页面全部变成灰色，看是否层次清楚，也是一种看页面层次以及重点是否到位的做法，不知有没有人这么尝试过呢？

作者: 26z2006 发布时间: 2008-08-09

只是设计的一种方式。

作者: artbt888 发布时间: 2008-10-08

分析得很全面啊，有收获！

作者: hua460 发布时间: 2008-10-08

这也叫栅格设计?随便画几根线出,岂不是误人子弟

作者: minepace 发布时间: 2008-10-11

网页栅格系统研究（2）：蛋糕的切法

首先澄清一个应用场景问题。研究（1）中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受青睐。

有个很有意思的网站是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 栅格：
这样，我们就在宽度和高度两个方向上都实现了栅格化。

作者: sagil123 发布时间: 2008-10-23

总算是发完了。不过忘记把我的疑问提出来了yahoo上面展示的12*80，是基于什么基础上面分的呢？并没有像栅格那样有一定的规律，那要在什么样的情况下面去理解成不同的分法啊？困扰我一上午，才下决心发的这些。。。

作者: sagil123 发布时间: 2008-10-23

引用:

原帖由 sagil123 于 2008-10-23 12:07 发表
总算是发完了。不过忘记把我的疑问提出来了yahoo上面展示的12*80，是基于什么基础上面分的呢？并没有像栅格那样有一定的规律，那要在什么样的情况下面去理解成不同的分法啊？困扰我一上午，才下决心发的这些。。。

yahoo的12*80在哪里?我好像没找到

作者: jsuper 发布时间: 2008-10-23

Yahoo!是很标准的 24 x 40 栅格，说错了。。。上面不是有一些被粉红竖条覆盖的网站页面吗？我说的是那些！。。。

作者: sagil123 发布时间: 2008-10-23

哦，你的问题是，为什么yahoo这三栏要分成这三个宽度？还是想问yahoo为什么用24x40？

作者: jsuper 发布时间: 2008-10-23

对的，还有就是这20*40是怎么得来的？我看了没明白

作者: sagil123 发布时间: 2008-10-23

引用:

原帖由 sagil123 于 2008-10-23 15:01 发表
对的，还有就是这20*40是怎么得来的？我看了没明白

你给了一个公式：
W = N * C - g
如果总宽950和三列的宽度150、430、350是已知的话(量一下可以得到)。
那么总宽的公式应为950＝N*C-10
即960＝N*C
左160=N1*C
中440=N2*C
右360=N3*C
N:N1:N2:N3的比值就是960:160:440:360
即：24:4:11:9
(可以用N＝N1+N2+N3来验证一下这个比值)
因为这些都是不可再除的整数，所以N＝24
代入W = N * C - g
950＝24*C-10
得C=40

作者: jsuper 发布时间: 2008-10-23

网页的栅格设计思考

引用:

附件

引用:

引用:

附件

引用:

引用:

引用:

热门阅读

热门下载