为什么设计师只设计一稿尺寸?

“ 我相信大部分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的数量就越多,图片在屏幕上显示的物理尺寸就会偏小。知道这个现象很重要哦!

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

03. 五花八门的屏幕密度

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

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

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

04. 系统屏幕密度

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

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

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

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

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

再仔细看看,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套图就是规范的。

完!

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

番茄设计匠(公众号)

作者:番茄

(0)

相关推荐

  • 教你iOS APP设计一稿支持iPhone5/iPhone6/Plus

    移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿.随着苹果发布两种新尺寸的大屏iPhone 6, ...

  • 分享设计师在设计表单时需要注意的三点问题

    何为表单?表单的主要功能是为了要采集用户的数据.这些数据需要我们的用户自己去填写,如我们的用户的昵称.email.性别等等.而表单的到处我们都可以见到,就例如我们的注册页面,我们卸载软件后的用户反馈页 ...

  • 设计师推广设计项目的10大途径

    @陈子木设计师从来都不是轻松的职业.有时候你的项目是给客户做的,有时候仅仅是因为你要创造新的东西.创作是你最拿手的事情,而令你头疼的部分往往是设计完成之后的宣传和推广.以下是10种推广你的设计项目的途 ...

  • 不要只设计页面,开始设计用户流程吧

    设计师们很容易直接跳过对于用户体验的考量,直接进入详细设计阶段,过早地把焦点放在页面设计和信息架构上.但是,这种做法需要发生改变,我们应该把对用户流程的思考放在设计过程中的优先位置. 有清晰目标的流程 ...

  • 响应式网页设计布局

    响应式网页设计是目前流行的一种WEB设计形式,主要特色是页面布局能根据不同设备(平板电脑.台式电脑.智能手机)下能让内容适应性的展示,从而让用户在不同设备都能够友好的浏览网页内容,响应式有点像自适应的 ...

  • UI设计师需知:2018年的设计趋势

    2018年已经过去一个月,再不2018设计趋势就晚了.Mindsparkle Mag整理了2018年20个最新设计趋势,你的灵魂绝对无法拒绝. 过去的2017带来了很多的设计创新,那么,接下来会有什么 ...

  • UI设计师必读!iOS 10 人机界面设计指南 (3)

    小编:iOS 10人机界面设计指南中文版来了,感谢译者@喵大神经. iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产 ...

  • BOSS惯性推翻设计稿

    @紫儿妖姬@Haha作为一个设计师,该如何应对boss无数次改稿的要求?该如何应对交稿后boss又有新的想法?该如何应对boss推翻之前的设计重头再来的行为?面对这样的难题,我们如何采取有效的措施? ...

  • 8个视觉稿设计工具,页面视觉和实时交互就靠它们

    对于视觉设计师.交互设计 师来说,他们需要做的不仅仅是设计一张张静态的页面和独立的icon,他们需要将这些元素整体组合在一起,根据整体画面感和视觉体验来做出修改.与此同时,开发人员查看网站交互设计 时 ...