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

刚开始参与移动终端设计和开发的学生，基本上会在尺寸问题上纠结一段时间才能摸到线索。我花了很长时间才明白，我觉得有必要写一个足够通俗易懂的教程来帮助你。从原理出发，明确尺寸的所有细节。因为是写给初学者的，不要觉得我啰嗦。首先，我们都知道移动终端设备有很多屏幕尺寸和严重的碎片化。尤其是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端复杂，关键在于倍率。然而，由于倍率的存在，将大大小小的屏幕拉回同一水平线，以确保一套设计能够适应各种屏幕。从这条水平线的角度来看，它很容易理解。

以上就是关于关于移动端设计尺寸的相关知识的相关介绍，更多关于移动端设计尺寸的相关知识相关内容可以咨询我们或者浏览页面上的推荐内容。我们将让你对关于移动端设计尺寸的相关知识有更深的了解和认识。