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

如今，栅格系统也已经被运用到网页中。它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

栅格系统的起源：

1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能性的新字体。

委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。

为什么960？

1024 x 768 的分辨率下，打开Firefox：

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

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(360) = N(2^3 * 3^2 * 5) = 22
    N(480) = N(2^5 * 3 * 5) = 22
    N(720) = N(2^4 * 3^2 * 5) = 28
    N(750) = N(2 * 3 * 5^3) = 14
    N(800) = N(2^5 * 5^2) = 16
    N(960) = N(2^6 * 3 * 5) = 26
    N(1000) = N(2^3 * 5^3) = 14
    N(1024) = N(2^10) = 9
    N(1440) = N(2^6 * 3^2 * 5) = 34
    N(1920) = N(2^7 * 3 * 5) = 30

结论：

　　要使得N(width)最大，width的取值有两个系列：

　　A系列： …, 320, 720, 1440, …

　　B系列： …, 480, 960, 1920, …

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

960栅格化系统：

960栅格化系统是由Nathan Smith创造的，具体来讲，就是基于960像素宽度，通过划分具有规律的分割，来提高网页开发效率。

960栅格化系统系统（或者说适应型css构架）早期主要用来进行快速原型制作，减少重复单调的工作，但是目前，它在网页设计开发项目中开始扮演非常重要的角色了。它将为你的设计提供一个坚实的坐标基础。

最初有两种变形：12栅格和16栅格。它们互补保证了系统的融通性。后来产生了更多的衍生。上图展示了16栅格到3栅格的案例。BBC和yahoo的门户网站就采用了栅格化体系，从而非常好的规范了网站的信息布局和疏密程度。

在960宽度下12栏的删格设计中，可以有如下的单位宽度可选：
60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 和 940.

在960宽度下16栏的删格设计中，可以有如下的单位宽度可选：
40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 和 940.

在网站设计改版部分，如何选择合适的屏宽（栅格化系统）来为网站做改版呢？

一、分析现有网站用户的显示器分布情况
为满足大多数网站用户的使用情况，需要收集现有网站用户用的显示器分辨率是多少？是以宽屏为主还是以窄屏为主？通过分析网站流量统计当中的数据，我们不难获得用户所能接受的最大屏宽数据，从而为下一步选择合适的栅格化系统提供依据；

二、结合改版风格确定屏宽设计
不同的栅格化系统，具有不同的网站风格效果。常见的三种形式如下：

传统型栅格化风格

以960到980像素为屏宽的网站设计，是网页设计师设计网页的标准宽度，可应用于绝大多数的网站建设项目。这是因为，960到980像素是最适合人眼视觉接受范围的宽度，且和传统的1024×768像素的显示器分辨率相匹配，和最大限度的发挥其长处。

精细型栅格化风格

以900到940像素为屏宽的网站设计，属于细腻、精致的风格展示，多用于界面设计工作室，品牌策划公司。精细型屏宽设计，如同瘦身美女一样，处处透露出其流线美，没有任何一丝多余的‘赘肉’；

宽屏型栅格化风格

980像素以上的页面设计，多应用在综合门户、网上商城等内容丰富的站点设计当中。宽屏营造大气、丰富的视觉冲击力，给人无限的遐想空间，因此也可用于个性艺术网站当中，例如婚纱摄影网站设计，可通过大幅的精致照片，烘托品质感受。但是，使用宽屏设计需要非常谨慎，因为使用宽屏设计的前提是舍弃一部分显示器分辨率不高的用户，毕竟，使用1440×900像素及以上分辨率的用户目前还仅占少数。

因此，选择何种宽度的栅格化网页设计系统，需要结合现有用户情况及网站改版的风格定位。企业还可借鉴网站制作公司的专业建议来决定最终的选择。当然，不论使用哪种栅格化系统，仅仅是为了辅助网页设计师进行更好的创造，最终的网站作品取决于设计师对于整体定位的把握和素材的运用。

960栅格系统设计延伸阅读>>

960网站实例：http://960.gs/

刚开始的时候，一切都很棒。客户提出他们的需求，你也满怀期望。充满激情和兴奋感。
客户：新的网站一定会很棒。
设计师：岂止很棒？肯定会难以置信地棒。它会像遨游在外太空的雄鹰一般不可思议。

客户给你看他们现在的网站，你们一起嘲笑它是如此糟糕。
客户：哈哈，这都是什么烂玩意！我们上次请的设计师简直是个白痴。
设计师：是啊！怎么可能做成这样？！简直就是在对全人类犯罪。

于是，你重新设计了网站。新网站看上去美观，用起来也很好。这简直就是完美设计的最佳范例。
设计师：噔噔噔噔！看！
客户：我喜欢！看上去太棒了！但是……

还需要做些“小”调整
客户（想）：这个设计很完美，但我作为CEO，有责任提点改正意见来让自己感觉自己的工作做到位了。同时，我得用“用户体验”，“转化导向”这样的术语来显得自己聪明些，尽管我几乎都不大会用电脑。
客户：你能设计得更“跳”一点么？它需要更“鲜明”些。看上去感觉好像不太对。
（作者注：客户确实跟我说过这样的话。直到今天，我还是不太理解在网页设计上“跳”和“鲜明”到底是什么意思。我也不知道怎样以他人的感受来设计网页）

所谓的小调整开始变多，很快就变成不那么小了。
客户：我想了一下，决定把字体调回Comic Sans. 另外，你能搞一个镜头光晕效果么？它们看上去非常Web2.0. 另外，这个网站绝对不能太“线条化”了。当我看这个网站的时候，我看到的都是一行一行的。你能处理一下么？
（作者注：确实有个客户这么对我说过。这个设计里绝对没有任何水平标尺或者线条之类的东西。事实上他说的是<div>啊<p>啊之类的代码生成的矩形区域）

客户让别的人参与了进来。
“看上去不错，不过我还想听到更多的意见，朋友，同事，叔叔甚至是我的宠物仓鼠”。
客户：我让我母亲也加入讨论。她在1982年设计过一张面包促销宣传单，所以你可以说她也是有设计的眼光。
客户母亲：你排的这个设计需要点亮色，看上去太暗了。加点粉色怎样？再放上一只小猫。人人都爱小猫。
（作者注：我确实曾经遇到一个客户让他的母亲也参与到设计流程里，好让她提出批评和建议）
 
所有希望都破灭了。
你开始幻想别的职业，比如靠挖沟来生存或者给老人搓澡。
客户：好的。现在是这样，我的狗Miffles可是个关键人物。它可以说是我生命中最重要的部分。我希望你能加上狗的“意识流”，这样看上去就像是Miffles在和来访的用户说话。我会给你几页Miffles可能会说的话，比如“我喜欢美食”，还有“嗨！欢迎访问我的网站，我是一只小狗，你可以和我握手^^”
(作者注：这绝对不是我编的。就有一个客户这样要求过。我还从来没有像那会一样那么想用车用蓄电池敲一个人的头)

你再也不是一名网页设计师。
你现在变成了一只绘图程序里的鼠标，而你的客户可以通过语音，email或者聊天软件来直接控制你。
（作者注：我曾经遇到一个客户拿走我的设计稿后，自己直接在Photoshop上进行修改，然后把改过后觉得是他们想要的效果再发给我。在我收到他的第13个修正版后，我炒掉了他。）

怨念就此诞生。
客户完全忘了，他们是雇佣了你，网页设计师，来帮他们设计一个好产品。想象一下，如果你是一个设计商业飞机涡轮的工程师，他们还敢掺和进来么？
客户：现在这个设计终于称得上是“跳”出来了！
设计师：饶了我吧……

[来源]

网页设计师或站长在网站设计中经常进入误区，这里列举了经常10大网页设计误区，design error 后时代。

       1、搜索引擎不友好

　　搜索引擎对于难以处理和识别的打字稿、复数、连字号等等各种各样的问题，搜索的准确度会降低。显然，如果搜索引擎刻意去迎合这种错误使用的话，会伤害到所有的搜索使用者。

　　一个相关的问题是，搜索引擎区分结果是依靠文档的重要性，而只是按照内容关联次数简单地进行结果区分。

　　当找不到信息的时候，搜索是用户的救生索。即使有高级搜索功能，建议还是使用简单搜索，搜索形式应该是一个简单的录入框，就像我们常见的那一种。

　　2、使用PDF文件做为在线阅读

　　用户讨厌在浏览的时候跳出PDF文件，因为那会打断用户的浏览过程，因为普通的浏览器按钮无法工作，因此即使如打印或保存文档这样简单的事情也会变得复杂。由于其版面设计是基于纸张优化的，因此文字的字体很少会和用户的流量其窗口相适应。没有了平滑的滚动浏览，有的只是超小号的字体。

　　更糟糕的是，PDF文件内容是分块的，很难浏览。

　　PDF是对于印刷及发行手册等和其他需要打印的大文件来讲是很合适的，使用它的目的只是为了保留它的信息使其网页上浏览成为现实。

　　3、未改变已访问链接的颜色

　　一个好的浏览历史能够帮助你了解目前的位置，因为那是你浏览的起点。知道过去和现在的位置反过来使得决定下一步去哪里变得容易了。链接是这些浏览过程中的一个关键因素。用户可以不去访问那些没有用处的地址，相反，他们会访问那些对他们有帮助的链接地址。

　　最重要的是，他们知道哪些网页已经访问过了，这样就不必一次又一次访问同一个历史页面。

　　但是这些好处只是基于一个重要的假设：由于网站提供不同的颜色显示，用户可以分辨出哪些链接访问过，哪些链接没有访问过。如果访问一个链接后颜色没有发生变化，那么用户很可能会感到迷惑并无意中反复访问同一历史页面。

　　4、文字未排版

　　将所有文字堆积在一起是一种可怕的体验，浏览这样的文字将是痛苦的经历。

　　在线写作，并不是为了打印，需要让用户能很好地阅读，下面是几个改进的要点：

　　使用子标题

　　使用列表

　　突出关键字

　　使用小段落

　　反金字塔结构

　　简单的写作风格

　　5、固定字体大小

　　CSS样式不幸让网站有权禁止浏览器的“改变字体大小”的功能，并使得网站有一个固定的字体大小。对于大多数人的年龄超过40岁的人来说，这个固定地文字大小实在太小了。

　　尊重用户的喜好，让他们按照自己的需要修改文字的大小，同时，明确字体大小是相对的，而非绝对显示像素的数量多少。

　　6. 网页标题搜索引擎不友好

　　搜索是用户发现网站的最重要途径，搜索用户找到一个独立网站的最重要的方法。网页的标题是你吸引新用户或老用户从搜索列表中定位到你网站的主要工具。

　　网页的标题文字是在<title>标记之间的文字，并通常作为搜索引擎结果列表中的链接文字。搜索引擎一般只显示标题开头66个字，是真正的缩略内容。

　　网页标题也用户将一个网址加为书签时的默认文字，对于你的主页，应该以公司名称开头，接着是网站的简介，不要用“The”或“Welcome to”做为开头文字。

　　对于其他网页来说，标题应该是将具体内容的概要文字说明，由于网页标题是浏览器窗口的标题，也是用户任务条上的标签，多个窗口下将会显示每一页的标题，因此，如果你所有的网页标题字都相同的话，对于开了多个窗口的用户来说，你网站的可用性将严重降低。

　　7、所有的东西看起来都像广告

　　有选择地吸引注意力是相当有力的途径。用户已经学会了对挡在眼前的那些目的性很强的广告采取不予理睬的态度。这也就是为何点击率每年以半数速度下降，网络广告根本不起作用的原因。

　　不幸的是，这也使得用户忽视了那些看起来很像广告的设计样式。毕竟，当你不理会某些东西时，就不会仔细地研究它并搞清楚它是什么。

　　因此，最好避免任何类似广告的设计。这一指导方针所传达的含义随着新的广告形式出现而变化。目前遵循以下规则：

　　无视横幅：着用户将不会把注意力放在任何看似横幅广告的东西，这取决于它的形状及位置。

　　避免使用动画：用户会忽视那些闪烁的文字或其它侵略性很强的动画。

　　净化弹出窗口：用户在弹出窗口完全打开前就会将其关闭，有时是带着极端厌恶的情绪。

　　8、违反设计惯例

　　一致性是最重要的可用性原则之一：当事物遵循相同的原则运作时，用户不用担心发生意外，因为他们根据先前的经验已经很清楚将会发生什么事情。就像你每次在牛顿的头顶上放下一个苹果，它一定会砸中他的脑袋一样。

　　用户的期望实现得越多，他们就越感觉是自己在控制整个系统，并且更加喜欢它。相反地，用户则会感到可靠程度不够。想想，当我释放苹果时，它变成了西红柿并朝着天空蹦出一英里，那多荒诞！

　　9、打开新的浏览器窗口

　　打开新的浏览窗口就像一个吸尘器推销员在上门推销时，直接将烟灰缸里的杂物倾倒在消费者家中的地毯上。拜托！不要用任何窗口污染我的屏幕（尤其在当前操作系统低劣的窗口管理技术下），如果我需要一个新窗口，我会自己打开的。

　　设计者打开新窗口的本意是要让用户留在他的站点上。但是却忽略了控制用户的机器所带来的负面效应，这种策略恰恰弄巧成拙，因为当用户想通过“后退”按钮返回先前的站点时，已经做不到了。用户通常注意不到新窗口已经被打开，尤其当他们的显示器很小，而窗口又正好是最大化时。因此，当用户想要返回原来的站点时，面对的却只是一个不可用的灰色“后退”按钮。

　　点击链接的标准结果是目标页面在当前的浏览窗口中加载，取代现有页面。出现其它的任何情况都违背了用户的期望，令他们感到对网络的控制不稳定。用户痛恨那些突然弹出来的窗口，当用户想要在新窗口打开一页的时候，会自己使用“在新窗口打开”功能，因此不要用一些代码来干扰了用户浏览器的操作。

　　10、不回答用户的提问

　　用户是因为某个目的才访问你的网站。他们方式可能是想购买你的产品或者其他，但最终却失败了，因为网站没有提供用户寻找的资料信息。

　　事实上问题远没有这么简单，如果你不告诉用户具体情况，用户就会以为你的产品或服务不能满足他们的需求，因此用户就不会购买你的产品，或者有一些信息，深深隐藏在各种文档之间，用户没有时间阅读所有这些隐藏的信息，因此也就认为它们不存在。

　　不回答用户提问的最坏的例子是拒绝提供产品和服务的价格清单，没有任何B2C的商务网站会犯这种错误，但是这在B2B中却普遍存在，大多数“企业解决方案”的提出，让你不能告诉用户他们适合100个站点、还是10万个站点人。价格是最主要的作用是便于想用户提供相应的产品，避免提供一个不成熟的产品给用户。

　　即使是B2C网站有时页会忘记在所有地方提供相关产品价格清单，例如在目录页或者搜索结果页，要知道，在这两种情况下，价格是关键，它让用户能够区分不同的产品并找到最合适的目标。

　　其他各年的十大错误列表

　　2005年的十大网站设计问题：

　　一．易读性的问题－让使用者决定浏览时字体大小。

　　二．没有标准的超连结表示

　　三．Flash的使用

　　四．网页无法呈现网站内容

　　五．搜寻的重要

　　六．浏览器的差异

　　七．讨厌的框架

　　八．没有链接相关资讯或是公司资讯

　　九．固定的页面宽度

　　十．不适当的图片放大连结

　　2003年的十大网站设计问题：

　　一．主题不明确

　　二．更改以存档的链接地址

　　三．内容没有注明日期

　　四．缩略图看不清细节

　　五．图片的ALT文字过于冗长

　　六．不给用户自定义选择

　　七．过长的商品列表选择

　　八．商品仅按照商标排序

　　九．过于限制用户录入的信息

　　十．页面包含指向自身页面的链接

　　1999年的十大网站设计问题：

　　一．破坏或减慢“后退”按钮

　　二．打开新的浏览窗口

　　三．使用不规范的GUI（图形用户界面）部件

　　四．缺少自我介绍

　　五．缺少存档

　　六．移动页面至新的URL地址

　　七．标题和内容不匹配

　　八．对最新的网络热门紧追不舍

　　九．服务器访问速度过慢

　　十．所有的东西看起来都像广告

[原文][译文]