21

令人烦恼的视窗

作者: baiyuzhong 分类:产品酷览, 坊间人语, 移动专区   阅读:9,041 次 添加评论

文 / 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的“庞大”显示屏,将两倍数量的像素挤进了类似的空间里。结果就是, 手机的屏幕看起来华丽鲜艳,却难以阅读。

图1 屏幕尺寸相同的情况下,分辨率的大小决定了像素的数量

E60 还引入了一个目前早已为人们所熟悉的问题:用户如何在小型设备上访问“大”网站。诺基亚的解决方案是通过一个新的浏览器——Mini Map。这个浏览器的工作原理类似于今天的智能手机浏览器:首先渲染整个页面,然后将它缩放到适合使用的屏幕大小。叠加在这层渲染上的是一个透明的红色方 框,通过设备的按钮可以重新定位该方框,按下按钮则可以放大方框内所显示的内容。

进入视窗

Mini Map可能是动态视窗(一种构造,旨在通过动态改变可视屏幕区域的大小或比例,从而提高用户体验)的第一批商用者之一,但它还远远不是最后一个。

2007年,苹果发布了iPhone,它的体积比E60大很多,但它也面临类似的问题。在一个“巨大的”2英寸显示屏上,使用iPhone访问“真正的网络”意味着要将大页面加载到小设备上。苹果则通过一系列精心打造的改进来解决这一问题。

首先创建一个虚拟视窗,这个虚拟视窗与诺基亚为Mini Map设计的视窗类似。当用户浏览桌面网站时,浏览器会首先渲染整个页面(默认画布宽度为960像素),然后再将此页面缩小,直至适应2英寸的显示屏。这 样用户就能够与页面进行交互,并且滚动或放大他们所选择的区域。

苹果并没有就此止步,它还开发了一个新的 viewport元标记。不使用该标记的站点将使用默认的980像素的传统网络视窗进行渲染,但使用该标记的开发人员可以为自己的站点声明视窗,包括将宽 度设置为十分重要的“device-width值”(该值告诉浏览器“请为此设备屏幕选择一个最适合的宽度”)。

很快,其他移动浏览器厂商 便开始纷纷追随苹果公司的做法。直到如今,几乎所有移动浏览器都支持 viewport元标记及“device-width值”。这为我们提供了一个公平竞技的机会,这个机会尊重那些为多设备网络修改站点的适配花费大量时间 和精力的开发人员,同时那些尚未转型的厂商仍会获得“良好”的默认体验。

Mini的问题

移动设备和浏览器厂商分配给device-width的值与该设备的物理尺寸直接相关。物理尺寸较小的设备需要较小的device-width值(这会导致内容过多)。若将该值设置得过大,则大部分内容会丢失,用户无法舒适地去阅读。

这就是iPad Mini的屏幕让人不敢恭维的原因。它的“device-width值”与普通iPad相同(768像素),但其物理尺寸却小很多。正因如此,iPad Mini的屏幕上显示的网页尺寸与Google Nexus 7上的相比会小27%(根据设备像素的相对大小来计算),主要原因就是因为苹果公司决定将该设备的视窗定义为768像素。

根据内容大小进行解析

根据内容大小进行解析所导致的第一个问题就是文本。在较小的空间中有更多的像素,这意味着,以像素为单位定义的字体看起来会很小。

当然,很多人不再使用像素来定义大小——我们使用相对尺寸元素(比如ems),只是这种方法并不能很好地解决问题。

当使用ems时,我们相信浏览器默认缩放级别的基准字体的大小(单位术语为1em或100%)是清晰可读的。

但情况并非总是如此,浏览器的基准font-size值 (1em) 大致相当于一个16像素的正方形。该比率作为一条纽带把绝对单位和相对单位联系在了一起,但浏览器的不同可能会带来一些差异。

在iPad Mini上,基准字体的大小是16像素。当屏幕容纳较少的像素时可能没有问题,但在视窗定义得不那么适当的高密度显示屏上,字体可能会小到难以阅读。

当然,并非所有的浏览器都支持1:16的em像素比,例如Kindle Touch的浏览器有一个高密度的视窗,但通过使用1:20的比率进行调整,将默认字体的大小提高了几个像素,就可以获得更好的阅读体验。这虽然没有完全 解决iPad Mini所遇到的问题,但至少让屏幕上显示的内容清晰可辨(如图2所示)。

图2 3台7英寸的平板电脑上的渲染差异

为什么苹果公司要这样做?

要理解为什么苹果公司会发布一款在视窗体验上并不完美的产品,我们只需分析一下自己的使用习惯就能够得知了。

在iPad发布之后,全世界的互联网从业者争先恐后地调整自己的站点,以便能够更好地适应平板电脑。这一路走来,我们很多人都接受了平板化基于像素的概念,这些概念往往是专门针对像素布局为固定的1024×768的设备的 。

如果苹果公司根据iPad Mini的物理尺寸降低其“device-width值”,无疑会导致第二次混乱,因为那些根据平板电脑的屏幕尺寸(假设为1024×768)做出调整的网站,在新的设备上看起来会突然让人无法接受。

这里的责任是双方的。浏览器厂商需要提供视窗和文本大小的可靠基准,而作为实施者,我们也需要停止对布局进行像素级的控制(“控制”只是一种假象)。

前进之路

让我们前进的唯一方法是通力合作。作为开发人员和设计人员,我们需要坚持那些早已认准的目标,并注意如何更好地完成自己的工作,这意味着完全放开像素精度的概念。我们需要赢得浏览器厂商的信任,让它们在事情出现不好的苗头时能听取我们的意见。

希望这篇文章能够清楚地说明我们正在为之努力的事情是正确的,同时也希望获得浏览器厂商们的认可及效仿。

现在,标准和一致性比以往任何时候都更加重要。我们要让浏览器厂商和设备厂商(比如苹果公司)清醒地认识到:我们要对默认视窗及其缩放达成一致的意见,我们愿意坚持协议,并且需要这些厂商与我们携起手来一起把这份协议履行到底。

让我们共同努力,向着未来进军。

 

本文选自《程序员》杂志2013年2期,未经允许不得转载。如需转载请联系 market@csdn.net

《程序员》2013年杂志订阅送好礼活动火热进行中

转播到腾讯微博

----->立刻申请加入《程序员》杂志读者俱乐部,与杂志编辑直接交流,参与选题,优先投稿

请评论

preload preload preload
京ICP备06065162