为什么设计师只设计一稿尺寸?
“ 我相信大部分UI设计师在做手机界面设计时,都是设计一稿尺寸,那为什么一稿尺寸就能完事呢?今天这篇文章就围绕这个问题给大家说说缘由吧,有问题的朋友欢迎留言哦。”
01. 相关单位概念
首先说屏幕密度ppi,它是指1英寸长度上显示的像素数量(英寸是物理长度单位,是实实在在可以用直尺测量的长度),因此ppi是一个密度单位,值越大,单位英寸上的像素点就越多,颜色信息也就越丰富,显示效果就会更加细腻高清。
它的计算公式是:ppi=屏幕对角线上的像素量px/对角线长度inch=√(屏幕横向像素^2 屏幕纵向像素^2)/对角线长度。
我们再来说说墨点密度dpi,它的概念是指1英寸长度上有多少个墨点数,这里的墨点就是打印机打印到纸上的那个墨点,用更多的墨点来打印一张图片,当然色彩更丰富,打印效果越好。从这里我们看出,dpi虽然是印刷行业的概念,但是和ppi的原理是一样的,在安卓系统里,很多人都把dpi和ppi划等号,也是行得通的,大家知道这个事就可以了,没必要去纠正这个“错误”,毕竟谷歌都是混用的。
屏幕分辨率,分辨率实质上是对清晰度的描述,上面我们说了ppi值越大,显示越清晰,和ps里设置分辨率72ppi是一样的。
但是,这里的分辨率就不是原本意义上的分辨率了,它是指一个显示屏横向和纵向长度上的最大显示像素量,比如我们说电脑显示器的分辨率为1080px*1920px,指显示器横向最多显示1080像素,纵向最多显示1920像素。那为什么不用分辨率原本的含义来表示呢,因为我们日常工作中,更多的是显示内容的多少,相比之下清晰度是次要的,比如400px*800px的显示器只能显示800px*1600px一半的内容,所以用px*px的方式描述屏幕分辨率更有实用性。
屏幕尺寸,一般我们说5.0英寸的手机,这个5.0英寸是指手机对角线的长度。1in=2.54cm,我们可以手动测量再单位换算得出手机的尺寸。这个尺寸也是用来计算屏幕密度的量。
02. 屏幕密度不同,显示有差异
我们知道,ppi的定义是1英寸上的像素量,ppi值越大,表示1英寸上的像素点越多。所以,一张4px*4px的图片,在屏幕密度大的设备上比屏幕密度小的设备上显示会偏小。造成这个现象的原因是,px的物理尺寸随ppi的大小而变化,ppi值越大,px物理尺寸越小,ppi值越小,px的物理尺寸越大。在高ppi的屏幕上,因为px的尺寸小, 那px的数量就越多,图片在屏幕上显示的物理尺寸就会偏小。知道这个现象很重要哦!
03. 五花八门的屏幕密度
我们知道,安卓手机屏幕碎片化严重,屏幕密度种类太多,造成这个现象的原因是什么呢?
04. 系统屏幕密度
谷歌的解决办法一:引入系统屏幕密度。
(注意和设备屏幕密度的区别:系统屏幕密度把设备屏幕密度归为六类。)
综合考虑,为了节省小密度的屏幕空间,而且保证大密度的屏幕显示不至于太小,谷歌的解决办法是让大小屏幕密度的显示效果基本一样,这不是废话嘛!我也能想到,但是怎样才能保证显示一样呢?
谷歌把市面上各种屏幕密度划分到几个范围内,也就是:ldpi,mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi 这六种(差异1),它们的名称和对应的数值如图:
这样就把市面上奇奇怪怪的屏幕密度分为六种,是不是瞬间开心很多!别急,你想一想,就算是分为六种,也要设计六套图啊,这也不行!又不给设计师发六份工资。
05. 图片适配-切几套图
06. 设备独立长度dp
谷歌为了解决开发适配问题,引入设备独立长度dp。
上面我们说图片的适的代配是切图 系统缩放。那对于开发来说,设置的文字和间距相关码可以用这种操作吗?答案是没有必要,因为还有简单的方法。
我们知道,适配的终极目标是为了保持物理尺寸大小一样,我们可以在开发环境里设置一个固定的物理单位,这样就能保证开发设置的每个数值在不同的屏幕密度上显示大小是一样的,这个固定的物理单位就是dp。
dp的定义是:在ppi=160时, 1px的长度(只需要记住和px的关系就行,160ppi的屏幕下px的物理尺寸是多少不重要)。我们知道,px的物理长度会随着屏幕密度变化,但是在ppi=160的情况下,px的大小就是固定的,所以dp的值恒定不变,它是现实世界一个固定的可测量的物理量。
有了dp这个固定单位,开发只需把所有组件尺寸设置一个值,修改也很方便。
07. dp和px关系
上面给到的图片中可以看出,dp和px有倍数关系,那这个倍数关系有什么用呢?
因为开发用的单位是dp不是px,所以要把设计稿中我们设置的字号和间距,根据屏幕密度,换算成开发需要的单位dp对应的数值,当然,这个开发哥哥会帮你换算的。
08. 字体大小单位sp
sp的引入和dp类似,也是一个固定的物理量,默认情况下,1sp=1dp,但是sp只用来表示文字大小的单位哦,不要混淆了。
09. 误差怎么产生的
我们经常发现,安卓设备上显示的界面千差万别,不忍直视,其实这本身就是避免不了的事。
- 差异1:原本一个手机的屏幕密度是一个准确值,但是为了方便设计,把它用系统屏幕密度代替,中间的数值差异,必定会引起显示差异。减小这个差异需要开发对主流手机有针对性地调整。
- 差异2:把一张图片放大缩小一定会有误差,特别是把小图片放大,品质会降低。解决办法就是多切几套图。
总结:
总的来说,针对安卓手机界面设计一稿尺寸,但是切3套图就是规范的。
完!
题外话,前面两篇文章没写好,这是重写后第一篇。
番茄设计匠(公众号)
作者:番茄