根據(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í)方便。
Information Architects Japan在06年提出web設(shè)計(jì)95%是排版的觀點(diǎn),如果**理解,指呈現(xiàn)部分信息架構(gòu)之下“信息設(shè)計(jì)”的范疇,俗稱排版。因?yàn)槲覀兌剂私鈴V義上的web design不僅要看還得有動(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)題,感觸頗深。
現(xiàn)實(shí)網(wǎng)站中,越重要的頁(yè)面模塊越多,排版難度也就越大。比如門(mén)戶網(wǎng)站首頁(yè),我很少看到自適應(yīng)的,大概是雅虎網(wǎng)站改版開(kāi)了先河。分別使用narrow layout和wide layout兩種模式,適應(yīng)800和1024px分辨率,根據(jù)客戶端請(qǐng)求分析再輸出,即在自定義基礎(chǔ)上實(shí)現(xiàn)了自適應(yīng)。
視覺(jué)上的處理相對(duì)簡(jiǎn)單,通過(guò)超大圖形先適應(yīng)大分辨率,然后向下兼容。即可以實(shí)現(xiàn)在不同分辨率下看到不同的整體效果。如果處理得當(dāng),在小分辨率下將更顯大氣,用戶某天突然用大屏幕也許會(huì)有額外驚喜的良好體驗(yàn)。
Phofa.net是日本搞藝術(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做**布局保證可訪問(wèn)性,向下兼容良好,設(shè)計(jì)理念現(xiàn)在也不過(guò)時(shí),前不久還看到有文章探討黃金分割。
網(wǎng)頁(yè)自適應(yīng)在網(wǎng)站設(shè)計(jì)中的作用,謝謝圍觀。