建站常識(shí)
960時(shí)代的終結(jié)
2011-01-11 08:51:00
按照慣例,年底的淘寶的確是到了“需要改版的時(shí)候”。這次新版的淘寶首頁(yè)上線(xiàn),乍看并沒(méi)有多少奪人眼球的地方,但仔細(xì)揣摩其中的細(xì)節(jié),還是發(fā)現(xiàn)了不少的改變。
其中有一點(diǎn)就是感覺(jué)頁(yè)面留白過(guò)多,仔細(xì)看了下發(fā)現(xiàn)是頁(yè)寬從原來(lái)的 960px拉伸至 1000px。
不要小看這個(gè)增加了的 40px 頁(yè)寬,這對(duì)于設(shè)計(jì)師們而言可能是做了個(gè)“異常艱難的決定”。
混沌時(shí)期
還記得用 Win98 撥號(hào)上網(wǎng)的時(shí)代嗎?那時(shí)候分辨率也小得可憐,800x600 的標(biāo)配分辨率甚至都不及當(dāng)前的某個(gè)高端智能手機(jī)。
不知道什么時(shí)候開(kāi)始,網(wǎng)頁(yè)的頁(yè)寬有了個(gè)經(jīng)典寬度 600px -- 當(dāng)然,那時(shí)候誰(shuí)都不會(huì)在意它。
960 時(shí)代
后來(lái),這個(gè)故事變得簡(jiǎn)單而且老套:隨著硬件的發(fā)展,分辨率也不斷的提升。從 1024x768 到 1280x800 再到 1440x900 甚至更高(這里有個(gè)統(tǒng)計(jì))。
網(wǎng)頁(yè)的頁(yè)寬數(shù)字也在不斷的增加,比較經(jīng)典的幾個(gè)數(shù)字為從 600px、740px 直到 960px 。然而這時(shí)候標(biāo)準(zhǔn)線(xiàn)出現(xiàn)了,那就是 960 頁(yè)寬。
以淘寶為例,我印象中 960px 頁(yè)寬從 2006 年沿用至今(2011)已經(jīng)整整五年。這相比二十一世紀(jì)的前五年的頁(yè)寬改變趨勢(shì)而言,這實(shí)在是讓人感到有些變化不大過(guò)于拘泥。
當(dāng)然,設(shè)計(jì)師們采用 960 這個(gè)數(shù)字當(dāng)作頁(yè)寬的布局方案也有其道理:
其能兼容大部分的屏幕分辨率。800x600 已死,剩下分辨率最小的也有 1024x768。那么,為了更可能多的展現(xiàn)內(nèi)容,頁(yè)面的寬度自然會(huì)在 800-1024 像素之間,960 設(shè)置數(shù)值差不多是個(gè)中間值,不多不少剛剛好。
960px 方便柵格化布局 -- 其實(shí)從數(shù)學(xué)的角度上說(shuō),這個(gè)觀(guān)點(diǎn)有點(diǎn)站不住腳。不過(guò) 960 頁(yè)寬的柵格是最早出現(xiàn)的,同時(shí)也是最廣泛使用的(附,淘寶的柵格系統(tǒng) )。
打破僵局
既然 960 頁(yè)寬已經(jīng)足夠好,沿用傳統(tǒng)的頁(yè)寬也并不會(huì)犯錯(cuò),那么回過(guò)頭來(lái)我們?cè)倏催@次淘寶首頁(yè)為何要改變成規(guī)。
根據(jù)我的個(gè)人觀(guān)點(diǎn),可以總結(jié)部分:
960 頁(yè)寬已經(jīng)顯得“過(guò)時(shí)”,1024x768 像素會(huì)像當(dāng)年的 800x600 一樣,遲早會(huì)被更大數(shù)字的分辨率所淹沒(méi)。
需求的驅(qū)動(dòng),需要在頁(yè)面中加入更多的內(nèi)容。想想頁(yè)寬增加 40px 乘以頁(yè)長(zhǎng),整個(gè)頁(yè)面將會(huì)多出多少設(shè)計(jì)和內(nèi)容填充空間。
1000px 這個(gè)整數(shù)更容易計(jì)算和安排柵格 -- 不過(guò)從數(shù)學(xué)上這個(gè)說(shuō)法也很難站住腳。不過(guò)整數(shù) 1000 的整除數(shù)比 960 多多了,也更容易安排。
單單 40 像素的改變,對(duì)于“粗心大意”的用戶(hù)而言似乎無(wú)關(guān)痛癢(當(dāng)然,也可以理解為淘寶其實(shí)不想讓用戶(hù)過(guò)多得在意他們的改變)。
個(gè)人覺(jué)得 1140 頁(yè)寬也是可以考慮的數(shù)字。那么,還有會(huì)不會(huì)有更大的頁(yè)寬數(shù)字出現(xiàn)?我想應(yīng)該會(huì)控制在 1200px 以?xún)?nèi),否則將會(huì)給用戶(hù)閱讀帶來(lái)困擾。
未來(lái)
我們來(lái)預(yù)測(cè)下未來(lái)的經(jīng)典頁(yè)寬將會(huì)是什么數(shù)字?說(shuō)實(shí)話(huà)我也不知道,這一答案完全在設(shè)計(jì)師腦子里。有點(diǎn)可以預(yù)料到的是,移動(dòng)上網(wǎng)設(shè)備的興起會(huì)有促進(jìn)兩個(gè)大的趨勢(shì):
向下兼容針對(duì)小屏幕的彈性頁(yè)寬(詳見(jiàn))。
頁(yè)面布局將會(huì)針對(duì)不同的設(shè)備而定制,因此 800px 以下的頁(yè)寬將會(huì)“復(fù)活”。
-- Split --
這次廣泛采用 HTML5 標(biāo)簽、加大頁(yè)寬等等的改變,看得出淘寶一直在做著細(xì)節(jié)方面的嘗試和調(diào)整。然而從不諧調(diào)的留白、布局的不協(xié)調(diào)看得出來(lái),淘寶對(duì)于新的頁(yè)寬經(jīng)驗(yàn)稍顯不足。
但愿 1000px 這個(gè)頁(yè)寬將又會(huì)是個(gè)經(jīng)典的數(shù)字。畢竟,不客氣的說(shuō),“山寨”淘寶首頁(yè)的站點(diǎn)實(shí)在是太多太多了。
PS,淘寶還給我們留了個(gè)小彩蛋,新版在首頁(yè)搜索框中輸入“about:staff”會(huì)有驚喜(相應(yīng)代碼在 1970 行開(kāi)始) :^D
-- EOF --
原文:http://www.gracecode.com/archives/3050/
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺(jué)觀(guān)感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2010-01-11 21:33:00] 淘寶節(jié)日LOGO互動(dòng)設(shè)計(jì)小探討
- [2009-05-19 07:43:00] 2009淘寶網(wǎng)動(dòng)畫(huà)節(jié)日LOGO第一季
- [2009-04-20 08:24:00] 支付寶在非淘寶網(wǎng)站上的典型問(wèn)題
- [2011-10-18 10:45:34] 淘寶商城新規(guī):原則不妥協(xié) 18億扶持平臺(tái)賣(mài)家
- [2016-03-07 11:10:49] 從淘寶到高鐵:為什么我們中國(guó)人總是看不起自己?
- [2010-05-06 08:23:00] 我來(lái)做淘寶商城的首頁(yè)設(shè)計(jì)
- [2010-11-04 15:23:00] 淘寶vs拍拍購(gòu)買(mǎi)流程對(duì)比分析
- [2009-07-24 07:50:00] 《變形金剛淘寶記》-互動(dòng)動(dòng)畫(huà)制作過(guò)程
- [2008-01-16 11:40:00] 淘寶的交易評(píng)價(jià)“有問(wèn)題”
- [2011-10-21 14:34:04] 支付寶將向全球開(kāi)放 國(guó)外用戶(hù)可購(gòu)物淘寶
- [2007-04-28 11:42:00] 淘寶首頁(yè)變胖了?
- [2010-11-30 08:42:00] 與960 Grid System相關(guān)的那些問(wèn)題
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
H5 營(yíng)銷(xiāo)型網(wǎng)站 青島SEO 青島高端網(wǎng)站設(shè)計(jì)公司哪家好 HTML5 用戶(hù)界面 企業(yè)建站 輪胎網(wǎng)站設(shè)計(jì) 青島網(wǎng)站建設(shè)基礎(chǔ)知識(shí) GOOGLE 英文網(wǎng)站建設(shè) html和css 青島開(kāi)發(fā)區(qū)建站公司 程序開(kāi)發(fā) 審美 微網(wǎng)站 版面布局 網(wǎng)站視覺(jué) 青島網(wǎng)站建設(shè)公司哪家好 官網(wǎng)建設(shè) 集團(tuán)官網(wǎng) 青島網(wǎng)站SEO 網(wǎng)站交互設(shè)計(jì) 如何做網(wǎng)站優(yōu)化 網(wǎng)站的速度 微官網(wǎng) robots 互聯(lián)網(wǎng) 青島做網(wǎng)站多少錢(qián) 交互設(shè)計(jì)