网页的栅格设计

设计中常见的问题网页设计中的脏、乱、差，是我们在设计过程中常会遇到的问题。脏-是由对色彩使用不当所产生的，而色彩使用不当产生的不好效果也分为："花、灰"，花哨、灰头土脸也就是这里所说的"脏"。乱-这里的乱不是指用色乱，也不是指内容乱，而主要是指布局乱。（本课的重点）差-而"差"基本上是由于我们的技法上不够娴熟所产生的。比如细节上的处理不到位，某个局部的效果制作得粗糙。这可以称之为"差"，特别是在处理带有2D效果的设计作品时，这种情况常会出现。网页的栅格设计全文共56页，当前为第1页。什么是栅格设计？什么是栅格系统？

栅格系统是一种框架，是一种可以被用来搭建”组合”的系统。栅格系统无处不在：城市布局、杂志、报纸和大厦的外观等等。栅格系统可以用”黄金分割”，一种几个世纪以来一直被认为是具有美感的”比率”，来设计。栅格设计的特点是重视比例、秩序、连续感和现代感。以及对存在于版面上的元素进行规划、组合、保持平衡或者打破平衡，以便让信息可以更快速、更便捷、更系统和更有效率的读取；另外最重要的一点是，负空间的规划（即：留白）也是栅格系统设计当中非常重要的部分。栅格的历史：

二战以前的栅格系统是非常简单和公式化的构建在基准中的，各个区域四周的矩形结构。他们一般受限与制作他们的技术，也包括偶尔点缀一张图片的文字纵栏。那一时期的栅格系统很少使用空白作为设计装饰。这种状态一直持续到几位著名的设计师打破了当时的设计习惯。他们提议了一个新的系统，一个更灵活的，能给予设计师更多开发工具的系统：模块栅格

网页的栅格设计全文共56页，当前为第2页。单纯的文字是没办法让设计师们耐心的看下去的，所以还是老办法，用示图来作为讲解模型。这次我们使用的网页是微软、IBM、2个公司网站来讲解。希望通过分解这2个公司的网站设计，能把我所理解的栅格设计传达出来。废话少说，看示图：网页的栅格设计全文共56页，当前为第3页。网页的栅格设计全文共56页，当前为第4页。我们看到微软公司的网站设计中并没有什么明显的线去区隔不同的区块，但是当我们把当蒙上一层纱，然后用实线把每个部分都画出来这时我们发现这个网站其实是处在一个栅格阵列中。那么这个阵列中的内容已经很明显了，并且我们从中发现了很多区块在页面中的位置居然是那么的有条理，并且有一些并不在一起的区块，居然也有一定的规律。当然有人可能会说，都用线画出来了当然显得条理，整齐了。问题就在于这里，我们的网站都可以用纵横线区分开。但是一些设计得不好的网站的纵横线可能数量非常的多，纵横线的数量过多并且都挤在一直，这就说明网站的布局显得太乱。或者是过于条理而变得布局平均，没有对比，缺乏美感。其实只要用这样的方法去分析一下自己设计的作品也许就能从中看到问题所在。

网页的栅格设计全文共56页，当前为第5页。网页的栅格设计全文共56页，当前为第6页。我们看到IBM的栅格与MS的有很大的不同，IBM中还出现了一些差不多大的栅格，但是这里要注意其实这些栅格是由于底部很小的几个区块所产生的，并且这凡个区块还可以看作是一个横向的区块。我们从这里可以看到IBM的布局设计是对称的。但是这种对称却是在离在纵横线上却不容易注意到的。这是很高明的手法。网页的栅格设计全文共56页，当前为第7页。从这2个网站中我们可以看到2种不同风格的栅格设计，虽然有所不同，但我们依然可以发现两者都会尽可能的把最重要的信息放在视觉中心点上，不论是放在左边的还是右边的或是中间的，他们都得到了最大的栅格区，得到了足够的重视！我们的视觉中心也自然盯在了上面！

网页的栅格设计全文共56页，当前为第8页。960的秘密首先澄清一个应用场景问题。，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，一部分网站没有也不需要栅格系统。网页的栅格设计全文共56页，当前为第9页。使用960栅格的网站网站首页页面宽度px

Yahoo!

950

淘宝950

MySpace

960

新浪950网易960

LiveSearch

958

搜狐950优酷960

AOL

960网页的栅格设计全文共56页，当前为第10页。上面列举的都是Alexa全球排名前100的站点，它们的首页宽度为950px/960px.除了微软的LiveSearch,这些站点有个共同特点：页面结构较复杂，都可以认为是门户型网站。再来看看Google,YouTube,Facebook,Flickr!,eBay等知名站点，它们的首页宽度没什么固定规律，共同的特点是：功能专一，页面结构相对简单。根据上面的简单分析可以认为：当搭建页面结构复杂的门户型网站时，开发工程师们不约而同地都选择将页面宽度定为950px/960px.这是一件很有趣的事情，为什么要选择这个宽度呢?这个宽度值究竟有什么魔力?网页的栅格设计全文共56页，当前为第11页。神奇的960计师们对苹果情有独衷。在1024x768的分辨率下，打开Firefox网页的栅格设计全文共56页，当前为第12页。自然状态下，Firefox窗体的大小约为974x650.减掉左右两边7px的边框，网页的实际大小为上图中的红色部分，高宽为960x650.有趣的960就这样出现了。是的，可以认为一切就这么简单。栅格系统最早出现在平面设计领域，设计师们爱用苹果，苹果下浏览器的默认宽度为960px,于是960就这么“自然”地出现了。数字背后的奥妙上面的“自然”出现，细究自然是不让人信服的。苹果系统的设计者们在没有喝醉酒的情况下选择了960，而不是其它什么1000之类的整数，自然另有奥妙。网页的栅格设计全文共56页，当前为第13页。科学界有很多问题都可以归结到数学问题上，我们也从数学着手：

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网页的栅格设计全文共56页，当前为第14页。根据上面的算法，可以得到：以下为引用的内容：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

根据直觉(严格证明也不难，不过还是留给数学系的学生去证明吧)，我们得到一个有趣的结论：网页的栅格设计全文共56页，当前为第15页。目前绝大多数显示器都支持1024x768及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度，可以看出960是非常合适的。这样，在目前主流显示器下，960就成为网页栅格系统中的最佳宽度了。(也许不久的将来，将会流行1440)细心的你也许会记得，本文开头列举的宽度值中，950也出现了好几次。950是怎么来的?和960是啥关系?网页的栅格设计全文共56页，当前为第16页。这就是我们要真正关注的950!将W的含义变为去除Margin的总宽度，公式变化为：

W=N*C-g将上面的公式实例化一下：

950=12*80-10

950=16*60-10

950=24*40-10网页的栅格设计全文共56页，当前为第17页。常见的960栅格种类12x8024x4016x60网页的栅格设计全文共56页，当前为第18页。三种切法，N越大，灵活度越高12x80的应用：网页的栅格设计全文共56页，当前为第19页。Yahoo!是很标准的24x40栅格网页的栅格设计全文共56页，当前为第20页。淘宝网目前只有商城上部分使用了栅格系统网页的栅格设计全文共56页，当前为第21页。网易很不错，采用的是16x60的栅格系统：网页的栅格设计全文共56页，当前为第22页。栅格系统具有以下优势：能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计网页的栅格设计全文共56页，当前为第23页。下面讨论栅格系统中的黄金分割。黄金分割黄金分割可以归结为数学问题：对于长度为1的线段，将其分成两部分x和1-x,使得：x/1=(1-x)/x化为简单的二次方程：

x^2+x-1=0正数解为：

x=(sqrt(5)-1)/2~=0.618这就是黄金分割。这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域，在管理、工程设计等方面也有着不可忽视的作用。(这是个自然界的魔数，类似的还有真空光速、普朗克常数、精细结构等等，罗马步兵方阵)网页的栅格设计全文共56页，当前为第24页。对于24x40的情景，最接近黄金分割的两栏布局是350:590,栏数比例为9:15.但实际使用时，因为窄栏经常用来做导航或放辅助信息，并不需要350px这么宽。因此实际情况下经常被采用的布局是：网页的栅格设计全文共56页，当前为第25页。上面讲的都是宽度方向上的栅格化，下面我们看看高度方向上如何应用。高度方向上的栅格还记得研究(1)中那张红红的很刺眼的图吗?注意高度值560也是很神奇的。

N(560)=N(2^4*5*7)=18

560/960~=0.583

N(560)比较大，同时可以让高宽比接近黄金分割。针对560,我们采用14x40栅格：网页的栅格设计全文共56页，当前为第26页。网页的栅格设计全文共56页，当前为第27页。参考书设计几何学——关于比例与构成的研究，（美）伊拉姆（Elam,k.），李乐山译，中国水利水电出版社，2004年7月。ISBN:9787508415628栅格系统与版式设计，（美）伊拉姆（Elam,k.），王昊译，上海人民美术出版社，2006年，ISBN:9787532245345书籍设计，（英）安德鲁·哈斯拉姆（AndrewHaslam），钟晓南译，中国青年出版社，2007年，ISBN:978-7-5006-7531-0网页的栅格设计全文共56页，当前为第28页。几种常用的布局一、骨骼型

骨骼型是一种规范的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上则严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。网页的栅格设计全文共56页，当前为第29页。网页的栅格设计全文共56页，当前为第30页。网页的栅格设计全文共56页，当前为第31页。二、满版型

版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉，是商品广告常用的形式。网页的栅格设计全文共56页，当前为第32页。网页的栅格设计全文共56页，当前为第33页。网页的栅格设计全文共56页，当前为第34页。网页的栅格设计全文共56页，当前为第35页。三、上下分割型

把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。网页的栅格设计全文共56页，当前为第36页。网页的栅格设计全文共56页，当前为第37页。网页的栅格设计全文共56页，当前为第38页。四、左右分割型

把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插，左右图文则变得自然和谐。网页的栅格设计全文共56页，当前为第39页。网页的栅格设计全文共56页，当前为第40页。网页的栅格设计全文共56页，当前为第41页。网页的栅格设计全文共56页，当前为第42页。五、中轴型

将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。网页的栅格设计全文共56页，当前为第43页。网页的栅格设计全文共56页，当前为第44页。网页的栅格设计全文共56页，当前为第45页。

六、曲线型

图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。网页的栅格设计全文共56页，当前为第46页。网页的栅格设计全文共56页，当前为第47页。七、倾斜型

版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。网页的栅格设计全文共56页，当前为第48页。网页的栅格设计全文共56页，当前为第49页。网页的栅格设计全文共56页，当前为第50页。八、中心型

重心有三种楷念。1、直接以独立而轮廓分明的形象占据版面中心。2、向心：视觉元素向版面中