|
首先澄清一個(gè)應(yīng)用場景問題。研究（1）中指出，對于結(jié)構(gòu)復(fù)雜的網(wǎng)站，不少設(shè)計(jì)師們喜歡采用960固定寬度布局。但要注意的是，960并不是萬能鑰匙，大部分網(wǎng)站沒有也不需要柵格系統(tǒng)。Amazon采用的是寬度自適應(yīng)布局，最大限度的呈現(xiàn)信息。Google更是簡簡單單，主題部分就一個(gè)列表。eBay的頁面非常簡潔，商品頁面寬度自適應(yīng)，信息自然流暢，噪音少，購物很踏實(shí)。類似的站點(diǎn)還有很多，對于這些站點(diǎn)來說，寬度自適應(yīng)布局更受青睞。
有個(gè)很有意思的網(wǎng)站是Yahoo!, 看起來是固定寬度布局，實(shí)際上在CSS中只要去掉一行，就能搖身一變自適應(yīng)寬度了：
#page {
width: 70em;
}
為什么Yahoo!最后選擇了定寬布局呢？這很可能是因?yàn)槎▽挷季直葘挾茸赃m應(yīng)布局更容易控制。對于結(jié)構(gòu)復(fù)雜的網(wǎng)站來說，可維護(hù)性和可擴(kuò)展性非常重要。Yahoo!是以信息展示為主的門戶型網(wǎng)站，960的寬度對于信息的閱讀比較友善（Joe Clark寫了一篇屏幕閱讀時(shí)有關(guān)行長的有趣文章）。種種因素使得Yahoo!最后采用了定寬布局（Tommy Olsson總結(jié)了 每種布局設(shè)計(jì)的優(yōu)缺點(diǎn) ）。
這里將只關(guān)注定寬布局，適用的場景是搭建復(fù)雜的門戶型網(wǎng)站。對于寬度自適應(yīng)布局和相應(yīng)的柵格系統(tǒng)，暫不討論（根據(jù)實(shí)現(xiàn)的技術(shù)手段不同，寬度自適應(yīng)布局又分為流體布局和彈性布局。我個(gè)人蠻喜歡彈性布局，以后有時(shí)間再研究）。
好了，已經(jīng)將范圍縮小到定寬布局的網(wǎng)頁柵格系統(tǒng)，那我們開始吧。
并不遙遠(yuǎn)的750
還記得800×600的顯示器不？雖然才時(shí)隔幾年，感覺卻好像是上個(gè)世紀(jì)的事了。Mark Boulton做了 最早的探索：
將750分割成均等的6份，這就形成了柵格系統(tǒng)，稍加組合劃分就形成了兩欄布局和三欄布局。Mark Boulton還研究了Gutter（垂直欄之間的間隙）對柵格的影響，有興趣的可以閱讀原文，或者跟著我往下看吧，下面將詳細(xì)闡述。
幾個(gè)術(shù)語和一個(gè)公式
一個(gè)標(biāo)準(zhǔn)的柵格系統(tǒng)，包括以下部分：
將Flowline的總寬度標(biāo)記為W, Column的寬度標(biāo)記為c, Gutter寬度標(biāo)記為g, Margin的寬度標(biāo)記為m, Column的個(gè)數(shù)標(biāo)記為N, 我們可以得到以下公式：
W = c * N + g * (N - 1) + 2 * m
一般來說，Gutter的寬度是Margin的兩倍，上面的公式可以簡化為：
W = c * N + g * (N - 1) + g = (c + g) * N
將c+g標(biāo)記為C, 公式變得非常簡單：
W = C * N
上面的公式就是柵格系統(tǒng)的基礎(chǔ)，很簡單吧。
出處：Taobao.com UI Team
責(zé)任編輯：bluehearts
上一頁 下一頁 網(wǎng)頁柵格系統(tǒng)研究:蛋糕的切法 [2]
|
第 1 頁 網(wǎng)頁柵格系統(tǒng)研究:蛋糕的切法 [1]
第 2 頁 
