• 
• 
• 
• 
• 
• 
• 

返回貼子列表		發(fā)表新貼
主題： 排版自適應(yīng)提升可訪問(wèn)性	共有1465人瀏覽過(guò)本貼	主貼管理 置　頂 加　精 結(jié)　貼 轉(zhuǎn)　貼

昵稱：奈薇建站網(wǎng) 論壇積分：108000 發(fā)貼等級(jí)：21 發(fā)貼數(shù)：1156 回貼數(shù)：1282 被砸雞蛋：1 獲贈(zèng)鮮花：182

發(fā)表時(shí)間：2019/11/28 10:26:00 樓　主 排版自適應(yīng)提升可訪問(wèn)性 　　上回說(shuō)到“大屏幕瀏覽頁(yè)面的良好體驗(yàn)，本就應(yīng)該用戶自己調(diào)整窗口。”根據(jù)屏幕不同大小，縮小窗口出橫向滾動(dòng)條在所難免，但理想情況下，頁(yè)面應(yīng)該能適應(yīng)不同客戶端瀏覽器和分辨率。實(shí)際操作通常又有三種情況：版面自適應(yīng)、視覺(jué)自適應(yīng)、內(nèi)容自適應(yīng)。在windows系統(tǒng)任務(wù)欄空白處單擊右鍵，有如下圖的菜單，分別提供有“橫向平鋪窗口、縱向平鋪窗口”的功能，根據(jù)激活窗口個(gè)數(shù)按需切分屏幕。如果沒(méi)記錯(cuò)的話，自win2000就已經(jīng)用了，更早沒(méi)試過(guò)。雖然那會(huì)我們用的顯示器大些才17′，但在多窗口工作時(shí)確實(shí)方便。 　　版面上自適應(yīng)InformationArchitectsJapan在06年提出web設(shè)計(jì)95%是排版的觀點(diǎn)，如果精確理解，指呈現(xiàn)部分信息架構(gòu)之下“信息設(shè)計(jì)”的范疇，俗稱排版。因?yàn)槲覀兌剂私鈴V義上的webdesign不僅要看還得有動(dòng)，其實(shí)有個(gè)很大的知識(shí)框架做支撐。web排版相較平面的優(yōu)勢(shì)在于數(shù)據(jù)靈活性，理論上可以實(shí)現(xiàn)只維護(hù)單個(gè)頁(yè)面，然后通過(guò)web技術(shù)來(lái)實(shí)現(xiàn)多種排版表現(xiàn)。在實(shí)踐中獲取點(diǎn)滴信息設(shè)計(jì)基礎(chǔ)之后再來(lái)看這個(gè)問(wèn)題，感觸頗深?，F(xiàn)實(shí)網(wǎng)站中，越重要的頁(yè)面模塊越多，排版難度也就越大。比如門戶網(wǎng)站首頁(yè)，我很少看到自適應(yīng)的，大概是雅虎網(wǎng)站改版開了先河。分別使用narrowlayout和widelayout兩種模式，適應(yīng)800和1024px分辨率，根據(jù)客戶端請(qǐng)求分析再輸出，即在自定義基礎(chǔ)上實(shí)現(xiàn)了自適應(yīng)。 　　視覺(jué)上自適應(yīng)視覺(jué)上的處理相對(duì)簡(jiǎn)單，通過(guò)超大圖形先適應(yīng)大分辨率，然后向下兼容。即可以實(shí)現(xiàn)在不同分辨率下看到不同的整體效果。如果處理得當(dāng)，在小分辨率下將更顯大氣，用戶某天突然用大屏幕也許會(huì)有額外驚喜的良好體驗(yàn)。yuhou.cn是日本搞藝術(shù)的網(wǎng)站，下圖分別為首頁(yè)在1024*768和1680*1050兩種分辨率下的截圖對(duì)比。多屏拼接而成，可以清楚看到整體表現(xiàn)視覺(jué)風(fēng)格與VI體系的完美融合，簡(jiǎn)潔有力。 　　還有我06年設(shè)計(jì)的個(gè)人網(wǎng)站例子，頂部平鋪其實(shí)是張1600*345規(guī)格的天空?qǐng)D案，中間沒(méi)有循環(huán)，因此比較逼真。只有在更大分辨率上才露出馬腳，比如下圖是在1680*1050中的效果。 　　更早這個(gè)05年設(shè)計(jì)的個(gè)人網(wǎng)站是半成品，通過(guò)黃金分割比例實(shí)時(shí)自適應(yīng)，可以在任何分辨率下都有最佳視覺(jué)效果。當(dāng)時(shí)主要研究使用div做高級(jí)布局保證可訪問(wèn)性，向下兼容良好，設(shè)計(jì)理念現(xiàn)在也不過(guò)時(shí)，前不久還看到有文章探討黃金分割。 　　內(nèi)容上自適應(yīng) 　　其實(shí)關(guān)于過(guò)寬、過(guò)窄我想很早已被設(shè)計(jì)師注意，因?yàn)镃SS2中專門有針對(duì)高寬的min和max定義，只不過(guò)因之前很多瀏覽器支持不好而用的少。尤其max-width,min-width語(yǔ)法的優(yōu)勢(shì)，在自適應(yīng)中排版中可以得到充分發(fā)揮，當(dāng)然也還有其他方案。也許有同行記得，曾經(jīng)讓所有瀏覽器支持max-width還是重要解決方案。當(dāng)處理完外層容器寬度問(wèn)題后，里邊就等同于主流分辨率場(chǎng)景。要做自適應(yīng)，必然有個(gè)模塊的內(nèi)容不能固定寬度，關(guān)鍵處理好里邊信息的呈現(xiàn)即可。總結(jié)起來(lái)有如下三類：沒(méi)有寬度控制，比如GooglePicasa有寬度底線，但沒(méi)上限，比如GoogleImagesSearch有寬度上限，但沒(méi)底線，比如GoogleReader 　　注意，舉例中寬度底線不是以出橫向滾動(dòng)條為判斷準(zhǔn)則，因?yàn)槿萜饔斜粡?qiáng)制撐開的情況。Google產(chǎn)品線處理相對(duì)較好，更多案例可以參考Junyu總結(jié)的寬屏幕下的Web設(shè)計(jì)。其實(shí)還有類寬度同時(shí)有底線和上限控制的特殊情況，但向下兼容和維護(hù)是個(gè)問(wèn)題，比如05年底的這個(gè)最窄770px最寬1024px經(jīng)典布局。同時(shí)靈活意味著控制成本，也因此成熟案例少見(jiàn)。 奈薇建站網(wǎng)致力于，讓每個(gè)中國(guó)人、每個(gè)中國(guó)企業(yè)都擁有自己的“官方網(wǎng)站”！ 回復(fù)此貼 單貼管理 修　改 刪　除 清理簽名 TOP

共0個(gè)回貼   分0頁(yè)

上一頁(yè) / 下一頁(yè)   當(dāng)前第頁(yè)

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶