关于移动端设计尺寸的相关知识

刚开始参与移动终端设计和开发的学生，基本上会在尺寸问题上纠结一段时间才能摸到线索。我花了很长时间才明白，我觉得有必要写一个足够通俗易懂的教程来帮助你。从原理出发，明确尺寸的所有细节。因为是写给初学者的，不要觉得我啰嗦。首先，我们都知道移动终端设备有很多屏幕尺寸和严重的碎片化。尤其是Android，你会听到很多分辨率:480x800，480x854，540x960，720x1280，1080x1920，还有传说中的2K屏。近几年iPhone的碎片化也加剧了：640x960，640x1136，750x1334，1242x2208。不要被这些尺寸吓倒。事实上，大多数应用程序和移动网页都可以在各种尺寸的屏幕上正常显示。说明尺寸问题一定要有解决办法，有规律可循。要知道像素密度，屏幕是由许多像素点组成的。之前提到的分辨率这么多，都是手机屏幕的实际像素尺寸。例如，480x800屏幕由800行和480列像素点组成。每一点都发出不同颜色的光，形成我们看到的画面。手机屏幕的物理尺寸与像素尺寸不成比例。最典型的例子是iPhone3gs的屏幕像素是320x480，iPhone4s的屏幕像素是640x960。只是两倍，但是两部手机都是3.5英寸。因此，我们应该引入最重要的概念：像素密度，即PPI（pixelsperinch）。该指标是连接数字世界和物理世界的桥梁。Pixelsperinch，准确地说，每英寸长度上排列的像素点数量。1英寸是固定长度，相当于2.54厘米，大约是食指末端指节的长度。屏幕显示效果越好，像素密度越高。Retina屏幕比普通屏幕清晰得多，因为它的像素密度翻了一番。以iPhone3gs和4s为例，使用倍率和逻辑像素。假设有一个电子邮件列表界面，我们不妨想象一下PC网页设计的想法。3gs只能显示4-5行，4s可以显示9-10行，每行都会变得特别宽。但这两部手机实际上同样大。假如这样，3gs上的效果刚刚好，在4s上就会小到根本看不清字。实际上，两者的效果是一样的。这是因为Retina屏幕使用2x2个像素作为一个像素。例如，在Retina屏幕上使用了88个像素的高度来显示原来44像素高的顶部导航栏。导致界面元素变成两倍大小，但与3gs效果相同。但画质更清晰。以前iOS应用的资源图片中，同一张图片通常有两个尺寸。你会看到文件名有的有@2x字样，有的没有。普通屏幕上不使用@2x，Retina屏幕上使用@2x。只要图片准备好了，iOS就会判断用哪一张，Android也是如此。由此可见，苹果以普通屏幕为基准，将Retina屏幕定义为2倍(iPhone6plus除外，已达3倍)。逻辑像素尺寸可以从实际像素除以倍率中获得。只要两个屏幕的逻辑像素相同，它们的显示效果就相同。Android的解决方案相似，但更为复杂。因为Android屏幕尺寸太大，分辨率跨度很大，不像苹果只有几个固定设备和尺寸。因此，Android将各种设备的像素密度划分为几个范围，为不同范围的设备定义了不同的倍率，以确保显示效果相似。虽然像素密度的概念很重要，但我们不需要自己计算，iOS和Android都帮助我们计算。如图所示，像素密度在120左右的屏幕属于ldpi，160左右的屏幕属于mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并给出了相应的倍率：ldpi[0.75倍]mdpi[1倍]hdpi[1.5倍]xhdpi[2倍]xxhdpi[3倍]xxxhdpi[4倍]各型号iPhone的倍率相对简单，我们稍后会讨论。那么Android手机那么多，具体怎么分？哪些手机的倍数是多少倍？让我们先看一张手表。这是友盟2014年10月至2015年3月的数据：就目前的市场情况而言，可以粗略判断各种手机的分辨率。虽然不全面，但至少一年内还是有一定参考意义的: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](GoogleNexus6等极少数2K屏手机)自然以1倍mdpi为基准。对于像素密度较高或较低的设备，只需乘以相应的倍率，即可获得与基准倍率相似的显示效果。对于像素密度较高或较低的设备，只需乘以相应的倍率，即可获得与基准倍率相似的显示效果。但需要注意的是，安卓设备的逻辑像素尺寸并不统一。例如，hdpi和xxhdpi分别属于两种常见的屏幕480x800和1080x1920。逻辑像素为320x533和360x640，除以各自倍率的1.5倍和3倍。显然，后者更宽更高，可以显示更多的内容。因此，即使存在倍率，各种Android设备的显示效果仍然不能完全一致。不难发现，逻辑像素的大小确实决定了显示效果。为此，iOS和Android平台都定义了自己的逻辑像素单位。IOS的尺寸单位是pt，Android的尺寸单位是dp。说实话，两者其实是一回事。单位之间的转换关系随倍率而变化：1倍：1pt=1dp=1px（mdpi、iPhone3gs）1.5倍：1pt=1dp=1.5px（hdpi）2倍:1pt=1dp=2px（xhdpi、iPhone4s/5/6)3倍:1pt=1dp=*x（xxhdpi、iPhone64倍：1pt=1dp=4px（xxxhdpi）单位决定了我们的思维方式。在设计和开发过程中，应尽量使用逻辑像素尺寸来思考界面。在设计和开发过程中，应尽量使用逻辑像素尺寸来思考界面。在设计Android应用程序时，一些设计师喜欢将画布设置为1080x1920，另一些设计师喜欢设置为720x1280。给出的界面元素尺寸不统一。Android的最小点击区域尺寸为48x48dp，这意味着在xhdpi设备上，按钮尺寸至少为96x96px。在xxhdpi设备上，是144x144px。无论画布设置多大，我们都设计了基准倍率的界面样式，开发人员所需的单位都是逻辑像素。因此，为了保证准确高效的沟通，无论是在标记图还是日常沟通中，双方都需要用逻辑像素尺寸来描述和理解界面。不要说“底部标签栏的高度是96像素，我是按xhdpi做的”。Web如何处理移动终端页面的绝对单位仍然是px，至少代码是这样写的，但它的真相与应用程序相同。由于像素密度是设备本身的固有属性，它会影响设备中的所有应用，包括浏览器。前端技术可以充分利用设备的像素密度，浏览器可以使用应用程序的显示来渲染页面。根据像素密度，按相应的倍率缩放。该测试页面的响应断点可以通过此测试.看看你的移动设备屏幕宽度，这就是逻辑像素宽度。以iPhone5s为例，屏幕分辨率为640x1136，倍率为2。浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率。因此，在制作页面时，只需按基准倍率即可。无论什么样的屏幕，倍率是多少，页面都是根据逻辑像素大小设计和开发的。但在准备资源图时，需要准备两倍大小的图纸，并通过代码将其缩小到一倍大小，以确保清晰度。实际应用最关心的是实际应用，如何设置画布。就iOS而言、Android、分别梳理Web三个平台。但在此之前，我想给使用PS设计的朋友们介绍一个小技巧。正如我之前所说，我们应该考虑界面的逻辑像素大小。体现在设计过程中，就是把单位设置成逻辑像素。打开PS的首选-单位与标尺界面，将尺寸和文本单位改为点（Point）。无论iOS设计如何，这里的点也是pt、单位使用Android或Web应用程序。当然，还是要记住每个平台单位的名字。我们在这里用的只是它的原理，不在乎它的名字。通过图像大小中的DPI来调整倍率。其实这个DPI就是PPI，像素密度。众所周知，屏幕上的DPI设计设置72，印刷品设计DPI设置300。为什么是这两个数字？首先说300，这和人眼的辨别能力有关。由于1英寸是固定长度，每1英寸有多少像素决定了图像质量的清晰度。正如我之前所说，这就是像素密度，即DPI。当DPI达到300以上时，它的细腻会给人一种真实感，就像现实世界中的物体一样。相反，如果DPI只有10，那么你的食指节长度只有10个像素，这显然是马赛克。因此，印刷品应设置为300，以确保清晰。再说72，有一定的历史原因。最早的图形设计是在mac计算机上进行的，mac本身的显示分辨率为72。PS还将图像DPI设置为72，以确保屏幕上显示的尺寸与打印尺寸相同，便于设计。72个PC显示器的分辨率逐渐成为默认的行业标准，因此遵循了这一规则。现在回到正题，如何通过DPI调整倍率？既然屏幕本身的分辨率是72，DPI设置72只是尺寸的一倍，那么设置72的两倍就是2倍的屏幕，就这么简单。我们来看看三个平台的画布设置:iPhoneiPhone的屏幕尺寸不同，我说的是逻辑像素尺寸，真的很头疼。如果你想使用一套涵盖所有iPhone的设计，你应该选择逻辑像素折叠的模型。从市场份额数据来看，目前iPhone5/5s的屏幕最多。逻辑像素320x568的倍率为2。iPhone6的屏幕有望在未来排名第一。逻辑像素375x67，倍率为2。按照这两种尺寸设计，都是主流做法。iPhone4s可以兼顾较短，较大的6plus不会太空。但切图时要注意，因为iPhone6plus的三倍图是由两倍图放大的，所以位图要注意保证清晰。Android都说Android碎片化严重，但现在比iOS更容易处理。因为今天的Android屏幕逻辑像素已经趋于统一:360x640取决于你设置了多少次。以xhdpi为准，将DPI设置为72x2=144。以xxhdpi为准，将DPI设置为72x3=216。对于那些宽度为480px的老低端机，画面会更小，显示内容会更少。稍加注意，重要内容应尽量保持在界面的上部。当然，这些模型在不到一年的时间内就会被边缘化，基本上被淘汰。现在可以作为功能机运行，软件多了肯定会卡，用户体验谈不上。不考虑也可以。Web手机网页没有统一的标准，更流行的方法是根据iPhone5的大小进行设计。逻辑像素320x568倍率2。这种做法更真实。倍率2的屏幕是iOS和Android的主流，是两倍屏幕中最小的逻辑像素。因此，图片的大小可以保持在较小的水平，页面加载速度快。当然，缺点是图片在倍率3的设备上并不是特别清晰。假如追求图片质量，愿意牺牲加载速度，那么可以根据最大屏幕进行设计。也就是iPhone6plus的尺寸，倍率3，逻辑像素414x736。总而言之，移动端的尺寸比PC端复杂，关键在于倍率。然而，由于倍率的存在，将大大小小的屏幕拉回同一水平线，以确保一套设计能够适应各种屏幕。从这条水平线的角度来看，它很容易理解。