10月份有機(jī)會(huì)從零開始設(shè)計(jì)一整個(gè)企業(yè)網(wǎng)站。借此機(jī)會(huì)用上了心儀已久的960 Grid System。我們四年前的舊網(wǎng)站也即將改版，原來設(shè)計(jì)的寬度是1000px，我們打算今后都統(tǒng)一到960px，同時(shí)用上960 Grid System。下面整理了使用960 Grid? System時(shí)考慮的一些問題，菜鳥們共勉。

為什么是960px？

一直以來，網(wǎng)頁(yè)設(shè)計(jì)師都希望尋找一個(gè)理想的頁(yè)面寬度值，既能適應(yīng)大部分屏幕，又盡可能的在一行顯示更多的信息。

我們首先會(huì)考慮的是全屏自適應(yīng)，但這并非一個(gè)好的解決方案。一方面，需要做一個(gè)能適應(yīng)各個(gè)寬度的設(shè)計(jì)，從背景圖片，到每個(gè)欄目標(biāo)題的文字長(zhǎng)度，都需要考慮到適應(yīng)多變的寬度；另一方面，也是最致命的一點(diǎn)，相比英文單詞，中文方塊字是沒有起伏的，用戶對(duì)文字位置記憶的依賴性更大。自適應(yīng)寬度也就意味著一行顯示的文字?jǐn)?shù)是不定的，閱讀中文文字塊時(shí)很可能很難一下找到剛才讀到的那個(gè)地方現(xiàn)在到哪去了。因此，固定頁(yè)面寬度比自適應(yīng)更常用。過去，信息閉塞獨(dú)立思考的我們會(huì)考慮用主流屏幕寬度－20px（IE中左右邊框＋滾動(dòng)條的寬度）。在1024＊768的分辨率下，頁(yè)面寬度應(yīng)該為1004px。但過不了多久，很多人便意識(shí)到，有一個(gè)更好的寬度——960px。

960 ＝ 2^6*3*5。與1004這個(gè)無厘頭的數(shù)字相比，960能夠被12、15、16、24整除，得數(shù)分別為80、64、60、40，這些數(shù)字聽著就和諧而且靠譜。因此960非常適合于使用柵格設(shè)計(jì)系統(tǒng)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。

為什么要用柵格設(shè)計(jì)系統(tǒng)?

柵格設(shè)計(jì)系統(tǒng)，即Gird System（又稱網(wǎng)格設(shè)計(jì)系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計(jì)、瑞士平面設(shè)計(jì)風(fēng)格、國(guó)際主義平面設(shè)計(jì)風(fēng)格），是一種平面設(shè)計(jì)的方法與風(fēng)格。運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計(jì)的主流風(fēng)格之一。

柵格設(shè)計(jì)系統(tǒng)在印刷出版物的排版設(shè)計(jì)中十分普遍，網(wǎng)頁(yè)設(shè)計(jì)常會(huì)從印刷排版中汲取靈感。在網(wǎng)頁(yè)設(shè)計(jì)中采用柵格設(shè)計(jì)系統(tǒng)不單能夠繼承工整簡(jiǎn)潔的風(fēng)格，還能大大的減少設(shè)計(jì)的工作量；從前端工程的角度來說，這種排版方式優(yōu)點(diǎn)不言而喻：天然的規(guī)范性和可重用性。從整個(gè)團(tuán)隊(duì)來看，使用柵格設(shè)計(jì)系統(tǒng)能簡(jiǎn)化工作流程，便于交流，也便于分工和統(tǒng)一風(fēng)格。

這是使用3＊3的網(wǎng)格的960px頁(yè)面設(shè)計(jì)草圖，來自“The Principles of Beautiful Web Design”。

960px是唯一的么？

960是否是唯一最優(yōu)的頁(yè)面寬度呢？當(dāng)然不是。目前使用柵格系統(tǒng)的頁(yè)面的寬度并不嚴(yán)格就是960px，也可能是950px，例如yahoo的YUI框架就是950px。關(guān)于網(wǎng)頁(yè)柵格系統(tǒng)設(shè)計(jì)的介紹可以看看TaobaoUED的這篇文章。1024＊768也不會(huì)永遠(yuǎn)是主流分辨率，隨著分辨率的發(fā)展，下一個(gè)較優(yōu)寬度很可能是1440（2^5*3^2*5），或者是一個(gè)沒有分辨率的時(shí)代，頁(yè)面能夠按比例自動(dòng)縮放（就像現(xiàn)在在移動(dòng)版safari看到的那樣）。另外，好的設(shè)計(jì)和創(chuàng)意常常需要打破規(guī)則，柵格設(shè)計(jì)系統(tǒng)也并非網(wǎng)頁(yè)排版唯一可用的風(fēng)格，在主流之外會(huì)一直存在一些很優(yōu)秀的非960px頁(yè)面（尤其是全flash網(wǎng)站）；有時(shí)候人們會(huì)議論他們seo上的缺陷，或者兼容性、用戶體驗(yàn)不夠好，但從藝術(shù)的角度上他們依然很優(yōu)秀。

為什么用960 Grid System？

960 Grid System是由Nathan Smith開發(fā)的CSS框架，有12列、16列、24列三個(gè)版本。CSS對(duì)于很多程序員來說可能完全不屑于優(yōu)化，但它確實(shí)和其他的程序代碼一樣需要架構(gòu)和優(yōu)化。即使運(yùn)營(yíng)的是一個(gè)很小的網(wǎng)站，適當(dāng)?shù)亟M織、重用CSS代碼能夠節(jié)省相當(dāng)多的時(shí)間和成本。CSS框架正是那個(gè)能讓你在每個(gè)網(wǎng)站都屢試不爽的東西，把那些無聊重復(fù)的工作都交給它們吧，把自己的精力集中在怎么創(chuàng)造更令人動(dòng)心的設(shè)計(jì)上！

而且，960 Grid System不僅僅提供了CSS框架，它還提供了可打印的縮略圖表，F(xiàn)irewofks、Phototshop、OmniGraffle 和Vision的模板源文件??你可以讓項(xiàng)目組的很多人都用上它。

它也能為你減少了很多兼容性問題，它支持被yahoo評(píng)為A級(jí)別的瀏覽器：

用960 Grid System做出來的東西好看么？

這個(gè)問題很有現(xiàn)實(shí)主意色彩。使用960 Grid System創(chuàng)造好網(wǎng)站的能力毋庸置疑，在它的網(wǎng)站上列出了許多成功案例。此外，wordpress用戶熟悉的WooThemes也用了960Grid System。

具體到中文的環(huán)境中，每個(gè)設(shè)計(jì)師都有自己的判斷。例如我自己覺得16列的網(wǎng)格系統(tǒng)比較適合中文企業(yè)網(wǎng)站，你可能會(huì)有別的看法。但是并不是用了它就一定能創(chuàng)造出令人滿意的網(wǎng)頁(yè)?！癋rameworks are merely tools that help people achieve solutions, not the solutions themselves. It’s up to designers and developers to combat class-itis and div-itis.（框架只是幫助人們獲取解決解決方案的工具，不是解決方案本身。它取決于設(shè)計(jì)師和開發(fā)者如何駕馭class和div）”。

對(duì)于開發(fā)者來說，用框架總好于不用。還有很多優(yōu)秀的CSS框架可用。960 Grid System是一個(gè)比較單純的框架，它不關(guān)心字體、顏色??你可以為自己的網(wǎng)站定制一份字體顏色的框架。但框架也意味著難免會(huì)有一些你用不上的樣式，如果你的網(wǎng)站很在意這方面的問題，需要謹(jǐn)慎考慮使用框架。

最后，值得一讀的一些參考文章

彬Go的文章：
《960網(wǎng)格系統(tǒng)（翻譯）》
《960 Grid System 基本原理及使用方法（翻譯） 》
《使用Photoshop+960 Grid System模板進(jìn)行網(wǎng)頁(yè)設(shè)計(jì) 》
《精選15個(gè)國(guó)外CSS框架》

一些經(jīng)典的使用教程
Fight Div-itis and Class-itis With the 960 Grid System
Prototyping With The Grid 960 CSS Framework

源地址：http://www.youxiangfa.com……-grid-system/