|
我傾向于在Web設(shè)計(jì)中盡可能在最優(yōu)分辨率前后都給予瀏覽器寬度一定的自由度.往大去是為了在能改善體驗(yàn)的前提下充分利用大屏幕的用戶的屏幕空間,往小去是考慮到有時(shí)候用戶并不是把瀏覽器窗口最大化,或者不能占滿整個(gè)屏幕.
舉個(gè)usecase,我工作的時(shí)候經(jīng)常會(huì)兩個(gè)窗口side-by-side,一個(gè)窗口是GoogleDocs,另外一個(gè)窗口呈現(xiàn)參考資料.如果是在咖啡館里面干活那就只有筆記本一個(gè)屏幕,每個(gè)窗口700px寬,很多時(shí)候我就要不斷地拖水平滾動(dòng)條,非常悲劇.
如果瀏覽器的窗口特別大或者特別小呢?我覺得可以不為這些極端情況做優(yōu)化,但底線是不要讓人覺得出錯(cuò)了,也算是給網(wǎng)站界面預(yù)留退路的一種吧.一般來說,我會(huì)給界面指定個(gè)最大寬度值和最小寬度值,這樣寬度的變化不至于失控.像iGoogle在小屏幕下亂成這樣,不應(yīng)該:
這些肯定都不是主流用戶面對(duì)的場(chǎng)景,可設(shè)計(jì)師不就是應(yīng)該追求完美么.這里有另外一個(gè)因素是自適應(yīng)寬度頁面的設(shè)計(jì)和開發(fā)工作量都要比固定寬度大,許多人大概還要考慮一下這個(gè)額外投入值不值的問題,例如我就把自己blog的寬度給寫死了,反正沒啥人上來看…
Google的大部分產(chǎn)品界面都是自適應(yīng)瀏覽器寬度的,產(chǎn)品不同,具體做法也會(huì)有不同.對(duì)于application性質(zhì)的產(chǎn)品,界面框架一般都是自適應(yīng)的,但為了保證里面文本的可讀性,往往會(huì)對(duì)文本內(nèi)容區(qū)域限制一個(gè)最大寬度,像GoogleReader這樣:
新版GoogleNews首頁整個(gè)固定寬度居中,除了上面統(tǒng)一的導(dǎo)航條(我是覺得可以做得更有彈性一點(diǎn)):
GoogleImagesSearch的結(jié)果頁面沒有什么文本可讀性的問題,所以他們采取的解決方案是每行顯示圖片的數(shù)目隨界面寬度變化而變化,內(nèi)容區(qū)域總能填得滿滿的:
PicasaWebAlbum的圖片瀏覽界面右欄是固定的寬度,而左欄顯示圖片的區(qū)域是變化的.值得一提的是它還會(huì)根據(jù)窗口大小的不同,請(qǐng)求不同大小的照片大圖,而不是把照片拿回來再縮放.可以隨便點(diǎn)上面一個(gè)大圖去看看.
而我最近做的一個(gè)項(xiàng)目的要求是希望從大概200px到大概1000px都要呈現(xiàn)良好,鑒于這是一個(gè)導(dǎo)航性質(zhì)的列表頁面,最后采取了大致如下的布局方式:
這些都是現(xiàn)在的解決方案,再超前一點(diǎn)呢?不大恰當(dāng)?shù)仡惐?大屏幕和小屏幕的關(guān)系就如同報(bào)紙和書本一樣,媒介的面積大了,其實(shí)還有很多潛力可挖.兩個(gè)例子,用戶現(xiàn)在可以在GoogleBooksSearch的讀書界面中設(shè)置成兩頁并排放,如果這個(gè)是自動(dòng)做的呢?而CSS3中也引入了文本分欄,可以像報(bào)紙那樣把文本分欄顯示(參照yuhou.cn的實(shí)現(xiàn)效果).不是說分欄這樣的解決方案一定好(搞不好要用戶來回拖垂直滾動(dòng)條就更麻煩了),但我們確實(shí)還可以開闊一下思路,想想如何能優(yōu)化寬屏幕下的顯示效果.
實(shí)際上設(shè)計(jì)和用戶行為也是相互影響的過程,手頭的一份數(shù)據(jù)顯示,目前來說屏幕越大,用戶進(jìn)行“最大化”瀏覽器窗口的操作越少,這也說明用戶覺得寬屏幕下網(wǎng)頁顯示效果不佳.但如果越來越多的網(wǎng)站提升了寬屏幕下的體驗(yàn),說不定也會(huì)有越來越多的用戶也會(huì)選擇在寬屏下“最大化”窗口呢.
參考閱讀:
Fenng:UCDChina的設(shè)計(jì)是否土鱉?白鴉:網(wǎng)頁用多寬才合適?西貝喬:拿數(shù)據(jù)說話千鳥:寬屏不是用來閱讀的。
|