菜单 关闭

屏幕分辨率和页面布局

通过 雅各布·尼尔森7月31日,二千零六

总结:优化1024×768的网页,但是使用一个液体布局,它可以很好地扩展任何分辨率,从800×600到1280×1024。


我最常问的问题之一网络可用性课程是“我们应该设计什么屏幕分辨率?”完整的答案有点棘手,manbetx官方网站手机版但基本建议是明确的:

  • 优化为1024×768,这是目前使用最广泛的屏幕尺寸。当然,总的指导方针是优化目标受众最常见的解决方案,所以未来的规模会改变。现在甚至可能是不同的尺寸,如果,说,您正在为一家公manbetx官方网站手机版司设计一个内部网,该公司为所有员工提供大型监视器。
  • manbetx官方网站手机版专为特定显示器尺寸设计因为屏幕大小因用户而异。窗口大小的变化更大,因为用户并不总是最大化他们的浏览器(特别是如果他们有大屏幕的话)。
  • 使用液体布局扩展到当前用户的窗口大小(即,避免冻结总是相同大小的布局)。

目前,关于60%在所有监视器中,设置为1024×768像素。(见屏幕尺寸的历史趋势和更新数据相比之下,只关于17%使用800×600因此,对于这些小型显示器用户来说,追求完美显然不那么重要。同样明显的是,然而,你不能简单地忽略17%的客户群,因为你提供了一个冻结的布局,它需要比现有的更多的屏幕空间。

优化1024×768

当我说“优化”时,我的意思是你的页面应该看,工作最好的最常见的尺寸.它仍然应该看起来好的和工作在其他尺寸下,所以我建议采用液体布局。但最好是1024×768。

为特定屏幕大小优化页面布局的三个主要标准是:

  • 初始可见度:所有关键信息是否在折叠上方可见,以便用户无需滚动即可看到?这是显示的项目数与显示的项目数之间的权衡。每个项目显示多少详细信息。
  • 可读性:阅读不同列中的文本有多容易,考虑到分配的宽度?
  • 美学:当元素的大小和位置适合此屏幕大小时,页面的外观如何?把所有的元素都正确地排成一行-也就是说,标题是否紧挨着照片,等。?

您还应该考虑所有三个标准的全尺寸范围,不断将浏览器窗口从800×600调整为1280×1024。您的页面在整个分辨率范围内的所有标准上都应该得分很高。

你的页面也应该能在更小、更大的尺寸下工作,尽管这样的极端并不重要。只有不到一半的用户仍然拥有640×480。虽然这样的用户当然可以访问您的站点,给他们一个不太好的设计是可以接受的妥协。manbetx官方网站手机版

正如第一个标准所暗示的,滚动始终是一个关键考虑因素。用户通常不喜欢滚动(请参见用户注意力分布高于褶皱以下)所以,当你设计的时候,manbetx官方网站手机版如果用户只滚动一两个屏幕,您应该考虑他们能看到多少。

滚动和初始可见性明显取决于屏幕大小:较大的屏幕显示更多的折叠内容,需要较少的滚动。这就是您必须优化1024×768的地方:在此分辨率下,在折叠上方展示您最引人注目的材料(同时确保绝对关键的信息在800×600处仍然可见)。

所以,小屏幕呢?比如那些在移动设备?液体设计应该一直延manbetx官方网站手机版伸到手机,但不要以为这就是你应该如何交付公司的移动用户体验.移动环境是特殊的;为了优化它们,您必须设计一个提供manbetx官方网站手机版较少功能的单独服务,写得更简洁,更注重上下文。

大屏幕

许多用户都有大型显示器。目前,约18%的用户至少有1280×1024个。拥有大屏幕的用户比例正在增长,虽然没有我想的那么快。

大屏幕是提高白领生产率的最简单方法,和每年至少赚5万美元的人应该至少有1600×1200的屏幕分辨率。.这种分辨率的平板显示器目前的价格不到500美元。所以,只要更大的显示屏至少能提高0.5%的生产率,你不到一年就能收回投资。(典型的公司管理费用是公司每名员工成本的两倍;始终记住使用加载成本,不带回家的薪水,在任何生产率计算中。)

苹果和微软都发布了报告,试图量化更大显示器的生产率增长。悲哀地,由于各种方法的弱点,这些研究没有提供可靠的数据。我的经验表明,当用户在大屏幕上进行知识工作时,估计生产率提高了5-10%。这就意味着,对于一个以屏幕为中心的知识每天工作10%的人来说,总体生产力提高了0.5-1%。毫无疑问,大屏幕是值得的。

我个人使用2048×1536显示器,我甚至不会称之为大屏幕。在接下来的10年里,我希望监视器说,5000×3000相当常用,至少在高端商务人士中。

从1600×1200开始,用户很少将浏览器窗口扩展到全屏,因为很少有网站在如此宽的画布上工作得很好。大窗口是处理电子表格的魔法,平面设计,manbetx官方网站手机版还有许多其他任务,但对于当前的网页范式来说,这是不可能的。今天,大屏幕Web用户通常会利用其额外的空间用于多个窗口和并行浏览.

为了在未来为网络用户提供真正的大屏幕服务,我们可能需要不同于单独页面的模式。也许一个更像报纸的比喻或一个不同的信息仪表盘将证明优越的道路。

无论如何,未来对新模式的需求并没有改变当前的建议:优化为1024×768,但不要只为这个尺寸设manbetx官方网站手机版计。你的页面应该在任何分辨率下工作,800×600至1280×1024及以上。

(另请参见:关于大屏幕页面manbetx官方网站手机版设计比这里讨论的要多。)