移动设计101:像素,点和分辨率

Author Avatar
Miaoxingren 5月 30, 2017

本文根据 Dave Kearney 的 Mobile design 101: pixels, points and resolutions 翻译,无法保证译文完全正确。

像素,点和分辨率之间的差异,甚至对那些正在转向移动开发或不熟悉各类屏幕及其工作原理的经验丰富的设计师来说,都是令人困惑的。本文将介绍在设计移动应用程序时需要了解的与屏幕和密度相关的主要关键词,并回答一些常见的其他问题。

需要知道什么?

当谈到屏幕大小和图像时,有6个概念是需要了解的:

  • Pixels像素(图像元素:屏幕上的单个颜色点)
  • Screen sizes屏幕尺寸(以英寸为单位)
  • Resolutions分辨率(宽和高,如320x480)
  • DPI像素密度(每英寸点数或每英寸像素数)
  • Points点(IOS的抽象度量单位)
  • Density Independent Pixels设备独立像素(Android的抽象度量单位)

其中,屏幕大小、像素pixels、分辨率和DPI都属于屏幕的物理属性,而点points则属于与正在运行的设备分离的一个坐标系统。这一区别的优势将随着本文其他部分的展开而更加清晰。让我们先从物理度量开始——像素、屏幕大小、分辨率和DPI。

像素pixel是什么?

像素pixel是屏幕上的一组彩色圆点(通常是红色、绿色和蓝色)。通过在不同光强下打开或关闭它们,可以产生任意数量的颜色和亮度。当所有的点都关闭时,就会产生黑色,而当红色、绿色和蓝色同时打开时,就会产生白色。简而言之,它们就是屏幕上的物理灯,能让你看到正在显示什么,但是每一个又是如此之小,不以极近的距离观察就无法单独识别他们。

pixels green red blue

手机屏幕尺寸是什么?

屏幕尺寸是屏幕对角线的长度或从一个角到另一个角的长度。

iphone history

手机分辨率是什么?

手机分辨率是横向穿过屏幕的像素个数乘以纵向沿着屏幕的像素个数。

例如原来的iPhone横向有320个像素,纵向有480个像素,分别率写作320x480。一些现代手机具有与高清电视相同的分辨率,1920x1280个像素(每个都是一组红色,绿色和蓝色的灯)都包含在5英寸的屏幕中。

mobile resolutions in use north america

分辨率比以前多了很多!

DPI

DPI(每英寸点数)是一个数字,用来测量在一英寸的屏幕空间中横向或纵向有多少个像素。

DPI也常被称为PPI(每英寸像素数),它是通过将屏幕的横向或纵向像素数除以以英寸为单位的宽度或高度来计算的。更高的DPI意味着每个像素必须更小,以便能够被可用空间容纳,这意味着屏幕会更清晰,屏幕可以绘制的细节级别更高。

mobile resolutions pixel per inch

图像是如何绘制的?

我们已经讨论过像素、密度、屏幕尺寸和分辨率,现在来讨论点points和DPs(密度独立像素)。幸运的是,它们几乎是相同的,所以一旦理解了其中一个,就会理解另一个。让我们先从点开始。

iOS —— 点是什么?

为了解释点是什么,有必要了解一下iPhone的历史。

最初的iPhone屏幕分辨率为320x480。随后iPhone4出现,视网膜屏幕Retina screen也随之出现。视网膜屏幕在保持相同屏幕尺寸的情况下把DPI增加了一倍 —— 这意味着相同空间下可容纳的像素数是原来的4倍(横向像素两倍,纵向像素两倍)。因此第一个视网膜屏幕的iPhone分辨率为640x960像素。

但是所有旧图形都必须以相同的尺寸在高密度的手机上绘制。如果手机像之前那样以1:1的比例绘制出所有图形,那么所有图形都将以原来尺寸的四分之一显示在新屏幕中 —— 这会让每一个旧应用不可用。为了防止这些应用程序不可用,苹果开始使用点points作为一种将图形绘制与屏幕密度分离的方法。

iphone resolutions points

点point被创建为距离单位,这允许图形按比例单独缩放,而不依赖手机分辨率。现在,每一个iOS图形都可以根据它的点值points values绘制,转换后在新屏幕上正确显示。

一个iOS点point相当于一英寸的 1/163。

无论手机分辨率如何,点point的尺寸始终是一样的,它来自于163DPI的最初的iPhone。

像素pixels和点points的转换

像素pixels和点points是静态度量单位 —— 它们不会随其他因素变化:

  • 1像素pixel总是1像素pixel,是屏幕上可以显示颜色的最小的一块。
  • 1点point总是1点point,是一个抽象单位,只有在与其他点point相关时才有意义。

点points不同于像素pixels是因为点points会随DPI而改变尺寸:

  • 对于iPhone,当分辨率为163DPI时,1个点point等于1像素pixel。在视网膜时代之前,所有的iPhone都是这样。
  • 326DPI的,如iPhone4,5和6,1个点point等于2个横向像素和2个纵向像素,或者总共4个像素。在视网膜设备上,如果只计算像素pixels数,则100x100的图像会被渲染为原来尺寸的四分之一。
  • 401DPI的,如iPhone 6+,1个点point等于3个横向像素pixel和3个纵向像素,或总共9个像素。

1x 2x 3x iphone comparison of pixels

DPs

Android使用几与点points相同的度量。这个单位称为“密度独立像素”。iOS的点point相当于1英寸的 1/163,与之相比,Android的密度独立像素DP相当于1英寸的 1/160(即1英寸的屏幕空间含有约160个像素pixel)。除此之外,没有其他有意义的区别。官方的定义是:

一个设备独立像素(密度独立的像素,DIP,DP)是一个物理度量单位,它基于计算机控制的一个坐标系统,它代表抽象的像素 —— 应用程序使用的像素,底层系统会将其转换成物理像素。

使用它们的时机和理由?

在设计Android布局时使用DP,在设计iOS布局时使用点point。密度独立像素和iOS点points都是虚拟像素单位,为了以密度独立(因此与设备独立/无关)的方式表达布局维度或位置,在定义UI布局时,应该使用虚拟像素单位。

如何转换像素pixels和点points?

android comparison iOS pixels

其他常见的屏幕相关问题

有无简单的区分像素pixels和点points的方法?

一个简单的解释是,像素pixels是计数得出的,而点是度量得出的。

什么是视网膜显示屏?它和常规显示屏有什么不同?

视网膜显示屏仅仅是一个像素密度(每英寸像素数或点书)是非视网膜屏幕的两倍的显示屏。苹果公司最新的创新也定义了“视网膜高清retina HD”,其像素密度是最初的iPhone的3倍。

只有苹果公司有视网膜显示屏吗?

苹果是唯一一家有Retina商标的屏幕的公司,但他们不是唯一一家拥有高分辨率屏幕的公司。三星公司最新推出的高端机型,如Galaxy S6 edge,其密度甚至更高,达到了577DPI。

如何判断DPI的高低?

一个好的DPI很大程度上取决于你离屏幕有多远。这就是为什么最新的手机有着和高清电视相同或更高的像素的原因,尽管它们的屏幕尺寸差别很大。具有较高DPI的移动设备通常更好,因为移动设备通常更靠近你的眼睛(4 - 6英寸/ 10 - 15厘米),因此当你在看远处的事物例如电视(一般4 - 6米/码)时,你可以更容易的看清较低的密度。

存在可能的最高的DPI吗?

实际上并没有最高的DPI(当我们在原子层面上的时候可能会有一些限制,但是我们还没有真正做到),但是人类的眼睛能感知到的东西是有限度的。对于大多数成年人,这一限度出现在距离4英寸的大约2190 dpi的屏幕上。在此限度之后,人类无法察觉到这种差异,因此,超过限度提高分辨率并没有什么好处。