屏幕分辨率和布局 - UCD大社区

网页字号多大才合适？

冰桃 — 2009-06-25 15:56:16

在这个显示器百花齐放的时代，网页设计师往往需要考虑不同客户端的浏览体验。

文字大小，是用户体验中的一个重要部分。不同的分辨率，不同的显示器尺寸，不同的DPI，乃至不同的浏览器设置，都会对最终展现的文字大小带来影响。虽然现在很多浏览器已经可以方便地缩放页面，但用户每次光临都要重新缩放，总归麻烦，何况还有许多用户不知道如何缩放页面。最好还是根据用户的分辨率给用户一个比较体贴的默认字号，那这个字号多大合适呢？

12px?14px?15px?16px? 还是压根就不应该使用px这个单位呢？

问题的根源，在于屏幕上的一切字号单位（px,pt,em）都是相对单位，单凭它们并不能确定文字的实际大小。何况人对文字大小的根本感知在于眼睛的视角，这不仅取决于文字的物理尺寸，还取决于它到人眼的距离。

物理尺寸

首先假定一个我们希望达到的文字物理尺寸，例如设定为17寸1280 * 1024显示器上的16px，计算可得它的高度约是4.32mm，我们计划让网页文字在大部分显示器上都比较接近这个大小，那么在不同分辨率下应该显示成多大的字号呢？

第一步：统计用户主要的分辨率和对应的屏幕大小。

要在物理尺寸和分辨率之间换算，首先要统计分辨率和对应的屏幕尺寸。用户分辨率的分布情况可以从网站的统计日志里获得。由于每个分辨率设置可能对应好几个不同尺寸的屏幕，而屏幕尺寸又无法通过网页获得，只好对现在的显示器市场进行统计分析：针对某一分辨率，统计可能的屏幕尺寸范围，从最小到最大，相对主流的是多大（或使用该范围的中间值作为主流尺寸）。如下图所示——

电脑显示器市场（产品种类繁多，难免挂一漏万，数据仅供参考）

第二步：计算每个分辨率主流屏幕尺寸的物理宽度

现在的显示器长宽比不仅有4：3的标准屏，16：10的宽屏，还有更多不规则比例，为了在不同长宽比的显示器之间进行比较，统一使用横向分辨率来统计。用主流尺寸和长宽比（假设像素的长和宽相同）计算出屏幕宽度（英寸），再换算成公制（毫米），将其一一对应就可看出屏幕大小的趋势。再结合各分辨率的用户分布，结果如下图所示（图片中每个点对应一个分辨率，横轴为屏幕横向的像素数，纵轴为该屏幕的物理宽度，气泡大小表示使用该分辨率的用户人数。其中蓝色气泡表示标准屏，紫色表示宽屏）：

各主流浏览器像素宽度与物理宽度的关系及用户比例

第三步：计算不同显示器上的字号大小

用屏幕的物理宽度除以像素宽度，就可以得到每个像素的宽度。然后用指定的文字物理大小除以这个数，就可以得到在不同分辨率下所需的字号。例如要显示4.32mm见方的文字，各分辨率下分别需要如下的字号（对笔记本和台式机分别统计）：

不同分辨率下需要的字号

可以看出笔记本和台式机的尺寸相差很大，为方便使用，使用各分辨率的主流尺寸或平均尺寸计算出指定字号在每个分辨率下所需的字号。（下图去掉了基本只用在笔记本上的那些分辨率），以4.32mm、3.77mm、3.25mm为例（17寸1280*1024分辨率下的16、14和12号字）：

为保持固定物理尺寸，各主流显示器下所需字号与分辨率的关系

由于在未开启cleartype的情况下，一些中文字体在非偶数字号下的显示效果欠佳，所以一般建议使用12、14、16、18、22px等偶数字号。也就是对某个分辨率选择离它最近的偶数字号。例如：屏幕横向分辨率在1100以下的采用14px，1100到1500采用16px，1500以上采用18px，依此类推。

到人眼的距离

虽然笔记本的字号远小于台式机，可是实际并没有给我们带来那么大的不便，这是因为：一般使用笔记本时人眼到屏幕的距离比使用台式机时要近一些。当上网本越来越小时（极端的例子就是手机），人们使用的时候可能会拿的更近，这样视角更大。反之，当显示器越来越大时（24寸甚至更大），出于整体视角等方面考虑，人们也可能离屏幕远些，从而减小了视角。

定量来说：由于文字大小h（4~5mm）相对人眼到文字的距离d（30~60cm）非常小，可近似认为视角θ正比于h,并与d成反比（θ≈tgθ=h/d）。也就是说，同样大小的文字，距离二尺时看到的只有距离一尺时的一半大小。

也就是说，显示器只能传达一个大概的尺寸，每个用户在具体操作时仍会通过不自觉地调节到屏幕的距离来调整所看到的实际效果。面对越来越多的笔记本用户（请参照上一篇：笔记本电脑的市场份额），前端设计师们只能给出一个针对笔记本和台式机平均尺寸的页面效果，具体就靠用户去自我调整了。

用JS实现不同分辨率下自动调整字号

例如网页正文所在div的id为content——

<p style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;" mce_style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;">window.onload=function(){<p style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;" mce_style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;">var sw=window.screen.width;<p style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;" mce_style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;">if(sw<1100) {document.getElementById("content").style.fontSize = "0.875em"}<p style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;" mce_style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;">else if (sw<1500) {document.getElementById("content").style.fontSize = "1em"}<p style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;" mce_style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;">else {document.getElementById("content").style.fontSize = "1.125em"};<p style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;" mce_style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;">}<p style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;" mce_style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; text-indent: 2em; padding: 0px;">

注：为保证各浏览器下文字均可缩放，字号单位使用em而不是px，一般来说，浏览器默认1em=16px，0.875em\1em\1.125em即为14\16\18px。

使用字号缩放时请注意：对该div内的标题等字号单位最好使用百分比，而不是固定字号，以便随正文同步缩放。

附：本文图表引用的主要数据

相关话题：屏幕分辨率和布局源地址：http://www.icepeach.cn/archives/33179

屏幕分辨率和布局简述

bluesnail — 2009-04-20 01:26:34

广州4.18书友会主题的内容提纲自己参与撰写，同时还参与组织和主持。通过这次的深入参与，我发现胡晓同学能坚持下来多不容易，先赞下。由于天公不作美，原定的以春游踏青小组讨论的形式无法实行，只能30号人一起参与，其中的各种不适大家可以看看胡晓同学的踏青归来（UCD广州书友会第七期回顾）的描述，下面开始我们的主题。

1. 屏幕分辨率和布局的定义

1）分辨率
分辨率（Resolution） - 影象清晰度或浓度的度量标准。举例来说，分辨率代表垂直及水平显示的每英寸点（dpi）的数量。BitWare 可以用普通或标准（100 乘 200 dpi）及精细分辨率（200 乘 200 dpi）发送及接收传真文档。分辨率是一个表示平面图像精细程度的概念，通常它是以横向和纵向点的数量来衡量的，表示成水平点数×垂直点数的形式。在一个固定的平面内，分辨率越高，意味着可使用的点数越多，图像越细致。分辨率有多种，在显示器上有表示显示精度的显示分辨率，在打印机上有表示打印精度的打印分辨率，在扫描仪上有表示扫描精度的扫描分辨率。

这里大家更多的讨论的是我们日常的一些视觉感知，对CRT和LCD显示器有过多的讨论。

讨论到这里大家讨论到一个关键点，就是显示器都有自己的最佳分辨率，人们都喜欢大尺寸、高分辨率，但不是显示分辨率越高越好。我们还要考虑一个因素，就是人眼能否识别。例如，在14英寸最高分辨率为1024×768的显示器上800×600是人眼能识别的最高分辨率(我们暂时称为最佳分辨率)，在1024×768这个分辨率下显示器虽然可以精确的显示图像，但人眼已不能准确的识别屏幕信息了。在相同大小的屏幕上，分辨率越高，显示就越小。这就给我们在产品设计上需要更多的考虑到这个因素，例如整站的字号是否应该大点等等。

2）布局

网页中的布局严格意义上来说并没有一个统一的定义。

网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。

关于第一屏

所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，例如在1024*768的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为1002px*645px。一般来讲，我们以这个大小为标准就行了。毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。

2. 现行主流使用的屏幕分辨率和布局与用户体验的关系

由于现在使用的显示器的尺寸越来越大，台式PC越来越多的使用19吋到22吋的显示器。我们自己使用的笔记本虽然尺寸在10吋到14.1吋居多，但分辨率基本都是在1280X800.主流的发展趋势是宽屏+高分辨率。可以说，电脑显示器发展到30寸可以算是终极尺寸了，再大就不适合当显示器用了。

宽屏液晶显示器的字体到底有多小？像素点和字体的大小是对应的，像素点小了，文字就会变小。宽屏面板的分辨率一般比同尺码的普屏面板高得多，所以宽屏的字体小得多，对视力也不好。

宽屏的字体到底有多小呢（以笔记本为例）？

像素高度(与字体大小成正比)：
15′普屏 0.298mm
15.4′（宽） 0.259mm
14.1′普屏 0.280mm
14.1′（宽） 0.237mm
13′（宽） 0.219mm
12′普屏 0.238mm
12′（宽）就不说了，那个字体小到不正常……

现在流行的网页布局（以门户为例），网页布局大多是采用“国”字型，宽960（也有采用950的）的固定版式。现在网页的布局设计变得越来越重要，访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功接合时，这种网页带给用户的体验才是最好的，为大家所喜欢。

网易的一位同学说到了网页布局中使用黄金分割率的原理。黄金分割率的概念大家都知道。下面我引用一段非常专业的解释：“黄金分割最早见于古希腊和古埃及。黄金分割又称黄金率、中外比，即把一根线段分为长短不等的a、b两段，使其中长线段的比(即a+b)等于短线段b对长线段a的比，列式即为a:(a+b)=b:a，其比值为0.6180339……这种比例在造型上比较悦目，因此，0.618又被称为黄金分割率。”大家也看清楚了什么叫黄金分割。

我们中国也有一种类似于这样的概念叫九宫格。这个也许就有一些朋友不清楚了，这是一种用以临写碑帖的一种界格纸。基本形是一个长方形等分九格。在这个九宫格中中间部分就产生了四个交叉点，这四个交叉点就是视觉中心点。

PConline的同学特别提到了最近比较流行的网页栅格系统设计，其中所提到的理论大家可以看下蓝色理想这里介绍的网页栅格系统设计，同时有兴趣的话可以去买这本书来看看《栅格系统与版式设计》。

3. 屏幕分辨率和布局与浏览器、显示终端的关系

屏幕分辨率和布局在不同的浏览器和显示终端下的表现是不同的，千鸟写的《网页页面适应不同客户端浏览器和分辨率》大家可以看看，特别提到我们在实际设计操作中通常有三种情况：版面自适应、视觉自适应、内容自适应。所有的这一切都是为了适应现在显示器宽屏高分辨率的结果。

特别近几年电子数码产品的软硬件设备飞速发展，PC、手持设备、电视等等显示终端都成为了我们浏览网页的目标终端。不同的终端对网页设计布局都有不同的要求。讨论到这里，3G.cn的同学特别提到了他们在手机上设计产品的一些见解。由于到这里的时候我开小差去了，没认真听，无法回忆记录下来，希望3G.cn的同学能写出来。我们的菜心同学提供了一些国外关于手机屏幕的资料：Mobile screen size trends 和 More on mobile screen size trends ，大家可以看看。

4. 屏幕分辨率和布局对前端开发，产品设计的影响

在我们充分的认识到屏幕分辨率和布局的矛与盾以后，就为我们以后的工作有了更多的指导意义。产品设计上需要从不同的角度去考虑适应不同屏幕分辨率下的网页呈现，同时对前端开发也是挑战，前端开发需要做大量的工作，从框架的规划到具体的页面实现都要考虑到这些。

5.总结

这次的ucd书友会虽然在下雨中进行，影响了讨论的效果，但来参与的同学们都很自觉的参与其中，很是欣慰。一位出差广州的PConline的同学对广州这边ucd书友会氛围的肯定，多少是对我们的组织工作的认可，他之前也在上海参加过ucd书友会。希望更多的交流和分享为大家的日常工作和学习带来便利。

排版自适应提升可访问性

千鸟 — 2009-04-07 14:37:45

上回说到“大屏幕浏览页面的良好体验，本就应该用户自己调整窗口。”

根据屏幕不同大小，缩小窗口出横向滚动条在所难免，但理想情况下，页面应该能适应不同客户端浏览器和分辨率。实际操作通常又有三种情况：版面自适应、视觉自适应、内容自适应。

在windows系统任务栏空白处单击右键，有如下图的菜单，分别提供有“横向平铺窗口、纵向平铺窗口”的功能，根据激活窗口个数按需切分屏幕。如果没记错的话，自win2000就已经用了，更早没试过。虽然那会我们用的显示器大些才17′，但在多窗口工作时确实方便。

版面上自适应

Information Architects Japan在06年提出web设计95%是排版的观点，如果精确理解，指呈现部分信息架构之下“信息设计”的范畴，俗称排版。因为我们都了解广义上的web design不仅要看还得有动，其实有个很大的知识框架做支撑。

web排版相较平面的优势在于数据灵活性，理论上可以实现只维护单个页面，然后通过web技术来实现多种排版表现。在实践中获取点滴信息设计基础之后再来看这个问题，感触颇深。

现实网站中，越重要的页面模块越多，排版难度也就越大。比如门户网站首页，我很少看到自适应的，大概是雅虎网站改版开了先河。分别使用narrow layout和wide layout两种模式，适应800和1024px分辨率，根据客户端请求分析再输出，即在自定义基础上实现了自适应。

视觉上自适应

视觉上的处理相对简单，通过超大图形先适应大分辨率，然后向下兼容。即可以实现在不同分辨率下看到不同的整体效果。如果处理得当，在小分辨率下将更显大气，用户某天突然用大屏幕也许会有额外惊喜的良好体验。

Phofa.net是日本搞艺术的网站，下图是首页分别在1024*768和1680*1050两种分辨率下的截图对比。多屏拼接而成，可以清楚看到整体表现视觉风格与VI体系的完美融合，简洁有力。

还有我06设计的个人网站例子，顶部平铺其实是张1600*345规格的天空图案，中间没有循环，因此比较逼真。只有在更大分辨率上才露出马脚，比如下图是在1680*1050中的效果。

更早这个05年设计的个人网站是实验品，通过黄金分割比例实时自适应，实现在任何分辨率下都有最佳视觉效果。当时主要研究使用div做高级布局保证可访问性，向下兼容良好，设计理念现在也不过时，前不久还看到有文章探讨黄金分割。

内容上自适应

其实关于过宽、过窄我想很早已被设计师注意，因为CSS2中专门有针对高宽的min和max定义，只不过因之前很多浏览器支持不好而用的少。尤其max-width, min-width语法的优势，在自适应中排版中可以得到充分发挥，当然也还有其他方案。

也许有同行记得，曾经让所有浏览器支持max-width还是重要解决方案。当解决了外层容器的宽度问题，里边就等同于主流分辨率场景。要做自适应，必然有个模块的内容不能固定宽度，关键处理好里边信息的呈现即可。总结起来有如下三类：

没有宽度控制，比如Google Picasa
有宽度底线，但没上限，比如Google Images Search
有宽度上限，但没底线，比如Google Reader

注意，举例中宽度底线不是以出横向滚动条为判断准则，因为容器有被强制撑开的情况。Google产品线处理相对较好，更多案例可以参考Junyu总结的宽屏幕下的Web设计。

其实还有类宽度同时有底线和上限控制的特殊情况，但向下兼容和维护是个问题，比如05年底的这个最窄770px最宽1024px经典布局。同时灵活意味着控制成本，也因此成熟案例少见。

相关话题：屏幕分辨率和布局源地址：http://blog.rexsong.com/?p=6041

对网页宽度设计的问题应如何讨论？

JunChen Wu — 2009-04-07 03:21:10

在网页多宽才合适这个话题上，白鸦一开始就抛出了650这样一个数字。后来我在 GR 里面分享的时候写：【其实 650 是不准确的...或者说不够严谨。与显示器尺寸、DPI 有关。用字数也不行，与字的大小也有关。】

关于这个严谨不严谨的问题，后来在 Gtalk 上与鸦又更详细的讨论了一番。分享知识，整理如下。

1、Web 排版设计上，没有一个单位（指CSS长度单位）是可靠的。哪怕在CSS中理想化的分成了相对长度单位和绝对长度单位。所有单位（非像素单位通过 DPI，或者更准确的说是 PPI）均被转化为像素。像素为什么不可靠？14.1寸4:3显示器，1024分辨率下每 100 像素物理宽度约为 27.98mm，1400分辨率下每 100 像素物理宽度约为 20.47mm。这里的实际宽度指的是用尺子量出来的宽度。

2、讨论这个话题的时候，应该从视角、视距（眼睛与显示屏的距离）出发，得出最佳物理宽度。然后再从用户群的显示器尺寸和分辨率设定上，去换算为像素。但是，在这个显示器尺寸、分辨率百花齐放的年代，用物理宽度是最佳的。

3、人因工程上说人眼专注阅读的视角是 25 度（约为正常视角的 1/5），距离显示器 45-50cm。通过计算可以得到物理宽度为 19.95cm-22.17cm。约等于一把尺子的长度。于是再换算到显示器上（仍按 17 寸 1024×768 分辨率，横向物理宽度是 34.544cm），就可以得到 591-657px 这个数字。取整之后，可以认为是590-660px 这个区间。但前提仍然是 17 寸 1024×768 分辨率。

最后，还有字号大小的问题，这个比较难，因为需要考虑到在 45-50cm 这个视距下，最佳的笔画物理粗细。

另外提醒下这里讨论的是专注阅读的内容宽度。扫视又是另外一种情况，但应当也可以用人因工程（Human Factors）来解释。

PS. 以前常用每100像素物理宽度为多少来面试设计师。

到底要设计多宽的网页？

小康 — 2009-04-06 09:39:31

白鸦等同学，作为设计师，都在研究，到底多宽的屏幕适合于阅读。研究来研究去，他们认为，设计页面的人，首先应该考虑到，很多同学眼珠子没这么宽，必须限定为650-800宽度。也就是说，太宽了，就费眼睛，阅读速度也慢了，易用性就降低了（当然，这也是很多老外研究的结论，白鸦他们只是作为传道者，给大家传道而已）。还有，白鸦同学也说了，有1680或1920宽度的显示器，在看网页时，最好不要全屏，这样简直是自己折磨自己。

说起来都挺好听的，自然也是很有科学道理。但，到底网页要不要搞得限定宽度，让人在宽屏时，阅读只看到左侧一半的宽度，扭着脖子看左侧信息，而忽略甚至费劲地再看右侧的信息？最近的safari浏览器最受人诟病的就是上面的 tab的close button的设计。隔得太宽，每次都要费劲用鼠标点击那小叉叉，简直是对人的折磨。

我也知道，更短的连续文字更适合于一目十行，但实际上，纯文字阅读并非网页设计首先要考虑的问题。到底设计多宽屏幕，实际上是需要更多考虑的问题。现在的浏览器多数都支持无级缩放，在用大屏幕的时候，可以继续考虑满屏设计，只需要用浏览器的缩放，基本就能解决问题。放大两倍后，650的像素所占位置大概是1300，离屏幕远一些，看起来也没多费劲。设计师的首要目标，一是可能要考虑前几年适合不同浏览器自动调节CSS的做法，另一个是要培养用户使用无级缩放的习惯。

02年yahoo改版的时候，就在考虑800和未来的主流1024之间如何平衡的问题。考虑到浏览器字体缩放的技术，满屏也不是那么令人可憎。相反，不要过多地考虑留空白，满屏后，起码可以让阅读者更加自如地控制字体大小，阅读的舒适度，交回给用户。

否则，以设计师为主导的设计方法，免不了又要进入新浪弹出窗口的悖论：新浪的习惯是弹出新窗口，结果新上网的用户习惯了弹出新窗口。结果，不用弹出新窗口的，似乎就不符合标准。既然大家都喜欢弹出新窗口，_blank的应用就无处不在。浏览器的tab的功能也成为衡量一个浏览器是否已用的标准。鼠标中键点击也成为标准。相反浏览器的标准后退按钮和后退操作，反而慢慢失去了作用。

回到问题上来，到底要设计多宽的网页？我的认为是：全屏是最佳选择。要努力的是浏览器的适应能力，要改变的是用户的浏览习惯。（参考文章：http://blog.xiqiao.info/2009/04/04/244关于《UCDChina 的设计是否土鳖？》——拿数据说话）

====对于屏幕宽度的例子，以下几个企业各自的选择很有代表性===
http://www.amazon.com/ 满屏的习惯代表，字体的无级缩放，使其更易读，oracle基本也是宽屏到底。

http://www.microsoft.com/ 结合满屏和固定宽度的做法的代表。首页固定宽度，防止页面结构错乱，内部阅读页，满屏。导航和相关链接，置于屏幕的左上和右上位置。类似的有ebay的做法，直到最终页面，前面都是用表格来固定宽度，防止页面错乱，最后产品页则全屏。google最早偏向于全屏处理文字的展示，但最近却也靠近折中做法，页面搜索结果也限定宽度，其他地方全屏。但搜索结果页搜索结果区域的固定宽度，是为了防止cache和类似网页以及comment等几个功能不要和要点击的搜索结果拉得太开，不得已的设计。gmail和reader等，依然是全屏设计。

http://www.ibm.com/ 固定宽度的典型代表，在1024已经成主流的1年时间里，IBM固定是800像素设计首页。后来逐步改到适合1024屏幕的宽度。而且特别喜欢用表格区分。

sun，apple，和ibm基本也类似，都跟nngroup的jakob nielsen脱不了干系。但nielesn的很多的理论，也用于microsoft等折中的企业身上。可以去useit.com和nngroup.com看他们到底怎么做。没有一个固定的说法。

作为内容为主的阅读型网站，我最喜欢nytimes和msnbc的设计。但有一些设计理论可能会觉得这两个网站稍显花哨。

宽屏显示下的网站网页宽度

williamlong — 2009-04-07 04:34:18

　　当前的前端设计师有一个苦恼，就是用户屏幕显示分辨率的各不相同，并不能只按照一个模式设置网站的宽度，特别对于宽屏用户来说更为烦恼。

　　根据我的博客上月统计，1024×768分辨率的用户只占到50%，并且在逐月下降，而1280-1440这三个分辨率的用户则达到了35%，如果按照这个速度发展下去，明年就会超过1024分辨率，这说明，使用17寸普屏的用户正在加速减少，而17、19寸宽屏用户正在稳步逐步增加，这给前端设计师的一个考验是，不能只考虑1024×768分辨率的用户了，要想想大屏幕宽屏用户的浏览体验了。

　　Google Reader是一个典型的内容阅读性质的网站，用户在上面阅读时间非常之长，那么，Google的前端设计师是怎么考虑这个问题的呢？

　　大家可以做一个实验，在19寸宽屏下，如果网站页面全文显示，铺满整屏，那么阅读的时候，眼睛需要从左转到右，才能阅读完一行，屏幕越大，这种效果越明显，因此，一个让用户大量阅读的网站，为了照顾好读者的眼睛，在大屏幕宽屏下，也不应该全屏铺开的显示文字内容。

　　在1024×768分辨率下，使用Google Reader时，会发现内容是全屏显示的，但是，使用19寸宽屏在1440×900分辨率下打开Google Reader，会发现这时并没有宽屏显示内容，右边留出了一大块空白，如下图显示。

　　使用工具测量宽屏下Google Reader的内容显示像素，结果是955个像素，很有趣的数字。

　　我在《更改博客页面宽度到960像素》一文中已经提到了，现在的网页设计的行业标准应该就是950/960像素宽度，这个宽度应该是人眼在不转动的情况下能看到的极限了，实际阅读区域正文的宽度是650像素，Google Reader的这个设计很有意思。

　　在Google搜索引擎中，搜索结果的显示宽度确是另外一个数字580像素，这是又一种内容宽度设计，Google这么做的原因估计是为了更好的显示右侧广告。

　　我的博客最初使用的是778像素这个宽度，在2008年的那次改版后，修改为878像素宽度，主要是为了修改方便，直接加了100像素，正文区域的阅读宽度是668像素，左侧侧栏宽度是200像素。不过，今年的改变，我的博客的整体宽度修改为960，正文区域的宽度是728像素，728的宽度仅仅为了好放Google AdSense而已。

宽屏幕下的 Web 设计

王俊煜, — 2009-04-06 23:12:31

我倾向于在 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 的实现效果). 不是说分栏这样的解决方案一定好 (搞不好要用户来回拖垂直滚动条就更麻烦了), 但我们确实还可以开阔一下思路, 想想如何能优化宽屏幕下的显示效果.

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

参考阅读:

相关话题：屏幕分辨率和布局源地址：http://blog.wangjunyu.net/1076

让阅读更流畅

tony — 2009-04-06 02:46:01

有价值的争论会带来思考，网站页面的宽度究竟如何设定？一个咖啡馆博客如何设计引起的争论。

用户的屏幕
现在的屏幕趋势很可能会出现两极分化，一种是追求大屏幕，跟当初电视机一样，现在去中关村，24寸都成为主卖产品了。另一种趋势是小和便携，尺寸会越来越小，目前的上网本，大多还是保持了1024的宽度。以后，谁知道呢？
显然，设计需要应需而变。

阅读宽度的尺寸和单位
1 用百分比显然不利于各种分辨率的屏幕，这个理由千鸟说得很明白。
2 最适合的宽度是650px？google是那么认为，从reader可以看出来，width和line-height其实都是为英文的最佳阅读设计的，具体中文最佳阅读宽度是多少？这个当初我在做在线阅读器就研究过，关于宽度，我也没有很好的结论，但是应该比650窄一些才对，这个根据字数可以推断：英文一行的单词比较中文字少，宽一点会流畅。所以我给自己blog设置成600px。

页面留白的问题
这个应该是大家炮轰ucd大社区页面设计的问题。确实有很多朋友跟我反馈了几个问题：
1 没有发现右侧的最新话题
2 单个话题页面没有发现“我来参与”的操作。

白鸦在这个问题争论的后期，语气显然软了下来，认为首页是为了和整站宽度一致的考虑。
大社区其实主要是让人来阅读的，除首页之外的设计，中间的留白我认为是合理的，也是最优的。这个宽度足以让你忽略右侧的信息专心阅读左侧内容。
如果左栏信息的重要程度是9，右栏是1，那么留白是好事。如果没有那么悬殊，就得另外考虑了。

最近在改自己的wp皮肤，主要改进一下原来冗余的css以及布局结构上的不合理。

相关话题：屏幕分辨率和布局源地址：http://uitony.com/?p=85

宽屏不是用来阅读的

千鸟 — 2009-04-05 15:25:48

首先得抛出个重要的前提观点，大屏幕、宽屏幕根本不是为方便“扫视”准备的。所以说以内容为基础的网站设计不用考虑超宽、超大的场景，甚至包括服务类网站都如此。

曾经在800*600为主流时，页面宽度大都以770或780px为标准；在1024*768为主流时，页面宽度大都以950或960px为标准。当时准则很简单，首页固定宽度，因为版面容易控制；内文页自适应宽度，因为可以让更大屏幕（主要是1024*768）用户单屏看到更多内容。

但现在的大屏幕通常得超过17′才算，在这种情况下，全屏自适应的排版模式并不易读。因此我个人认为，在显示器越来越宽、越来越大的发展趋势下，页面宽度还是固定为好，并且应该以适应1024*768为基准，950或960px几乎是用户不扭脖子、双眼扫视的宽度极限。

至于大屏幕应用，主要是为了能放更多窗口，或者特殊的查看、处理超大图片场景。其目地都是为了提高工作效率，使用双屏的目地也是如此。全屏模式下，自适应页面中间必然大量留白，固定页面两边必然大量留白。所以回到开篇所述结论，大屏幕浏览页面的良好体验，本就应该用户自己调整窗口，否则无论如何都有鼠标“长征”的弊端。

宽屏幕的意义主要在于让用户看宽幅电影时的体验更好，绝对不是阅读体验。用普通4:3屏幕看宽幅电影必然造成上下留有黑边，本身就是种浪费，与用宽屏浏览网页两边会有留白是同样道理。比如我很少在笔记本上看电影，用笔记本主要是工作和学习，因此我还是喜欢12′普通比例，虽然宽屏笔记本越来越成为主流。

再比如我博客现在风格版面，从06年第一版设计开始就宽度固定，再大再小的屏幕都如此。现在content宽度是几次调整后的结果，固定还是自适应各有各的好处，我不喜欢自适应。在是否需要固定的问题上，我不是很同意白鸦观点，另外大辉、西贝提出的问题，我下周二上班用大屏幕截几个有趣的应用后再探讨。

有人认为“UCDChina网志写的挺好，但实际产出不是一回事。”很多时候，研究而成的总结仅仅在理论阶段，实际应用并接入项目得需要时间。创新必然超前于应用，何况因为我们自身的能力问题，还有很多悬而未决的概念、理论认识错误。

最后回到blog皮肤问题，建议所有“号称”web设计师的同行们自己动手设计blog界面，这是自我能力的最基本展示，欧美同行的成绩大家有目共睹。不同的方向必然有不同创意结果，包括视觉设计、交互设计、界面设计、信息设计都能在各自点上尽情发挥。只有在百花齐放的环境里，国内web design水准才可能得到真正意义上的提高。

相关话题：屏幕分辨率和布局源地址：http://blog.rexsong.com/?p=6040

网页用多宽才更合适？

白鸦 — 2009-04-05 13:07:12

此文用来正式回复大辉同学的疑问。

.
1、结论：固定宽度只适合功能型网站，不适合希望用户认真阅读的浏览型网站。UCD大社区是浏览型网站，它的定位是“知识库”，希望你停留在这里认真浏览和阅读。

2、大屏幕不是用来显示更宽文字内容的，大屏幕下必然会面临鼠标长途奔袭的问题。建议用大屏幕的人：为自己的身体健康着想，在大屏幕下阅读的时候，养成缩小窗口的习惯。共勉 :)

3、希望用户认真阅读的网站，主要内容区域的宽度必须固定，不能过长，否则会伤害到阅读者的眼睛，而且不适合阅读的流畅性。固定宽度在650左右最合适，有兴趣的人可以去搜索相关报告，为什么是650左右。（Google是按照英文算的宽度，我们可以按照中文相对调整）

4、一个页面只有一个主要内容区域，其他所有都是辅助内容，能隐藏就隐藏，能忽视就忽视。在用户浏览的时候，辅助内容不要紧挨着主要内容。那样会干扰阅读，侧面影响内容摄取的质量。特别是当辅助内容不能很少的时候。

5、浏览型网站尽量别用三栏，三栏太难设计，一个合理的页面不需要一下子摆出来那么多内容。

6、所以：对于浏览型网站，在大屏幕下，浏览区域和辅助区域需要有分隔。即使因为不用固定宽度会带来视觉上的不协调。

7、虽然屏幕越来越大，对于一些网站来说1024的宽度不一定会是主流，但至少需要向下兼容这个宽度，把他们作为一个很重要的人群考虑。

8、宽度问题其实是一个蛮值得讨论的问题。在屏幕越来越大，尺寸越来越多样的时候，这个问题会越来越凸显。
但如果纠结于“不要有空白”、“功能和内容不能分开”，没有任何意义。有些可用性原则，没有挑战余地。就好像公共场所的门必须向外打开一样。

9、对于这个问题，设计者应该为用户考虑更有益的方式。而不是听用户说他们想要什么样的方式。因为：大多数嗓门大的用户，并不知道什么样的方式对自己最有益。

0、为了保证更好的阅读体验，UCD大社区的设计者们正在考虑：是否不再录入那些阅读体验很差的网站的文章，或者将这些文章的默认链接改为我们的快照页面(点大社区文章标题前的“望远镜”ICON就是快照页面)。欢迎大家说出你的看法
UCD社区现在还有很多不足。欢迎大家提出更多意见。特别是对于我们的内容组织形式，以及内容质量等问题。

.
关闭评论。有深度的讨论请往这个话题

相关话题：屏幕分辨率和布局源地址：http://uicom.net/blog/?p=827

关于《UCDChina 的设计是否土鳖？》——拿数据说话

西乔 — 2009-04-04 03:10:03

起因现场：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 体现页面中视觉重心，引导用户视觉轨迹的方法有上百种。
强迫用户去看什么，把你想给用户展现的和用户需要用到的区域之间划上一条银河显然不是个好主意。

相关话题：屏幕分辨率和布局源地址：http://blog.xiqiao.info/2009/04/04/244