看到网易这篇文章就像看到前几天腾讯CDC的那篇专题banner设计一样激动，无论哪个网站对于banner的设计都格外重要

写在前面的话

有人觉得做个banner放2张图，排几个字的事，一点技术含量都没有，像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的，其实一个banner可以研究的东西还是很多的，而且做一个banner是不难，难得是在短时间内做一个出彩的banner。门户的专题一般是编辑套模板拼成的，比较重要的专题，banner部分是由设计师来完成，一个banner的品质上去了，整个专题的质量感就上来了，所以这部分交给设计师来做也是重视品质的表现，这个毋庸置疑。但banner毕竟不比大型项目，从设计成本上说不可能给太多的时间给设计师，于是乎，设计师有时候是靠经验积累，有时候妙手偶得，质量也是时好时坏，更害怕的是当没有经验没头绪没有心情时，胸中无物，不知道如何下手，于是越急越乱，越乱越急，最后匆匆了事，这种状态下估计也出不了好的东西。在排除技术手段的前提下，如何通过一些经验的思考，让banner达到通情达意效果，也是我下面要说的，个人经验之谈，供大家参考。

·顾及需求方的频道定位

因为包含内容不同，门户网站各个频道有着不同的风格，所以设计师们做设计的时候也要考虑到如体育频道的运动感，财经频道的国际和高端等。

图2
/历史频道的专题，做出厚重沧桑的历史感还是很切题的。
/banner 赞助  10

·顾及此专题的定位

专题的定位有时候和频道的定位偶尔是有冲突的，如女人频道一贯的知性理性的大风格下，有时候会来一些可爱小女人，有时候有做温馨浪漫，在这种有风格冲突的情况下，我们还是以贴合专题的定位为主，当然也尽量做到不能背离频道风格太远。

从构成上讲，一个banner分为2个部分，一为文字，二为辅助图。辅助图虽然占据大多数的面积，但是不加以文字的说明，很难让用户知道这个banner要说明什么。要读一个人的喜怒哀乐，只要读其五官即可。在一个banner里面，标题文字起着五官一样的作用，所以个人觉得文字才是整个banner的主角。所以对于文字的处理，显得尤为重要，在文字处理时有几个小技巧，与大家分享。

·分清主标和副标，从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满，比较集中。

·如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不大的词。

·如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，频道名等。

一个banner最主要的是标题，但辅助视觉起着烘托标题文字的作用，然而这也是最有难度的一个活，设计师的个人风格和变现力在这里能够淋漓表现。文字和辅助视觉的关系，我这里列举了3个常见搭配方式，这几种方式搭配分别有不同的效果，从而产生不同感觉。

3种文字和辅助视觉常见的搭配方式：

1，   文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。

图9
/banner 赞助 胡子

图10

2，   文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。

图11
/banner 赞助 淑华

3，   主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。

图13

1，严肃话题也能做出新感觉

做新闻报道的时候，遇到严肃话题，一般的设计师，都会比较拘谨，不敢也不愿去做视觉上的创新。所以配到这种话题，画面效果一般都会比较模式化，信息量弱，感染力不足。这时候，设计师如果敢解放思想，去动脑子做一些创新，其实严肃话题做上新感觉，能够达到意想不到的效果。

图16
/主题文字埋没在洪流之中，让其有一种融入感。洪流、闪电、阴暗的天空、淹没的城市，画面灾难感很强，角落处的武警官兵抗洪，让整体灾难中透出希望，哀而不伤。设计师有时候不仅仅应拥有对画面掌控力，对专题主题的把握，也是作为一个设计师应该具备的素质。

2，轻松话题可以做出幽默感

有时候也会做到一些轻松感娱乐感的专题，在做这些专题的时候，设计师们就能更加放开了。

图19
/这个专题banner，做的很轻松很幽默。编辑说他的频道群里发，整个频道的人都笑翻了。

3，作品也能带点小情调

有时候来一些小的创意也会让banner增色不少。

图21
/摇滚的不是乐器，还是文字
/banner 赞助 竆

后面的话

有时候我觉得做一个banner，如做一篇文字，文字可以是小说，可以是诗歌，也可以是散文，形式多样；可以用比喻、也可以拟人，也可以排比，手法也是多样。做一个banner，有时候需要字斟句酌，有时候则要点到即止；有时候该放，有时候该收；有时候可以如苏东坡般登高望远、举首长歌，有时候又可如柳永般娓娓道来、触动心灵。你可以用不同形式和手法来表现，但相同处，通情达意，揭露主旨。本文主要从定位、文字、辅助图和艺术性上表达了我对于做一个通情达意banner的一些见解，让大家能从我的理解中对做banner有新的看法，当然，水平有限，不足处，欢迎指正。

转自网易UEDC http://uedc.163.com/2044.html

原始人带骨制的项链，为的是看上去很美。在身上弄纹身，显然也不是拿自己的皮肤当记事本用。（现代人中，michael scofield是个例外。）

现代人新修缮的前门大街。这条大街的北段，基本上是依照原有建筑翻新的，可以理解为新古典主义吧。南段则是新建的房子，由于没有明确的参照，设计师可以自由发挥，这给饱学了现代主义理念的设计师提供了机会，设计了很据现代主义的房子—无装饰的，平顶，方方正正的（也许可以节约建筑成本，至少在现代主义兴起的阶段是这样考虑的）。作为一条传统商业街上的建筑，使用了与周围大杂院一致的灰色，门窗上适当使用了一些传统元素。大概应该算是后现代主义吧。

前门大街南段

前门大街北段

由南至北走过来，明显能感觉出，南段显得更为冷漠，没人气，虽然最高只有两层楼，但走在其中还是会觉得压抑。与北段相比，同样是作为商业街，南段显得缺少亲切感，没有繁华闹市的氛围。当然这差异和在营业的店铺数量也多少有些关系。（前门大街重修后，正在招商，很多铺面都还没有商家入住，北段入住率更高些。）现代主义、后现代主义对追求纯粹的视觉效果“不感冒”，这使得这类风格的建筑视觉效果上相对单调、枯燥。

google的产品是清晰、简单的，它的设计是不特意追求视觉美感的。

adobe.com网站信息传达清晰、明确，同时通过视觉设计使网站看上去科技、有品味、有现代感、有… 在保证了信息传达准确性、高效的基础上使浏览者得到更好的体验。

对美的视觉效果的追求是人本能的需要。

然而，由追求视觉美感所引发出的一些问题又使得我们不得不提出一些要求、建议、原则来限制那些不恰当的视觉设计。

以下是我们已有的一些观点：
● 避免使用纯粹装饰性的图标。

● 链接应该用蓝色，非链接不要用蓝色。

● 不要使用英文作为装饰性元素。

……

这些纷繁的观点是不是可以再概括？
可以这样概括：
为了追求视觉效果的设计过程中，不应产生新的信息。

图标不可避免的会传达信息，无论是画个小旗子还是整个小房子，都会代表特定的含义，传达了特定的信息，所以我们之前说到，不要使用装饰性的图标，要用图标就是用图标表示特定的含义，比如，“添加”使用一个加号，“关闭”使用一个叉子…

蓝色在网页上通常表示链接，这个惯例使得蓝色也传达了特定的信息。那么，文字颜色不可以滥用蓝色。

英文也是文，虽然看着不如中文明白。对于绝大多数比较年轻的中国人，多少都懂些英文，在中文标题旁边加上英文译文，翻译的不准确反而会让用户误解，即使翻译的正确也是在增大信息量，显然没必要一个标题写两边吧~
这样说来，如果用大家都看不懂的阿拉伯文之类的放在中文标题下做装饰或许倒更好些，全当是个花边儿了…

“是否传达这个信息”应该是有计划的、理性的，而不应该是在设计视觉效果的过程中high着决定的。不应该在追求视觉效果的过程中产生新信息。

（本文转载自腾讯ISD交互设计组月报第九期）-臭鱼的交互设计

　　我是一个初入互联网的视觉设计师，和以往做设计感受最大的不同就是：一个设计的最终定稿会受到多方面的挑战，有来自产品经理的，来自开发的，来自测试的…等等。那如何在其他团队成员的面前不卑不亢，游刃有余地应对呢？下面这篇文章给了我很大的启发，特别分享给大家。 

　　产品经理、开发工程师和市场策划专员等产品利益关系人认为——视觉设计师在整个团队中没有突出的地位。难道这个论断是正确的吗？我们还能用哪些实例来向这些利益关系人证明视觉视觉设计的重要性呢？

　　尽管，视觉设计师在他的职业生涯中或者是在某个产品开发进程中会面临不同的阻碍，以下3点是会被经常提及的：

　　● 视觉设计就是怎样把东西做得更漂亮
　　● 做流行的东西就可以提高视觉设计的品质
　　● 我们从单个元素出发来评价视觉设计的效果
 
　
视觉设计就是怎样把东西做得更漂亮

　　尽管现在只有很少的一部分人依旧坚持着这个观点，但认为视觉设计只是蛋糕上的奶油这个观念已存在很久。这就好比把最后一步的视觉设计比喻成产品包装上的一个吸引人注意的蝴蝶结。

　　这个观点也许源于工业时代。在当时，工业产品才开始出现不同以往的外观设计，而且像雷蒙·罗维（Raymond Loeway，1889-1988，法国）这样的现代工业设计师开始大张旗鼓地宣扬自己的产品美学。

　　显而易见的，视觉设计确实可以改善产品的表征，但是它可以传递给用户的信息其实更多。通过对不同元素的排列布局，视觉设计师也在向用户传递着产品的核心价值：

　　● 这是什么？
　　● 我怎么使用？
　　● 为什么我只使用它？

　　上述3个问题在交互式产品的设计上尤其显得至关重要。下面我们通过一个实例来说明。

　　图1到图3呈现的是同一个网站的不同视觉排列，基于相同的视觉元素——字体、颜色、渐变和图片。不同的布局直接影响着主要功能点的不同。

　　　　　　　　　　　　　　　图1

　　上图中，我们可以清晰地看出页面的主要功能是查看客户联系信息。然后则是用户可以编辑、删除或者为联系信息写备注。在图2中，页面的重点放在了客户和公司的交流上，然后是用户可以浏览、编辑和删除客户信息。

　　　　　　　　　　　　　　　图2

　　最后，图3的设计重点是用户信息的可编辑性。查看和实时跟踪客户信息的功能被弱化了。

　　　　　　　　　　　　　　　图3

　　这3种不同的视觉呈现方案告诉了我们用户的3个主要任务：查看客户联系信息、管理和更新这些信息以及保留客户的记录。在每个方案中，视觉设计的基本元素是相同的：颜色、字体、渐变和图片。

　　视觉设计可以做到的远比美化界面多得多。它还肩负着传递产品核心功能的作用。“这是什么？”“怎么使用这些功能？”“怎样更高效地使用？”

做流行的东西就可以提高视觉设计的品质

　　就像现在很流行的网站“make my logo bigger”所为客户做的事一样，产品经理经常会要求视觉设计师更多地关注排版中的某个细节。这些意见在帮助我们更容易抓住设计重点的同时，也暴露了对于视觉设计的另一个误解：“为了改进这个网站的视觉效果，你要把这个做得大一下，这个字体用粗体，变成红色！”

　　然而，页面中任何元素的重要性如何是取决于它周围环境的。比如，在一个页面中放入一个大红色的圆，它会很引人注目。如果把同一个圆放在10个粉色的圆边上，它就不会那么醒目了。因此，决定某个元素的重要性要从设计的整体出发。我们不应该只关注于某个元素来改进设计。如果这样做的话，页面的整体平衡就会被破坏，也会混淆页面功能的层次关系。

　　如果你答应每个利益关系人去逐个调整页面的不同细节，你每次的调整都要在用户需求和产品需求之间做抉择，然而，大多数情况下，两种需求是无法同时得到满足。图4和图5是两个不同下载页面的比较。火狐的页面中有一个醒目的下载按钮来触发这个行为。而页面中其他的元素，比如产品特性等就不会那么明显。

　　　　　　　　　　　　　　　图4

　　图5是Flock的下载页面，有4个地方可被点击来触发下载的行为：页面的右上角、左边菜单的底部、新闻板块的右上角和页脚的位置。如果不是因为每个下载细节都被强化的话，Flock可能就会像火狐一样——只有一个下载的按钮。

　　　　　　　　　　　　　　　图5

我们从单个元素出发来评价视觉设计的效果

　　如果我们把关注的重点单单落在某个元素上而不是整体页面的话，也会让局部的调整很困难。“你能把logo做得大一些吗？”“你能把标题的颜色变一下吗？”“我们能在这里换一张图片吗？”…

　　这些零散的建议确实可以帮助我们更了解客户的意图，但客户很少会关注到这对整体页面设计的影响。换一个颜色可能需要重新定义页面的色调，设计师还需确保新的色调不会影响到用户关注主要任务。换一张图片可能意味着也要同时调整它周围的元素，因为原先图片制造的视觉焦点可能不复存在…等等。

　　一个最终的视觉设计稿应该是建立在平衡和调整各个元素相互关系上的——同时传递产品的核心价值。所以，当设计师在调整了一个元素后，他还必须重新考虑页面的布局以不破坏原有的平衡。孤立地完成一个个小设计，合在一起后并不能说这就是一个完整的设计。

　　互联网产品的页面元素尤其容易被独立开来进行评估。因为它也许是分一个个单独的模块做测试的，团队里的一个成员也可能认为我只要把自己的那部分给做好了，整体的项目也就做好了。图6就表明了独立设计可能造成的结果。

　　当我们单独看页面头部ebay的logo、paypal提供安全保障的提示和正中照相机的促销广告是，都会觉得不错。事实上，当这三者同时出现在一个页面上时，他们更像在互相竞争，都过于抢眼了。

　　　　　　　　　　　　　　　图6

　　但愿以上这些实例已经证明了视觉设计师在团队中的价值。但要让更多的团队成员认同视觉设计不仅仅关乎到样式、流行等，视觉设计师还需多提升自我经验，在项目初期就表明视觉设计对于整个项目的重要性。

　
《Common Visual Design Misconceptions》
By Luke Wroblewski
原文链接：http://www.uxmatters.com/mt/archives/2008/11/common-visual-design-misconceptions.php

　　在设计网页之前，客户或产品经理会提出对网页视觉风格设计的期望：活跃、大气、稳重、信赖、都市化….. 设计师一听到关键词或许很自然地在心里蹦出几个配色与“关键词”相匹配了。网页的色彩，是访问者登录页面时的第一印象，好的页面色彩能给用户留下深刻的印象，并且能产生很好的视觉效果和营造网站整体氛围的作用。

　　色彩是我们接触事物的第一直观认知，在浏览一个新的网页时，第一认知的不是页面的具体结构和信息内容，而且是页面色彩搭配的视觉效果。色彩对于每个人、地域或国家都有不同的情感认知和联想意义，从某种程度看，大多数人对色彩认知和联想是一致的，如红色，人们感觉得喜庆，热闹…再具体到事物会联想到红心桃、草莓等等。在这里简单介绍色彩的情感联想。

色彩的情感联想

　　色彩的情感联想，主要从具体联想和抽象联想两个维度划分：

　　色彩的情感联想是人们对事物的不断的积累和认知，了解这些不但对网页设计有帮助，还对市场营销有帮助。如设计一个环保教育类网站，“环保教育”首先联想到生命、自然、绿色生态，而这些联想的事物共同色系是绿色，如果网站采用人们已认知的色彩会让人们在初次访问网站时，会对网站的主题产生共鸣和信赖感。

　　那设计师就凭自己“经验和色彩原理”就对网页进行色彩设计？我们先慢镜头往回看整个网站的设计流程–设计师在着手视觉设计的前期流程：

　　如果视觉设计师忽视前期的工作，网站最后视觉设计输出或许会与客户期望存在出入的风险。所以视觉设计师需要先了解和参与网站的定位、目标用户、内容规划的基础上才能更好把握页面的视觉设计。

各类网站的色彩应用

　　网站的类型很多，按照分类，其各自的目的和侧重点不同，对用户的情感诉求心理也会不同。下面主要从网站的类型层面上来简单探讨色彩在网页上的应用：

　　1.门户类：其主要需求是如何方便用户在堆砌的信息中有效、快速进行目标选择，而页面色彩可倾向于清爽，简洁。

　　腾讯网，雅虎，网易等门户采用清爽简洁的浅色调来降低信息快速获取时的视觉干扰。同性质的同类网站主要是沿用自己公司主色系或logo来做区分，便于用户对品牌的识别。

　　2. 产品类：主要目的需求展示产品的特性，促进浏览者消费欲望，页面色彩可根据具体产品定位做多样化设计。

　　细化产品具体定位，如apple，韩国手机iriver高科技电子产品，其简洁灰白色调给网站带来科技感和现代感。

　　http://www.apple.com/

　　http://www.iriver.co.kr/

　　3.社区类：其需求是操作简单易用，长时间使用的舒适度，页面色彩也倾向清爽，简洁。

　　主要以分享、交流信息为主的社区网，有如上面门户网信息获取性质，所以配色上比较简洁清爽。但各社区网又各自有自己的核心目标用户群，所以在配色方面带有各自的特点。如校友核心用户是在校学生，页面顶端上的banner运用活泼的绿色调来渲染青春朝气的氛围.

　　http://xiaoyou.qq.com/

　　http://facebook.com/

　　4. 公司、企业类：展示企业形象，加深提高品牌印象，可应用logo的主色系设计，达到品牌统一。

　　http://www.tencent.com

　　5. 电子商务类：其目的在满足方便快捷地查看商品和进行交易，同时运暖色调渲染气氛，让用户感受到网站整体的活跃氛围和愉悦感。

　　http://www.fashionis.co.kr/

　　当然，黑色调的电子商务网站同样给让人时尚、炫酷的潮流感

　　http://www.yoho.cn/

　　6. 个人类：满足用户的自我个性展示和驾驭能力的需求，页面色彩设计更是多样化和个性化。现在有很多网站设置了换肤、自定义装扮等功能来满足用户需求，如个人空间、博客、社区等等，就连门户类网站也开始满足用户的色彩喜好设置护肤。所以各类网站的色彩应用没有固定的模式，以按自身定位来灵活设计网页色彩。

　　7.其他类：工具类、活动类等.这里就不一一展开了，原理同上：目的、目标用户…

　　“矛盾是事物发展的根本动力” 有矛盾才有发展，我们才有进步。WEB2.0时代活动网页在夹缝中怯生生一路走来，思路也逐渐清晰，下面总结了设计活动类网页的的一点心得和大家一起分享：

　　首先分析以往的活动网页的不足：

　　1.篇幅过长

　　2.质感厚重

　　3.形式感太强浪费有效的空间

参考国外优秀网页范例：

　　1.SONY的一个产品宣传页
　　提炼关键词：简洁的  主题突出的  模块清晰的 大色块的

2.三星的一个促销活动页面
提炼关键词：简洁的 有形式感的  富有动感的

　　3.WEB2.0 流行的BLOG及清爽风格网页
　　提炼关键词：有背景的  透明的  光感的  清爽的

总结：

　　 活动及产品宣传类网页应该避免：

　　1.篇幅过长（尽量保持在2 屏以内）
　　2.海报式设计（通篇图片）
　　3.太过花哨（过于花哨，会影响用户的使用操作，会让主题显得凌乱，设计中应该避免）
　　4.形式感过强，装饰图片过多（放图片要说明问题，毫无意义的图片一定要审慎）

　　活动及产品宣传类网页应该遵循的基本原则：

　　1.内容简洁 （不论是策划内容还是设计板式 都要尽量简洁保持在2屏以内）
　　2.模块清晰 （模块之间一定要有明显的区分， 一目了然）
　　3.主题突出（标题醒目，背景不要太杂）

　　设计活动网页，记住以下关键词：
　　大色块的  少质感的   有背景的  透明的  光感的  清爽的  有形式感的   富有动感的

　　这是目前线上还有的两个活动大家可以看看

　　http://10.QQ.COM

　　http://gongyi.qq.com/loveplan/

　　因为活动一般时间都比较短，有时候可能来不及交互设计师的介入，那么设计师就要承担交互和视觉设计两个角色，当接到一个活动的时候，不管是什么类型，也不会跑题。

　　首先应该明确活动要告诉用户那些东西：
　　1.这是什么？（活动时间 阐明活动目的 适用范围）
　　2.对我有什么好处？（诱因 ：赠品，利益，兴趣爱好，连带推动）
　　3.我该如何参加？（流程是否清晰，友好的引导） 

　　避免无趣的活动
　　避免繁琐的注册，一味展示产品，用户一眼看透你的商业目的
　　感谢您的耐心阅读，希望以上的总结对大家有用。
转自：http://cdc.tencent.com/?p=1899

渐进式行距

• 正文：字体大小14px，行距24px，段后距24px
• h1：字体大小24px，行距24px，段前距24px，段后距24px
• h2：字体大小：18px，行距24px，段前距12px，段后距12px
• 边注正文：字体大小12px，行距24px，段后距24px
• 边注边框：边框粗1px，内补白11px——别忘了还要把它上移12px

我们修改边注的行距和段后距都为18px。那么情况就会像这样：

(demo-9.html)

不知道各位看官发现了没有，为什么第一行基线没对齐呢？这是因为流布局会将文字块按照行高做顶端对齐。如下图：

所以，在这里，为了使首行基线对齐，我们还要将边注下降一定的像素。可恨的是，需要下降的像素是多少——这个很复杂的问题，至少经过不才好几次的尝试都没有看出个规律来，而只得出以下三个结论：

• 设正文行高是h px，边注行高是h’ px，需要下降的值为d px，那么，这个值将介于 1/2(h-h’) < d < (h-h’) . ①
• 如果该行引入了西文字符(半角数字或者字母)，该行的基线有时会比没有西文字符偏移一个像素。
• 不同的字体渲染引擎可能行为不一致。

这 个结论并不能有成型的公式来确定需要下降的具体像素值。那么，我们就根据结论①一个一个像素试验吧(3 < d < 6)，反正不会太多。在本例中经试验可得，下降4px是能够让首行对齐的。对齐后，各位可以看到正文每隔4行，边注每隔5行，他们的基线会对齐一次。

(demo-10.html)

很有趣，是吧？

垂直栅格与渐进式行距应用举例

这 套理论看起来略显枯燥。所以，我还是得举个应用的例子，不然理论对于现在来说没有任何意义。前几天，我遇到了一个问题是这样的：有一个系统，它能够用像 iGoogle那样的模块迅速搭建一个页面用于淘宝的各个子页面。但是，用模块搭建却常常遇到开天窗的问题，就像下面这样：

好， 现在，我们开始开刀。首先，我们用6px的红色网格线，画好标尺。为什么用6px呢？我们在前面的例子中，正文行距是24px，边注行距是18px，那么 他们的最大公约数就是6px. 也就是说，如果我们画好以6px为单位的横线族，那么，每3条横线就是一个18px单位，每4条横线就是一个24px单位。

画上线后，工作简单啦！利用18px和24px这两种行距，将文字的基线都挪到红色网格线上。

回顾一下优化前的样子：

全部使用了18px或者24px的行距。其中，将右边模块的资讯条数由8条缩减为5条。甚至，我们可以继续发现，应用了垂直韵律之后，垂直的行数可以做自由得调整，而两个模块的高度可以保持高度一致。例如我们缩减了行数：

应用了垂直韵律之后，既美观又灵活，何乐不为呢？哇咔咔～

最后

当然，垂直韵律和渐进式行距还有很多应用的方法。总之，作为设计师，特别是网页设计师/交互设计师，我们不应当单纯地凭借感觉，应当专注到像素级别，严谨设计。

“严谨”一词，永远受用。送给我和大家。

文章转自：taobaoUED

去年的时候,青云发表过关于栅格系统的文章 . 我们知道网页的栅格系统是运用固定的格子设计版面布局,使其风格工整简洁. 视觉上来说,栅格系统能够将大块区域分割成小区域,清楚地展示页面的布局,并能够引导视觉线在各个板块之间扫描、阅读. 从信息上来说,栅格系统让信息的呈现方式更加直观,从而有效提高易读性.
但是大部分栅格系统是在水平方向上的布局,其实,我们的垂直方向也是有栅格系统的——也就是我们的“垂直韵律”.

• 字体大小(font-size)
• 行距(line-height)
  具体定义可以参照我的《字体、排版简明入门》 中行距这一节
• 间距(margin,padding)

认真考量这三个因素的值,才能实现垂直韵律.

开工

基础行距

在垂直韵律中,基本的单位是行距. 在整个页面上设定一个合适的行距是垂直韵律之所以能够成为韵律的必要条件. 这个行距,我们将应用于整个页面的所有文字上,包括正文、标题、侧边栏等. 例如,我们现在设定我们的字体大小(css font-size)为12px,行距(css line-height)为18px. (对于中文宋体来说,12px是能够清晰显示的最小字号. 为了保证可读性,12px的1.5倍行距就是18px. 同时12px/18px也是中文互联网上最常用的字号和行距. )我们在空白页面的垂直方向上以18px为单位做垂直网格,就像我们线格本子上的线条,每条网格线也就是基线的对齐线. 接着，我们放上三个段落(12px/18px)作为例子讲解.

(demo-1.html)

段落间距

段落间加上段间距不但美观,而且容易在视觉上区别各段落. 但是要注意的是,垂直韵律最容易被打破的地方就是两个元素在垂直方向上的空白了. 所以,为了让下一段的文字内容落在网格内,我们要将段落间距设置为基础的倍数. 例如：我们可以设置段前距为9px,段后距为9px,9px+9px=18px；或者设置段前距(css margin-top)为0,段后距(css margin-bottom)为18px；或者段前距和段后距都是18px. 这里,我们选取第二种方案,即,设置段前距为0,段后距为18px. 图中可以看到,每段段落的文字都落在了格子内. 关闭网格可以发现,段落清晰明了,比之前容易阅读多了.

(demo-2.html)

添加标题

使用浏览器默认的样式,你会发现,大多数情况下,垂直韵律都被打破了. 所以,添加标题,我们需要选择正确的行距和间距才可以.

有了添加段间距的经验,相信添加标题也不是一件难事了. 标题的文字要比正文的文字要大的多. 例如,我们现在选择h1的字体大小为24px.

那么,根据附录结论有：

• 行距和全部垂直间距之和为基础行距的倍数。

那么，我们假设行距为36px,则可以设置段前距为9px，段后距为9px (验证有：36 + 9 + 9 = 54 = 3 * 18).

同样，我们也可以设置h2:字体大小18px，行高24px，段前距3px，段后距9px(验证有：24 + 3 + 9 = 36 = 2 * 18)。

(demo-3.html)

添加边注

网站我们常常有侧边栏，我们这里就用右边的边注来代表。在这里的例子中，我们和正文一样设定边注的排版：字体12px，行距18px。正是由于我们前面的努力，我们可以看到，边注的基线和正文的基线是对齐的。关闭网格可以看到，由于基线的对齐，整个排版有条不紊，十分美观。

(demo-4.html) 

添加边框

添加边框道理相同，无非要的就是最后要求基线与网格对齐。这里的例子中，我们来给边注加个边框吧。给他加上1px边框(css border)后，还要再加上8px的补白(css padding).细心的同学们一定发现了，为什么补白是8px呢？其实很简单，这就是保证垂直方向上的补白和边框之和，是我们的基础行高18px的倍数：垂直方向上两个补白两个边框，那么1 + 8 + 8 + 1 = 18.

加上去后，我们发现，恩？怎么没有右边文字没有对齐到网格上呢？原来加上了补白和边框后，边注下移了9px，所以网格就没有对齐啦。那么，我们就要把边注上移9px。现在，我们可以看到右边的文字已经对齐到网格。是不是感觉不错？

(demo-5.html)

不同字体大小的正文

如果有一天，老板告诉你，正文的字体太小啦，他看得眼花。你因此不得不将左边的正文设置成14px大小的字体，右边的边注保持12px。由于正文字体变大，我们也同时加大行距。根据我们前面学到的知识，我重新设计了间距：

• 正文：字体大小14px，行距24px，段后距24px
• h1：字体大小24px，行距24px，段前距24px，段后距24px
• h2：字体大小：18px，行距24px，段前距12px，段后距12px
• 边注正文：字体大小12px，行距24px，段后距24px
• 边注边框：边框粗1px，内补白11px——别忘了还要把它上移12px

效果见:

(demo-6.html)。

完工

OK，最后，我们来做个使用前使用后的对比，来张合照吧：

附录 基本垂直韵律对行距、间距的要求的推导

根据之前的经验,不难得出：

设行距为 dl px ,设垂直方向上的间距和为 ∑ds = dst (段前距) + dsb (段后距) (px) ①,假设基础行距为k px,则

n*k = dl + ∑ds (n为自然数) 即行距和间距之和应当是基础行距的倍数 ②

由方程①、② 得出：

• 行距和全部垂直间距之和为基础行距的倍数。

Blueprint的实现

Blueprint是一个完整的CSS框架，栅格系统是它的一部分功能。我们来看demo页面：

以上三栏布局的代码为：

<style type="text/css">
    .container { margin: 0 auto; width: 950px }
    .span-8 { float: left; margin-right: 10px }
    div.last { margin-right: 0 }
    hr { clear: both; height: 0; border: none }
</style>
<div>
    <div></div>
    <div></div>
    <div></div>
    <hr />
</div>

上面是基本功能，Blueprint还支持append-n, prepend-m, border等“高级”功能，这些就不细说了。Blueprint的特点简单总结如下：

1. 采用浮动来实现布局，简单明了
2. 950两侧没有margin, 最后一列的class需要加上last
3. 采用额外标签来清除浮动

960.gs的实现

谈到960栅格系统，不得不提960.gs. Nathan Smith在这篇文章中，详细阐述了他的想法和设计思路。这里有个demo页面，核心代码很简单：

<style type="text/css">
    .container_12 { margin: 0 auto; width: 960px }
    .grid_4 { float: left; margin: 0 10px }
</style>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

上面就构建了三栏布局：

有意思的几点：

1. margin是均匀放在950两侧的
2. 所有grid除了宽度不同，左右边距都一致margin: 0 10px;
3. 代码简单清晰，起始和结束列不需要添加额外class

很明显，Blueprint和960.gs都是采用浮动来实现布局的，主容器需要添加额外标签来清除浮动（可以参考这里）。当然，这也不是什么大问题，请看这篇文章的总结，不添加额外标签也可以清除浮动。

YUI的实现

接着来看大名鼎鼎的YUI Grids CSS. YUI的CSS框架由三个文件组成：

reset.css - 样式重置
fonts.css - 版式字体控制
grids.css - 栅格系统

我们从demo开始：

注意，demo链接中的宽度是750的，但我们只要将<div id=”doc”></div>中的id改为doc2, 页面宽度就自动变为950宽了（YUI非常强大^o^）。来看下dom结构：

采用的也是浮动布局，简化后的CSS代码为：

<style type="text/css">
    .doc2 { margin: auto; width: 73.076em }
    .yui-u { float: left; margin-left: 1.99%; width: 32% }
    div.first { margin-left: 0 }
    #ft { clear: both }
</style>

YUI的特点是：

1. 依旧是采用浮动布局，槽（Gutter）宽通过margin-left来控制（Blueprint采用右边距，960.gs采用均分，这三个框架对槽的处理实在有意思）
2. 总宽度采用em, 这样可以用在弹性布局上
3. 栏的布局用的是百分比，采用了流体布局

YUI的好处是能用来做自适应布局，在这前面两个框架里是没有的。但普通的定宽布局，YUI则显得有点麻烦，比如我们要实现四栏布局，dom得这样写：

先来两个两栏布局，再细分为四栏布局，清晰度上欠佳。

更多栅格实现

栅格化更多是一种布局思想，实现技术可以千差万别。比如今年冒出来的伪绝对定位，立刻就可以用来实现栅格系统。明城兄弟就尝试了一把。

肯定还有非常多的栅格化实现方案，这里就不一一挖掘了。

双飞翼栅格系统

挺奇怪这个名字？请先阅读这篇文章：渐进增强式布局探讨. 简单说，双飞翼布局是一种布局实现技术，可以利用它来实现一整套栅格系统。

先看test页面：Grids Layout Test.

具体技术细节在渐进增强式布局探讨一文中已经阐述，这里不再重复。有几点需要说明：

1. 这套栅格系统并不能实现所有布局。这和YUI Grids类似，只能实现预定的一些布局。比如三栏布局，目前只加入了5 : 13 : 6, 5 : 12 : 7, 9 : 9 : 6, 8 : 8 : 8四种情况，这是从淘宝的现有页面中分析总结出来的。对于同一个站点来说，太多不同的三栏比例不是好事（淘宝目前都有点多，以后可能还会进一步统一）。因此如果采用这套栅格系统的话，需要先分析站点，定义出一套合适的比例。这里有个所有比例的自动生成工具：grids_css_generator.html.
2. 关于命名：.grid-c2-s6表示两栏（c2: column 2）布局，sub栏的宽度是4列（s4: sub width is 4 * 40 -10）. 而.grid-c2-s6f, 最后的f表示两栏布局的第二种情况，即sub和main互换。类似地，.grid-c3-s5e6d表示三栏布局，其中sub栏的宽度是5, extra栏的宽度是6, 最后的d表示是s5e6三栏布局中的第四种情况。
3. 为了方便使用，将最常用的两栏布局.grid-c2-s5用.grid-c2直接表示。同样的，.grid-c3表示.grid-c3-s5e6. 这是淘宝的默认值，其他站点可以根据实际情况修改。
4. 这套布局符合渐进增强式工作流程。细心的你可能已经发现，所有两栏布局和三栏布局，HTML中的DOM结构是完全一样的，只有最外层div的class不同。如果要交换左右栏，只要非常简单的修改下class就可以。
5. 实际使用时，两栏布局和三栏布局已经够用。其实有了两栏，其它布局就都可以组合出来。这里有一个尝试性页面：grids_test4_v0.1.html. 组合布局看起来很强大，但实际使用时会把问题搞复杂，不推荐使用，干脆忘掉吧。

最后来看下两个测试页面：两栏布局grid-c2_test.html 和 三栏布局grid-c3_test.html.

目前除了发现在ie6下有个bug（超大图片等会撑乱布局，其实可以用overflow: hidden来解决，但考虑overflow的负面影响，最后还是由布局内部的模块来自主控制的好），尚未发现其他问题。

小结

栅格系统更多的是一种布局思想，在实际使用时，根据具体需求选用合适的技术来实现即可。需要注意的是，对于栅格的技术实现来说，太灵活未必是件好事，适度灵活最难得。怎么才能适度呢？这需要疯狂实践 + 不断的反思 + 持续的重构 + 悟…

栅格搭好了页面框架，接下来很重要的一件事情就是往里面添加内容模块。让内容模块规范化，让页面生成工业化，对大型站点来说，这是栅格系统最有商业价值的地方。下一篇也是本系列最后一篇将展示栅格系统中的模块化应用。

研究（2）中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统）

淘宝的首页（截图）目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）：

（图1）

纷乱的高度世界

我们来看下图1左上角。左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格（不可避免的要调整内容，比如人气宝贝中将只能放下3张图片）。来仔细看下高度方向：

（图2）
高度方向的布局是：90 : 117 : 100, 第一个间隔是8, 总高度为325. 很明显，高度方向没有任何栅格化的迹象。实际上，

即便是严格遵守栅格系统的Yahoo!首页，高度方向上也没有严格栅格化。

这究竟是为何？

一切皆有可能

我们缩小关注点：

（图3）
上图中，图像的大小是70 x 70, 刚好是24列960栅格系统两列的宽度。对于右边的文字，采取了如下样式：

font-size: 12px;
line-height: 150%; /* 12 x 150% = 18px */

中文字体是宋体，line-height的计算值是18px. 注意图3中文字部分可视区域的高度为65, 上下各有4px和1px的间隙。为什么会产生这么奇怪的间隙呢？我们来看下图：

（图4）
从上图中我们可以得知，12px的宋体中文字，实际高度只有11px. line-height减去11多出来的高度，则“均匀”分布在上下间隙中（如果多出来的高度为偶数，则上下均分；为奇数时，上面比下面多1px）。这样，对于70px的高度来说，要布局4行文字时，假设行高多出来的上半部分为x, 下半部分为y, 在最理想的情况下，应该满足以下公式：

11 * 4 + 4 * x + 3 * y = 70
x = y 或 x = y + 1

不难推出，x最理想的整数解为4. 从而line-height为 4 + 11 + 3 = 18. 因此：

对于24列960栅格系统来说，如果要在高度方向上实现栅格，font-size为12px时，line-height的最佳取值是18px(150%).

追求完美点话，还可以将文字部分margin-top: -1px, 使得65上下的间隙为3和2.

至此，我们可以初步判断：

高度方向上是有可能严格栅格化的。一切皆有可能！

然而，现实总那么残酷

（图5）
上图中的标题高度为22, 这在24列960栅格系统中是无法对齐的。而且总高度为100, 在24列960栅格系统中也不存在（110才可以）。或许高度方向上我们可以细化行宽为20, 但依旧没法解决上面两个问题（22是明显不能解决的，而对于100px的高度，也无法通过细化行宽来解决。可选高度永远是10的奇数倍，如果进一步细化，小于10后，会变得非常繁琐，没什么实际应用价值）

宽度世界里会好些吗

（图6）
上面是Yahoo!首页上的两个小模块，我都不想去标注模块里面的布局宽度了（因为一点都不符合24列960栅格系统）。宽度世界里，和高度世界一样充满希望但现实却残酷无比。

银弹是不存在的

栅格系统是美好的。但如果我们一味地追求将所有设计都栅格化（必须承认我曾有这个幻想），则立刻会陷入地狱一般的黑暗中。这篇文章中的艰难尝试（我分析了20多个小模块），让我突然醒悟到一个粒度问题：任何设计都有适用范围，超出最佳适用范围，强行使用只会带来无尽的烦恼。对于栅格系统（这里指所有栅格系统，包括多种栅格系统混合使用的情景）来说，我觉得以下场景非常适合：

1. 页面的总体宽度布局，比如两栏、三栏等布局
2. 一些固定区块的尺寸，比如广告图片的尺寸
3. 区块之间的间距，可以参考栅格系统的槽宽（Gutter）
4. 一些可以栅格化的小区域，比如图3中的例子，暗合栅格往往能简化布局上的考虑

除了上面这些应用场景，强行使用栅格系统，往往会束手束脚，适得其反。这篇文章的目的，就是尝试用最啰嗦最费神貌似很科学实际很无聊的分析来指出栅格系统应用时的粒度问题。在粒度问题上达成一致后，下一篇中我们将讨论栅格系统的技术实现，最后一篇则讨论栅格系统的压轴好戏：模块化开发。

首先澄清一个应用场景问题。研究（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 栅格：

这样，我们就在宽度和高度两个方向上都实现了栅格化。

下一篇将详细阐述960栅格系统的模块化应用。