令人烦恼的视窗
文 / Peter-Paul Koch,Luke Wroblewski,Stephanie Rieger,Lyza Danger Gardner设备制造商为了让自己的设备拥有更清晰的屏幕,往往选择提高屏幕的像素,但有些时候像素的增加并不能让用户获得良好的阅读体验。本文以苹果公司的移动设备为例,为我们揭示了为什么高像素的屏幕会给用户的阅读带来“烦恼”。每周,都会出现具有各种屏幕尺寸、像素密...
·
文 / Peter-Paul Koch,Luke Wroblewski,Stephanie Rieger,Lyza Danger Gardner
设备制造商为了让自己的设备拥有更清晰的屏幕,往往选择提高屏幕的像素,但有些时候像素的增加并不能让用户获得良好的阅读体验。本文以苹果公司的移动设备为例,为我们揭示了为什么高像素的屏幕会给用户的阅读带来“烦恼”。
每周,都会出现具有各种屏幕尺寸、像素密度和输入类型的新设备。作为开发人员和设计人员,我们都同意按照标准来标记、设计以及编写我们所创建的内容。浏览器制造商也同意支持这些标准并为此设置适当的默认值,因此我们可以实现双赢的结果。 开发者和浏览器厂商之间的协议变得比以往任何时候都更加重要。
这就是为什么当某个设备或浏览器厂商做出了违背协议的事情时,总是会对大家造成伤害。如果另外一方是极具影响力的公司(比如苹果公司),那么受到的伤害则会更大。 苹果公司最新的平板电脑iPad Mini就陷入了这样一种矛盾的处境:其设备宽度viewport的标记默认值与第一代iPad的值相同(1024×768像素),但iPad Mini的物理屏幕尺寸却小了40%。这就意味着网页的每一个按钮、图形、链接和文本行在iPad Mini上都显得非常小——即使我们试图让一切显得正常并构建出灵活的多设备体验,也无法改善这种情况。 但苹果公司并不是惟一的罪魁祸首。这是从我们开始使用视窗时就一直存在的问题,它不仅与像素有关,还与我们自己的实践有关。让我们回过头来重新审视一遍造成目前困境的真正原因,并且了解一下我们需要怎样做才能走出困境。
像素带来的麻烦 是的,如今的视窗困境可以一直追溯到像素——那些我们每天都在使用的微小元素。像素带来的第一个挑战是数量。显示屏上的像素越多,可以显示的信息就越多。但由于这些像素都是物理像素,其数量无法改变,因此就有了第二个发挥作用的因素:屏幕的物理尺寸。 假设有两台2英寸宽的显示屏(如图1所示),右侧显示屏的分辨率为640×960,左侧的分辨率为320×480,那么在同样的物理空间中,右侧的屏幕可以容纳的像素数量将是左侧屏幕的四倍,较小的像素尺寸导致内容更少且屏幕更亮,给阅读带来了不小的障碍。 这正是Nokia E60出现的情况。2005年,大多数手机显示屏的宽度都是1.25 英寸,这种宽度平均可以容纳176个像素。但E60配备了一个分辨率为352×416的“庞大”显示屏,将两倍数量的像素挤进了类似的空间里。结果就是, 手机的屏幕看起来华丽鲜艳,却难以阅读。
[/caption]
为什么苹果公司要这样做? 要理解为什么苹果公司会发布一款在视窗体验上并不完美的产品,我们只需分析一下自己的使用习惯就能够得知了。 在iPad发布之后,全世界的互联网从业者争先恐后地调整自己的站点,以便能够更好地适应平板电脑。这一路走来,我们很多人都接受了平板化基于像素的概念,这些概念往往是专门针对像素布局为固定的1024×768的设备的 。 如果苹果公司根据iPad Mini的物理尺寸降低其“device-width值”,无疑会导致第二次混乱,因为那些根据平板电脑的屏幕尺寸(假设为1024×768)做出调整的网站,在新的设备上看起来会突然让人无法接受。 这里的责任是双方的。浏览器厂商需要提供视窗和文本大小的可靠基准,而作为实施者,我们也需要停止对布局进行像素级的控制(“控制”只是一种假象)。
前进之路 让我们前进的唯一方法是通力合作。
作为开发人员和设计人员,我们需要坚持那些早已认准的目标,并注意如何更好地完成自己的工作,这意味着完全放开像素精度的概念。我们需要赢得浏览器厂商的信任,让它们在事情出现不好的苗头时能听取我们的意见。 希望这篇文章能够清楚地说明我们正在为之努力的事情是正确的,同时也希望获得浏览器厂商们的认可及效仿。 现在,标准和一致性比以往任何时候都更加重要。我们要让浏览器厂商和设备厂商(比如苹果公司)清醒地认识到:我们要对默认视窗及其缩放达成一致的意见,我们愿意坚持协议,并且需要这些厂商与我们携起手来一起把这份协议履行到底。 让我们共同努力,向着未来进军。
本文选自《程序员》杂志2013年2期,未经允许不得转载。如需转载请联系 market@csdn.net
《程序员》2013年杂志订阅送好礼活动火热进行中
![图2 3台7英寸的平板电脑上的渲染差异](http://www.programmer.com.cn/wp-content/uploads/2013/02/QQ%E6%88%AA%E5%9B%BE20130220095653.jpg)
更多推荐
所有评论(0)