新浪博客

移动端界面UI设计的倍率与逻辑像素

2015-12-25 10:45阅读：

http://blog.sina.cn/dpool/blog/u/5583620765

有许多初学者觉得移动端的界面UI设计十分复杂，因为移动端的屏幕尺寸多种多样，那么界面UI设计的尺寸就不好统一，实际上在移动端的界面UI设计上也是有许多关于尺寸的技巧的，今天，交互科技就来和大家说说关于移动端界面UI设计的倍率与逻辑像素这个内容。

移动端界面UI设计的倍率与逻辑像素
让我们来看看iphone 3gs和4s的屏幕。假设有个邮件的界面UI设计，我们用PC端的网页UI设计的思维来想象一下，3gs大概只能显示4-5行，而4s就能显示9-10行，并且每行会变的特别宽。但是两款手机其实都是3.5英寸的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。

移动端界面UI设计的倍率与逻辑像素

在现实中，这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。
在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏的界面UI设计上，带@2x的用在Retina屏的界面UI设计上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。
由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

移动端界面UI设计的倍率与逻辑像素
而Android的界面UI设计显像解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示出的界面UI设计效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。

移动端界面UI设计的倍率与逻辑像素
如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：
ldpi [0.75倍]
mdpi [1倍]
hdpi [1.5倍]
xhdpi [2倍]
xxhdpi [3倍]
xxxhdpi [4倍]
各型号iPhone的倍率比较简单。而Android手机的比较多，具体怎么分？哪些手机是几倍的倍率呢？我们先看一张表，这是2014年10月到2015年03月的数据：

移动端界面UI设计的倍率与逻辑像素
就目前的界面UI设计状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义：
ldpi 如今已绝迹，不用考虑
mdpi [320x480]（市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小）
hdpi [480x800、480x854、540x960]（早年的低端机，屏幕在3.5英寸档位；如今的低端机，屏幕在4.7-5.0英寸档位）
xhdpi [720x1280]（早年的中端机，屏幕在4.7-5.0英寸档位；如今的中低端机，屏幕在5.0-5.5英寸档位）
xxhdpi [1080x1920]（早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上）
xxxhdpi [1440x2560]（极少数2K屏手机，比如Google Nexus 6）
自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的界面UI设计显示效果。
不过需要注意的是，Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480x800和1080x1920，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320x533和360x640。很显然，后者更宽更高，能显示更多内容。所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致，这一点在界面UI设计中也是要注意到的。

我的更多文章

下载客户端阅读体验更佳

APP专享