屏幕分辨率与布局
一周前参加UCD读书会，讨论主题是屏幕分辨率与布局。屏幕分辨率产生的问题很多，看上去没有什么好的解决方案。读书会最后的结论是学会巧妙回避问题，并努力争取更多外部支持。我试着总结这些问题和方案，文末会给出我的看法。
屏幕分辨率给我们带来哪些困扰？
曾几何时800X600是标准尺寸，2008年出到第三版的《写给大家看的设计书》（The Non-Designer’s Design Book）中提到Web设计时还说千万不要让你的内容超出800X600的范围——这曾经很有道理，但现在听上去就像在胡扯。根据UCD与会人员提供的数据显示，1024X768的分辨率可能占到30%至40%，但其他类可能占到同等比例。包括尺寸未统一的上网本、1920X1080的高清电视屏、各种各样的宽屏，甚至手机的小屏幕。一片混乱，有时候你都无法确定统计表该如何制作，列出哪些项更好——“非主流”的屏幕分辨率各自所占比例不高，汇集起来确实一个很大的比例。
面对的对象过于复杂，不可能面面俱到，所以首先需要归类，考虑主流的几个分辨率，其它一概忽略不计。
宽度问题
假设以1024X768为基准，宽度问题则分为小于1024与大于1024两种。
大部分与会者认为未来的趋势是大于1024，虽然国内还有人在用800X600，但势必逐渐减少，所以设计时可以不予考虑。目前流行的960px定宽就明显没有顾及800X600时会出现的左右滚动条。这个问题和现阶段写样式是否要顾及IE6类似。虽然已经肯定遭淘汰，但目前还有并不算少的用户在使用（IE6依然是目前中国最主流的浏览器，使用率过半，看上去问题比小分辨率严峻地多），我们就不应当让用户浏览网站时手足无措，感到自己被遗弃。个人建议应当保证网站最主要的内容可以在800px宽度下显示。比如你定死1000px的宽度，最右侧的一列就可以是广告或相对不重要的内容，这样分辨率为800X600的用户也无需反复左右拖动滚动条。或者你可以直接采用自适应布局。但是对信息量稍大的网站而言自适应布局很影响整个页面的排布，因为你的内容（文字或图片）都是固定大小的。（你不敢把字体设置得更灵活，因为你知道不同浏览器的基准字体大小不同，对“更大一些”和“更小一些”的解释也不同，灵活意味着会出乱子，那还不如让用户用Ctrl+或Ctrl-自行调整字号。但许多用户不会这招，有些浏览器会自动调整页面大小适应屏幕，于是你不得不在字号时同时考虑万一字号增大会产生怎样的效果。）自适应势必面临页面的重新布局，分辨率小的时候有些地方会拥挤，分辨率大的时候会出现不和谐的留白。你需要让你的设计变得更灵活。
分辨率大于1024X768的，主要采用自适应或定宽加修饰性背景图片来解决。你可以用一张照片作背景图，并让背景自适应屏幕。你还可以在固定宽度（比如960px）之外使用漂亮的背景图，让宽屏用户看到更多内容，但这些内容是防止宽出来的部分过于单调而特别设置的装饰性内容，并不是网站的主要内容。
宽度过大和过小的问题其实有内在联系。虽然宽出来不少，但我们的视线范围只有那么一点。如果用户浏览你的网站需要转头或者大幅度转动眼珠，他们应该不会再一次上你这儿来自找麻烦。
也就是说，用户和PC屏幕之间的距离和PC屏幕大小之间的比例如果基本不变，分辨率造成的网站设计宽度问题就不是一个恐怖的问题。注意主要内容所在的位置和宽度，注意修饰性内容如何表达，一切元素由核心内容为中心点散布开来，用户看到的边角内容肯定不同，但不会影响整体感，也不会让用户看不到应当看到的内容——比如导航条。
需要特别注意的是在高清电视机和手机屏幕上浏览网站。对电视机而言，应当有一个显示比例调整。不会说宽度为960px的网站真的会局促在分辨率为1920X1080屏幕的中间。面对屏幕较大的电视机我们会离得比较远，这之间的比例换算不应留给设计师。
而手机屏就需要重新设计了，这是最没争议的地方。无论你的手机屏幕有多大分辨率有多高，目前的手机看起来都不适合展示过多内容。
不过如果你的网站架构清晰，可能会省一点事。不妨丢掉样式再看你的网站，重要的东西是否显示前面，网站层次是否清晰。比如h1之类的标签使用是否合理，几个输入框的前后次序有无问题。有时候手机浏览网站会浏览到一个无样式的简洁版本，你必须方便用户只按上下键就能顺利浏览。同时还方便了使用RSS阅读的用户和有视力障碍需要使用屏幕阅读的用户。
这里引申到另一个问题：无样式或样式丢失时的显示问题，此时为宽度零限制状态。你的用户网速可能很慢，加载时间比较长，你需要考虑如何让最重要的东西先加载，让他耐心等待下去。也可能用户没有加载到样式表，此时你的界面要做到条理依然清晰。或者你的用户在某些特殊的显示模式下浏览网站，你要保证界面依然友好。
除此之外，本次会议上并未讨论屏幕分辨率和打印效果之间的关系。假如你的网站宽度过大，而纸张依然是A4大小，会不会影响用户的打印效果？建议为手机写一个样式后再为打印特别写一个样式，对文章重新布局，以适应打印需求。其中，需要调整行距、字号等细节。对于整站打印，免不了需要考虑宽度问题。
高度问题
除了宽度问题，还有高度问题。在过去，宽屏变宽改变的是宽度，高度一般不变。但现在某些宽屏比例过分，高度也会适当下调。此外还出现了上网本，它的第一屏可见高度甚至会在500px以下。于是我们想要第一屏在高度上符合黄金分割变得比过去困难。如果你将最主要的内容都放在500px以内，空出来的地方就要搭配得当，否则1280X1024的用户会觉得头重脚轻。但是为了不增加用户思考成本，一些主要的内容（比如非常大的支付按钮）必须在第一屏看到。此时你只能采用更讨巧的设计。让高度比较小的可以看到完整LOGO、完整导航，以及主要内容的主要部分。让高度“正常”可以看到一个在高度上也符合黄金分割的漂亮页面。让分辨率特别大的用户可以看到更多内容，但依然符合比例。咨询类网站考验排版功力，当水平方向比例得当、垂直方向对齐充分，上下拖动滚动条时和谐不会被打破。就像版式做得很好的报纸，折起来看不一定就比摊开看来得不爽。因为匀称的比例体现在每一个细节上，每一个局部上。
页面过长的时候你可以让重要元素在底部重复出现一次。页面过短的时候可以让底部内容浮于最下方，不过如果分辨率过高的话这种做法有可能会损害垂直方向的布局。如果你的核心显示内容是一张非常大的图片或其它一些在高度不够时冒着显示不完全风险的元素，请修改你的元素，或者让该元素的核心区域变小。比如一个不提供拖动效果的弹出框必须小巧到能完全显示，否则就是设计失败。一些客户端软件同样需要考虑这些问题，重新组织内容，必要时增加动态效果。
提到内容，需要明确一点，网站的内容必须适合在线阅读。比如菜单标题在3到30个字之间，一级菜单有多达20个标签，此时你需要重新确认内容再着手设计。我们的报纸标题字数都是精心设计过的，网站一样的道理。只是许多用户自行提交的内容会主题不明，长度不一，你需要在美感和阅读性上取平衡：省略标题多余字数增加了阅读负担，即便鼠标悬停显示完整标题也不如重新组织语言更让人赏心悦目。如果你的网站有用户参与，你需要考虑的细节将翻倍。
规模小一点的网站往往处理起来方便一些。比如在高度和宽度上同时采用自适应，局部文字区域使用滚动条。这些区域往往不会很大。或者直接采用横向拖动方式，这样的网站容易让人印象深刻。高度自适应的难度没有想象中大，横向拖动需要在页面上配按钮，不要让用户左右拉滚动条或者好奇为什么不能上下滚动。
Flash网站一般都会完全居中。Flash很好地解决了分辨率问题，虽然缩放效果并不总是随人愿。
总结
最后总结一下。
无论屏幕分辨率是多少，我们都需要注意：
- 在最黄金的区域——无论什么分辨率肯定能在第一屏看到的区域——显示最重要的内容，找到视觉中心。黄金区域根据人的视觉习惯而定，最佳显示区域并不等同于屏幕的宽度。
- 与编辑、浏览器提供商、硬件生产厂商协同解决显示问题，在没有解决方案的前提下采用巧妙的设计以满足第一条。比如增加动态展开效果。
- 考虑各种可能的情况，保证主要内容显示正常，主要功能完好，必要时进行特殊处理。比如手机阅读。
- 美化你准备抛弃的非重要区域，不要让它们以未设计过的姿态示人。
- 具体问题具体处理，没有一种解决方案适用所有网站。
现实生活中我们面对的对象通常大小固定。设计书籍时我们会固定书籍尺寸，画图时画布大小固定。有时候我们可以自行确定对象大小，有时候又会遵守一些约定俗成的尺寸规范。但Web设计面对的对象大小不一，充满未知。此时需要重新裁切画布或移动取景框位置，让不同大小的取景框都能看到最佳景致。