我傾向于在 Web 設(shè)計(jì)中盡可能在最優(yōu)分辨率前后都給予瀏覽器寬度一定的自由度. 往大去是為了在能改善體驗(yàn)的前提下充分利用大屏幕的用戶的屏幕空間, 往小去是考慮到有時(shí)候用戶并不是把瀏覽器窗口最大化, 或者不能占滿整個(gè)屏幕.

舉個(gè) use case, 我工作的時(shí)候經(jīng)常會(huì)兩個(gè)窗口 side-by-side, 一個(gè)窗口是 Google Docs, 另外一個(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è)最大寬度, 像 Google Reader 這樣:

新版 Google News 首頁整個(gè)固定寬度居中, 除了上面統(tǒng)一的導(dǎo)航條 (我是覺得可以做得更有彈性一點(diǎn)):

Google Images Search 的結(jié)果頁面沒有什么文本可讀性的問題, 所以他們采取的解決方案是每行顯示圖片的數(shù)目隨界面寬度變化而變化, 內(nèi)容區(qū)域總能填得滿滿的:

Picasa Web Album 的圖片瀏覽界面右欄是固定的寬度, 而左欄顯示圖片的區(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)在可以在 Google Books Search 的讀書界面中設(shè)置成兩頁并排放, 如果這個(gè)是自動(dòng)做的呢? 而 CSS3 中也引入了文本分欄, 可以像報(bào)紙那樣把文本分欄顯示 (參照 persistent.info 的實(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ù)說話
• 千鳥: 寬屏不是用來閱讀的

原文：http://blog.wangjunyu.net/1076