close
Yahoo!950淘寶950MySpace960新浪950網易960Live Search958搜狐950優酷960AOL960

上面列舉的都是Alexa全球排名前100的站點,它們的首頁寬度為950px/960px. 除了微軟的Live Search, 這些站點有個共同特點:頁面結構較復雜,都可以認為是門戶型網站。

再來看看Google, YouTube, Facebook, Flickr!, eBay等知名站點,它們的首頁寬度沒什么固定規律,共同的特點是:功能專一,頁面結構相對簡單。

根據上面的簡單分析可以認為:當搭建頁面結構復雜的門戶型網站時,開發工程師們不約而同地都選擇將頁面寬度定為950px/960px.

這是一件很有趣的事情,為什么要選擇這個寬度呢?這個寬度值究竟有什么魔力?

神奇的960

設計師們對蘋果情有獨衷。在 1024 x 768 的分辨率下,打開Firefox:

 


自然狀態下,Firefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框,網頁的實際大小為上圖中的紅色部分,高寬為 960 x 650.

有趣的960就這樣出現了。是的,可以認為一切就這么簡單。柵格系統最早出現在平面設計領域,設計師們愛用蘋果,蘋果下瀏覽器的默認寬度為960px, 于是960就這么“自然”地出現了。

數字背后的奧妙

上面的“自然”出現,細究自然是不讓人信服的。蘋果系統的設計者們在沒有喝醉酒的情況下選擇了960,而不是其它什么1000之類的整數,自然另有奧妙。

科學界有很多問題都可以歸結到數學問題上,我們也從數學著手:

 


960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍:

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

共26種(26 = 7 * 2 * 2 - 2, 減去2是去掉1和960自身),我們標記為:

N(960) = N(2^6 * 3 * 5) = 26

同理可以得到:

N(480) = N(2^5 * 3 * 5) = 6 * 2 * 2 - 2 = 22N(750) = N(2 * 3 * 5^3) = 2 * 2 * 4 - 2 = 14N(800) = N(2^5 * 5^2) = 6 * 3 - 2 = 16N(1000) = N(2^3 * 5^3) = 4 * 4 - 2 = 14N(1024) = N(2^10) = 11 - 2 = 9N(1920) = N(2^7 * 3 * 5) = 8 * 2 * 2 - 2 = 30

根據直覺(嚴格證明也不難,不過還是留給數學系的學生去證明吧),我們得到一個有趣的結論:

要使得N(width)最大,width的取值必須是 …, 480, 960, 1920, …

N越大,可組合的寬度值就越多。對柵格系統來說,這意味著越靈活!

目前絕大多數顯示器都支持 1024 x 768 及其以上分辨率,480太窄,1920則太寬(太寬也不利于閱讀),因此960就成為網頁柵格系統中的最佳寬度了。(補充:480可以應用在Flash的柵格設計中)

細心的你也許會記得,本文開頭列舉的寬度值中,950也出現了好幾次。950是怎么來的?和960是啥關系?這些疑問,請關注本系列的下一篇文章。


網頁柵格系統研究(1):960的秘密 - 網頁設計

http://webdesign.zoapcon.com

研究網頁柵格系統前,來看一組數據:

網站首頁頁面寬度 px
文章標籤
網頁設計 web design
全站熱搜
創作者介紹
創作者 inspirr 的頭像
inspirr

inspirr

inspirr 發表在 痞客邦 留言(0) 人氣()