美文网首页Material Design
逻辑相对像素(Independent Pixel)

逻辑相对像素(Independent Pixel)

作者: 大大的鱼 | 来源:发表于2018-04-11 11:43 被阅读19次

    为了在不同像素密度和不同大小的屏幕上统一度量单位,谷歌提出了“逻辑相对像素(dp)”的概念。这里还涉及到其他两个概念,图像实际像素(px)和屏幕像素密度(ppi)。

    这个逻辑单位dp意味着相同逻辑大小的图像在不同屏幕密度的屏幕上所需要的实际像素可能不一样。举个例子:一个24dp*24dp的图标显示在普通屏(160ppi)和高清屏(320ppi)上。设计需要输出不同实际像素大小的图片素材,普通屏上显示24px*24px 大小高清屏上显示48px*48px大小的两套图片。这样的结果就是两个屏幕上图标大小在视觉上是一样大的,高清屏上的图标显然要清晰一倍。

    逻辑相对像素的大小定义是:在像素密度(ppi)大小为160的屏幕上尺寸为1 dp 的图像用1px 表示,那么在其他像素密度的屏幕上的大小就可以通过公式去换算:

    逻辑像素的定义

    逻辑像素的大小x 是已知的,那么可以根据屏幕密度的大小去计算实际的像素大小 y :

    实际像素大小的计算

    在Sketch上以一个像素密度的屏幕为基准去设计,再导出其它像素密度不同屏幕所需的实际图片大小,这种操作是非常方便的。为了保证最终图片的清晰度和大多数用户的视觉体验,建议以占比较大的的像素密度作为基准。如果你的应用用户中高清屏占80%以上,那么应该以高清屏为基准,向下适配普通屏幕导出0.5倍的图片素材,向上适配超高清屏导出1.5倍的图片素材。这是应该注意的是在设计中图片的大小需要为偶数,否则就会出现半个像素大小的情况,图片就会糊掉。

    100*100dp大小的图像在不同像素密度屏幕上的缩放比例和实际像素大小

    这里会有一个有趣的问题,对于像素密度低于 160ppi 的屏幕怎么办?比如在户外的超大屏幕上显示。我认为低于160ppi 的屏幕就不能在使用这个公式和思路了,逻辑相对像素的目的是统一不同屏幕的度量单位,最终使图片在不同屏幕上的视觉大小保持一致。如果还套用这个公式,那么就会出现用1个像素表达多个dp的信息,视觉感官大小虽然一致了,但是图像会不清晰。对于像素密度低的屏幕应该扩大屏幕的尺寸,然后根据使用场景决定需要用几个像素去表达 1个dp的信息。

    再次打个有趣的比喻:一个外星人来到地球,提问 一瓶可口可乐多少钱?中国人会说3块钱人民币,法国人会说1英镑,美国人会说50美分....为什么每个人的答案不一样?因为没有统一的度量单位,每个国家的汇率都不同。各国汇率就相当于各个屏幕的像素密度,如果存在一个统一的价值度量单位那么就是逻辑相对像素了。现在美元很强势,是国际结算的货币,就相当于ppi为160的屏幕。大家都通过对美元的汇率进行转换。

    相关文章

      网友评论

        本文标题:逻辑相对像素(Independent Pixel)

        本文链接:https://www.haomeiwen.com/subject/iolahftx.html