目录

  • 基础概念：像素/分辨率
  • 应用及问题（ios/Android）：设计/开发

一、基础概念

  • 逻辑像素（pt/dp）、物理像素（px）、渲染像素（px）

    逻辑像素——视觉上固定的物理长度。iOS系统中逻辑像素单位是pt,Android系统中是dp。

    物理像素——设备硬件可以达到的像素数量，和渲染的精细度有关。

    渲染像素——软件可以达到的像素数量，有时比物理像素高。

    device

    （图片来源于网络）

  • 逻辑分辨率（pt/dp）、物理分辨率（px）、渲染分辨率（px）、PPI、DPI

    逻辑分辨率——视觉的固定宽度*高度

    物理分辨率——横像素数*竖像素数（硬件可达到的像素数量）

    渲染分辨率（显示分辨率）——横像素数竖像素数（软件可达到的像素数量）

    PPI（图像分辨率、屏幕像素密度）——Pixel Per Inch（像素每英寸）

    DPI（常用于表示印刷精度）——Dots Per Inch（点每英寸）

​ 注意：PS中的DPI常指PPI

PPI

二、应用及问题

IOS平台

  • 设计应用 (单位：px)

    界面的设计尺寸——按1倍或2倍的逻辑分辨率设计（一般设计一稿）。

    注：“2倍的逻辑分辨率”即指部分渲染分辨率。

特定元素的设计尺寸——参考ios规范和界面的设计尺寸（1倍或2倍）。

注：“特定元素尺寸”有标签栏高度、导航栏高度、图标尺寸等。

切片尺寸——按渲染分辨率（2倍和3倍的逻辑分辨率）导出两套切片尺寸。

注：“切片”指图标和图片。

适配尺寸——如果采用1倍的逻辑分辨率设计尺寸，则根据不同设备逻辑分辨率的尺寸差别进行调整；如果采用2倍的逻辑分辨率（@2X）设计尺寸，在向上适配（@3X）时需要先统一倍率（×1.5），再根据设备渲染分辨率的尺寸差别进行调整。

  • 开发应用（单位：pt / 字体单位：px）

    所有元素尺寸——按逻辑分辨率（pt）开发。如果是一倍率设计图，则无需换算；如果是2倍率设计图，则需要把图中以px为单位标注的尺寸除以2。

  • 问题

    1）渲染分辨率与逻辑分辨率的关系是什么？

    渲染分辨率（px）和逻辑分辨率（pt）成比例（2或3倍），这意味着设备中1pt就会有2个或者3个像素去渲染，如下图所示。

    px

2）界面的设计尺寸为什么可以参考逻辑分辨率和渲染分辨率，但不参考物理分辨率?

大部分情况，渲染分辨率等于物理分辨率，有些机型渲染分辨率会超出物理分辨率,也就是软件呈现的像素量超过了硬件能达到的像素量,手机按屏幕可呈现的像素渲染，所以一般参考渲染分辨率。

由于渲染分辨率和逻辑分辨率成比例，所以我们也可以按逻辑分辨率来设计。因此界面的设计尺寸会采用1倍或者2倍的逻辑分辨率。

注：只有矢量软件（ai、sketch）绘制界面时可采用一倍率尺寸，因为输出切片需乘以相应倍率（2和3）。如果位图软件（ps）也采用一倍率，输出切片会模糊。

3）为什么界面的设计尺寸不采用3倍的逻辑分辨率？

如果采用3倍的逻辑分辨率，设计尺寸需考虑3的倍数。适配2倍率的逻辑分辨率时需乘以2/3，在开发时也需除以3，换算不便。

​ 4）为什么一般ps中的画布中DPI都设置成72？

​ Photoshop中, DPI概念等同PPI，也就是屏幕分辨密度。已知1pt=1/72Inch, ppi=px/1Inch,所以当ppi=72时， 画布中1px=1pt，而手机屏幕上1pt可能包含2或者3个像素，因此一个像素在实际手机屏幕上的尺寸总是小于 1pt。画布设置的1px=1pt，但实际所需又不足1pt，所以导出的图片尺寸总是大于屏幕需要的尺寸，图片在屏 幕中不会被拉伸，只可能被压缩，不会出现模糊情况，安卓中也是同理。因此72ppi已经足够使用，并且已经 被公认，不需要设置更高的数值。

​ 5）为什么特定的元素有规范？

​ 规范统一了界面的视觉，使得特定元素在不同设备上有基本一致的视觉大小。

​ 如下图所示，@2x和@3x的设备对应特定元素的不同尺寸，为1.5倍的关系。由上述1）可知，渲染分辨率和 逻辑分辨率（开发尺寸）成比例（2或3倍），设备中1pt就会有2个或者3个像素去渲染。所以开发时我们需要 根据设计稿的倍率，将尺寸除以相应的倍率进行应用，这些元素的尺寸（比如导航栏高度、标签栏高度、图 标大小等）在除以对应的倍率后数值一致，所以显示在屏幕上的大小也基本相同。但是不同的设备中元素的 实际尺寸（视觉上看到的尺寸）不一定全相同，因为PPI不同，一个像素的实际大小也受影响。

​ 注：倍率相同的设备PPI不一定相同，所以那些特定元素的视觉大小也会有差异。

ios_scale

(图片来源：https://uiiiuiii.com/screen/ios.htm)

安卓平台

  • 设计应用(单位：px)

    画布设置——采用了几种主流的PPI和对应的屏幕像素。

    Android_scale

    (图片来源：https://uiiiuiii.com/screen/android.htm)

  • 开发应用（常用单位：dp / 字体单位：sp）

    1DP定义为屏幕像素密度为160PPI时的1px。

    在MDPI时，1PD=1PX，所以1DP的尺寸是固定的。开发中Android系统会根据几种典型的屏幕像素密度进行适配。

  • 设计问题

    为什么安卓平台不和ios一样有几种固定的屏幕分辨率？

    由于安卓手机屏幕碎片化严重（存在太多的屏幕分辨率），所以人们把各种设备的屏幕像素密度（PPI）划成了多个范围区间，给不同范围的设备定义了不同的分辨率和比例，来保证同一范围内的设备有相近的显示效果（视觉上的物理尺寸相近）。另外，在不同的PPI下对一些图标也有一些固定的尺寸规范。

版权声明：转载或者引用本文内容需注明来源