原生App切图的那些事儿
如何切图?
了解iphone界面的尺寸
最小的分辨率是320x480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(1x)。
在实际设计过程中,为了降低设计成本,一般拿设备最高的分辨率作为设计稿的原始尺寸,拿iphone来说就是iphone5或5s的640x1136啦,当然也可以用iphone4或4s的640x960,因为宽度都是640px,他们切图的标准是一样的。显然,以1倍图的基准尺寸(宽320px)为相对的参考依据,宽640px的设计稿,以原始尺寸切出来的图标称为2倍图(2x)。
有人可能会问:为什么不拿320px作为设计稿的原始尺寸呢?因为1倍图放大成为2倍图远比2倍图缩小成1倍图来得模糊!
于是,在不考虑iphone6和iphone 6 plus的情况下,为了适配iphone,每个图标需要切两份。
Android - 更为繁多的界面尺寸
Android开源自由的代价就是设备规范的不可控,市面上充斥着各种品牌的android手机,有着各种各样的尺寸和分辨率,为了适配各种不同分辨率的设备,同一个图标需要切成N份,每一份对应一个尺寸。
另外需要注意的是,Android里面开发用的尺寸单位是dp或sp(dp为元素表现尺寸,sp为字体尺寸)而不是iphone中的px。。。
对于分辨率繁多的android设备,为了方便原生应用的界面适配,Google按照dpi大小将它们分成了4中模式(MDPI、HDPI、XHDPI和XXHDPI,也许有一天会增加第五种XXXHDPI,谁知道呢):
看到这里,传统的web前端同学可能已经凌乱了,iphone用px,android用dp,而视觉设计稿则统一用的px,怎么将使用px作为单位的psd给使用dp作为单位的android app切图啊???
显然,我们得花点脑细胞去弄清楚px与dp的换算关系。
px与dp的换算关系
一般情况下,手机分辨率与所运行的dpi模式是匹配的,例如hvga(320x480像素)的手机屏幕一般在3.5英寸左右,运行在mdpi模式下。当运行在mdpi下时,1dp=1px:也就是说设计师以320x480作为设计稿的尺寸时,在PS里定义一个item高48px,开发就会定义该item高48dp;Photoshop中14px大的字体,开发会定义为14sp。
对于一部wvga(480x800像素)的手机(G7、N1、NS),一般是运行在hdpi模式下。当运行在hdpi模式下时,1dp=1.5px:也就是说设计师以480x800作为设计稿的尺寸时,在PS里定义一个item高72px,开发就会定义该item高48dp;Photoshop中21px大的字体,开发会定义为14sp。
关于px与dp的更多详细信息,请参考文章http://www.zhihu.com/question/19625584
IPhone应用切图尺寸与Android应用切图尺寸的对应关系
在Android应用中,以MDPI为基准界面尺寸,恰好对应上面提及的iphone应用的基准界面尺寸(320x480),所需的切图图标为iphone中对应的1倍图;XHDPI则对应2倍图,HDPI和XXHDPI可依此类推。
换一种说法再看看:如果要以最低的设计成本做一个app,iphone版和android版用的同一套设计稿,那么设计稿的尺寸最好是640x960像素。因为这个尺寸切出来的图标尺寸涵盖了iphone 3 ~ 5的分辨率,以及android的MDPI、HDPI、XHDPI模式。XXHDPI模式会自动利用低一级的XHDPI的图标进行放大展示。
把切图交给工具
看了上面提及的各种界面尺寸,如果全手工切,一次切完你能忍。如果切完了还有各种图标的增加、修改,没几次你多半会崩溃血喷屏幕~
幸好我们有一些很好的切图工具可以用,具体使用方法可参考它们的官网教程。
推荐切图工具1 - cut&slice me
推荐切图工具2 - cutterman
推荐切图工具3 - devRocket
注:damao推荐,看了官网好像很强悍的样子,但是收费哦。
小结
借助工具,原生App中的切图变得简易,但是“一个图标要切多套尺寸”的问题依旧没有改变,有没有更好的图标解决方案呢?譬如应用网页应用中的图标字体? 敬请期待《Iconfont在原生App中的应用》。
参考资料
- http://www.zcool.com.cn/article/ZNTMwOTI=.html
- http://blog.csdn.net/iunion/article/details/9449703
原生App切图的那些事儿相关推荐
- 切图教程,app切图命名总结
再根据自己的习惯对APP切图命名进行整理总结. 结语: 作为一个有强迫症的设计师,希望产出是有缜密的思维逻辑,当然包括细节. 文字有的部分参考其它文章,整理后根据自己的工作经验作出的总结. 自己也还在 ...
- iOS app 切图
iOS 切图尺寸规则 目前iPhone有10种型号,5种屏幕尺寸,再加上6plus的"降采样"(Downsampling)(1080-1920),还有iPhone6和6+上的放大模 ...
- app android切图工具,2018最强手机APP切图规范指南和切片要求
关于手机APP切图的干货,25学堂已经分享了很多,但是不是很全面,同时也没有把一些APP切图需要注意点分享给大家,于是,学堂君想在今天把前辈切片的经验分享出来. 之前25学堂分享的APP切图干货: 如 ...
- android app ui如何切图,APP切图详细规范终极指南
我们都知道一套完整的 App 通常会有很多张切图,不管是 iPhone 需要 1x.2x.3x 图档,Android 需要至少 3 种 hdpi.xhdpi.xxhdpi.在庞大的切图数量下如何让负责 ...
- APP切图详细规范终极指南
[注]文章来自逍遥乐 我们都知道一套完整的 App 通常会有很多张切图,不管是 iPhone 需要 1x.2x.3x 图档,Android 需要至少 3 种 hdpi.xhdpi.xxhdpi.在庞大 ...
- android ui 切图工具,APP切图标注教程:UI设计切图标注的小工具实用技巧
分享关于一篇UI设计师必须要懂的切图标注的小工具实用技巧,让你在跟开发工程师协作的时候更加得心应手. 设计师必备的UI切图小工具如下3大常用工具: 1.切图工具 Assistor PS 也是一款PS的 ...
- 移动APP切图术语解读:什么是@1x @2x和@3x【转自25学堂】
现在很多APP设计师小白都会稀里糊涂的在解读这些缩放1倍,扩大2倍或者说扩大1.5倍 等等之类的言论. 大家谈论的却是也没有错.如果你搭配上@1x @2x和@3x的话,你的理解就有问题啦! 首先我们看 ...
- 手机App切图命名规则
规范的命名方式可以提高客户端程序员的开发效率和团队协作. 尽可能的用最少的字符而又能完整的表达标识符的含义 只能包含小写字母.数字.下滑线,且数字.下划线不能首位 切图格式为png格式 启动界面命名规 ...
- 移动APP界面设计切图指南
移动APP切图信息图:iOS界面设计切图指南 http://blog.163.com/conghui1986@126/blog/static/5647097520146311247618/ Andro ...
最新文章
- AAuto解析电话薄 VCF文件ENCODING=QUOTED-PRINTABLE编码解码
- ASP.NET MVC (一)
- 史上最详细Docker安装最新版Minio 带详解 绝对值得收藏!!! 让我们一起学会使用minio搭建属于自己的文件服务器!!走上白嫖之路!解决启动了但是浏览器访问不了的原因
- MySQL 修复root权限
- cocos2d-x游戏开发(一)开始菜单
- 如何快速的解决Maven依赖冲突
- 第16课 开灯关灯 《小学生C++趣味编程》
- VForum07之四:布道中国 解读本地化策略
- 英寸、 Picas、 点、 跨度和 Twips 之间的关系
- java运算符使用总结_Java运算符知识点总结
- Markdown 写作类软件 MWeb 和 Ulysses谁更好
- system()函数
- 一个关于传奇3G游戏的感言
- CreateThread()与_beginthread()的区别详细解析
- 新大陆NVH200条码扫描枪使用及设置教程
- Rockchip平台TP驱动详解
- linux tao环境 安装_菜鸟Linux 编译TAO2.0a的问题,求高手指导
- SQL SERVER性能优化-查询速度提高
- 校园IPTV数字电视教学直播系统方案-淮安生态文旅区实验小学
- 系统集成项目管理工程师高频考点(第六章)
热门文章
- 【浏览器】浏览器模式与文档模式区别
- greenDao 3.0基础
- 《Storm入门》中文版
- POJ3259-负权回路判定
- 计算机系统中CPU的寄存器介绍
- java.lang.NoClassDefFoundError: org/apache/http/ssl/TrustStrategy 错误解决办法
- Hibernate之Criteria查询
- DOM(四)——事件、事件模型(冒泡)与事件对象的功能
- Ajax(一)——Ajax基础概念,HTTP头部(重点)
- idea运行android usb调试,android-Intellij Idea不允许在真实设备上运行应...