PS：越來越注意到柵格系統對網頁排版的重要性，但是不太會靈活應用，期待高人指點。

---

碰巧最近想研究下移動端的柵格，就閱讀了一些文章，看了樓上的回答，不是很全面，特來補充下。

1.一套完整的柵格化系統，可以優化項目流程，提高開發效率，減少交互，設計，程序之間互相的溝通成本。現在我們以網頁為例：

這是目前主流網站的一些頁面寬度，它們的首頁寬度為950px/960px.（除了微軟的Live Search） 這些網站都有幾個相同的點：結構複雜，邏輯臃腫，老闆有錢，老闆沒我帥。

咦，到這邊遇到一個問題，為什麼是960，950呢？不是1024或者1000呢？

這個寬度是不是有著什麼互聯網世界中的密碼呢？是平均長度嗎(微笑臉)。

當然，這些都有一些不可告人的咪咪，這些網頁的設計師不知道比我高到哪裡去了，他們選擇這些尺寸都是有一些奧秘在裡面。

2.好，下面我們來了解下一些基礎柵格知識點

首先我們要知道柵格化的邏輯是什麼：把一個頁面，切開，分成N個網格單元（腦補下切方形蛋糕）

然後我們把這個頁面的寬度代表為W，網格單元寬度為a，網格單元之間的間隙為i，然後把網格單元+網格單元之間的間隙代表為A。

然後我們得知

A=a+i。

然後我們又知道

W=(a×n)+(n-1)i

寬度=（網格的寬度X數量）+（數量-1）X間隙的寬度

然後在換算一下，得出(A×n) – i = W

註：960是加上最後一個i(i=10)的長度，950是沒加上i的長度

OK，現在這個等式我們已經了解的差不多了

3.A是多少，W是多少，N又是多少？

OK，我們現在拿個真實的案例來舉例，案例來自阿里巴巴良無限UPD團

首先

A 得是5的倍數，因為這樣在設計空間的時候很方便（一五得五，二五一十什麼的）

W 得是正常一點的，不要總是搞些奇奇怪怪的數字，angry！，參考01信息，知道大部分

是950 /960

N 得是3的倍數，我們需要有一行三列的情況，同時不希望有重要信息在最後面。所以是

整個柵格能平均分成3列

i 保持為10PX。

OK，開始計算下，得：3x*5y-10=W 其中x，y為整數 ，15x*y-10=w

然後參考下其他網站的柵格：

結論，現有網站在n和A的特點下，x*y是整數的只有64.

很多成熟網站都是12或24柵格。

當柵格為12(即3x=12)時：

4y=64

y=16即A=80

當柵格為24(即3x=24)時：

8y=64

y=8即A=40

得出我們的柵格系統：

(A×n) – i = W

A=40（柵格的寬度）

i=10（柵格之間的間隙）

寬度=950

即：（40Xn）-10= 寬度W

4.好，就醬，一個完整的柵格系統完成。然後我們應用一下

然後根據頁面元素佔比的不同，得出n的數值，帶入進入，得到效果圖：

就醬（給我一個堅定的眼神）

-----------------分割線以上是Web柵格，以下是iOS柵格-----------------

1.88PX是iOS界面最重要的一個尺寸

其實iOS也有柵格的，首先我們都知道iOS的最小點擊區域是88px。那是因為蘋果在縱向尺寸上，把22px作為一個基礎單元，物理尺寸上，最小空間的高度為22x4=88px，為手指觸摸最小的高度。因此88px是界面中最基礎的一個尺寸。

iOS界面最小點擊區域為88px

iOS界面元素與元素之間的最小間距是22px

2.以此為點，設計師對齊元素的好幫手--柵格

iOS常用的高度值為44px 或者88px，而間距多為20的倍數，考慮到這些點，我們得出一個公約數為4的基本單位，但從易用性出發的話，我們需要標出4x5=20的柵格作為空間間對齊使用。（這個點僅為參考，具體還是要結合iOS的平台規範）

同時柵格中的所有產品必須要保證落在柵格的邊緣上，這樣才能保證在不同產品，不同界面，不同設計師情況下，保持一致的視覺疏密程度。（還是要結合平台規範，這樣會保證最大效率的開發質量）

舉例：（640X960的柵格化，等比劃分為32X48，所有的元素必須落在柵格的邊緣上）

3，項目實例

因移動端的多樣性，隨便拿哪個產品出來舉例都不能全面的概括，直接把官方給的柵格化樣例放這裡。還有更多的例子可以自行去官方文檔上找

純文字列表

下級操作+圖片列表（高度變化）

下級曹組+圖標列表（高度變化）

就醬~ 舉例還是應該錄個視頻來示範會比較詳細啊~ (∩_∩)

---

引自淘寶UED，裡面還有關於柵格系統的文章。

http://ued.taobao.org/blog/?p=246

更多閱讀&>&>

網頁柵格系統研究（1）：960的秘密

網頁柵格系統研究（2）：蛋糕的切法

正文

柵格系統的形成

1692年，新登基的法國國王路易十四感到法國的印刷水平強差人意，因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務是設計出科學的、合理的， 重視功能性的新字體。委員會由數學家尼古拉斯加宗（Nicolas Jaugeon）擔任領導，他們以羅馬體為基礎，採用方格為設計依據，每個字體方格分為64個基本方各單位，每個方各單位再分成36個小格，這樣，一個印 刷版面就有 2304個小格組成，在這個嚴謹的幾何網格網路中設計字體的形狀，版面的編排，試驗傳達功能的效能，這是是世界上最早對字體和版面進行科學實驗的活動，也 是柵格系統最早的雛形。

網頁設計中的柵格系統

我給網頁柵格系統下的定義為：以規則的網格陣列來指導和規範網頁中的版面布局以及信息分布。

網頁柵格系統是從平面柵格系統中發展而來。對於網頁設計來說，柵格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。而且，對於前端開發來說，網頁將更加的靈活與規範。

柵格系統在現在的網頁設計中應用越來越多，從網路上搜羅了一篇關於柵格系統應用的文章：30個最頂尖的基於柵格系統的博客網站設計。

柵格系統的設計原理及應用

那麼如何設計一個柵格系統？接下來我們將通過實例，詳細的介紹一下網頁柵格系統的原理與應用：

在網頁設計中，我們把寬度為「W」的頁面分割成n個網格單元「a」，每個單元與單元之間的間隙設為「i」,此時我們把「a+i」定義「A」。他們之間的關係如下：

W =（a×n）+（n-1）i

由於a+i=A，

可得：(A×n) – i = W

這個公式表述了網頁的布局與網頁「背後」的柵格系統之間的某種關係。我們拿yahoo作例，來看一下柵格系統的應用：

yahoo的網站頁面寬度為W=950px，每個區塊與區塊的間隔為i=10px；如果應用上面的公式，可以推出A=40px，既yahoo首頁橫向版式設計採用的柵格系統為：

（40×n）- 10 = W

下面我們列出當n等於不同數值時W變化的數值表格 ：

從表格可以看出：yahoo首頁的布局完全是按照柵格系統進行設計的，每個區塊的寬度對應的n值分別為：4，11，9。在這裡我們看到一個很有意思 的事情：只要保證一個橫向維度的各個區塊的n值相加等於24，則即可保證頁面的寬度一定是950px。然而，950px的寬度也恰好就是當n=24的時 候，W的寬度值。由此我們得出以下的應用模式：

在柵格系統中，設計師根據需要制定不同的版式或者劃分區塊，他們的依據將是上面的那張對應表進行設計。這樣，一個柵格系統的應用就從此開始了。我們 看到，使用柵格系統的網頁設計，非常的有條理性；看上去也很舒服。最重要的是，它給整個網站的頁面結構定義了一個標準。對於視覺設計師來說，他們不用再為 設計一個網站每個頁面都要想一個寬度或高度而煩惱了。對於前端開發工程師來說，頁面的布局設計將完全是規範的和可重用的，這將大大節約了開發成本。對於內 容編輯或廣告銷售來說，所有的廣告都是規則的，通用的，他們再也不用做出一套N張不同尺寸的廣告圖了……

當然只要你願意，我們可以衍生出任何一種柵格系統，只要改變A和i的值，這個根據網站的實際情況來制定。那麼如何選擇合適柵格系統，主要通過「構成 要素與程序、限制與選擇、構成要素的比例、組合、虛空間與組合、四邊聯繫與軸的聯繫、三的法則、圓與構成、水平構成這些設計元素規劃，來實現比例和諧的平 面設計」。比較深奧，我們在這裡就不詳細闡述了。

呵呵，說了一堆柵格系統的優點。大家可能會問：難道柵格系統真的是完美的么？答案是否定的：對於內容信息不確定導致高度不確定的頁面，在高度層面上就無法做到柵格了。當然，具體的情況還需具體的分析與解決，這就需要設計師們在實際的應用中不斷的總結經驗，不斷實踐了。

---

一切視覺設計都基於點線面。

網頁設計中的柵格系統除了能幫助我們更「規範」的進行點線面的視覺傳達外，更利於代碼層的開發和維護工作。

我覺得最好玩的是架構完全適用於自己設計和開發節奏的柵格系統，造屬於自己的車輪有時候很有快感的說。

---

其實我是覺得中文網頁應該用12像素的間隙而不是10

---

推薦閱讀：