大型網站網頁柵格化將是潮流和趨勢

來源:互聯網
上載者:User

首先澄清一個應用情境問題。研究(1)中指出,對於結構複雜的網站,不少設計師們喜歡採用960固定寬度布局。但要注意的是,960並不是萬能鑰匙,大部分網站沒有也不需要柵格系統。Amazon採用的是寬度調適型配置,最大限度的呈現資訊。Google更是簡簡單單,主題部分就一個列表。eBay的頁面非常簡潔,商品頁面寬度自適應,資訊自然流暢,噪音少,購物很踏實。類似的網站還有很多,對於這些網站來說,寬度調適型配置更受青睞。

有個很有意思的網站是Yahoo!, 看起來是固定寬度布局,實際上在CSS中只要去掉一行,就能搖身一變自適應寬度了:

#page {
    width: 70em;
}

為什麼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

上面的公式就是柵格系統的基礎,很簡單吧。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。