提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
本文结合自身几年前刚开始接触UI时的困惑,我通过查阅学习整理总结出,希望能帮助大家一起了解iOS和Android这两个平台设备分辨率对设计的影响。期间经过多次修改,尤其这两年ios设备不断更新发布以及sketch这款设计工具的大面积使用。
现如今,手机的屏幕分辨率越来越多样化,而如何适配各种屏幕分辨率的设备,一向是设计师和开发者非常头疼的事儿。因此,对于每位设计师来说,要想更好的理解并掌握标注与切图的规范,首先需要了解与学习相关的基本概念。
作为一名设计师,我刚接触移动应用的界面设计时,最先需要考虑的问题就是:要用多大的画布尺寸设计?页面上的元素应该画成多大的?需要设计多套设计稿吗?如何切图协助技术完成界面开发?
一、在明白用何种尺寸做设计之前,我们先了解下几个点:
(1) ppi (pixels per inch):图像分辨率 (在图像中,每英寸所包含的像素数目)
(2) dpi (dots per inch): 打印分辨率 (每英寸所能打印的点数,即打印精度)
(3) PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数;
1 in(英寸)=2.54 cm
(4) DIP(也就是我们用的dip/dp):device independent pixel,设备独立像素, 不会直接使用px,而是使用dp,px = dp * density(密度或叫倍数由DPI决定,如后面会讲到的,320dpi下,density=2,则2px=1dp)。
dp是开发写layout(布局)的时候使用的尺寸单位,sp是开发写layout(布局)时关于字体的字号单位,且dp与sp总为1:1关系。
(5) pt是ios的开发单位,dp是Android的开发单位,这两个都是绝对长度,可以换算成对应的实际物理长度英寸(px没有长度概念)。
二、设备尺寸如何影响设计
视觉稿在客户端的还原程度,最终还是要取决于控件的大小及适配程度,而需要输出的控件的大小则取决于设备的分辨率大小 。
为此接下来就需要了解ios和Android两个平台的对应的换算关系(以下没有涉及到全面屏,但是了解原理后,其实都一样)。
【Android】
Google 规定的(以下dpi与屏幕分辨率规定的是一个区间值):
根据以上的换算,再结合公式 【PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数】, 要在不同分辨率设备上适配一张切图,并保存实际呈现效果能够合理,需要根据对应的倍数比切出对应尺寸的切图。现在Android端切图主要是输出hdpi、xhdpi、xxhdpi、xxxhdpi:
为什么要用160dpi作为基准进行换算?看下面这张图
1、当以160dpi为基准进行的尺寸换算, 只要是 4 的公倍数,那么各个模式下换算得到的都会是整数;如果以其它dpi作为基准,再按照上面的去算下, 会发现很复杂,多了很多小数点。
2、而且第一款机子是160dpi(我觉得这个不算是主要原因)。
所以,以160dpi作为基准换算就更合理了。
这里也顺便讲一下,用@2x(也就是720*1280)做为Android主要设计稿尺寸,是因为只需要输出一套切图去上下适配,图片即使放大缩小也不会有明显的失真。这种情况下,切图基于8px原理输出,就不会在缩放时候出现小数点的情况。(如果不考虑ldpi,只需要保证是4的公倍数)
而现在有sketch作为主要的UI设计工具,由于其具有矢量方便缩放的特性,一般直接用@1x(360*640)作为设计尺寸,而且开发也是直接用@1x的标注数值去写样式。这种情况下切图基于4px原理输出,就不会有小数点的。(如果不考虑ldpi,只需要保证是偶数就行)
【ios】
ios跟Android的适配其实是一个道理,都有对应的倍数换算关系,但是iOS机型相对Android的机型是少且统一,只是ios是用pt(设备独立像素,跟dp一样也是有实际的长度)作为开发单位。
仔细看上面的图表,跟Android一样,ios也是可以根据对应的屏幕分辨率去适配和换算的。屏幕的像素密度越高,对应的一个pt下,容纳的像素点会越多。同样也是按照@1x,160dpi作为基准,则px=pt*dpi/160。
按照输出一套切图去上下适配的话,应该采用@2x(750*1334)作为设计稿的尺寸,只需要保证是偶数就可以单独适配ios端。但是,大部分产品都以ios的iphone8的尺寸750*1334为主做一套设计稿,最终输出标注与切图应用于ios和Android两个平台(当然,某些控件的大小后期可以根据适配的效果来调整)。ios只需要输出@2x和@3x的切图,而Android需要用到@1.5x,@2x,@3x,@4x,所以在这个前提下,采用ios的设计尺寸,但是按照Android倍数换算,保证切图是基于8px的原则输出。
但是,现在UI设计大部分都用高效的sketch作为主要的设计工具,配合sketch measure、sketch mirror以及基于sketch开发的第三方工具,较之PS等传统的设计工具,更加轻量、高效,同时在图标以及界面的处理上,可以矢量化的处理——所以,现在可以基于@1x(375*667)这套尺寸来设计,最后切图输iOS(@2x.png、@3x.png) 和Android (@hdpi、@xhdpi、@xxhdpi、@xxxhpdi),按照最终采用的这种情况,只要保证切图是偶数就行。Sketch也在其右侧属性检查器区域为我们提供了现在主流的设备尺寸,按快捷键A就可以看到。
手机、电脑等智能硬件设备更新很快,本文的总结个人也跟随着修改过好几次。这样的总结既能帮助我自己梳理思路同时也能加深理解,也希望能给大家解决掉一些困惑。谢谢阅读!
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册