叁叁肆

这个世界会好吗

453篇博客

切图那些事儿

叁叁肆2018-09-21 11:22


本文来自网易云社区

作者:孙有军


关于各种各样的概念

1:单位

px pixel):像素,屏幕上的点,最小的独立显示单位,px均为整数,没有小数。

in:表示英寸,每英寸相当于2.54厘米 

screen size(屏幕尺寸):屏幕的物理尺寸,表示的是对角线长,如手机屏幕3.5寸,就表示对角线长度为3.5寸,大概8.89厘米。

dpidots per inch):每英寸像素点数,比如120dpi160dpi,如果一个手机屏幕分辨率为320*480像素,物理尺寸为 2in,高3in,则横向:320/2=160dpi,纵向:480/3 = 160dpi ,横向与纵向相等,原因是大部分手机屏幕使用正方形像素点(http://msdn.microsoft.com/zh-cn/library/cc294571.aspx)。

density :屏幕密度, 换算公式为density=dpi/160

dp=dip 设备独立像素, android特有的单位,在  dpi=160的手机屏幕上,屏幕密度为1,则1dp =1px。同理,屏幕密度为2,则1dp = 2px 

sp:字体的推荐单位,与dp很类似。

ppipixels per inch):图像分辨率的单位,ppi值越高,画面细节越丰富。

其他还有Aspect Ratio 宽高比率),Resolution(分辨率)。


样例:

Q: 屏幕分辨率480 * 800 , 屏幕尺寸3.7in,它的dpi是多少,在布局中宽设置320dp,该宽度为多少像素?

A:理论计算值:先计算出对角线的像素点数= 933,再计算出每英寸的像素点数 933/3.7 = 252dpi

最终计算出的dpi252

计算320dp对应的像素值:首先计算出屏幕密度,屏幕密度值则相当于1dp对应的像素值:

320 * 252/160 = 504px, (手机屏幕才480px,算出的宽度居然比屏幕还宽,如果成立,则说明如果在上诉屏幕上设置为320dp,则有一部分处于屏幕外)

NOTE: 手机上面计算出的DPI为理论值,实际上只有120(low)160(medium)240(high)320(xhigh)等这几种

因此实际的计算公式为:

320 * 240 /160=480px,与屏幕宽度相同,说明在上诉屏幕设置为320dp,刚好占据整个屏幕。


2:屏幕分类

按尺寸: 小屏幕(2寸左右),普通屏幕(3~4),大屏幕(5寸及以上)

按屏幕密度:ldpimdpihdpixdpixxdpi

http://www.36kr.com/p/214826.html  android碎片化报告,现在安卓支持18679设备


3:图标尺寸

以下是官方建议图标尺寸:

Icon Type

Standard Asset Sizes (in Pixels), for Generalized Screen Densities

Low density screen (ldpi)

Medium density screen (mdpi)

High density screen (hdpi)

Launcher

36 x 36 px

48 x 48 px

72 x 72 px

Menu

36 x 36 px

48 x 48 px

72 x 72 px

Status Bar

24 x 24 px

32 x 32 px

48 x 48 px

Tab

24 x 24 px

32 x 32 px

48 x 48 px

Dialog

24 x 24 px

32 x 32 px

48 x 48 px

List View

24 x 24 px

32 x 32 px

48 x 48 px


4.9图标

标注位置:相邻两边进行标注,不能只标注一遍,也不能只标注相对的两边,如果只标注两边,则拉伸区域为相交部分,文本区域为右边与下边控制,如果不标注则沾满整个宽度,

其次是可以分段标注

 

4:自动生成各种尺寸的图标
http://romannurik.github.io/AndroidAssetStudio/


5:切图中注意事项

ahdpi xhdpi等中的相同图片大小要成比例,这样才能在相同屏幕不同分辨率下展现一致。

b:同一类型,图片大小要一致,可能多人做多个模块,导致切除的同一类型图片相差12个像素(可以建立一个资源库,反查已有图标尺寸)。

c:相同图片问题,不同人做不同模块,很多图标都是相同的,由于开发不同,会导致一个包中有相同图片,这样会导致包大小增长。

d:能使用纯色的图片,就让开发尽量使用颜色值,不用切图。

ejpgpng图片相比较,jpg大小会小很多,如果有大图且没有模糊渐变等要求,尽量采用jpg格式。

f:很多简单图片都能用代码实现,比如圆,矩形等,可以让开发用代码实现,减少包的大小。

g:如果包的大小太大时,尽量保证更高尺寸的图片存在,这样低屏幕密度的手机也能展现很清晰的图片,但是如果只有小图,就会放大拉伸,会导致图片变形或者不清晰。

h.9注意标注拉伸区域与内容区域,与图片外边距的padding,可以在图上直接标注。(如果内容区域上下距离不相等,再填充多行文字时会造成文字不居中,这时可以直接在图片上空出padding

i.9图片只能拉伸不能压缩,压缩会导致图片变形,因此在作图过程中要确定一下图片的最小尺寸,(比如,给出一个确定高度的矩形区域,里面放置一个初始高度大于矩形的.9图片,会导致图片压缩)。

j.9图片一般只做小尺寸就可以,除非边框有渐变等元素,才做多个尺寸。

k:关于图片标注,美术要转换一下单位,px转换到相应的dp上,开发可以直接使用该数值。

l:关于字体,字体大小sp,但是如果字体呈现在一个固定高度的矩形框中时,再能调整字体大小的手机上时,可能会展示不全(展现字体的外部图片,背景等尽量不要写死高度)。

m:标注图片时,如果一个icon占满整个宽度,则可以不用标注icon宽度尺寸,只需要标注距离边框的尺寸,开发会采用自适应,如果确定宽度,在有的屏幕上只能占据一半宽度,


6:单位换算

视觉出分辨率为480 *800的图,屏幕尺寸大概为4寸左右,则改屏幕对应为240dpi hdpi),屏幕密度为:1.5,则对应到dp上时:

dp = px / 1.5 

hdpi xhdpi 图标转换公式:

xhdpi对应为 320dpihdpi对应为 240dpi,比例为: 320 / 240 = 1.33333.。。。。。

hdpi图标对应的xhpi图标尺寸为长宽放大1.33333倍,取整数

hdpi 对应长宽为  x

xhdpi x1 = x * 1.3333   y1 = y * 1.33333

NOTE:以后做更大尺寸的图,也可以按照上面的公式换算而来。


网易云免费体验馆,0成本体验20+款云产品!

更多网易研发、产品、运营经验分享请访问网易云社区