|
柵格系統(tǒng)的優(yōu)勢(shì)
上面的“發(fā)現(xiàn)”是讓人有點(diǎn)沮喪的。目前嚴(yán)格采用柵格系統(tǒng)的站點(diǎn)非常少，為什么我們還要努力的讓網(wǎng)頁(yè)柵格化呢？
柵格系統(tǒng)具有以下優(yōu)勢(shì)：
- 能大大提高網(wǎng)頁(yè)的規(guī)范性。在柵格系統(tǒng)下，頁(yè)面中所有組件的尺寸都是有規(guī)律的。這對(duì)于大型網(wǎng)站的開發(fā)和維護(hù)來說，能節(jié)約不少成本。
- 基于柵格進(jìn)行設(shè)計(jì)，可以讓整個(gè)網(wǎng)站各個(gè)頁(yè)面的布局保持一致。這能增加頁(yè)面的相似度，提升用戶體驗(yàn)。
- 對(duì)于設(shè)計(jì)師們來說，靈活地運(yùn)用柵格系統(tǒng)，能做出很多優(yōu)秀和獨(dú)特的設(shè)計(jì)。（詳見《超越CSS》一書）
對(duì)于大型網(wǎng)站來說，我相信柵格化將是一種潮流和趨勢(shì)。
下面討論柵格系統(tǒng)中的黃金分割。
黃金分割
黃金分割可以歸結(jié)為數(shù)學(xué)問題：對(duì)于長(zhǎng)度為1的線段，將其分成兩部分 x 和 1 - x, 使得：
x / 1 = (1 - x) / x
化為簡(jiǎn)單的二次方程：
x^2 + x - 1 = 0
正數(shù)解為：
x = (sqrt(5) - 1) / 2 ~= 0.618
這就是黃金分割。這個(gè)比例不僅僅出現(xiàn)在諸如繪畫、雕塑、音樂、建筑等藝術(shù)領(lǐng)域，在管理、工程設(shè)計(jì)等方面也有著不可忽視的作用。 （這是個(gè)自然界的魔數(shù)，類似的還有真空光速、普朗克常數(shù)、精細(xì)結(jié)構(gòu)等等，感興趣的Google吧）
在平面設(shè)計(jì)領(lǐng)域，黃金分割點(diǎn)被廣泛采用。比如下面這種圖：
點(diǎn)擊放大
數(shù)一數(shù)上面有多少黃金分割？
對(duì)于960柵格，實(shí)際寬度是950. 兩欄布局時(shí)，黃金分割為：
點(diǎn)擊放大
對(duì)于 24 x 40 的情景，最接近黃金分割的兩欄布局是 350 : 590, 欄數(shù)比例為 9 : 15. 但實(shí)際使用時(shí)，因?yàn)檎瓩诮?jīng)常用來做導(dǎo)航或放輔助信息，并不需要350px這么寬。因此實(shí)際情況下經(jīng)常被采用的布局是：
上面講的都是寬度方向上的柵格化，下面我們看看高度方向上如何應(yīng)用。
高度方向上的柵格
還記得研究（1）中那張紅紅的很刺眼的圖嗎？注意高度值560也是很神奇的。
N(560) = N(2^4 * 5 * 7) = 18
560 / 960 ~= 0.583
N(560)比較大，同時(shí)可以讓高寬比接近黃金分割。針對(duì)560, 我們采用 14 x 40 柵格：
這樣，我們就在寬度和高度兩個(gè)方向上都實(shí)現(xiàn)了柵格化。
下一篇將詳細(xì)闡述960柵格系統(tǒng)的模塊化應(yīng)用。
本文鏈接：http://www.95time.cn/design/doc/2008/6248.asp 
出處：Taobao.com UI Team
責(zé)任編輯：bluehearts
上一頁(yè) 網(wǎng)頁(yè)柵格系統(tǒng)研究:蛋糕的切法 [3] 下一頁(yè)
|
第 1 頁(yè) 
第 4 頁(yè) 網(wǎng)頁(yè)柵格系統(tǒng)研究:蛋糕的切法 [4]
