西湖鱼

“ 我相信大部分UI设计师在做手机界面设计时,都是设计一稿尺寸,那为什么一稿尺寸就能完事呢?今天这篇文章就围绕这个问题给大家说说缘由吧,有问题的朋友欢迎留言哦。”

 

01. 相关单位概念

首先说屏幕密度ppi,它是指1英寸长度上显示的像素数量(英寸是物理长度单位,是实实在在可以用直尺测量的长度),因此ppi是一个密度单位,值越大,单位英寸上的像素点就越多,颜色信息也就越丰富,显示效果就会更加细腻高清。

它的计算公式是:ppi=屏幕对角线上的像素量px 对角线长度inch = √(屏幕横向像素^2 屏幕纵向像素^2)/对角线长度。

shipei_04

 

我们再来说说墨点密度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,我们可以手动测量再单位换算得出手机的尺寸。这个尺寸也是用来计算屏幕密度的量。

 

shipei_05

 

02. 屏幕密度不同,显示有差异

我们知道,ppi的定义是1英寸上的像素量,ppi值越大,表示1英寸上的像素点越多。所以,一张4px*4px的图片,在屏幕密度大的设备上比屏幕密度小的设备上显示会偏小。造成这个现象的原因是,px的物理尺寸随ppi的大小而变化,ppi值越大,px物理尺寸越小,ppi值越小,px的物理尺寸越大。在高ppi的屏幕上,因为px的尺寸小, 那px的数量就越多,图片在屏幕上显示的物理尺寸就会偏小。知道这个现象很重要哦!

shipei_03

同样是4px*4px的一张图 

03. 五花八门的屏幕密度

我们知道,安卓手机屏幕碎片化严重,屏幕密度种类太多,造成这个现象的原因是什么呢?

首先,安卓系统是开源的,这就导致任何一个人都可以开发一款手机,因此国内出现很多手机制造商,他们按照自己的风格更改安卓系统,生产出独一无二的手机屏幕密度。其次,屏幕密度不同,显示效果就不一样,为了满足不同价位的消费群体,生产多种屏幕屏幕的手机也是顺应市场需求。上面说了,屏幕密度不同,显示的图像物理尺寸会有差异。那么,设计师要为好几十种屏幕密度各自设计一套图吗?!!

shipei_06

由图可知,这种方法不可行。。。。。那怎么来解决显示差异问题呢?接下来说谷歌的解决方法。 

04. 系统屏幕密度

谷歌的解决办法一:引入系统屏幕密度。

(注意和设备屏幕密度的区别:系统屏幕密度把设备屏幕密度归为六类。)

综合考虑,为了节省小密度的屏幕空间,而且保证大密度的屏幕显示不至于太小,谷歌的解决办法是让大小屏幕密度的显示效果基本一样,这不是废话嘛!我也能想到,但是怎样才能保证显示一样呢?

谷歌把市面上各种屏幕密度划分到几个范围内,也就是:ldpi,mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi 这六种(差异1),它们的名称和对应的数值如图:

shipei_01

这样就把市面上奇奇怪怪的屏幕密度分为六种,是不是瞬间开心很多!别急,你想一想,就算是分为六种,也要设计六套图啊,这也不行!又不给设计师发六份工资。

再仔细看看,120,160,240,320,480,640,这几个值之间是不是有某种神秘的联系?嗯,它们的倍数关系是 0.75:1:1.5:2:3:4。根据这个结果,我们只需要设计一套图,然后按倍数关系切不同尺寸的图片交给开发就可以了。假如我们设计的是xhdpi尺寸的设计稿(2x图),切图的时候放大一倍(差异2),就变成xxxhdpi的图片(4x图)啦。是不是特别的感动。。。所以,我们只需要针对安卓设计一套图!

05. 图片适配-切几套图

那设计师交给开发的图,系统是如何适配的呢?首先,开发存放切图的文件夹有六个,drawable-ldpi,drawable-mdpi、drawable-hdpi、drawable-xhdpi,drawable-xxhdpi,drawable-xxxhdpi,它们是按照系统屏幕密度来命名的,有六个文件夹,意味着要切六套图,当然,切六套图是标标准准的。我们来说说切六套图时,系统适配的原理:安卓系统在某手机上运行时,系统识别这个手机的屏幕密度并找到对应图片文件夹,调用里面的图片显示即可,系统不做任何处理。但是,实际工作中我们并没有切六套图给开发,首先是因为ldpi已经被淘汰,其次是像xxxhdpi的手机市场占比很小,软件的图片那么多,多切一套就耗费更多时间,那我们应该切几套图片呢?根据开发哥哥的建议,应该切 xhdpi,xxhdpi,xxxhdpi 三种图片尺寸,嗯,已经大大减少了工作量。针对没有放置图片的文件夹,系统会根据就近原则,调取其它文件夹的图片,通过缩放倍数来显示,既然系统能够自动适配,为什么还需要切多套图呢?怎么来解释呢,就比如我们只切一套xxhdpi的图片,要在hdpi上显示,系统会先加载xxhdpi的图片,然后缩小尺寸显示,这说明低密度的屏幕也需要加载高密度的高清大图,这就会导致加载非常的慢,内存占用高,其次,位图缩放图片会失真,特别是放大图片。所以,虽然是切一套图系统也能通过缩放适配,但是考虑到内存占用和图片质量不建议完全依靠系统适配,也不过多增加设计师的工作量,应该两者结合操作。上面我们讲的是设计师是如何将图片适配所有机型,那软件里的文字和间距怎么办呢?这就是接下来要讲的针对开发适配问题。

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套图就是规范的。

完!

题外话,前面两篇文章没写好,这是重写后第一篇。

 

原文地址:番茄设计匠(公众号)

作者:番茄

 

转载请注明:韦德1946 » 为什么设计师只设计一稿尺寸?

登录收藏

学UI就上韦德1946!越努力,越幸运!

“韦德1946www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【韦德1946 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
安卓和iOS到底有啥区别?安卓和iOS到底有啥区别?
你的设计有依据吗?详解用户体验设计中的规律与逻辑你的设计有依据吗?详解用户体验设计中的规律与逻辑
不可不看的2018UI设计趋势不可不看的2018UI设计趋势
用「8点网格」来规范你的设计用「8点网格」来规范你的设计
房产类APP「链家」原型分享房产类APP「链家」原型分享
设计一份优秀表单,需要注意的三个要点设计一份优秀表单,需要注意的三个要点
UI项目,你真的做好了吗?UI项目,你真的做好了吗?
【滴滴体验设计研究·实践篇】从 iPhone X 适配说起【滴滴体验设计研究·实践篇】从 iPhone X 适配说起
20个优秀手机界面扁平化设计,让你一秒看懂扁平化20个优秀手机界面扁平化设计,让你一秒看懂扁平化
安卓UI (三) — 设计规范安卓UI (三) — 设计规范