|
網(wǎng)站 首頁頁面寬度 px
Yahoo! 950
淘寶 950
MySpace 960
新浪 950
網(wǎng)易 960
Live Search 958
搜狐 950
優(yōu)酷 960
AOL 960
上面列舉的都是 Alexa全球排名前100的站點(diǎn) ，它們的首頁寬度為950px/960px. 除了微軟的Live Search, 這些站點(diǎn)有個(gè)共同特點(diǎn)：頁面結(jié)構(gòu)較復(fù)雜，都可以認(rèn)為是門戶型網(wǎng)站。
再來看看Google, YouTube, Facebook, Flickr!, eBay等知名站點(diǎn)，它們的首頁寬度沒什么固定規(guī)律，共同的特點(diǎn)是：功能專一，頁面結(jié)構(gòu)相對(duì)簡(jiǎn)單。
根據(jù)上面的簡(jiǎn)單分析可以認(rèn)為：當(dāng)搭建頁面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時(shí)，開發(fā)工程師們不約而同地都選擇將頁面寬度定為950px/960px.
這是一件很有趣的事情，為什么要選擇這個(gè)寬度呢？這個(gè)寬度值究竟有什么魔力？
神奇的960
設(shè)計(jì)師們對(duì)蘋果情有獨(dú)衷。在 1024 x 768 的分辨率下，打開Firefox：
自然狀態(tài)下，F(xiàn)irefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網(wǎng)頁的實(shí)際大小為上圖中的紅色部分，高寬為 960 x 650.
有趣的960就這樣出現(xiàn)了。是的，可以認(rèn)為一切就這么簡(jiǎn)單。柵格系統(tǒng)最早出現(xiàn)在平面設(shè)計(jì)領(lǐng)域，設(shè)計(jì)師們愛用蘋果，蘋果下瀏覽器的默認(rèn)寬度為960px, 于是960就這么“自然”地出現(xiàn)了。
數(shù)字背后的奧妙
上面的“自然”出現(xiàn)，細(xì)究自然是不讓人信服的。蘋果系統(tǒng)的設(shè)計(jì)者們?cè)跊]有喝醉酒的情況下選擇了960，而不是其它什么1000之類的整數(shù)，自然另有奧妙。
科學(xué)界有很多問題都可以歸結(jié)到數(shù)學(xué)問題上，我們也從數(shù)學(xué)著手：
960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數(shù)倍：
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自身），我們標(biāo)記為：
N(960) = N(2^6 * 3 * 5) = 26
同理可以得到：
N(480) = N(2^5 * 3 * 5) = 6 * 2 * 2 - 2 = 22
N(750) = N(2 * 3 * 5^3) = 2 * 2 * 4 - 2 = 14
N(800) = N(2^5 * 5^2) = 6 * 3 - 2 = 16
N(1000) = N(2^3 * 5^3) = 4 * 4 - 2 = 14
N(1024) = N(2^10) = 11 - 2 = 9
N(1920) = N(2^7 * 3 * 5) = 8 * 2 * 2 - 2 = 30
根據(jù)直覺（嚴(yán)格證明也不難，不過還是留給數(shù)學(xué)系的學(xué)生去證明吧），我們得到一個(gè)有趣的結(jié)論：
要使得N(width)最大，width的取值必須是 …, 480, 960, 1920, …
N越大，可組合的寬度值就越多。對(duì)柵格系統(tǒng)來說，這意味著越靈活！
目前絕大多數(shù)顯示器都支持 1024 x 768 及其以上分辨率，480太窄，1920則太寬（太寬也不利于閱讀），因此960就成為網(wǎng)頁柵格系統(tǒng)中的最佳寬度了。（補(bǔ)充：480可以應(yīng)用在Flash的柵格設(shè)計(jì)中）
細(xì)心的你也許會(huì)記得，本文開頭列舉的寬度值中，950也出現(xiàn)了好幾次。950是怎么來的？和960是啥關(guān)系？這些疑問，請(qǐng)關(guān)注本系列的下一篇文章。
本文鏈接：http://www.95time.cn/design/doc/2008/6247.asp 
出處：Taobao.com UI Team
責(zé)任編輯：bluehearts
|
