一切为了程序猿！详析手机端的8PX原理

free_light 2015-11-14

展开全文

淘宝网的官方Blog有篇「一张图解释手机端8px原理」，简单来说就是把 iOS 和 Android 放在一起比较。同时探讨 1x、2x、ldpi、mdpi、hdpi、Xhdpi、xxhdpi 的尺寸与分辨率。本文就以我个人角度提出看法。（图片取自 Android – Devices and Displays）

8px 的文章内容就我的理解是基于「iOS 接口和 Android 接口长得完全一样」的情况下进行开发所写。iOS 和 Android 是两种完全不同的系统，用户操作习惯完全不同，在开发上本来就不应该把这两套做得完全一模一样。退个一百步、就算因为客户预算不足导致接口相同，也没有这么愉快的一套打天下方式。

屏幕尺寸换算

先讲最容易理解的 iOS：1x（320x480px）、@2x（640x1136px），就这两种尺寸。顶多留意一下 iPhone4 的 640×960，视签约内容而定，仍属于 @2x 的制图规范。要注意的就是「做大缩小」时所有尺寸单位要是双数，包含距离、坐标、切图等等（字级倒是允许0.5pt）。现在的 Store 审核就算不做 1x 尺寸也能通过，但 iOS 工程师在刻接口时仍就以 1x 为基准，坐标什么的还是要用1x 当单位。所以 UI 在做 @2x 大图时还是乖乖的把所有的数字都设定成双数吧。

Android 比较麻烦，屏幕尺寸和机种非常多，不可能每种尺寸都出一版 PSD，通常签约时就会载明在「特定某几支手机」一定没问题、其他手机尽量完美运行但不保证。我在做 Android 接口时会出 1.5x、2x、3x 这三种尺寸的切图。1x 的机型已经不多见了，何况 0.75x 的 ldpi？（官方图解上已拿掉ldpi、增加 4x 的xxxhdpi。）（每个国家国情不同，这部份要研究一下当地机型尺寸。）

dpi 对 UI 来说影响不大，最大的问还是在屏幕尺寸身上。我自己常用的尺寸如下，px 尺寸也许和其他人惯用的不太一样，但无影响，Android 屏幕尺寸本来就很多种，所以才需要 9-patch 来辅助。

mdpi 160dpi (1x) 480×320
hdpi 240dpi (1.5x) 800×480
xhdpi 320dpi (2x) 1280×720
xxhdpi 480dpi (3x) 1920×1080

Android 屏幕尺寸

此部份感谢友人 Takeru 说明。

为了适应android百花齐放的屏幕分辨率与屏幕尺寸，都是以dpi(Dot peer inch)为基准；
在Guideline的定义中 http://blog.csdn.net/moruite/article/details/6028547 这边有dpi的计算方法；
dpi会受到屏幕尺寸实际大小的影响；
即使同样分辨率在不同的屏幕尺寸中，会得到不同dpi；
已有网站整理目前各机种的屏幕分辨率和dpi http:///phone；
所以当dpi在480~320之间时，系统会以xxhdpi的图档为第一优先；
至于1920×1080则是目前最常见的分辨率；
之后，320~240之间，则是以xhdpi的图档为优先，以此类推；
同样的，在xhdpi中1280×720是最常见的分辨率；
所以，最初列表中的分辨率为常见的分辨率，并非绝对；
图档文件夹虽是以dpi作为区隔，都是以一个范围，非单一值；

（大部份都是以此为标准，当然也有例外，例如：note2）；

图片放大缩小

为了 iOS 和 Android 总共只出一套psd、不能使用 9-patch 延伸的图片部分，在 1x 情况下都要以 4px 为单位设计，做 2x 图时是以 8px 当单位。所有图片能用向量制作就用向量，设定 4px 是「为了避免因比例换算产生 0.X px导致图片模糊失真」（px 一定是整数、没有小数点），而不是最后的切图产出。切图一样要针对不同分辨率切几套出来，别以为用 4px 当单位、整个 psd 文件放大 2 倍，像素 icon 图就不会糊掉了。

切图和标示文件不可能共享

光切图方式就不一样了是要怎么用同一份标示文件？Android 有个独有的切图方式称「9-patch」，可以让切图自动延展。iOS 同样也有延展设计，但标示方式和 Android 不同，我另外开文写这部分。（有的 iOS RD 会要求使用坐标来制作标示文件，但 Android RD 没办法使用坐标。）

即使是相同的设计也无法使用同一套切图，举个例子：就以按钮来讲，iOS 可以把文字直接和底图上切成一张图，不管是 iPhone 5s 或 iPhone 4 上文字边缘依然锐利。但若希望 Android 每台手机都能看到锐利的文字，底图和文字就要分开，给 RD 的切图就是标了 9-patch 的纯底图一张，文字必需由系统产生才能保持绝对清晰。

在无法使用内建文字的情况下，Android 底图和文字要分开切、不能使用 9-patch。9-patch 只能延伸底图，如果延伸很长的话，会变成底图很大字还是很小的情况。

结论

为了 RD（工程师）好，还是把 iOS 和 Android 分开看待…直接拿 iOS 的切图和标示文件给 Android 的 RD 就等着被退货吧。