Web 设计中关于 DPI 的一些事情

  我经非常提及设计的一些细节问题,今天要讨论的是关于 DPI 这个细节,也许你已经注意到了一些问题。

  iOS 设备,从 iPhone 到 iPod,的分辨率放大方式,从初代的 1:1 到后来的 2:1 接着 iPhone6P 的 3:1,我们观察到它都是成倍数的放大,一个整数。

  而市场上很多的安卓设备却并非如此,它们的放大方式早期存在很多的 1.5:1,直至今日,我想你能找到 2.5:1 的设备。

  这件事的结果在于,当我们在代码中绘制 1px 抵达 2:1 设备实际绘制的是 2px 实际分辨率,而在 1.5:1 的屏幕上则绘制的是 1.5px,这也就造成了内容渲染结果的模糊。

  如果你使用过这些安卓设备,尤其是在 Web 上这个问题尤为突出,因为任何像素单位设计之初都是以整数绝对像素来定义的,即便是 rem 换算成像素点也是如此,而系统或浏览器无法处理好这种结果。

  它在 App 的设计也有表现,安卓 QQ 的一些版本有一些缕空的按钮(背景色透明有边框线条),这时线条所描绘的就是一个 1.5 像素,你会感觉到它显示的有些模糊,或者说有些问题。

  而系统 UI 自身则很少有这种问题,安卓自身在设计的时候考虑到这个情况就可以将原本的 1px 在 1.5:1 的设备上处理成 1px 或者 2px 而不取 1.5px。这体现在某些应用程序上也同样适用,或者拿字体和图标举例,如果字体并非对 1.5 放大倍率做过调整,或者图片形式的图标没有对这个中间值进行过特别优化,那么它的显示结果就不如倍数放大的设备。

  对于厂商来说需要注意这个问题,当然,对于一些设备而言可能硬件上有难题无法处理,如果取 1:1 内容显示的太小,而 2:1 则太大(显示范围非常小),但无论如何,这样做都是不好的。

  iOS 设备的精湛之处或许并不在于屏幕的色彩和 DPI 有多高,它一开始就知道放大倍率带来的结果,这个结果的影响力大于你的屏幕参数具体有多高,即便再出彩的屏幕,如果存在着非倍数放大的 DPI 设定,那将是毁灭性的,任何形式的 UI 与 文本 都会受此影响,结果是相当糟糕的。

在设计中会带来的一些 BUG:

  第一个是上面提到的像素模糊问题;

  第二个是因为 1.5 这种值的存在,相邻色彩块中间可能出现 0.5px 的断裂,当两个纯色模块靠在一起,本身是没有间距的,然而在这种设备下中间会有 0.5px 错位出来的显示结果,如同早期 IE 中经常遇到的 1px 莫名其妙的溢出。解决方法是将块元素 margin 减去 1px 加上其它代码调整成一个在两种 DPI 下都能正常显示的结果。选一些重点的调整即可。

  第三个问题是模糊,这可能跟浏览器有关,但目前普遍使用的 WebKit 一直存在这个问题,如果某个元素存在着透明度或不固定形式,那么在某种情况下会导致该块区域显示结果模糊。解决方法是针对它取消透明度,或者更多的调试也许可以获得一个既保持透明度又没问题的结果(例如文本区透明度,那么我们不让它透明,而改变文字本身的颜色灰度好了)。

  强调一下,除了 Web 在 App 设计中这个问题也存在,而在 Web 中问题更突出,并有第二和第三个或更多问题。

  如果你更改了安卓的 DPI 让它以 2:1 整数倍数放大,你会发现你的设备显示结果清晰无比……

发表评论

电子邮件地址不会被公开。 必填项已用*标注

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :joy: :idea: :funny: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)