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