柵格系統怎樣設定？是根據每次圖文資料的內容決定的嗎？

01-23

還是有一些固定的規則，比如哪類文本信息就得用某個經典的網格系統就行。而另外的圖文資料則要另行設計符合當次設計項目要求的柵格呢？我比較常用的是 Jan Tschichold 設計的由跨頁對角線發展出的版心柵格。另外我看到數列在劃分版面空間的時候起到了重要作用。那麼哪類設計適合用哪種數列來劃分版面呢？有具體說法么？或者是很隨機？

前面已有一些比較有用的回答。結合我自己的實際經驗，再補充一些 : )

在傳統紙品印刷設計方面：

首先，「每一次都根據具體的圖文內容來設定柵格系統」

理論上，這肯定是最優的設計方法——所謂的定製化設計，大概就是這樣的。

但其實，根據實際經驗來看，柵格系統的「變數」，似乎沒有這樣地大；也就是說，每個版式設計師，都可以有幾套自己保留的網格系統，用來解決大部分的內容——比如最簡單的三欄網格（源自瑞士的學院派理論），一些雜誌排版提倡的七欄／九欄分隔（相對更為靈活）。

雖然我自己每次接受新的設計項目，都會重頭構造柵格，可實際上，每次都大同小異。（自己每次都重頭做，其實是工作習慣不好，沒有積累或製作一些精良的可復用模版。）

其次，關於Fibonacci數列的運用

其實Fibonacci數列，就是一個「相鄰兩項的比值不斷逼近黃金分隔」的數列，所以，運用這個數列來構造柵格，其實就相當於是運用黃金分隔來構造網格。在實際運用時，0.618...的相對精確的黃金比例，不會直接出場（因為太過精確，造成工程製造上過於麻煩），因此，總是會取一些近似的「整值」來取代。最簡單的2:3、3:5等，是Fibonacci數列的前幾項，它們某種程度上，都在「逼近」著黃金分隔。

實際操作中，我自己也用過 21:34 這樣「非主流」的分隔比例，但實際效果，可能不如「理論」上那麼明顯，在非常「較真」的場合，可以偶爾用一下。

最後，關於經典的書籍版式柵格

Jan Tschichold的經典柵格構造法，個人認為參考意義不大。我自己在實際設計中一次都沒有用上過，只在某些小範圍講座中，提到過它，算是餘興的「科普」。這種柵格，首先得是基於2:3的開本（或者是更嚴格的黃金比例開本），才相對合適的，而現代的紙張標準中（例如最通行的ISO Paper Size），很少再直接用到2:3了。

其他經典的柵格，《版式設計原理》[1] 這本書里提到過 1:1.2:1.44:1.73 [2]，及 1:1.5:2:3 [3] 這樣兩種，說是英文柵格的經典。（比值是指四個頁邊距，依次為：訂口:天頭:切口:地腳）

PC端的網頁設計方面：

可以參考960 Grid System的東西（http://960.gs/）。

相對比較實用，網站上也提供了多種電子文件格式的模版。其中的 12col / 16col / 24col，個人都試用過，布局比較快捷，效果也不錯。

// 厚顏掛兩個自己的作品 XD (都是基於960grid而來)

// (1) http://www.flickr.com/photos/realfish/sets/72157625450984915/

// (2) http://www.flickr.com/photos/realfish/sets/72157625576842140/

[1] 《版式設計原理》http://book.douban.com/subject/2238320/

[2] 1:1.2:1.44:1.73，據[1]書中說，是William Morris提出的，未考證過。

[3] 1:1.5:2:3，據[1]書中說，是一叫JONJJI AREN ANDO ANUIN的公司提出的，未考證過。（大概考據了下公司名稱，很可能是 "George Allen and Unwin" http://en.wikipedia.org/wiki/Allen_%26_Unwin)

是根據每次圖文資料的內容決定的嗎？

分情況，我經常遇到的有兩種~

需要重新定製的

這種需要設計從新開始~

由主style頁面（如網站中的首頁、某主題下的主頁）/ 特意定製的頁面（如網站中的運營頁）

這得根據產品的需要來置辦它們~

就是你說的「根據每次圖文資料的內容」來決定怎麼分~

需要延續風格的

在已有規範的框架內（如接手做了一半的項目時）做的時候需要遵從已定的柵格繼續做~

--------------------------

固定的規則

有~

目前部分web2.0站點中採用主管縱向的12分格~

例子：

朱印的Rigo

http://www.robinzhu.com/home/

也有不主用柵格用黃金比的~

例子：

eico

http://www.eicodesign.com/

門戶類的需要遵從既定的柵格~

因為這些站點的瀏覽數量已經培養出了龐大的用戶習慣~

例子：

淘寶首頁

http://www.taobao.com/

門戶站點首頁

http://www.yahoo.com/

http://www.163.com/

這些是20px基準的、web業內的經典版式~

UGC/運營類頁面的柵格可以隨意發揮~

例子：

http://lp.taobao.com/

--------------------------

Jan Tschichold 設計的由跨頁對角線發展出的版心刪格

這個請原諒我的火星~

「版心刪格」十分不了解~

版心外到出血的距離在出產的時候控制不了太細啊~

那是以什麼為基本單位的呢？

還請柳生指點~

--------------------------

數列在劃分版面空間的時候起到了重要作用

最後的「數列」是指什麼呢？

是指「斐波那契數列」這種？

還是說的柵格系統里「x軸向最大列數」呢？

我覺得淘寶ued這系列的文章可以讓我們很好了解柵格系統（網頁）。

網頁柵格系統研究 http://ued.taobao.com/blog/2008/10/22/grid_system_research_1/

在技術實現上，我補充一個：yui3-grid。實際上，文中最後一篇也有提到，只是版本是2.x的，此版本的實現過於複雜，個人認為。yui 3 grid的實現非常簡潔、高效。

網頁的柵格系統設計 http://ued.taobao.com/blog/2008/09/17/grid_systems/

至於平面設計上的柵格系統，如報紙等，設計上應該差不多，不過平面的閱讀基本處於水平狀態，而屏幕的界面是垂直的，差別總是有的，個人了解不深，也就不提了。