文档章节

App 切图规范

iSnowFlake
 iSnowFlake
发布于 2016/03/01 15:34
字数 1191
阅读 63
收藏 1
点赞 1
评论 0

如何切图? 

了解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中的应用》。

参考资料

  1. http://www.zcool.com.cn/article/ZNTMwOTI=.html

  2. http://blog.csdn.net/iunion/article/details/9449703


© 著作权归作者所有

共有 人打赏支持
iSnowFlake
粉丝 32
博文 80
码字总数 53599
作品 0
深圳
高级程序员
android .9图讲解

第一部分:下面我们来看看安卓切图前辈的心得: 1、考虑适配Android 各种复杂的分辨率,如主流的1280X720, 800X480, 640X480,480X320,以及各种非主流分辨率。 2、.9神器 3、PNG24+jpg 4、可交...

青莲居士 ⋅ 2015/09/25 ⋅ 1

UI小白入门论

作者:不洗碗工作室 - i++ 版权归作者所有,转载请注明出处 (两个月前,新手入门的我可以说是一头雾水,很多方面都从未涉足,但,“种一棵树最好的时间是十年前,其次是现在”,慢慢摸索,在...

不洗碗工作室 ⋅ 2017/12/11 ⋅ 0

web前端开发工具

web前端开发工具 postman 谷歌浏览器插件;是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件 FeHelper 谷歌浏览器插件;包含一些前端实用的工具,如字符串编解码、代码美化、JSON格式...

小寶 ⋅ 2015/10/29 ⋅ 0

论切图仔的自我修养

一、Photoshop Adobe Photoshop 是设计师的必备,所以也是前端切图仔的必备工具。 Photoshop CC 2015 墙裂推荐安装2015版,有诸多改进,不少新功能是与我们切图仔息息相关的。 工作区 常用快...

iNiL0119 ⋅ 2015/09/16 ⋅ 0

切版内部使用 css 框架 v1.4 发布

切版v1.4版是在切版v1.2版基础上升级的一个版本! 添加了切图工具,公共样式,表单美化,动画交互,响应式,丰富了栏目内容,新增js功能插件。 切版v1.4版本演示地址 src="http://www2.qieba...

切版 ⋅ 2017/07/26 ⋅ 11

WEB前端开发规范

一、文件命名规范 images //图片资源,如果项目多人开发里面还需要用子文件夹分开 fonts //字体资源,一般就是特殊字体嵌入或者图标字体 styles //CSS文件 - app.css //reset样式,如果项目小...

他山之石 ⋅ 2014/09/07 ⋅ 0

iphone7和iphone6系列尺寸和分辨率对比图

作为一个专业的APP设计网站,每一款手机的面世,我们必须了解这个手机的尺寸、视觉效果和分辨率等参数。 然后拿现在市面上主流的手机的尺寸、分辨率、显示效果来进行对比。 之前25学堂分享的...

北方人在上海 ⋅ 2016/10/17 ⋅ 0

Slicy 发布 1.1 版本,切图框架

切图框架slicy发布1.1版本,可兼容ie6,ie7,ie8,firefox,chrome浏览器以及iphone,ipad等移动设备。我们收到了一些反馈,褒贬不一,大部分人认为slicy的兼容性非常好,少部分人则认为slicy不应...

qietuwang ⋅ 2016/04/13 ⋅ 3

软件开发中,设计的最终交付物应该是什么?

设计交付物,就是设计师交给开发人员最终的文件或者资料。这些文件和资料在各个公司有不同的表现形式。这是我个人觉得比较合理的交付物的类型。 两大平台 对于不同的平台,提供不同的交付物,...

拉风的道长 ⋅ 2016/03/12 ⋅ 0

完整的网页制作视频

基础:http://edu.51cto.com/course/12283.html 进阶:http://edu.51cto.com/course/12338.html 课程目标在第一阶段HTML&CSS网页制作基础课程的前提下,力求通过一个实际网站页面的编写,让学...

杨胜强的号 ⋅ 01/22 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何使用serverchan微信推送告警

之前实现推送告警信息到微信的方法有如下几种: 1、通过企业公众号实现----收费: 2、通过QQ邮箱,在微信平台上开启收到邮件进行提醒; 3、第三方告警平台API,一般也是收费的; 不过最近看文...

问题终结者 ⋅ 12分钟前 ⋅ 0

TCP的RPC

RPC就是远程方法调用(Remote Process Call ),包含了客户端和服务端,涉及了对象的序列化传输。 1.服务端启动,注册远程调用的类2.客户端发送请求信息包含类、方法、参数的一些信息、序列化传...

Cobbage ⋅ 32分钟前 ⋅ 0

IOS-UI UI初步代码布局添加事件

ISO开发界面,UI是必须学习的一部分,其实很早之前想学来了,一直没有沉下心来学习。看到IOS的代码风格和布局就别扭的不行,跟java代码和android布局比较显得不是那么方便,所以一直到现在。...

京一 ⋅ 43分钟前 ⋅ 0

浅谈OpenDaylight的二次开发

OpenDaylight作为一款开源SDN网络控制器,依托于强大的社区支持以及功能特性,成为了目前主流的SDN网络控制器开发平台。在比较稳定的OpenDaylight Helium版本中,已经为开发者提供了大量的网...

wangxuwei ⋅ 52分钟前 ⋅ 0

API 开发中可选择传递 token 接口遇到的一个坑

在做 API 开发时,不可避免会涉及到登录验证,我使用的是jwt-auth 在登录中会经常遇到一个token过期的问题,在config/jwt.php默认设置中,这个过期时间是一个小时,不过为了安全也可以设置更...

等月人 ⋅ 52分钟前 ⋅ 0

Java NIO之文件处理

程序要操作本地操作系统的一个文件,可以分为以下三个部分: 对文件位置的操作 对文件的操作 对文件内容的操作 其中,对文件内容的操作在 Java NIO之Channel 中已经有了介绍,通过FileChann...

士别三日 ⋅ 57分钟前 ⋅ 0

Maven的pom.xml配置文件详解

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.......

小海bug ⋅ 今天 ⋅ 0

解决httpclient超时设置不生效的问题

最近公司有项目需要通过http调用第三方服务,且第三方服务偶有超时,故需要设置一定的超时时间防止不响应的情况出现。 初始设置如下: [java] view plain copy //超时设置 RequestConfig re...

Mr_Tea伯奕 ⋅ 今天 ⋅ 0

过滤器Filter和拦截器HandlerInterceptor

过滤器 依赖于servlet容器。在实现上基于函数回调,可以对几乎所有请求进行过滤,但是缺点是一个过滤器实例只能在容器初始化时调用一次。使用过滤器的目的是用来做一些过滤操作,获取我们想要...

hutaishi ⋅ 今天 ⋅ 0

Redis入门详解(转)

Redis入门详解 Redis简介 Redis安装 Redis配置 Redis数据类型 Redis功能 持久化 主从复制 事务支持 发布订阅 管道 虚拟内存 Redis性能 Redis部署 Redis应用场景 Redis总结 Redis简介: Redi...

xiaoyaoyoufang ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部