1 / 28
文档名称:

APP切图详细规范终极指南.docx

格式:docx   大小:1,331KB   页数:28页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

APP切图详细规范终极指南.docx

上传人:s1188831 2017/8/5 文件大小:1.30 MB

下载得到文件列表

APP切图详细规范终极指南.docx

文档介绍

文档介绍:APP切图详细规范终极指南
2015-03-11 分类:UI设计 围观31698次 
我们都知道一套完整的 App 通常会有很多张切图,不管是 iPhone 需要 1x、2x、3x 图档,Android 需要至少 3 种 hdpi、xhdpi、xxhdpi。在庞大的切图数量下如何让负责套图的 RD 快速找到所需图档,档名的命令方式就需要双方统一格式方便大家作业。所以,制定一套非常有效而方便的APP切图命名规范非常有用的。
下面就跟随小编来详细了解APP切图命名的流程和命名规范。
ios切图尺寸规则
目前iPhone有10种型号,5种屏幕尺寸,再加上6plus的“降采样”(Downsampling)(1080-1920),还有iPhone6和6+上的放大模式(1125-2001)和默认模式(1242-2208),是不是感觉好恐怖?但是不用怕,我分享一套超简单的适配方法,看完你都不信有这么简单~
美术交付给开发的资料有
1、  标注图(以640为宽度尺寸为基准标注)
2、  2x切图(以640为宽度尺寸为基准切图)
3、  3x切图(以1280为宽度尺寸为基准切图)
开发看到这份标注图,可以自己用上面的数字,。
 
?
其实iPhone6+的尺寸1242*2208作为3X,怎么算都又难记又不能整除,我们直接640*2得到1280跟1242相差也没几十个像素,最重要的是不虚边啊,放在真机上看(处女座除外)看不出差别的。
?
为了保持长宽比例。iPhone的这几个尺寸不是正好的,宽度放大后高度总差那么几个像素,这不要紧,千万别去改高度,手机屏幕是可以上下滑动的嘛。不可以滑动必须保证一屏显示的除外,手动去调整好了。
?因为大屏手机就是要显示更多内容而存在的。纯等比放大界面看起来傻大傻大的,。
Android切图尺寸规则
px(像素)是我们UI设计师在PS里使用的(不解释),同时也是手机屏幕上所显示的(也不解释)
dp是开发写layout的时候使用的尺寸单位,sp是开发写layout时关于字体的字号单位,且dp与sp总为1:1关系。
Android支持四种不同的dpi模式:ldpi mdpi hdpi xhdpi xxhdpi
一般地,手机分辨率与所运行的dpi模式是匹配的,例如hvga(320×480像素),运行在mdpi模式下(也有例外,稍后解释)(这个是ROM控制的,app不能改变)。当运行在mdpi下时,1dp=1px:也就是说设计师在PS里定义一个item高48px,开发就会定义该item高48dp;Photoshop中14px大的字体,开发会定义为14sp。
对于一部wvga(480×800)手机(G7、N1、NS),一般是运行在hdpi模式下。当运行在hdpi模式下时,1dp=:也就是说设计师在PS里定义一个item高72px,开发就会定义该item高48dp;Photoshop中21px大的字体,开发会定义为14sp。
所以,当你的app需要适配多个dpi模式的时候(例如同时适配mdpi与hdpi),若你在wvga下做设计,你需要将你的各数值都为3的倍数,并在切图标注时将所有的数字除以3乘以2换算成dp,这样开发的同一套layout就能用在两个不同的dpi模式下,而不是写两套layout。
mdpi与hdpi是2:3的关系
mdpi与xhdpi是1:2的关系
ldpi与mdpi是3:4的关系
Galaxy Nexus 是720P屏幕,就是运行在xhdpi下的。
再补充一种例外,有些比较山寨的Pad有可能是7英寸屏幕,分辨率为wvga(480×800)运行在mdpi下,所以一部wvga手机是320x533dp,一部wvga平板是480x800dp,可以显示的内容会多很多。
从2013年开始ldpi mdpi hdpi相继退出了历史舞台!以1280*720的720P主要机型占据了主流,即xhdpi。
2015年预计将会是1080P的天下了,因为从14年下半年到2015年推出的android手机均为1080P,可以预见未来的趋势!
以下是当前android主要机型规范:
手机常见分辨率:
4:3
VGA     640*480 (Video Graphics Array)
QVGA  320*240 (Quarter VGA)
HVGA  480*320 (Half-size VGA)
SVGA  800*600 (Super VGA)
5:3
WVGA  8