我倾向于在 Web 设计中尽可能在最优分辨率前后都给予浏览器宽度一定的自由度. 往大去是为了在能改善体验的前提下充分利用大屏幕的用户的屏幕空间, 往小去是考虑到有时候用户并不是把浏览器窗口最大化, 或者不能占满整个屏幕.
举个 use case, 我工作的时候经常会两个窗口 side-by-side, 一个窗口是 Google Docs, 另外一个窗口呈现参考资料. 如果是在咖啡馆里面干活那就只有笔记本一个屏幕, 每个窗口 700px 宽, 很多时候我就要不断地拖水平滚动条, 非常悲剧.
如果浏览器的窗口特别大或者特别小呢? 我觉得可以不为这些极端情况做优化, 但底线是不要让人觉得出错了, 也算是给网站界面预留退路的一种吧. 一般来说, 我会给界面指定个最大宽度值和最小宽度值, 这样宽度的变化不至于失控. 像 iGoogle 在小屏幕下乱成这样, 不应该:
这些肯定都不是主流用户面对的场景, 可设计师不就是应该追求完美么. 这里有另外一个因素是自适应宽度页面的设计和开发工作量都要比固定宽度大, 许多人大概还要考虑一下这个额外投入值不值的问题, 例如我就把自己 blog 的宽度给写死了, 反正没啥人上来看…
Google 的大部分产品界面都是自适应浏览器宽度的, 产品不同, 具体做法也会有不同. 对于 application 性质的产品, 界面框架一般都是自适应的, 但为了保证里面文本的可读性, 往往会对文本内容区域限制一个最大宽度, 像 Google Reader 这样:
新版 Google News 首页整个固定宽度居中, 除了上面统一的导航条 (我是觉得可以做得更有弹性一点):
Google Images Search 的结果页面没有什么文本可读性的问题, 所以他们采取的解决方案是每行显示图片的数目随界面宽度变化而变化, 内容区域总能填得满满的:
Picasa Web Album 的图片浏览界面右栏是固定的宽度, 而左栏显示图片的区域是变化的. 值得一提的是它还会根据窗口大小的不同, 请求不同大小的照片大图, 而不是把照片拿回来再缩放. 可以随便点上面一个大图去看看.
而我最近做的一个项目的要求是希望从大概 200px 到大概 1000px 都要呈现良好, 鉴于这是一个导航性质的列表页面, 最后采取了大致如下的布局方式:
这些都是现在的解决方案, 再超前一点呢? 不大恰当地类比, 大屏幕和小屏幕的关系就如同报纸和书本一样, 媒介的面积大了, 其实还有很多潜力可挖. 两个例子, 用户现在可以在 Google Books Search 的读书界面中设置成两页并排放, 如果这个是自动做的呢? 而 CSS3 中也引入了文本分栏, 可以像报纸那样把文本分栏显示 (参照 persistent.info 的实现效果). 不是说分栏这样的解决方案一定好 (搞不好要用户来回拖垂直滚动条就更麻烦了), 但我们确实还可以开阔一下思路, 想想如何能优化宽屏幕下的显示效果.
实际上设计和用户行为也是相互影响的过程, 手头的一份数据显示, 目前来说屏幕越大, 用户进行 “最大化” 浏览器窗口的操作越少, 这也说明用户觉得宽屏幕下网页显示效果不佳. 但如果越来越多的网站提升了宽屏幕下的体验, 说不定也会有越来越多的用户也会选择在宽屏下 “最大化” 窗口呢.
参考阅读:
- Fenng: UCDChina 的设计是否土鳖?
- 白鸦: 网页用多宽才合适?
- 西
贝乔: 拿数据说话 - 千鸟: 宽屏不是用来阅读的
Update: 对不起! 把人家名字写错了…
2009 年 4 月 5 日 at 20:09
GReader并没有限定宽度，只是按照原Feed的格式输出。
2009 年 4 月 5 日 at 20:23
1) 麻烦您 firebug 看一眼.
2) feed 里面一般没有样式.
2009 年 4 月 5 日 at 20:37
如果样式写在 feed 内容里，GReader 有的是不过滤的。
2009 年 4 月 5 日 at 20:53
好诡异……
研究半天，原来展开侧栏max-width是650，收起侧栏就变成100%了。
2009 年 4 月 5 日 at 21:31
@DX 嗯, 其实我不大明白为什么 Reader 要对收起侧栏做特殊处理…
2009 年 4 月 5 日 at 21:41
也许是这样：
你要收起侧栏，说明你需要更大的空间来阅读。那么就把剩下的空间都给你，让你看个够。
2009 年 4 月 6 日 at 20:22
很大的分辨率…
2009 年 4 月 6 日 at 23:21
提个小bug
那篇文章是西乔的,不是西贝.
呵呵
2009 年 4 月 7 日 at 11:41
在Windows 7里面可以实现一键平铺窗口，所以到时候这种用法可能会变得非常普遍。
2009 年 4 月 7 日 at 23:28
刚好写了一篇主题接近的文章
我觉得页面内容宽度应该适应内容
内容决定读者的阅读方式，而阅读方式决定页面如何设计更为合理
http://blog.g2xp.com/2009/04/blog-post_05.html
2009 年 4 月 8 日 at 14:08
你好，有幸拜读了您的blog，请问你愿意做话题营销么-有偿合作的！类似feedsky，但是价格会比他们略高~
如果感兴趣，请联系我：qq 1012822370 鱼
2009 年 4 月 10 日 at 13:48
裸奔结束了啦~~
2010 年 12 月 19 日 at 2:59
two visible Power Balance holograms.
2011 年 2 月 8 日 at 11:44
I image this might be diverse upon the written content? then again I still imagine that it is usually suitable for nearly any form of topic subject material, as a result of it might steadily be pleasurable to decide a warm and pleasant face or maybe listen a voice while preliminary landing.
Pingback: 用自适应来提高网站可访问性 | 第一整站站
2011 年 5 月 24 日 at 21:16
Just want to say your article is as surprising. The clarity in your post is just nice and i could assume you are an expert on this subject. Well with your permission let me to grab your feed to keep up to date with forthcoming post. Thanks a million and please continue the gratifying work.
2011 年 7 月 7 日 at 3:35
Your post has made me think about an subject from another angle. This is completely rare when I change my opinion about such issues but it looks that you’ve done it. The day has started with something new! Thank you!
2011 年 7 月 10 日 at 0:15
明你需要更大的空间来阅读。那么就把剩下的空间都给你，O(∩_∩)O~
2011 年 8 月 5 日 at 15:54
Wonderful goods from you, man. I have understand your stuff previous to and you’re just extremely excellent. I actually like what you’ve acquired here, really like what you are stating and the way in which you say it. You make it enjoyable and you still take care of to keep it wise. I cant wait to read far more from you. This is really a wonderful website.