若指的是调节手机屏幕分辨率,vivo手机目前支持修改屏幕分辨率的机型有:iQOO 11、iQOO 11 Pro、X90、X90 Pro、X90 Pro+、iQOO 10 Pro、X80 Pro骁龙版、X80 Pro天玑版、X Note、iQOO 9 Pro、X70 Pro+、iQOO 8 Pro、Xplay6,路径为:设置--显示与亮度--屏幕分辨率,点击对应分辨率即可设置。
若有更多疑问,可进入vivo官网/vivo商城APP--我的--在线客服或者vivo官网网页版--下滑底部--在线客服--输入人工客服进入咨询了解。
1280x800。平板dpi是指平板电脑分辨率,正常情况下,安卓平板的分辨率在1280x800合适。安卓是一种基于Linux内核(不包含GNU组件)的自由及开放源代码的 *** 作系统,主要使用于移动设备,如智能手机和平板电脑,由美国Google公司和开放手机联盟领导及开发。在移动端 UI 设计中,经常会用到的单位有 4 种:px、pt、dp 和 sp,很多人分辨不清这几种单位及其换算关系,以及 iOS 和 Android 的切图要求,我在这里做下简单的介绍,希望大家读完后能有所收获(如有错误,欢迎纠正)。
px 即 pixel,像素点,电子屏幕上组成图像的最基本单位,在描述屏幕分辨率时也会使用该单位。1px 表示一个像素,例如 iPhone 8 的尺寸为 750px × 1334px,表示在该手机屏幕上,水平方向每行有 750 个像素点,垂直方向每列有 1334 个像素点。
pt 即 point,有两个含义:一是印刷行业常用单位,是一个标准长度单位,绝对大小,1pt = 1/72 英寸 = 035mm;二是 iOS 开发用的基本单位,当设计师以 1 倍尺寸进行设计 (375pt × 667pt) 并给出标注稿时,开发人员无需除以 2 便可直接使用。
dp 是安卓开发用的基准单位,在 dpi (屏幕像素密度,即每英寸包含的像素点) 为 160 的屏幕为上,1dp = 1px。为了简单起见,Android 把屏幕密度分为了 5 种:mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,下文会详细介绍其换算关系。
在安卓系统里,sp 与 dp 类似,不同的是 sp 可以根据用户的字体大小首选项进行缩放,而 dp 则不会。 尽量使用 dp 作为空间大小单位,sp 作为文字相关大小单位,例如:新闻类和短信类等大篇幅文本,推荐使用 sp 为单位。
在 iOS 开发中,不同机型的 iPhone 设备需要用到不同倍率的切图,下表格为各 iPhone 机型显示屏参数对比:
这里再简单了解下两个概念,ppi 和 dpi。
ppi (iOS):即 pixel per inch,屏幕像素密度,表示每英寸所包含的像素点,该值越高,屏幕越细腻。
dpi (iOS) :开发像素密度,表示每英寸所包含的开发像素点。
在 iOS 开发中,规定以 ppi = 163,dpi = 163 作为开发基准,
当 ppi = 163,dpi = 163 时,则 1pt = 1px;
当 ppi = 326,dpi = 163 时,则 1pt = 2px;
当 ppi = 401,dpi = 154 时,则 1pt = 26px ≈ 3px。
(为什么 iPhone 8+/7+/6+ 的开发基准是154?可能要问问苹果了)
依此类推,得出换算公式一:
若有小数,四舍五入即可。
在 iOS 开发中,目前只需要 @2x 和 @3x 两种切图,所以导出 2 倍和 3 倍的 png 即可。导出前注意检查切图是否存在半像素、毛边等情况,保证对齐像素,这样才能有效避免上线后页面上的 icon 出现虚边的问题,提高细节质量。
另外补充一点:从整体开发尺寸看,iPhone 8 是 375 × 667 pt (@2x),而 iPhone X 是 375 × 812 pt (@3x),同样的宽度,一个用 @2x 图,一个用 @3x 图,iPhone X 表现出了更高的清晰度,如图 2-1 所示。
在 Android 开发中,因为机型参差不齐,需要用屏幕密度来区分设计。
注意,这里的 dpi (Android) 和上文的 dpi (iOS) 是不同的概念,dpi (iOS) 是开发像素密度,而 dpi (Android) 即 dot per inch,表示屏幕像素密度 ,类似 iOS 开发里的 ppi。
Android 中,规定以 dpi = 160 为开发基准,
当 dpi = 160,基准dpi = 160,1dp = 1px;
当 dpi = 240,基准dpi = 160,1dp = 15px;
当 dpi = 320,基准dpi = 160,1dp = 2px。
依此类推,得出换算公式二:
在设计图标时,对于 5 种主流的屏幕像素密度 (mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi) 应按照 2:3:4:6:8 的比例进行缩放,如图 3-1 所示。
例如,一个启动图标的尺寸为 48 × 48 dp,这表示在 mdpi 的屏幕上其实际尺寸应为 48 × 48 px;在 hdpi 的屏幕上其实际大小是 mdpi 的 15 倍 (72 × 72 px);在 xhdpi 的屏幕上其实际大小是 mdpi 的 2 倍 (96 × 96 px),依此类推。
在某些况行下,还需要提供一种特殊的切图: 点九图 (上图所示)。点九图是 Android 开发中用到的一种特殊格式的,文件名以 “9png” 结尾。
这种能告诉程序,图像哪一部分可以被拉升,哪一部分不能被拉升需要保持原有比列。运用点九图可以保证在不模糊变形的前提下做到自适应,比如对话框背景就会用到点九图。
--
以上是全部内容,感谢你的阅读!
End
Android的多分辨率,一向是设计师和开发者非常头疼的事儿。尽管如此,对于多分辨造成的复杂问题,也是大家要优先解决的。Android支持多种不同的dpi模式:ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi 。
注意,ppi、dpi 是密度单位,不是度量单位 :
ppi (pixels per inch):图像分辨率 (在图像中,每英寸所包含的像素数目)
dpi (dots per inch): 打印分辨率 (每英寸所能打印的点数,即打印精度)
dpi主要应用于输出,重点是打印设备上;ppi对于设计师应该比较熟悉,photoshop画布的分辨率常设置为72像素/英寸,这个单位其实就是ppi 。尽管概念不同,但是对于移动设备的显示屏,可以看作ppi=dpi 。
ppi的运算方式是:PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数。即:长、宽各自平方之和的开方,再除以屏幕对角线的英寸数。
以iphone5为例,其ppi=√(1136px² + 640px²)/4 in=326ppi(视网膜Retina屏)
对于android手机,一个不确切的分法是,720 x 1280 的手机很可能接近 320 dpi (xhdpi模式),480 x 800 的手机很可能接近 240 dpi (hdpi模式),而320 x 480 的手机则很接近 160 dpi(mdpi模式)。
来自友盟指数2014年3月份的数据( 戳这里看最新数据 ):
480 x 800的手机占比最高为319%,720 x 1280的手机占比为165%位居第二,而240 x 320的手机占比最少为10% 。xxdhpi模式的高分辨率1080 x 1920手机占比也越来越高,目前为61% 。
2、单位换算方法
android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。这些单位如何换算,是设计师、开发者需要了解的关键。
dp:Density-independent pixels,以160PPI屏幕为标准,则1dp=1px。dp和px的换算公式 :dpppi/160 = px。对于320ppi的屏幕,1dp x 320ppi/160 = 2px。
sp:Scale-independent pixels,它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为 100%时, 1sp=1px。sp 与 px 的换算公式:spppi/160 = px。对于320ppi的屏幕,1sp x 320ppi/160 = 2px。
简单理解的话,px(像素)是我们UI设计师在PS里使用的,同时也是手机屏幕上所显示的,dp是开发写layout的时候使用的尺寸单位。
为什么要把sp和dp代替px? 原因是他们不会因为ppi的变化而变化,在相同物理尺寸和不同ppi下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行。
根据单位换算方法,可总结出:
当运行在mdpi下时,1dp=1px :也就是说设计师在PS里定义一个item高48px,开发就会定义该item高48dp ;
当运行在hdpi模式下时,1dp=15px :也就是说设计师在PS里定义一个item高72px,开发就会定义该item高48dp ;
当运行在xhdpi模式下时,1dp=2px :也就是说设计师在PS里定义一个item高96px,开发就会定义该item高48dp ;
当你的app需要适配多个dpi模式的时候,请参考图1的比例进行换算 。
3、设计稿基本元素的尺寸设置
为了适应多分辨率的手机,理想的方式是为每种分辨率做一套设计稿,包括所用到的icon、设计稿标注等。但在实际开发中,这种方法耗时耗力。所以通常会选择折中的方法。
方法一: 在标准基础上(比如xhdpi)开始,然后放大或缩小,以适应到其他尺寸。不足之处是,对于更高分辨率的手机,图标被放大后会导致质量不高。
方法二: 以最高分辨率为基准设计,然后缩小适应到所需的小分辨率上。缺点是,图标等若都最大尺寸,加载时速度慢且耗费流量较多,对于小分辨率的用户也不够好。
结合友盟的分辨率占比数据、也为了方便换算到android开发中的尺寸单位, 推荐设计稿的画布尺寸选用 720X1280 ,分辨率仍旧为72ppi(像素/英寸) 。
在android规范中对于导航栏、工具栏等的尺寸没有明确的规定。但根据48dp原则,以及一些主流的android应用的截图分析,总结一下尺寸要求:
状态栏高度: 50 px
导航栏、 *** 作栏高度: 96 px=48dp x 2
主菜单栏高度: 96 px
内容区域高度: 1038 px (1280-50-96-96=1038)
Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,高度也和菜单栏一样为:96 px
4、图标和字体大小(来自官方规范文档)
a、启动图标(home页或app列表页)
整体大小为48 x 48 dp
b、 *** 作栏图标,代表用户在app中可以使用到的最重要的图标
整体大小为32 x 32 dp ,图形实际区域为 24 x 24 dp
c、小图标/场景图标,提供 *** 作或特定项目的状态。
比如gmail app的星型标记、一些内容展开收起用到的向下向上的图标等。整体大小为16 x 16 dp ,图形实际区域为 12 x 12 dp 。
d、通知图标
如果app有通知,要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x 24 dp ,图形实际区域为 22 x 22 dp 。
注:android规范提供的尺寸单位是dp,若设计稿尺寸设为720 x 1280 ,图标大小需在规范要求的尺寸数字上乘以2。比如 *** 作栏图标32 x 32 dp ,则设计稿上应该是64 x 64 px
首先要明确两点,什么是dpi?什么是dp?dpi = dots per inch(每个inch上有多少个点)
160dpi的屏幕,1dp = 1px,也就意味着1dp = 1/160 inch。
所以每个inch上的点数越多(点的密度越大),每个dp对应的px也就越大
dp/sp可以认为是相同的,不过sp通常用于设置字体大小,而dp用于尺寸。
dp/sp与px换算,是和设备的density相关的,dp density (密度)= px。
float density = ResourcesgetSystem()getDisplayMetrics()density;
所谓的xhdpi,其dpi并不是某一固定取值,只要在240~320dpi范围内的都认为是xhdpi(mdpi/hdpi/xhdpi/xxhdpi类似)。
所以同样是xhdpi的手机,dp和px的转换也是不同的。您好,需要以下这几个步骤
1打开手机,点击桌面设置。
2进入设置,点击下方关于手机。
3进入关于手机,选择屏幕查看后面分辨率即可。
图像每英寸长度内的像素点数。
DPI(Dots Per Inch,每英寸点数)是一个量度单位,用于点阵数码影像,指每一英寸长度中,取样、可显示或输出点的数目。
DPI是打印机、鼠标等设备分辨率的度量单位。是衡量打印机打印精度的主要参数之一,一般来说,DPI值越高,表明打印机的打印精度越高。
DPI是指每英寸的像素,也就是扫描精度。DPI越低,扫描的清晰度越低,由于受网络传输速度的影响,web上使用的都是72dpi,但是冲洗照片不能使用这个参数,必须是300dpi或者更高350dpi。例如要冲洗46英寸的照片,扫描精度必须是300dpi,那么文件尺寸应该是(4300)(6300)=1200像素1800像素。 说明:本文主要从UI设计师角度,试图回答在移动产品UI设计过程中会遇到的以下问题:
1、如何理解「像素密度」和「逻辑像素」两个概念?
2、面对琳琅满目的手机型号和屏幕大小,应该选择何种倍率和尺寸进行作图?
3、基准设计稿完成后,如何进行屏幕适配?
说明:本章涉及的概念有:屏幕尺寸、PPI、DPI、物理像素。
诺曼在《情感化设计》一书中提到愉悦感的四大类,其中第一类是:生理的愉悦,也就是本能的感官体验。画质的清晰、细腻、逼真是视觉感官体验的一部分。而画质是由屏幕性质决定的。
当前市场手机型号众多,如何判断不同屏幕清晰度质量的好坏?这里,我们需要引入一个重要概念。
我们知道,屏幕是由很多像素点组成的,每个点发出不同颜色的光,构成我们看到的画面。当我们眼睛的视杆细胞和视锥细胞接收到的光线越多,我们感知到的画面就会越丰富。而如果需要光线多,就需要保证像素点够多。
我们在计算「人口密度」时,会抓出一平方公里的地区,看里面塞了多少人,据此,判断人口的密集程度。同理,我们可以抓出一英寸的界面,看里面塞了多少个像素点,判断像素的密集程度,这就是「像素密度」。
前面提到,「像素密度」表示一英寸界面中的像素点数,所以它跟两个参数有关:界面尺寸 和 像素。
一般手机的出厂配置信息中都标有「屏幕尺寸」,指的是屏幕的对角线长度,单位是inch(1英寸=254厘米,大约是食指最末端那根指节的长度)。设备长、宽的实际长度,即「物理尺寸」,用勾股定理计算可得屏幕尺寸。
我们也可以查到设备的分辨率,即在横纵切上的像素点数,也叫「物理像素」,单位是px。
拿到这两个参数,就可以计算出「像素密度」。
还有一种计算方法,是先算出「物理像素」的平方和,再开根号,最后除以「屏幕尺寸」。
从计算方法可以看出,像素密度就是pixels per inch,简称:PPI。
值得注意的是,在Android系统中,除了像素密度PPI,还有一个DPI,也是「像素密度」,全名为:Dots per inch,两者的区别是:
PPI:表示物理像素密度,是客观存在不会改变的。
DPI:表示软件像素密度,是软件参考了ppi后,人为指定的一个固定值,写在系统出厂配置文件上,保证在某一个区间的ppi在软件上使用同一个值,它是安卓特有的。
所以,可能有几款安卓手机的PPI不同,但是DPI相同。比如,有3款相同分辨率不同尺寸手机的ppi可能分别是430,440,450,那么在Android系统中,可能dpi会全部指定为480,以保证相同分辨率手机的表现一致。
苹果手机型号有限,所以没有DPI的概念,全部用PPI表示。
「像素密度」是连接数字世界和物理世界的桥梁。它是设备的固有属性,反映了屏幕呈现影像细节的能力。像素密度越高,屏幕显示的密度越高,拟真度就越好。Retina屏比普通屏清晰,就是因为它的像素密度翻了一倍。
我们可以根据「像素密度」判断屏幕显示质量的好坏。iPhone 3gs和iPhone 4物理尺寸相同,但是后者的ppi为326,是前者163的两倍,分辨率也是两倍的关系,说明4的呈像能力更佳。同时也可以看出,手机屏幕的物理尺寸和像素尺寸是不成比例的。
总之:只要两款手机的「像素密度」相同,它们的显示「精细程度」就是相同的。
说明:本章涉及的概念有:逻辑像素、倍率、逻辑像素密度。
假如我们在界面A(1英寸,4x4 px)上放一个1×1像素的红方格,然后把它移动到同样尺寸、2倍像素密度的界面B(1英寸,8x8 px)上,如下图所示。
在界面B上,红方格还是涵盖了1×1像素,但是实际的物理尺寸却变小了。这是不符合一般人的常识的,为什么同一个内容在同样尺寸的界面上显示不一样?
如何解决这个问题?我们可以试着分析一下:
对比界面A和B,B的「像素密度」更大,「界面-物理像素」也更大。
红方格在移动过程中,方格的「物理像素」不变,方格的「物理尺寸」变小。
以上因素中,「物理尺寸」是我们唯一肉眼可以观察到的属性。我们的目标是让红方格的变化过程符合常识,也就是保持红方格的「物理尺寸」不变。根据「像素密度」的计算公式,红方格物理尺寸一定时,当像素密度变成2倍,在界面B中的红方格的物理像素就必须变成原来的2倍。
物理尺寸一样,红方格在界面A和界面B中显示的内容物的多少就是一样的。为了标记这种“不同分辨率界面呈现同样多内容显示效果”的能力,我们引入一个抽象概念,它就是「逻辑像素」。我们约定把界面A的物理像素作为基准,界面B可用对应的像素乘以倍数得出,A和B的显示范围是一样的。这个基准就是逻辑像素。
现在,我们再次把红方格,从界面A移到界面B,因为界面B的像素密度是界面A的2倍,为了红方格在两个界面中肉眼可见的大小排版一致,根据公式,红方格在界面B中占据的物理像素是界面A中的2倍,如下图所示:
逻辑像素作为一组基准手机的分辨率尺寸,为了表达方便,需要有统一的单位。
由于iOS和Android的开发工具不同,逻辑像素在两个平台的单位名称也不同,iOS是pt, Android是dp, 设计师可以简单理解为:pt=dp
iOS 的 pt :point 表示点 。
Android 的 dp :Density-independent Pixels,指密度无关像素。
计量单位决定了我们的思考方式。在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。
「逻辑分辨率」就是用逻辑像素描述屏幕的分辨率;「逻辑像素密度」是用“屏幕像素密度”相对于“基准屏幕密度”的倍数表示,即相对密度。
假设「逻辑像素密度」为n,那么 1 pt = 1 dp = n px。具体单位之间的换算关系随倍率变化:
@1×倍:1pt=1dp=1px
@15×倍:1pt=1dp=15px
@2×倍:1pt=1dp=2px
@3×倍:1pt=1dp=3px
@4×倍:1pt=1dp=4px
可以把「逻辑像素」和「物理尺寸相关联,在分辨率较低的手机中,可能1pt=1px,而在分辨率较高的手机中,可能1pt=2px,这样的话,一个108108pt的控件,在不同的手机中就能表现出肉眼观看的差不多的大小,只是分辨率高的展示的更加清楚。如下图所示。
知道了逻辑像素和单位,实际「物理像素」的计算公式:
iOS的分辨率:px=pt 倍率(其中pt是逻辑像素尺寸,iOS常用倍率为@2×,@3×)
Android的分辨率:px=dp (dpi / 160) (其中dp是逻辑像素尺寸, dpi是逻辑像素密度,160是规定的@1×的基准逻辑像素密度)。
「逻辑像素」是人为约定的,会影响屏幕显示内容的多寡,与影响清晰度的「像素密度」无关。
物理分辨率:硬件所支持的。
逻辑分辨率:软件可达到的。
当两个设备逻辑像素一致,显示容量就一样;当逻辑像素不一致时,尺寸大的那个显示的内容多。
比如,以iPhone 3gs 和iPhone 4 为例,两者的物理尺寸一致,逻辑分辨率一致;物理分辨率3gs是320×480, 4是640×960,后者无论物理分辨率,还是像素密度都是前者的2倍。因为物理分辨率不同,4的硬件支持的呈像质量更高;因为逻辑分辨率相同,两者的软件可达的容纳物的多少是一致的。
再比如,有两台Android设备的屏幕尺寸为480x800px和720x1280px,它们分别属于hdpi和xhdpi,除以各自倍率15倍和3倍,得到逻辑像素为320×533dp和360×640dp。很显然,后者更宽更高,能显示更多内容。
逻辑分辨率的三大作用:
1、作为屏幕显示内容多少(也就是容积)的表征。逻辑像素尺寸大,显示的内容就多,和设备实际的分辨率尺寸、像素密度和倍率都无关。
2、保证控件在不同屏幕间切换符合人的常识和预期:屏幕显示内容的多少,和分辨率、像素密度无关,和屏幕的物理大小有关,这也符合人们的常识:屏幕越大,显示内容越多。
3、应用于设计和开发:我们不需要关注屏幕的像素密度,只需要关心逻辑分辨率即可,方便设计沟通。
说明:熟悉了概念,下面进入实 *** :UI设计作图。
UI设计过程中,在我们决定采用哪一种手机屏幕的尺寸作图前,应该首先考虑选择何种倍率呢。
因为正是「倍率」,把大大小小的屏幕拉回到了同一水平线,得以保证一套设计稿适应各种屏幕。
另外,在为开发提供的设计资源中,同一张图通常有两个,甚至三个尺寸。文件名有的带@2x或@3x字样,有的不带。其中@2x,@3x就表示是倍率。不带的用在普通屏上,带的用在Retina屏上。只要准备好,iOS或Android会自己判断用哪张。
我们可以直接选择逻辑像素尺寸(也就是x1倍率)进行设计作图。
但是,x1倍率的设备目前差不多已被淘汰。而我们通常会将做好的设计图导入对应设备查看效果,目前主流设备都采用x2、x3倍率,x1的设计图放入主流设备查看效果必须进行放大,粗略的放大会导致失真,影响效果查看。所以x1倍率在最终查看效果图时存在缺陷。
那x3倍率的怎么样?
在与程序员沟通、设计切图时,我们都会进行倍率之间的换算。x3切图换算不方便;
另外,程序员拿到标注图后,需要将其中的px转换成pt进行开发。(1)情况1:x2倍率下,将列表高120px, 头像高102px的标注转换成逻辑像素后为:60pt,52pt,两者是无法居中对齐的,会有1pt误差,最终设备呈现效果就会有2px的像素偏移;(2)情况2:假如将x3倍率的100px转换成逻辑像素,由于逻辑像素与物理像素一样,必须取整数,程序员只可能在33pt和34pt之间选取一个数值。如果采用33pt,最终呈现在设备上的尺寸是99x99px, 有1px误差;如果采用34pt,最终设备呈现的尺寸是102x103px, 有2px误差。所以,为确保设计图的落地效果,我们需要:
在x1倍率下,尺寸必须为 偶数;
在x2倍率下,尺寸必须为 4的倍数;
在x3倍率下,尺寸必须为 6的倍数。
可以看出,x3倍率的执行难度最高。
通过以上,我们也可以排除“x3倍率”作为我们的作图选择。
因为x1倍率、x3倍率都存在明显短板,常用倍率只剩下x2倍率。鉴于x2倍率各方面都比较均衡,所以:
选择x2倍率作为我们的作图尺寸。
选定作图倍率后,我们就可以选择具体的作图尺寸。
目前iPhone的主流机型在x2倍率下的尺寸有5种,如下图:
其中,iPhone X 可以认为是iPhone 6 的加长版;iPhone XR 可以认为是iPhone 6P的加长版。如下图:
所以这4种尺寸可以归为2个类型:宽度为750和828的。
而Android系统逻辑像素已统一为360x640,x2倍率就是:720x1280
最后,总结出双平台@2x倍率,共计4种屏幕尺寸。
大屏时代,用小屏为设计基准显然不合时宜。我们一般选择中间尺寸为基准进行适配,因为从中间向上或向下适配,调整幅度最小。
中间尺寸有两个分别是iOS和Android的,要选哪一个?
大多数设计师日常用的都是iPhone,对Android开发可能了解不够;同时Android验收不太受重视,设计师对Android的容错率较高,这也导致Android端常常容易出问题。根据“哪里问题多,从哪里着手”的原则,可选择以 720×1280 作为设计基准。
但是选择750×1334也没有毛病,很多比较倾向于iOS设计。两者都可以“一稿适配双平台”。
当然,很多团队都是同时出iOS和Android两套设计稿,那就可以:
同时把 750×1334 px 和 720×1280 px 作为设计基准。
为了发现作图尺寸和设计规范之间的关系,我们对比不同倍率的屏幕控件尺寸:
发现:控件高度随倍率等比放大/缩小。
(其中iPhone Xs Max只不过顶部状态栏在原来的20pt基础之上增加了24pt变为44pt,底部增加34pt的主页指示器。)
相同倍率,对比控件尺寸:
发现:相同倍率,控件大小不变。页面尺寸变化,不会对控件大小产生影响。
综上得出:控件大小只随倍率变化,与实际作图尺寸无关。也就是说:
作图尺寸对设计规范没有任何影响,设计规范就是组件规范。
说明:开始作图后,我们开始考虑更多的细节问题。
什么是适配?
就是让同一套APP的UI设计,在不同尺寸分辨率比例的「移动终端设备」上都能正常显示。为此需要根据不同机型对构成界面的组件进行的一系列调整。
为什么要适配?为了在多样性的设备环境中追求体验的一致,保持理想的展示效果。适配只看3个参数:
渲染像素——屏幕截图的尺寸,单位 px
逻辑像素——程序员开发所用尺寸,单位 pt
倍 率——渲染像素/逻辑像素 得到的倍数关系,常见倍率有@2x、@3x。倍率决定切图。
界面元素按照屏幕大小整体等比例缩放,一般是界面版式特殊,布局不能变化的情况。比如墙、列表。适配时,控件尺寸大小随屏幕宽度变化自适应。屏幕越宽,单屏显示内容越少。
注意:界面缩放过程中,要保证资源在拉伸后的清晰度,避免降低产品品质。
对局部控件做调整,进行缩放或自适应。比如,列表控件中局部的放大,文字列表控件文字长度的自适应。
如果界面不适合拉伸,或界面本来就有很多可扩展区域,可考虑将增加的空间分配到这些区域,增加元素的间距。比如,九宫格列表。
还有一些满屏界面,比如启动图、音乐播放器、活动H5页等。因为显示屏宽高比不同,拉伸会导致形变。可以通过调整背景间距增加延展性。
我们平常讲的适配常常都是指宽度的适配,因为一般界面的内容总是在纵向存在超过一屏的滚动内容,可以不断往下滚动,所以纵向的适配设计常常被忽略。
但是,全面屏的出现,使我们不得不正视这个问题。因为全面屏刘海和屏幕圆角的问题,导致整体高度的变化,进而影响了比例的变化。
首先,iPhone全面屏出现了刘海和屏幕圆角设计,我们需要重新定义「安全区域」,确保页面内容不能超出安全区域。
具体的安全区高度=屏幕高度-44-34(单位:pt),如下图所示
以下就顶部、底部和满屏界面进行适配。
顶部区域,非全面屏状态栏高为20pt, 全面屏状态栏高为44pt, 两者存在24pt, 在设计顶部时,需要就差值作出适配。
一般顶部区域主要放置的控件以及应对策略:
底部区域用于手势进入主屏或切换应用。如果将触发交互行为的按钮放在屏幕底部,会破坏APP的 *** 作体验。除了一些无 *** 作的信息流可以不用另外设置,常规做法都是将底部 *** 作区全部提高34pt。
上文已经提到,正常全屏适配的常规做法就是间距调整,全面屏依然适用。需要注意的是一些全屏的视频播放,需要控制在安全区域内。
马上即将迎来折叠屏手机,折叠屏的适配也需要纳入考虑范围。目前有华为和三星两家手机厂商即将发布折叠屏。相关尺寸参数如下:
目前淘宝设计推荐的方法是,采用内容流动的适配方式。
具体需要等正式上市,再进行专门适配。待续……
说明:以下提供iOS和Android两个平台一些常见的手机型号、屏幕尺寸、分辨率等参数。
iOS常用的逻辑像素有:320×568 pt(5/5c/5s/se),375×667 pt(6/6s/7/8),375×812pt(X/Xs),414×736 pt(6p/6sp/7p/8p),414×896pt(XR/Xs Max),常用倍率有:@3x,@2x
根据友盟数据,目前iPhone使用最多的是6/6s/7/8的750×1334px屏幕,倍率为2,逻辑像素320x667 pt。上升势头最猛,未来有望登上第一的是6p/6sp/7p/8p的1080×1920px屏幕。倍率为2,逻辑像素414x736 pt。
注意:iphone 6plus适配中,有设计版,物理版,放大版:
因为plus屏幕有1080个像素点,但截屏后发现图像是1242像素,就是在一个物理有1080个像素点的屏幕里塞了个1242像素的内容。而放大版,就是iphone 6的尺寸等比放大15倍得出的分辨率。
在iPhone6的x2倍设计稿中,界面元素之间的常用距离,亲密距离:20px;疏远距离:30px。
疏远距离:比如,所有元素距离手机屏幕最左边的距离。
亲密距离:比如,左边图标与右边文字之间的距离。
安卓由于屏幕尺寸过多,分辨率跨度大,根据dpi分成几个范围区间:
像素密度为160dpi左右的称为mdpi, 240左右的为hdpi, 320左右的xhdpi…以此类推。这样,所有的安卓屏幕都找到了自己的位置,并赋予了相应的倍率。
Android约定:当dpi=160时,倍率为@1x,逻辑像素=320×480 dp 或 360×640 dp ,称之为mdpi,其它的都是基于此通过倍率转化:hdpi:15倍;xhdpi:2倍;xxhdpi:3倍;xxxhdpi:4倍。
如今的Android屏幕逻辑像素已经趋于统一,基准为:360x640 dp。
在实际 *** 作中,我们要用「逻辑像素尺寸」思维来思考界面,把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面,把尺寸和文字的单位都改成点(Point)。这里的点也就是pt,无论设计iOS、Android还是Web应用,单位都用它。
要调节倍率,则通过图像大小里的DPI来控制。这个DPI,其实就是PPI,像素密度。有个常识大家都知道,屏幕上的设计DPI设成72,印刷品设计DPI设成300。
本文从理论入手,先介绍了「像素密度」和「逻辑像素」两个重要概念,其中像素密度影响“屏幕的成像质量”,逻辑像素影响“界面的容积能力”;接着进入实际 *** 作,设计作图应该选择何种倍率和屏幕尺寸;然后是细节的处理,常用的适配方法,以及全面屏的适配。最后是iPhone和Android手机的一些设计参数。这一次要帮你彻底搞明白px、ppi、dot、dpi、sp、dp、pt
这是初级设计师经常弄混淆的几个概念,下面我以“基本概念,易混淆的点,从问题入手,总结”四个方面来聊一聊 Px,ppi;dot,dpi; sp,dp;pt 那些事儿。
一、px,ppi;dot,dpi; sp,dp;pt 的基本概念
1 px:像素
1像素实际上是一个颜色点,所以又称像素点。大量不同颜色点组成一张图像,因此图像的基本单位是像素px(没有比像素更精细的单位了)。
像素主要用来表示图像大小和显示器分辨率(如19201080px)。像素本身的物理尺寸不固定,所以它的物理尺寸没有意义,有意义的是它的数量。
为什么像素的物理尺寸不固定?
像素本身不是物理世界的单位,是一个相对单位,尺寸可大可小。在高密度的屏幕上像素会变小,显示效果更清晰。因为“像素量px = 像素密度ppi x 屏幕尺寸in”,同样是1英寸的屏幕,密度越大,像素越多,则单个像素的物理尺寸越小。
都是相关信息,体积和像素有什么关系?
通常所说的100KB的指的就是的体积,首先一张图像在存储时,会描述每个像素点的颜色信息、位置、数量,这些描述数据就是图像的体积,如果像素越多自然图像体积越大。假如一张都是一个颜色,图像在保存时就会压缩,只存一个像素点的颜色信息,这样的图像体积会小很多。所以,像素点越多,颜色越复杂,图像体积越大。
为什么我们要买高像素的相机?
日常我们所说的几百万像素的相机,这个几百万像素指的是拍摄最大像素量照片时,图像宽高位置上像素量的乘积。如果像素量大,将来印刷或者在显示器上查看,在1英寸上就有足够多的像素显示,像素密度增加,图像也会更清晰。因此,我们更愿意买高像素的相机。
总结: 像素px常用来描述图像尺寸和显示器分辨率。
2 ppi:像素密度(pixel per inch)
1英寸屏幕上显示的像素量,密度单位。决定的物理显示尺寸,只有涉及到显示才有意义。值越大,显示越细腻。
计算公式: ppi=屏幕对角线上的像素量px/对角线长度inch = √(屏幕横向像素^2 + 屏幕纵向像素^2)/对角线长度。
为什么说ppi决定的物理尺寸?
一个手机的显示屏在出厂时就确定了PPI的值,PPI越大,显示越高清。的物理尺寸 = PPI Px,通常一张图像的px确定,ppi越大,则它的物理尺寸越小。所以为什么我们在高PPI的手机上,人眼看到的图像比低PPI的图形小。在设计行业,我们会针对高PPI的手机,设计更大像素的图像也是这个道理。
日常所说的分辨率有两个概念,一个指显示器的分辨率,另一个指图像的分辨率。显示器分辨率指显示器所能显示的像素多少(1920px1080px),显示器可显示的像素越多,画面就越精细,因为屏幕尺寸一定,分辨率越大,像素密度越大。显示器分辨率都用(1920px1080px)这种形式表示,清晰度还需要结合屏幕尺寸计算。图像分辨率则是单位英寸中所包含的像素点数,比如photoshop 里新建画布时设置的图像分辨率72ppi,其定义更趋近于分辨率本身的定义
注意:
同一显示屏上查看,像素量越大,尺寸越大。
显示分辨率一定的情况下,显示屏越小图像越清晰(比如MacBook),反之,显示屏大小固定时,显示分辨率越高图像越清晰。
对于设计师来说像素密度很重要,需要很据像素密度来切图和适配,理解了像素密度的意义,就理解了几倍图之间的关系。
3 dot:墨点
印刷品的最小单位,表示一个印刷颜色点,类似px,只有相对大小,用在印刷行业。
4 dpi:打印分辨率 (dot per inch)
1英寸上打印的墨点数量,密度单位,只用在印刷行业,值越大,印刷越精细。
注意:
与安卓的dp完全没关系。
印刷行业相关的单位是dot,dpi。印刷尺寸(英寸)=打印墨点数(dot)/打印机密度(dpi)。
照片的清晰度,是由打印机分辨率决定的。所以一张照片包含的像素越多(需要高像素照相机拍摄),高dpi打印机就可以打印出清晰的。如果照片像素量px一定, 打印机的dpi越高, 则打印尺寸越小。(这里可设置为dot=px)
5 pt:点(印刷)
大小为1/72英寸=035mm,单位是英寸,是物理长度单位,大小固定,绝对单位。源于活字排版时代,photoshop里的字体单位就只这个。
公式: 1pt= (PPI / 72) px。
当photoshop中新建画布的分辨率为72ppi,由公式,则1pt=1px。当分辨率为144ppi时,1pt=2px。
注意: 这里指印刷行业的pt哦!
6 pt: 点(iOS)
iOS系统开发单位,是独立像素的意思,长度固定,不随屏幕像素密度ppi变化而变化。
苹果公司规定:普屏时1px=1px,而普屏的ppi=163像素/英寸,那么pt=1/163英寸=016mm(固定值)。普屏1px=1px,高清屏1pt=2px。
用固定长度pt作为开发单位的好处是,这样可以保证同一张在不同设备上显示大小一样,因为pt值是固定的。高清屏上1pt等于更多的像素px,因为像素在高清屏上变小,所以pt还是固定的。
7 dp:长度(Android)
(Density-independent pixel) 是安卓开发用的长度单位。
根据不同的屏幕分辨率,与px有不同的倍数关系。规定:1dp等于屏幕像素密度为160ppi时1px的长度,因此dp在整个系统大小是固定的。公式:1dp=(屏幕ppi/ 160)px。
1dp等于屏幕像素密度为160ppi时1px的长度,即,在mdpi时,1dp = 1px。 以mdpi为标准,这些屏幕的密度值比为: ldpi : mdpi : hdpi : xhdpi : xxhdpi = 075 : 1 : 15 : 2 : 3。android中清屏1dp=1px,高清屏1dp=15px,超清屏1dp=2px。
做设计时以xhdpi为模板, xhdpi条件下1dp=2px,标注长度的时候,将长度像素除以2即为dp值,这样方便和开发沟通。
8 sp:大小(Android)
(scale-independent pixel) 安卓开发用的字体大小单位。
注意: dp和sp都是安卓开发的单位,dp是长度单位,sp是字体单位。一般情况下可认为sp=dp。
二、易混淆的点
px和dot
都是点的概念,px应用在电子显示设备上,是显示图像的基本单位。dot应用在印刷行业,是打印的基本单位。
ppi和dpi
ppi和dpi无关系,互不影响 。 ppi影响图像的显示尺寸,dpi影响图像的打印尺寸。打印时可以让数量上px=dot,则设计时在photoshop里设置的ppi大小,可以认为是dpi大小。
很多技术人员经常把ppi和dpi画等号, 其实他们的物理意义不一样,但是因为混淆的人多了,所以在电子屏幕显示中提到的ppi和dpi我们可以认为是一样的。
pt和dp
iOS系统的pt和Android系统的dp概念是相似的。
三、从问题入手深入理解概念
1设计印刷品时,为什么说在ps里设置的ppi没有实际意义,但还是要设置呢?
首先我们要明白,打印的分辨率dpi是由实际的打印机决定的,所以在ps里设置分辨率根本没有意义。但是我们可以预期打印效果,比如多大的分辨率和尺寸,有了这两个值就能确定像素量px,即,只要像素量满足要求,就能打印出预期的效果。所以ps里设置分辨率ppi是为了让ps计算出像素量大小。
2photoshop里,高ppi和低ppi画布的显示差别?
Photoshop里的显示大小只和图像的像素量和显示器分辨率有关。显示器是确定的,所以像素量越大,显示尺寸越大。
3photoshop里, 相同像素的图像,高ppi图像拖入到低ppi图像里,高ppi的图像变小, 为什么?
因为拖入后,高ppi的文档分辨变小,photoshop把图像的像素按照ppi变小的比例变小。这样里体现了不同ppi的图像在photoshop里的转换关系。
4photoshop里,相同像素的图像,低ppi图像拖入高ppi图像里,低ppi的图像无变化,为什么?
因为拖入后,低ppi的文档分辨变大,photoshop把图像的像素按照ppi变大的比例变大,这样就超过了画布尺寸,photoshop按照置入的原理显示,即按最大边匹配。
5使用软件的方式,增加图像的像素px,或者提高图像的像素密度ppi,对图像有什么影响?
软件增加像素,会变模糊,因为增加的不是有效像素,所谓高清图是指包含有效像素多的。显示清晰度由显示器本身决定,的ppi没有意义。
6100100px的,ps改变它的ppi,会怎样?
像素是确定的,即不会影响显示,也不会影响印刷。
四、总结
1手机设计稿
因为手机屏幕的ppi和英寸确定,那么像素可计算出来,即px确定,只需设置ps的画布像素px相同就可以了,ps里设置的ppi对手机设计稿而言并没有什么意义,可以随便设置;手机只关注的像素够不够,因为是按照手机1:1的像素设计。所以,适配高ppi手机的设计稿,修改ps的ppi是没有用的,而应该按照高ppi的像素修改设计稿。
2打印设计稿
打印尺寸和打印分辨率300dpi确定, 但ps以px为单位,由公式dot=英寸dpi,px=英寸ppi,英寸相同, dpi=ppi=300,那么数量上可以dot=px。ps的英寸和ppi确定, px也确定,但不能直接得出px数量,但是ps可直接设置厘米cm, 那就只需要设置宽高的厘米和分辨率300ppi=11811像素/厘米,就可以间接设置所需的像素量,这就能保证300dpi清晰度和打印尺寸。(设置300dpi时ps会自动转化为11811像素/厘米)
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)