服务热线:400-0033-166
万商云集 - 企业数字化选用平台

企业首选的

数字选用平台

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

2020-12-29 15:35:07 阅读(138 评论(0)

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

内容来源:网络,以上内容来源于网络,不代表本站观点,如有侵权,请联系删除。

推荐阅读

5款热门手机监控软件盘点,照看老人监控超方便!

目前国内的人口老龄化问题不断加剧,而年轻群体不断向大城市涌入,对于很多人来说家里的老人可能都是在老家生活,而子女又不能在身边陪伴,如果出现一些紧急情况又无法及时处理怎么办?很多年轻人选择通过手机监控的方式来时刻查看家里老人的动态,避免一些危…查看详情

看泰剧用什么软件呢?这些软件为大家推荐

在闲暇的时候,很多人都比较喜欢看泰剧,但是如果没有选对软件的话,可能也会受到限制。其实大家不妨选择,针对于看泰剧所使用的软件,这样能够让大家轻松的找到自己喜欢的泰剧,那么看泰剧用什么软件呢?这这些软件为大家推荐,一起来了解吧。 …查看详情

误删微信好友怎么恢复?

苹果手机微信删除了的好友怎么恢复?登入微信。在微信主界面底部点击“微信”。所有的聊天记录都在,里面包含了与好友的聊天记录列表。 点击一个好友,打开对应的备份文件夹,正常都是一堆数字和字母组成文件名的文件夹。进入后,找到“voice”文件夹…查看详情

域名停放是什么意思

  域名停放是指将未使用或暂时没有使用的域名(即没有网站或网站不可访问)指向一个有广告或推广信息的网站,以便通过这些广告或推广信息来获得收益。这种方式被称为“域名停放”或“域名占用”。  通常,域名停放是由域名注册商或域名交易平台提供的一项…查看详情

出纳用什么财务软件比较好?

每个公司在招聘职位的时候都是有出纳这个职位的,出纳主要管的是公司的一些财务问题,包括员工的工资或者是员工的罚款问题,都是管的,那么出纳用什么财务软件比较好呢,这个大家是需要提前了解到的。 1、柠檬云财税 是一款功能完善的免费…查看详情

微信电商小程序开发 | 它的配套组成部分以及价格

微信电商小程序开发怎么做?有哪些组成部分?各价格是多少?想必这是大多有微信电商小程序开发需求的企业都尤为关注的问题。图片来源于网络 微信电商小程序开发配套组成部分及价格:◤ 1. 域名我们在小程序中看到的商品图片,都需要通过在后台操作进行…查看详情

plm系统功能介绍,国内知名plm厂商对比

信息化时代,信息化企业管理越来越受到企业决策者的重视,PLM系统的实施和部署在整个信息化管理流程中占非常重要的地位,本文总结了一些plm系统功能介绍和部分国内知名plm厂商对比分析干货,有需求的朋友可收藏。 什么是plm系统? PLM的英文…查看详情

桂林十大特产是什么

  桂林是中国的旅游胜地,在这里不仅有美丽的山水风景,还有丰富的文化底蕴和美味的当地特色美食。桂林的特产不仅种类繁多,而且口味独特,深受游客和当地人的喜爱。以下是桂林十大特产的详细描述,希望能为大家带来一些帮助。  1.桂林米粉  桂林米粉…查看详情

电商网络推广怎么做?电商维持蓄客的最佳手段

网络是伴随着信息技术的发展而发展的。网络技术的发展和应用改变了经济体系中信息的分配和接受方式,改变了人生活、工作、学习、合作和交流的环境。然而络营销作为新的营销方式和营销手段实现企业营销目标。所以电商网络推广是非常重要的,电商网络推广怎么做…查看详情

tm和r商标的区别是什么?tm和r商标有什么区别?

在注册商标的时候会出现两种,一种是tm,一种是r商标。不懂的人可能就不知道这两者之间的区别。如果想要更好的注册商标,那么这两者之间的区别是一定要知道的,那么tm和r商标的区别是什么呢?下面就来详细的了解一下这个问题。1、含义不一样tm的商标…查看详情

免费派单系统大全,派单系统平台怎么选?

全球经济在疫情的笼罩下受阻,线上需求与日俱增,不难看出其不小的潜力。随着后疫情时代的到来,线下传统行业逐步升温,消费需求迅速释放,派单系统的需求量逐渐递增,派单系统平台怎么选?这份免费派单系统大全一定能对你有所帮助。 1. 销售易免费派单系…查看详情

图片编辑软件哪些比较好用?好用的图片编辑软件推荐

很多人都特别喜欢拍照或者是收藏一些比较好看的图片,但是有些图片可能清晰度不够或者是图片的上面会有水印,这个时候就需要进行图片编辑。其实想要打造出更理想的图片效果,可以选择到比较好用的图片编辑软件,但是图片编辑软件比较多,很多人都…查看详情

笔记本软件如何选?推荐这几款

现在的人们,已经慢慢的放弃使用纸质的笔记本了,更多的开始选择一些笔记本软件,来记录事情,或者是写各种学习的笔记和工作的笔记等等,但是在选择笔记本软件的时候,一定要注意根据自己的需求,那么笔记本软件如何选择呢?推荐这几款,一起来了…查看详情

无货源网店真的能赚钱吗

  无货源网店指的是在不需要购买和存储自己的产品的前提下,通过自建网店进行产品销售的模式。这种模式的出现,在一定程度上解决了传统实体店经营所面临的资金压力和库存管理等难题,大大降低了创业门槛,吸引了越来越多的创业者。但是,在无货源网店中真的…查看详情

哪儿可以注册商标?这些知识你要了解

哪儿可以注册商标?近期,商标时不时爆出大新闻,许多之前不曾了解商标的企业、个人都开始关注起来商标了,也开始明白了对企业而言,商标十分重要。它是企业打造品牌的基础,也是企业产品的一个保障。许多企业、个人也会开始好奇道,商标如何注册呢?商标在哪…查看详情

最新文章