起因现场：http://www.flickr.com/photos/fenng/3409309938/
起因:白鸦说fenng找的blog模版土鳖，冯大辉截图反击说UCDchina才土鳖呢，
Fenng的截图：《一个宽屏用户的鼠标长途奔袭..》
白鸦 說︰
哈哈哈。 说你土鳖吧，你还不服。
这个问题是这样的：
1、在1024下，中间没有空档。主要用户群的分辨率是1024，你是非主流用户。
2、左边如果不采用固定宽度，在宽屏下会被严重拉宽。 阅读区域太宽，对阅读者的眼睛是不健康的。
你可以看看google、百度的搜索结果，以及google reader、gmail，内容区域都是固定宽度的。
我们的宽度综合了1024下的效果，和人眼最合适宽度的数据，作了稍微比google宽一点的 调整。
3、左边是主要的内容显示区域，用户要阅读的地方。 右边是辅助内容，不重要。
一个页面能只有一个重要的区域。 所有就让辅助内容在最右边呆着，免得干扰左边内容。
改天，给你上上课。你太土了，以后再提这种问题会被人鄙视的。我都不好意思了
下周让你在咱们的眼动议下看看你的三栏blog，读者是多么的注意力不集中 …
發表於 10小時前。 ( 永久連結 )
一 ，我不喜欢掺和讨论，不过手头有一些客户的数据，就说两句。
1． 1024是主流设计屏宽，但是1024及>1024分辨率的用户并不是主流用户。数据截图如下。
| 图片no | 网站类型 | 用户群 | 日Pv区间 | 大于1024px分辨率用户的比例 | 等或小于1024px分辨率用户的比例 |
| 1 | 靠seo的垃圾站 | 随机 | 4位数 | 51.7% | 48.3% |
| 2 | 求职招聘，社区 | 学生 | 百万以上 | 53.6% | 44.4% |
| 3 | 高端金融类 | 金融商务 | 百万以上 | 50.3% | 49.7% |
| 4 | 技术类blog | 技术类 | 3位数 | 57.6% | 42.4% |
| 5 | 国外华人社区 | 国外华人用户 | 百万以上 | 65.4% | 34.6% |
数据日期区段:2009年3月4日~2009年4月3日。
结论: 屏宽分辨率等于或小于1024的用户未超过平均数，已经是非主流啦。
NO 1：
NO 2
NO 3
NO 4
NO 5
二 “左边如果不采用固定宽度，在宽屏下会被严重拉宽。 阅读区域太宽，对阅读者的眼睛是不健康的。”
截图是白鸦个人blog：http://uicom.net/blog/ 在1280屏宽分辨率，ff浏览器下的效果。
页面结构为宽度自适应设计，阅读区域宽达850px，每行约70个汉字。
“阅读区域太宽，对阅读者的眼睛是不健康的。”这句话非常正确的。
850px宽的文本阅读区，会让用户变成摇头电扇不说，阅读时注意力难以集中，耐心下降，容易跳行，行首行尾无法正常衔接，阅读连续感被破坏。
屏幕阅读本来就比纸本阅读的速度慢，用户对内容的耐受力也会下降，失败的阅读区设计会赶走很多用户。
到底阅读区域的宽度为多少是合适的?
请看下面这篇翻译的论文《CAI课件里电子文本的设计原则》作者：Liu Zhanrong, CCRTVU
“对于设计电子文本，本文主要提到下列看法和建议：
- 理解电子文本和书面文本没有本质上的区别；
- 屏幕上的阅读速度比在纸张上阅读同样的文字要慢20~30%；
- 文字字体和布局本身诸多因素（如行距、字体、字号大小等）的变化会明显影响用户的阅读速度和对阅读的态度；
- 小号字体比大号字体更容易阅读；
- 文字行应该较短，在8~10个英语单词之间；
- 文字应该采用句法移行方式；
- 文字应该以语意（意群）为单位来显示（如一次一个概念）；
- 文字特征如黑体、斜体、字号等如果适当运用可以起到突出显示、吸引注意力的作用；
- 文字应该与左边距对齐；
- 文字显示应该大小写体综合使用；
- 应该避免使用跳跃式垂直滚动的方式；
- 平稳式垂直滚动可以用来浏览或查阅窗口里的内容，而不宜用作主要显示方式；
- 使用垂直滚动方式时，应该采用高于用户喜欢的20%的滚动速度，否则静态显示更有助于用户理解所显示的内容；
- 水平滚动应该采用20个字符的窗口，每次向前滚动5个字符，应该由用户来控制滚动速度；
- 教学辅导性文字材料里的交叉参考有助于用户浏览获得除主材料之外的更多辅助材料；
- 用户在前三次接触交叉参考资料时的作用不很明显；
- 计算机屏幕上显示文字材料时的位置是很有讲究的。”
- 英文单词的平均宽度为6~8，8~10个英文单词的字符数为60~80，加上空格，折算为汉字，文字行宽度在30~40个汉字为合适。
- 传统纸本阅读，（请随便拿起几本本最常见的32开的中文书，数一下每行的汉字数，）在30~35之间。
- 30~40个字符，以字号为较便于阅读的14px来计算，加上浏览器默认字间距，宽度为450px~630px之间最为合适。
- 结论：阅读区域的宽度为450~630px，每行30~40个汉字是比较合适的。其它相关（如行距，屏高，提升阅读速度，文字阅读的水平与垂直滚动 方式，有兴趣的同学可以在上面的论文中找到一些参考理论。）
三
你可以看看google、百度的搜索结果，以及google reader、gmail，内容区域都是固定宽度的。
我们的宽度综合了1024下的效果，和人眼最合适宽度的数据，作了稍微比google宽一点的 调整。
左边是主要的内容显示区域，用户要阅读的地方。 右边是辅助内容，不重要。
一个页面能只有一个重要的区域。 所有就让辅助内容在最右边呆着，免得干扰左边内容。
先看下表
| 应用特点 | 布局 | 左栏 | 中栏 | 右栏 | |
| Google搜索结果页面 | 快速查询 | 两栏（右侧为纯广告区域，没有应用性功能，无产生性内容，所以右栏不能算真正意义上的一栏。通用搜索结果页面的功能布局实际上是单栏） | 主功能区，阅读区宽度固定 | 只有广告 | |
| Google reader | 阅读，分类索引 | 两栏 | 功能区，宽度固定 | 主阅读区。 ie6下阅读区宽度自适应，ff下阅读区宽度固定。 |
|
| Gmail | 列表检索，管理，分类。 | 两栏 | 功能区，宽度固定 | 主操作区。宽度自适应。 当屏幕宽度缩小，只有显示正文（次要信息）的显示区域被减少了。 |
|
| UCD china | 分类索引，信息列表 | 三栏 | 信息列表 宽度固定 |
信息列表， 宽度固定 |
操作区，辅助索引，宽度固定，绝对居右。 |
1 关于google的3个应用，内容区域宽度都是固定的说法是不客观的。
2 不同的产品具有不同的应用类特点。
如何布局取决于每个区块的不同属性、功能性、主次性，产品所有者的资源与优势，以及该应用的战略，时效等要素。
将其它成功的应用随便拿来佐证比较的做法是不科学的。
3 fenng所指出的问题症结所在 是指“页面布局中间的大块留白”。而不是“单个内容/功能区宽度是否固定的问题”。
4 “布局是否居中，整体宽度是否固定” 和 “某栏功能区宽度是否固定” 是两个论题。
5 google的上述应用中，只有google 搜索结果页面存在布局中间留白的问题。
6 从视觉布局特点上：
- Google右栏的信息数量、区域面积 与左栏比较 差异很大，右栏在视觉上的比重很轻。
- UCD china是一个三栏网站，从信息数量和区域面积上（信息价值这个我就不好判定了），左边和右边是份量相当的。 和google 左重右轻的特点 没有可比性。
- 所以UCDchina 这样的留白处理会在视觉上造成不适，而google不会。
7 从功能布局特点上：
- 搜索结果页面要求便于集中快速查询，所有功能和内容都集中在单栏就可以完成。
右栏的广告 在功能性，使用价值 与左栏都没有可比性。 - 而UCDchina 左侧两栏是主要信息区。右栏是辅助索引和操作区，其中包含了：全站检索，内容发布入口，登录，订阅这4个网站中最重要的操作区域。
- 所以UCDchina 这样的留白处理会严重阻断用户操作的连续和流畅性，而google没有这个问题。
8 体现页面中视觉重心，引导用户视觉轨迹的方法有上百种。
强迫用户去看什么， 把你想给用户展现的和用户需要用到的区域之间划上一条银河显然不是个好主意。
前面数据说的都很好。 后面对于UCDChina功能区域的分析有问题
1、UCD的网站不是三栏网站。是两栏
2、UCD右侧的发布和搜索都是大多数人不需要的功能。 绝大多数人之需要浏览。
（对了。我们的搜索现在很差，技术上还在改进）
3、UCD网站中间留白造成的视觉不适，有。但很轻微。 这个危害要远远小于把中间补齐干扰主要内容阅读的危害
汗，这才是研究的态度，呵呵。但不可否认1024的用户量还是最大的，几乎为其他所有分辨率用户之和，所以称其为主流用户应该说没什么错。
横向文字太长是很烦人。这点完全同意。
其实和当初从800升级到1024一样，居中两边留白是正常的，中间留白怎么看都是怪异的。
对第三点，还不如直接做成定宽的。现在 UCD 网站的布局和定宽的网站区别仅仅在与把空白放在两侧还是中间。
用心写的好文章,不顶对不起西乔MM啊,学到了不少了.
>1024的分辨率下，浏览器不一定全屏宽度，有一部分会利用起来侧栏，比如VISTA或安装GOOGLE侧栏工具，这个也要考虑进去吧
屏宽分辨率高不等于也要把页面拉那么宽去适应它．
１．做设计，或者程序多，需要交叉使用，所以要横着摆出来省得来回切换；
２．人家有钱，买大屏看着爽，没准儿是用来玩游戏的；
３．对于大多数浏览型网站来说，主内容区域还是固定宽度的好，方便用户阅读，没必要因为用户屏宽了你也跟着跑．
[...] 再比如我博客现在风格版面，从06年第一版设计开始就宽度固定，再大再小的屏幕都如此。现在content宽度是几次调整后的结果，固定还是自适应各有各的好处，我不喜欢自适应。在是否需要固定的问题上，我不是很同意白鸦观点，另外大辉、西贝提出的问题，我下周二上班用大屏幕截几个有趣的应用后再探讨。 [...]
钦佩西乔的认真，不过西乔蛮具有进攻性的
1000px的定宽 是我比较支持和常规采用的设计。整体自适应宽度的布局可以通过backgroud设计来保证视觉上的延展，但真正使用区域不需要自适应流动设计，否则由此带来的问题太多，首要就是阅读区宽度的问题。
就应该1000定宽，居中
不要和google搜索结果页面对比，不是一码事。
量化数字可以给理论结论以最大的支撑，完全支持小乔乔。。。
前阵团队里设计和策划也为类似的宽度问题有过争论，当前我直觉是定宽+bg图延展适应宽度的方式更好，但没有论据的支撑，现在有啦，呵呵。
研究的很好
顶一个
设定一个最大宽度也许是明智的选择。
说的很有道理，我转到我的blog上去。http://blog.sina.com.cn/s/blog_53742bef0100deve.html
google最早偏向于全屏处理文字的展示，但最近却也靠近折中做法，页面搜索结果也限定宽度，其他地方全屏。但搜索结果页搜索结果区域的固定宽度，是为了防止cache和类似网页以及comment等几个功能不要和要点击的搜索结果拉得太开，属于不得已的设计。gmail和reader等，依然是全屏设计。可以看成google依然是全屏设计的主要代表。
我是用23.6寸显示器的（1920×1080），的确宽度还是控制在1000px以下看起来舒服。居中也是必要的，两边留白问题不大，中间是视线的焦点，留白了非常不舒服。而且多数网站内容都在正中，突然来一个放大后靠右或靠左的，变成还要读者去调整，很难适应。
UCchina的这个版面的确是不好看，即使没有右侧栏也仍是不好看，放大后我还要转向左侧才能看。主浏览内容最好任何时候都是在正中范围内。
西西，我没找到留言本，
反正这个帖子是讨论用户体验的，我想跑题一下：
我今天访问xiqiao.info，发现是个空白页，于是我重新输入了地址xiqiao.info/BLOG,大写了，所以访问的还是空白页……
如果能有大小写匹配、或者出错页自动转向功能，就好了……
跑题跑回来：蓝色理想也很土鳖的，他们的经典论坛就是自适应屏幕宽度，在宽屏显示的状态下，看的很费劲。wordpress官方论坛就很好，控制了宽度，字间距也很让人舒服。
还有，西西发帖怎么那么多人回复？
我那没人理啊没人理啊没人理……
[...] 回到问题上来，到底要设计多宽的网页？我的认为是：全屏是最佳选择。要努力的是浏览器的适应能力，要改变的是用户的浏览习惯。（参考文章：http://blog.xiqiao.info/2009/04/04/244关于《UCDChina 的设计是否土鳖？》——拿数据说话） [...]
在 fenng 的 flickr 页面上跟白鸦争了许久，没啥拿得出手的依据，多是对白鸦的回复的质疑。还是博主数据流来得比较实际。
ps：我觉得沙发有点强词夺理了，既然只要浏览，不如把那些功能模块去去掉，留着还有碍观瞻。而话说回来，UCDChina 的侧边栏都是些热门文章之类的，作推广用，未必是鸡肋吧？
hanchan同学改域名了，也也~~
现在浏览器的分辨率太多了，感觉自适应还是有很多的问题。
dotnil: 我看到你的争论了。我同意你。
AW:哈哈 是啊 你好久不来了
西乔姐姐我前半部基本没看懂后半部基本记住了~
为什么别人叫你西乔姐姐没事我叫你师姐你就抓狂呢。。。
师姐在广院是一个具有特殊含义的词
博主很务实，用数据分析的方法很让我信服，呵呵。
ucdchina存在固定宽度的问题，我的博客也存在固定宽度的问题。我第一次使用宽屏就敏感的看到了这点，以后会改进。
西乔姐太有才了，不过我想补充几个问题：
为什么在电影院我们不想坐在最前排看电影呢？
为什么在电影院这么宽的字幕我们看几个小时都不会累呢？（前提是合适的距离）
为什么在电影院放映的字幕要这么大呢？
为什么在电影院放映的字幕要在黑条上显示呢？
这是为什么呢？
哈哈…很多时候还是具体事物具体分析的比较好，又让我思考了很多问题，再次感谢西乔姐.
哦，对了，西乔姐，我挺喜欢你这个页面的宽度的，看着很舒服，再告诉你一句，我近视，可我没带眼镜看哦，哈哈（奸笑）
尝试了下UCDCHINA搜索前几天被转载的文章,用模糊搜索查不到,用精确搜索还查不到-_-!!!
[...] 回到问题上来，到底要设计多宽的网页？我的认为是：全屏是最佳选择。要努力的是浏览器的适应能力，要改变的是用户的浏览习惯。（参考文章：http://blog.xiqiao.info/2009/04/04/244关于《UCDChina 的设计是否土鳖？》——拿数据说话） [...]