網(wǎng)頁頁面適應(yīng)不同客戶端瀏覽器和分辨率

1、網(wǎng)頁頁面適應(yīng)不同客戶端瀏覽器和分辨率上回說到“大屏幕瀏覽頁面的良好體驗，本就應(yīng)該用戶自己調(diào)整窗口?！备鶕?jù)屏幕不同大小，縮小窗口出橫向滾動條在所難免，但理想情況下，頁面應(yīng)該能適應(yīng)不同客戶端瀏覽器和分辨率。實際操作通常又有三種情況：版面自適應(yīng)、視覺自適應(yīng)、內(nèi)容自適應(yīng)。在windows系統(tǒng)任務(wù)欄空白處單擊右鍵，有如下圖的菜單，分別提供有“橫向平鋪窗口、縱向平鋪窗口”的功能，根據(jù)激活窗口個數(shù)按需切分屏幕。如果沒記錯的話，自win2000就已經(jīng)用了，更早沒試過。雖然那會我們用的顯示器大些才仃'，但在多窗口工作時確實方便。1皿EJSS.cofiitrimeiSlr卵ammlwill；ihhkill

2、siAirrnnLwumMl沖ng91rl品他生QarrtM他1祖de闖eLcomcrmeKia侶ImBKccKC1l<豈H二二WIr11宀mH-nVSU-loOl.:wmmStH-n.f4iijiikiihkilkuVi/r忙川帕卜氐改IH映看於泰51春FMhw和ggirl冷啪吟咅nnhr仞制deadirlirfiFai-WBIr-WJL".Iifi-rri1-iraiflS+mashg5tivsn'ML“辟略fE&WLJU-HF-iVM'ttflthl«ltl-t版面上自適應(yīng)InformationArchitectsJapan在06年提出w

3、eb設(shè)計95%是排版的觀點，如果精確理解，指呈現(xiàn)部分信息架構(gòu)之下“信息設(shè)計”的范疇，俗稱排版。因為我們都了解廣義上的webdesign不僅要看還得有動，其實有個很大的知識框架做支撐。web排版相較平面的優(yōu)勢在于數(shù)據(jù)靈活性，理論上可以實現(xiàn)只維護單個頁面，然后通過web技術(shù)來實現(xiàn)多種排版表現(xiàn)。在實踐中獲取點滴信息設(shè)計基礎(chǔ)之后再來看這個問題，感觸頗深?，F(xiàn)實網(wǎng)站中，越重要的頁面模塊越多，排版難度也就越大。比如門戶網(wǎng)站首頁，我很少看到自適應(yīng)的，大概是雅虎網(wǎng)站改版開了先河。分別使用narrowlayout和widelayout兩種模式，適應(yīng)800和1024px分辨率，根據(jù)客戶端請求分析再輸出，即在自定義基

4、礎(chǔ)上實現(xiàn)了自適應(yīng)。PageOptionsApr6,2009Apr6,2009Switchtov/idelayoutColor:j_r口JSv/itchtonarrowlaiFdu七'A'an+moreways七口s七口mizeyourhomepage?TryMyYahoo!川Colur:二J_|_視覺上自適應(yīng)視覺上的處理相對簡單，通過超大圖形先適應(yīng)大分辨率，然后向下兼容。即可以實現(xiàn)在不同分辨率下看到不同的整體效果。如果處理得當(dāng)，在小分辨率下將更顯大氣，用戶某天突然用大屏幕也許會有額外驚喜的良好體驗。P是日本搞藝術(shù)的網(wǎng)站，下圖分別為首頁在1024*768和1680*1050兩種分

5、辨率下的截圖對比。多屏拼接而成，可以清楚看到整體表現(xiàn)視覺風(fēng)格與VI體系的完美融合，簡潔有力。1024*7681680*1050還有我06年設(shè)計的個人網(wǎng)站例子，頂部平鋪其實是張1600*345規(guī)格的天空圖案，中間沒有循環(huán)，因此比較逼真。只有在更大分辨率上才露出馬腳，比如下圖是在1680*1050中的效果。更早這個05年設(shè)計的個人網(wǎng)站是半成品，通過黃金分割比例實時自適應(yīng)，可以在任何分辨率下都有最佳視覺效果。當(dāng)時主要研究使用div做高級布局保證可訪問性，向下兼容良好，設(shè)計理念現(xiàn)在也不過時，前不久還看到有文章探討黃金分割。內(nèi)容上自適應(yīng)iwrvr.n釧mh-iAAbuins(S5|-Uyl'id

6、ih-GflDen-fewShevi其實關(guān)于過寬、過窄我想很早已被設(shè)計師注意，因為CSS2中專門有針對高寬的min和max定義，只不過因之前很多瀏覽器支持不好而用的少。尤其max-width,min-width語法的優(yōu)勢，在自適應(yīng)中排版中可以得到充分發(fā)揮，當(dāng)然也還有其他方案。也許有同行記得，曾經(jīng)讓所有瀏覽器支持max-width還是重要解決方案。當(dāng)處理完外層容器寬度問題后，里邊就等同于主流分辨率場景。要做自適應(yīng)，必然有個模塊的內(nèi)容不能固定寬度，關(guān)鍵處理好里邊信息的呈現(xiàn)即可?？偨Y(jié)起來有如下三類：沒有寬度控制，比如GooglePicasa有寬度底線，但沒上限，比如GoogleImagesSearch有寬度上限，但沒底線，比如GoogleReader訕仲JMk|V«iiriwiMirm彳注意,舉例中寬度底線不是以出橫向滾動條為判斷準(zhǔn)則，因為容器有被強制撐開的情況。Google產(chǎn)品線處理相對較好，更多案例可以參考Junyu總