移动端APP的UI设计尺寸如何让人耳目一新
新闻来源：优漫教育
日期：2021-11-26
刚涉足移动端设计与开发的同学，基本都要在大小问题上纠缠一段时间才能摸清头绪。这段时间我也想通了，觉得有必要写一篇足够浅显易懂的教程来帮助每个人。由原则开始，澄清所有有关尺寸的细节。既然是写给初学者的，你别嫌我烦。
现象
众所周知，移动端设备的屏幕尺寸很大，破碎严重。特别是Android，你能听到许多种分辨率：480x800？480x854,？540x960,？720x1280,？1080x1920，还有传奇的2K屏幕。最近几年iphone的分裂也在升级：640x960,？640x1136,？750x1334,？1242x2208。
别怕这么大。事实上，大多数app和手机端网页，在不同大小的屏幕上都可以正常显示。表明大小的问题一定有解决办法，而且有规律可循。
像素密度
注意，屏幕由许多像素点组成。前面提到那么多个分辨率，就是手机屏幕实际像素的大小。例如屏幕480x800，它由800行，480个像素点组成。每一点都发出不同颜色的光，这就是我们所看到的。与手机屏幕的物理尺寸，与像素大小不相称。iPhone就是一个典型例子3gs屏幕像素为320x480,iPhone？4s的屏幕像素为640x960。这两款手机正好是这两款手机的3.5英寸。
因此，我们将介绍一个很重要的概念：像素密度，即PPI这个指针是连接数字世界和现实世界的桥梁。
inch，精确的意思是，被安排在每英寸长度上的点数。1英寸是个固定长度，相当于2.54厘米，相当于食指末端那个指节的长度。较高的像素密度代表着更好的屏幕显示效果。与普通屏幕相比，Retina屏幕清晰的原因在于其像素密度增加了一倍。
倍数和逻辑象素。
重新使用iPhone？举例说明3gs和4s。假定存在一个邮件列表界面，我们不妨用PC端的网页设计思路去想像。在3gs上可能只能显示4-5行，而4s可以显示9-10行，并且每一行都变得特别宽。但是两款手机实际上大小一样。若以这种方式显示，3gs上的效果非常好，那么在4s上就会小到无法辨认单词。
实际上，两种方法都起到了同样的作用。因为Retina屏幕使用了2x2像素，即1像素。例如原来顶部44像素高的导航条，在Retina屏幕上以88像素的高度显示。将界面元素全部变为2倍大小，只有3gs的效果。画面更加清晰。之前，iOS应用程序的资源图片中，同一个图表通常有两个大小。您将看到有些文件名带有 2x字样，有些没有。里面没有 2x的用在普通屏上，带 2x的用在Retina屏上。iOS会自行决定使用哪张图片，Android的道理也是如此。
从这个标准来看，苹果将Retina屏幕定义为2倍的倍率(iPhone？除了6个plus之外，这个速度是3倍)。真实的象素除以倍率得到逻辑象素尺寸。他们的显示效果是一样的，只要两个屏幕的逻辑像素相同。
Android的解决方案类似，但是更加复杂。由于Android的屏幕尺寸实在太大了，分辨率的高低跨度也非常大，不像苹果只有那几个固定大小的固定装置。因此Android就将各种设备的像素密度划分为几个围区间，为不同范围的设备定义不同的倍率，以确保显示结果基本一致。
