大屏幕下的网页设计(2)

Google Images Search 的结果页面没有什么文本可读性的问题, 所以他们采取的解决方案是每行显示图片的数目随界面宽度变化而变化, 内容区域总能填得满满的:

Picasa Web Album 的图片浏览界面右栏是固定的宽度, 而左栏显示图片的区域是变化的. 值得一提的是它还会根据窗口大小的不同, 请求不同大小的照片大图, 而不是把照片拿回来再缩放. 可以随便点上面一个大图去看看.

而我最近做的一个项目的要求是希望从大概 200px 到大概 1000px 都要呈现良好, 鉴于这是一个导航性质的列表页面, 最后采取了大致如下的布局方式:

这些都是现在的解决方案, 再超前一点呢? 不大恰当地类比, 大屏幕和小屏幕的关系就如同报纸和书本一样, 媒介的面积大了, 其实还有很多潜力可挖. 两个例子, 用户现在可以在 Google Books Search 的读书界面中设置成 两页并排放 , 如果这个是自动做的呢? 而 CSS3 中也引入了 文本分栏 , 可以像报纸那样把文本分栏显示 (参照 persistent.info 的实现效果). 不是说分栏这样的解决方案一定好 (搞不好要用户来回拖垂直滚动条就更麻烦了), 但我们确实还可以开阔一下思路, 想想如何能优化宽屏幕下的显示效果.

实际上设计和用户行为也是相互影响的过程, 手头的一份数据显示, 目前来说屏幕越大, 用户进行 “最大化” 浏览器窗口的操作越少, 这也说明用户觉得宽屏幕下网页显示效果不佳. 但如果越来越多的网站提升了宽屏幕下的体验, 说不定也会有越来越多的用户也会选择在宽屏下 “最大化” 窗口呢.