網頁柵格系統研究(2):蛋糕的切法 – 網頁設計 |
作者:網頁設計
|
|
首先澄清一個應用場景問題。研究(1)中指出,對于結構復雜的網站,不少設計師們喜歡采用960固定寬度布局。但要注意的是,960并不是萬能鑰匙,大部分網站沒有也不需要柵格系統。Amazon采用的是寬度自適應布局,最大限度的呈現信息。Google更是簡簡單單,主題部分就一個列表。eBay的頁面非常簡潔,商品頁面寬度自適應,信息自然流暢,噪音少,購物很踏實。類似的站點還有很多,對于這些站點來說,寬度自適應布局更受青睞。 有個很有意思的網站是Yahoo!, 看起來是固定寬度布局,實際上在CSS中只要去掉一行,就能搖身一變自適應寬度了: #page { 為什么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 - 10950 = 16 * 60 - 10950 = 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的線段,將其分成兩部分 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) = 18560 / 960 ~= 0.583 N(560)比較大,同時可以讓高寬比接近黃金分割。針對560, 我們采用 14 x 40 柵格: 這樣,我們就在寬度和高度兩個方向上都實現了柵格化。然而,柵格化真的就這么簡單嗎?請關注下一篇,我們將詳細探討柵格化的粒度問題。 |
2 月
15
發佈留言