原生App切图的那些事儿

摘要:
在实际设计过程中,为了降低设计成本,通常将装置的最高分辨率作为设计草图的原始尺寸。对于iPhone,它是iPhone 5或5s的640x1136。当然,iPhone 4或4s的640x960也可以使用。因为宽度是640px,所以它们的切割标准是相同的。此外,需要注意的是,Android中用于开发的大小单位是dp或sp,而不是iPhone中的px。。。在工具的帮助下,本地应用程序中的裁剪变得更容易,但“一个图标需要裁剪多组尺寸”的问题没有改变。有更好的图标解决方案吗?请期待Iconfent在本地应用程序中的应用。

如何切图? 

了解iphone界面的尺寸

原生App切图的那些事儿第1张

最小的分辨率是320x480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(1x)。 

在实际设计过程中,为了降低设计成本,一般拿设备最高的分辨率作为设计稿的原始尺寸,拿iphone来说就是iphone55s640x1136啦,当然也可以用iphone44s640x960,因为宽度都是640px他们切图的标准是一样的。显然,以1倍图的基准尺寸(宽320px)为相对的参考依据,宽640px的设计稿,以原始尺寸切出来的图标称为2倍图(2x)。

有人可能会问:为什么不拿320px作为设计稿的原始尺寸呢?因为1倍图放大成为2倍图远比2倍图缩小成1倍图来得模糊!

于是,在不考虑iphone6iphone 6 plus的情况下,为了适配iphone,每个图标需要切两份。

Android - 更为繁多的界面尺寸

Android开源自由的代价就是设备规范的不可控,市面上充斥着各种品牌的android手机,有着各种各样的尺寸和分辨率,为了适配各种不同分辨率的设备,同一个图标需要切成N份,每一份对应一个尺寸。

另外需要注意的是,Android里面开发用的尺寸单位是dpspdp为元素表现尺寸,sp为字体尺寸)而不是iphone中的px。。。

对于分辨率繁多的android设备,为了方便原生应用的界面适配,Google按照dpi大小将它们分成了4中模式(MDPIHDPIXHDPIXXHDPI,也许有一天会增加第五种XXXHDPI,谁知道呢):

原生App切图的那些事儿第2张

看到这里,传统的web前端同学可能已经凌乱了,iphonepxandroiddp,而视觉设计稿则统一用的px,怎么将使用px作为单位的psd给使用dp作为单位的android app切图啊???

显然,我们得花点脑细胞去弄清楚pxdp的换算关系。

pxdp的换算关系

一般情况下,手机分辨率与所运行的dpi模式是匹配的,例如hvga(320x480像素)的手机屏幕一般在3.5英寸左右,运行在mdpi模式下。当运行在mdpi下时,1dp=1px:也就是说设计师以320x480作为设计稿的尺寸时,在PS里定义一个item48px,开发就会定义该item48dpPhotoshop14px大的字体,开发会定义为14sp

对于一部wvga480x800像素)的手机(G7N1NS),一般是运行在hdpi模式下。当运行在hdpi模式下时,1dp=1.5px:也就是说设计师以480x800作为设计稿的尺寸时,在PS里定义一个item72px,开发就会定义该item48dpPhotoshop21px大的字体,开发会定义为14sp

关于pxdp的更多详细信息,请参考文章http://www.zhihu.com/question/19625584

IPhone应用切图尺寸与Android应用切图尺寸的对应关系

Android应用中,以MDPI为基准界面尺寸,恰好对应上面提及的iphone应用的基准界面尺寸(320x480),所需的切图图标为iphone中对应的1倍图;XHDPI则对应2倍图,HDPIXXHDPI可依此类推。

原生App切图的那些事儿第3张

换一种说法再看看:如果要以最低的设计成本做一个appiphone版和android版用的同一套设计稿,那么设计稿的尺寸最好是640x960像素。因为这个尺寸切出来的图标尺寸涵盖了iphone 3 ~ 5的分辨率,以及android的MDPIHDPIXHDPI模式。XXHDPI模式会自动利用低一级的XHDPI的图标进行放大展示。

把切图交给工具

看了上面提及的各种界面尺寸,如果全手工切,一次切完你能忍。如果切完了还有各种图标的增加、修改,没几次你多半会崩溃血喷屏幕~

幸好我们有一些很好的切图工具可以用,具体使用方法可参考它们的官网教程。

推荐切图工具1 - cut&slice me

原生App切图的那些事儿第4张

推荐切图工具2 - cutterman

原生App切图的那些事儿第5张

推荐切图工具3 - devRocket

原生App切图的那些事儿第6张

注:damao推荐,看了官网好像很强悍的样子,但是收费哦。

小结

借助工具,原生App中的切图变得简易,但是“一个图标要切多套尺寸”的问题依旧没有改变,有没有更好的图标解决方案呢?譬如应用网页应用中的图标字体? 敬请期待《Iconfont在原生App中的应用》。

参考资料

  1. http://www.zcool.com.cn/article/ZNTMwOTI=.html
  2. http://blog.csdn.net/iunion/article/details/9449703

原生App切图的那些事儿第7张

免责声明:文章转载自《原生App切图的那些事儿》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Kafka生产者案例报警告SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".路由追踪程序Traceroute分析与科普下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

[音频基础] 增益 、Audio codec

1、Gain - 增益 一个小的信号Level(电平)经过放大电路成为大的信号Level ,也就是说由小变大之间的差异就叫增益,也叫放大率,反过来的叫衰减率。 dB - 分贝/增益 分贝是放大器的单位 -- dB,放大器输出与输入的比值为放大倍数,单位“倍”,如10倍放大器,100倍放大器。 当改用“分贝”做单位时,放大倍数就称之为增益,这是一个概念的两种...

钉钉小程序中苹果手机/iphone/IOS端音频无法播放和音频每次播放速度都加快的原因及解决方法

问题: 钉钉小程序的IOS端无法播放后台接口返回来的音频文件,但是文件在安卓端和模拟器端均可播放; 每次点击播放,音频播放速度加快一倍,导致音频无法听清; 原因: IOS端的dd.getBackgroundAudioManager()接口创建的音频管理器,manager.play()方法只能播放钉钉返回的临时的临时文件路径; 没有实例化音频的titl...

linuxmint系统定制与配置(5)-效率配置

小书匠Linux 目录: 1.zsh安装与配置 1.1 安装 1.1.1 检查当前的终端类型 1.1.2 安装zsh 1.2 美化zsh 1.3 配置zsh1.3.1 别名设置 2.自动登录服务器 3.快捷键配置 注:如有更好的提升效率的方法,会继续更新这个文章。 1.zsh安装与配置 1.1 安装 1.1...

css样式匹配苹果个型号手机

/*适配苹果X*/ @media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .header_nav { top:44px; } } /*适配苹果X smart Max*...

iphone 数据存储之属性和归档archive

     在IPHONE中有四种方式可以永久存储数据分别是属性列表、归档、SQLITE3、coredata。前两者、后二者操作的时候有些地方是相同的,以属 性列表和归档来说都会用writeToFile/URL:path atomically:flag 和initWithContentofFile/URL:path;两都都不能直接操作基本数据类型,不过前者不...

使用photoshop以及markman进行快速重构页面的几个步骤

先来几个photoshop打开psd图的标准动作。 ctrl+,ctrl-,放大,缩小psd图的。查看字体大小看T等等。 想psd图出现刻度 你只需要"> 设置度量单位为像素之后,打开我们的标尺 准备切图的时候,使用参考线,便于切图。 切图无外乎切jpg图片和png图片。 第一种:切jpg图片方法。第二种切png图片方法记得是用移动工具 确保...