屏幕分辨率与网页布局和用户体验的关系

【 tulaoshi.com - Web开发 】

　　广州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书友会。希望更多的交流和分享为大家的日常工作和学习带来便利。