大屏幕下的网页设计

我倾向于在 Web 设计中尽可能在最优分辨率前后都给予浏览器宽度一定的自由度. 往大去是为了在能改善体验的前提下充分利用大屏幕的用户的屏幕空间, 往小去是考虑到有时候用户并不是把浏览器窗口最大化, 或者不能占满整个屏幕.

举个 use case, 我工作的时候经常会两个窗口 side-by-side, 一个窗口是 Google Docs, 另外一个窗口呈现参考资料. 如果是在咖啡馆里面干活那就只有笔记本一个屏幕, 每个窗口 700px 宽, 很多时候我就要不断地拖水平滚动条, 非常悲剧.

如果浏览器的窗口特别大或者特别小呢? 我觉得可以不为这些极端情况做优化, 但底线是不要让人觉得出错了, 也算是给网站界面预留退路的一种吧. 一般来说, 我会给界面指定个 最大宽度值 和 最小宽度值 , 这样宽度的变化不至于失控. 像 iGoogle 在小屏幕下乱成这样, 不应该:

这些肯定都不是主流用户面对的场景, 可设计师不就是应该追求完美么. 这里有另外一个因素是自适应宽度页面的设计和开发工作量都要比固定宽度大, 许多人大概还要考虑一下这个额外投入值不值的问题, 例如我就把自己 blog 的宽度给写死了, 反正没啥人上来看…

Google 的大部分产品界面都是自适应浏览器宽度的, 产品不同, 具体做法也会有不同. 对于 application 性质的产品, 界面框架一般都是自适应的, 但为了保证里面文本的可读性, 往往会对文本内容区域限制一个最大宽度, 像 Google Reader 这样:

新版 Google News 首页整个固定宽度居中, 除了上面统一的导航条 (我是觉得可以做得更有弹性一点):