原生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的更多详细信息，请参考文章
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 -
推荐切图工具2 -
推荐切图工具3 -&
注：damao推荐，看了官网好像很强悍的样子，但是收费哦。
借助工具，原生App中的切图变得简易，但是&一个图标要切多套尺寸&的问题依旧没有改变，有没有更好的图标解决方案呢？譬如应用网页应用中的图标字体？&敬请期待《Iconfont在原生App中的应用》。UI基础教程&&&原生App切图的那些事儿
移动APP切图是UI设计必须学会的一项技能，切图虽然简单，但还是有很多地方需要注意的，下面由tgideas的
LV主唱大人 跟大家讲讲原生App切图的那些事儿，对UI入门或需了解APP切图的设计师来说会有帮助哦。
如何切图？
了解iphone界面的尺寸
<img ALT="App切图的那些事儿 - 设计达人" src="/blog7style/images/common/sg_trans.gif" real_src ="/wp-content/uploads/602kgF.jpg" DATA-ORIGINAL="/wp-content/uploads/602kgF.jpg" STYLE="border: 1px solid rgb(185, 186, 166); -webkit-transition: all 0.16s ease- transition: all 0.16s ease- display: padding: 3 margin: 0 min-height: 24 min-width: 24 max-width: 500 border-radius: 3 box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 2 background-image: url(/wp-content/themes/Daren/images/loading.gif); background-attachment: background-size: background-origin: background-clip: background-position: 50% 50%; background-repeat: no-"
TITLE="UI基础教程&&&原生App切图的那些事儿" />
最小的分辨率是320&480，我们把这个尺寸定为基准界面尺寸（baseline），基准尺寸所用的图标定为1倍图（1x）。
在实际设计过程中，为了降低设计成本，一般拿设备最高的分辨率作为设计稿的原始尺寸，拿iphone来说就是iphone5或5s的640&1136啦，当然也可以用iphone4或4s的640&960，因为宽度都是640px，他们切图的标准是一样的。显然，以1倍图的基准尺寸（宽320px）为相对的参考依据，宽640px的设计稿，以原始尺寸切出来的图标称为2倍图（2x）。
有人可能会问：为什么不拿320px作为设计稿的原始尺寸呢？因为1倍图放大成为2倍图远比2倍图缩小成1倍图来得模糊！
于是，在不考虑iphone6和iphone 6
plus的情况下，为了适配iphone，每个图标需要切两份。
-&更为繁多的界面尺寸
Android开源自由的代价就是设备规范的不可控，市面上充斥着各种品牌的android手机，有着各种各样的尺寸和分辨率，为了适配各种不同分辨率的设备，同一个图标需要切成N份，每一份对应一个尺寸。
另外需要注意的是，Android里面开发用的尺寸单位是dp或sp（dp为元素表现尺寸，sp为字体尺寸）而不是iphone中的px。。。
对于分辨率繁多的android设备，为了方便原生应用的界面适配，Google按照dpi大小将它们分成了4中模式（MDPI、HDPI、XHDPI和XXHDPI，也许有一天会增加第五种XXXHDPI，谁知道呢）：
<img ALT="App切图的那些事儿 - 设计达人" src="/blog7style/images/common/sg_trans.gif" real_src ="/wp-content/uploads/617P4K.jpg" DATA-ORIGINAL="/wp-content/uploads/617P4K.jpg" STYLE="border: 1px solid rgb(185, 186, 166); -webkit-transition: all 0.16s ease- transition: all 0.16s ease- display: padding: 3 margin: 0 min-height: 24 min-width: 24 max-width: 500 border-radius: 3 box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 2 background-image: url(/wp-content/themes/Daren/images/loading.gif); background-attachment: background-size: background-origin: background-clip: background-position: 50% 50%; background-repeat: no-"
TITLE="UI基础教程&&&原生App切图的那些事儿" />
看到这里，传统的web前端同学可能已经凌乱了，iphone用px，android用dp，而视觉设计稿则统一用的px，怎么将使用px作为单位的psd给使用dp作为单位的android&app切图啊???
显然，我们得花点脑细胞去弄清楚px与dp的换算关系。
px与dp的换算关系
一般情况下，手机分辨率与所运行的dpi模式是匹配的，例如hvga(320&480像素)的手机屏幕一般在3.5英寸左右，运行在mdpi模式下。当运行在mdpi下时，1dp=1px：也就是说设计师以320&480作为设计稿的尺寸时，在PS里定义一个item高48px，开发就会定义该item高48dp；Photoshop中14px大的字体，开发会定义为14sp。
对于一部wvga（480&800像素）的手机（G7、N1、NS），一般是运行在hdpi模式下。当运行在hdpi模式下时，1dp=1.5px：也就是说设计师以480&800作为设计稿的尺寸时，在PS里定义一个item高72px，开发就会定义该item高48dp；Photoshop中21px大的字体，开发会定义为14sp。
关于px与dp的更多详细信息，请参考文章
IPhone应用切图尺寸与Android应用切图尺寸的对应关系
在Android应用中，以MDPI为基准界面尺寸，恰好对应上面提及的iphone应用的基准界面尺寸（320&480），所需的切图图标为iphone中对应的1倍图；XHDPI则对应2倍图，HDPI和XXHDPI可依此类推。
<img ALT="App切图的那些事儿 - 设计达人" src="/blog7style/images/common/sg_trans.gif" real_src ="/wp-content/uploads/632eaz.jpg" DATA-ORIGINAL="/wp-content/uploads/632eaz.jpg" STYLE="border: 1px solid rgb(185, 186, 166); -webkit-transition: all 0.16s ease- transition: all 0.16s ease- display: padding: 3 margin: 0 min-height: 24 min-width: 24 max-width: 500 border-radius: 3 box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 2 background-image: url(/wp-content/themes/Daren/images/loading.gif); background-attachment: background-size: background-origin: background-clip: background-position: 50% 50%; background-repeat: no-"
TITLE="UI基础教程&&&原生App切图的那些事儿" />
换一种说法再看看：如果要以最低的设计成本做一个app，iphone版和android版用的同一套设计稿，那么设计稿的尺寸最好是640&960像素。因为这个尺寸切出来的图标尺寸涵盖了iphone
5的分辨率，以及android的MDPI、HDPI、XHDPI模式。XXHDPI模式会自动利用低一级的XHDPI的图标进行放大展示。
把切图交给工具
看了上面提及的各种界面尺寸，如果全手工切，一次切完你能忍。如果切完了还有各种图标的增加、修改，没几次你多半会崩溃血喷屏幕～
幸好我们有一些很好的切图工具可以用，具体使用方法可参考它们的官网教程。
推荐切图工具1
<img ALT="App切图的那些事儿 - 设计达人" src="/blog7style/images/common/sg_trans.gif" real_src ="/wp-content/uploads/647TkH.jpg" DATA-ORIGINAL="/wp-content/uploads/647TkH.jpg" STYLE="border: 1px solid rgb(185, 186, 166); -webkit-transition: all 0.16s ease- transition: all 0.16s ease- display: padding: 3 margin: 0 min-height: 24 min-width: 24 max-width: 500 border-radius: 3 box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 2 background-image: url(/wp-content/themes/Daren/images/loading.gif); background-attachment: background-size: background-origin: background-clip: background-position: 50% 50%; background-repeat: no-"
TITLE="UI基础教程&&&原生App切图的那些事儿" />
推荐切图工具2
<img ALT="App切图的那些事儿 - 设计达人" src="/blog7style/images/common/sg_trans.gif" real_src ="/wp-content/uploads/702UMx.jpg" DATA-ORIGINAL="/wp-content/uploads/702UMx.jpg" STYLE="border: 1px solid rgb(185, 186, 166); -webkit-transition: all 0.16s ease- transition: all 0.16s ease- display: padding: 3 margin: 0 min-height: 24 min-width: 24 max-width: 500 border-radius: 3 box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 2 background-image: url(/wp-content/themes/Daren/images/loading.gif); background-attachment: background-size: background-origin: background-clip: background-position: 50% 50%; background-repeat: no-"
TITLE="UI基础教程&&&原生App切图的那些事儿" />
推荐切图工具3
<img ALT="App切图的那些事儿 - 设计达人" src="/blog7style/images/common/sg_trans.gif" real_src ="/wp-content/uploads/718iF6.jpg" DATA-ORIGINAL="/wp-content/uploads/718iF6.jpg" STYLE="border: 1px solid rgb(185, 186, 166); -webkit-transition: all 0.16s ease- transition: all 0.16s ease- display: padding: 3 margin: 0 min-height: 24 min-width: 24 max-width: 500 border-radius: 3 box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 2 background-image: url(/wp-content/themes/Daren/images/loading.gif); background-attachment: background-size: background-origin: background-clip: background-position: 50% 50%; background-repeat: no-"
TITLE="UI基础教程&&&原生App切图的那些事儿" />
注：damao推荐，看了官网好像很强悍的样子，但是收费哦。
借助工具，原生App中的切图变得简易，但是“一个图标要切多套尺寸”的问题依旧没有改变，有没有更好的图标解决方案呢？譬如应用网页应用中的图标字体？&敬请期待《Iconfont在原生App中的应用》。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。当前位置：
说说原生App切图的那些事儿— UI设计
<a href="javascript:void((function(m,t,e,d,x){t=t||d.title||'';if(m&&m.constructor===Array){x='';for(var i=0;i
说说原生App切图的那些事儿— UI设计
发布者：&&&
时间： &&&
浏览：733&&&
如何切图？
了解 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 。
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
借助工具，原生 App 中的切图变得简易，但是“一个图标要切多套尺寸”的问题依旧没有改变，有没有更好的图标解决方案呢？譬如应用网页应用中的图标字体？ 敬请期待《Iconfont在原生App中的应用》。
本资讯文章内容可能来自于会员从网络上的收集，如有侵犯您的权益，请与我们联系：QQ-
素材公社版权所有
&&湘ICP备号&&
&& 第九部落公司旗下网站：如何切图？&
了解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的更多详细信息，请参考文章
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 -
推荐切图工具2 -
推荐切图工具3 -&
注：damao推荐，看了官网好像很强悍的样子，但是收费哦。
借助工具，原生App中的切图变得简易，但是&一个图标要切多套尺寸&的问题依旧没有改变，有没有更好的图标解决方案呢？譬如应用网页应用中的图标字体？&敬请期待《Iconfont在原生App中的应用》。
分享到 & 　　
LAST WORKS
ideas第09期
Webpage Designed by TGodeas-腾讯游戏官方设计团队
Copyright & 2011. All Rights Reserved.APP适配IOS8，iPhone6和Plus截图简要说明
有幸在9月25日拿到了iP6和iP6 Plus的真机，恰好又要做适配APP的工作（从iphone5上适配到iphone6和ip6 plus上），所以在真机上研究了下苹果官方在不同分辨率下对系统APP所做的适配。同时在网上也没找到相关的真机对比截图说明什么的，又有朋友问我要IP6和PLUS的真机截图回去自己研究，既然这样，那么干嘛不利用自己已有的资源，让更多的设计师受益呢？所以那就说点什么吧，抛砖引玉，希望大家可以共同研究，少走些弯路，共同成长。之前看过@jingdesign&的关于适配ip6的文章：。 & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &还有@罗磊的文章：。作为参考（有摘抄部份）。------------------------------------------------------------------正文：首先我们先看一下iphone5，iphone6和iphone6 plus的一些数据对比：& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & iphone5/s & & & iPhone 6 & & & & & iPhone 6 Plus尺寸 & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 4”& & & && & & & & &4.7” & & & & & & & & 5.5”Viewport’s device-width (in CSS pixels) & & & & & & & & & & & 320 & & & & & & & & 375 & & & & & & & & & 414Viewport’s device-width (Android设备同分辨率参考) &&360& & &&&& & & & & 360 & & & & & & & & & 400Device Pixel Ratio 像素比 & & & & & & & & & & & & & & & & & & & & & & & &2 & & & & & & && & & &2 & & & & & & & & & & & 3 &(近似值) &Rendered Pixels 渲染像素 (默认 viewport size * dpr) & & &640x1136 & & &&750×1334 & & & & Physical pixels 物理像素（手机显示像素） & & & & & & & & & & &&640x1136 & & &&750×1334 & & & & PPI&每英寸所拥有的像素数& & & & & & & & & & & & & & & & & & & & & & & & 326 & & & & & & & & 326 & & & & & & & & & 401Status Bar&状态栏高 (px) & & & & & & & & & & & & & & & & & & & & & & & & &40 & & & & & & & & & 40 & & & & & & & & & & 60Title Bar &&导航条高&(px) & & & & & & & & & & & & & & & & & & & & & & & & & 88 & & & & & & & & & 88 & & & & & & & & & & 132Tab Bar &&底栏高&(px) & & & & & & & & & & & & & & & & & & & & & & & & & & & 98 & & & & & & & & & 98 & & & & & & & & & & 147桌面 icon &(px) & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 120 & & & & & & & & 120 & & & & & & & & & 180图片资源后缀名& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&@2x && & & & & & &@2x & & & & & & & & &@3x& & & & & & & & & & & & & & & &&& &&这里是给前端参考的：iPhone 6与 iphone 5一样，像素比都是2，但是另一方面 iPhone 6 plus 401的dpi真实的像素比值应该大约是2.60。为了解决这个问题，苹果又整了个新概念rendered pixels 渲染像素，如果像素比是3x,那么理论上一个css宽设为414px的屏幕应该拥有1242px的物理像素（现实中是1080px，小了13%）。（像素比的计算方法是：前端的代码是把iPhone4，5的屏幕宽度写为320px，而此时 iphone4，5的所有产品实际宽的像素是640PX，所以像素比是2，iphone6的 CSS 中是375px,实际像素是750px,像素比也是2，而 plus 就不是了。）因此，如果你使用一个3x的图给高清的安卓设备，同样这样图也会适配 iPhone 6 Plus 但是iPhone 的浏览器在渲染在屏幕之前首先会调整图片大小。然后我把3个屏幕的App Store界面截图拿来对比一下：（无法查看原图？）点击这里可以查看高清大图：一：Title bar和Tab bar 高度Title bar ：&ip5/6的 高度是88px，plus 的高度是132px &（88x1.5=132） &&Tab bar &：&ip5/6的 高度是98px ， plus 的高度是147px &（ &98x1.5=147）ip5和ip6的Title bar和Tab bar的高度没变,并且tab bar的icon的大小也没变，只是整栏的宽拉伸了，所以IOS工程师在早期开发的时候如果用的是Autolayout自动布局会很爽，如果是布局写死了，那真是要一个界面一个界面的改了。结论：类似的状态栏高度不变，可以直接拉伸宽度调整间距即可，还有设置界面等，甚至代码是自动布局的话间距都不用调。二：Tab bar的icon大小图中标识的是排行榜的大小：ip5=46x46px&, ip6=46x46px，ip6plus=69x69px（是46px的1.5倍）。结论：ip6的icon,大多可以直接使用ip5的资源，plus的icon需要把ip5的icon资源x1.5倍即可，（我们当时开发xx软件的时候，android的设计尺寸是基于1080P的，我把android的资源拿出来用在plus上是完全可以的，所以开发android用的是1080P屏幕的设计师有福了，以上划线文字是原文，有错误不严谨的地方，1080P，可以将就用，我曾经把我们的 android 的1080P资源名称改成@3x，没调整大小直接放到 xcode里，模拟器跑起来 icon是很清楚的，这也可能是我们的 android 并不是640直接缩放到1080，而是每个界面手动调整的，所以资源可以暂用到 plus 上，我初期刚适配的时候是这么干的，后来发现部分图标无法识别，所以现在我又在把那些资源一个一个手动的调整成 plus 可用的 3倍（@3x）大小。）（在解释一下：例如ip5的某个icon名为:star@2x.png，那么我把android里面相同的icon拿过来改名子为 star@3x.png，直接扔到star@2x.png的同文件夹里面，xcode可以识别为plus的资源的，并且模拟器跑起来后icon的确变成高清的了，和别的没有替换的区别很明显。）&img src="lores.png" srcset="hires.png 2x, superhires.png 3x"&在上面这段代码的例子中，iPhone 6 Plus 的像素比是3x，它会加载superhires.png这张图片，而iPhone 5s,iPhone 6 则会加载hires.png这种图，其余的则加载lores.png。顺便说一句：以前IOS6,IOS7的时候看到app store首页更改了排版的样式，之前的样式记得是每个分类两排向下无限列出，现在界面内的每个分类使用的是横排可以无限滑动的样式，也就是可以不用固定在一屏内，ip6出现前并不理解这种排版样式，也没有发现这个排版的好处，当ip6和plus出现后，这种排版的样式的好处则显而易见，因为这样会更容易方便的适配各种分辨率的屏幕。所以，当你的APP单个界面有多个分类并且内容很多需要排列的时候，建议参考app store的样式，如果有更好的样式也可以分享出来哦。根据 app store 的截图来看，在未来设计 APP 的时候，资源有限的情况下，建议设计2套尺寸，以640x1136px为基础去适配 iphone4,5,6,（ip6可以在ip5的基础上空白区域拉伸即可，资源同用 ip5的，位图则要等比缩放），以px的尺寸去设计 iphone6 plus, 因为 xcode 的工程文件及 plus 代码及截图都是px的分辨率，只是屏幕物理大小是px，所以按照px的尺寸去设计，plus 上显示的物理大小才会正常，并且切图也才会是@3x.如果用1080P切图，图标资源肯定会不清楚。（如果你们的设计师人数足够多，当然iphone6也要单独设计一套。）------------------------------------------------------------------三：bannerip5的banner是640x260px，ip6是750x304px (即ip5的640x260px等比缩放后的大小）。ip6 plus排版已变化，banner图的样式变的和ipad类似，显示3个，其中1个主显示，2个是可预览的。主大小为795x387px. 比例和ip5,6都不一样，所以各家app可能需要根据自己的需要去重新排版调整了哦。结论：类似的位图，ip6等比放大即可，plus需要单独重新排版调整。在看一下手机拍的真机截图，Title和Tab bar在真机上的物理高度都是相同的。根据的提醒，此处物理高度并不相同，非常接近，我自己重新计算了下，iphone5和 iphone6的 Title bar物理高度为 9.971mm =（128*88.51 /1136)，iphone6 plus 的Title bar物理高度为10.591mm =（192*121.8 /2208）。不过此处的数据用处并不大，只为求解物理高度是否相同，所以大家不用记，不过还是要感谢的认真。------------------------------------------------------------------四：相册在看相册的变化（ip6 plus 对比 ip6截图），类似的位图应该都是等比放大的，并没有像 app store单行增加数量，ip6相册单个图片的大小是186x186px，plus 的单个大小是309x309px，所以类似这样的界面， 可以等比缩放就可以了。------------------------------------------------------------------五：桌面 Icon:在来看一下桌面icon的大小对比iphone5=120x120px & & &iphone6=120x120px & &&iphone6 plus=180x180px (是iphone5/6的1.5倍，即@3x)结论：icon要出一套180x180px的尺寸。同理：关于启动图，也就是闪屏，如果你的webapp有一个启动图，那么你又得增加两行代码适配新 iPhone 了。闪屏iPhone 6对应的图片大小是750×1334px，iPhone 6 Plus 对应的是px.------------------------------------------------------------------六：自动布局及 svg 等苹果好像在IOS6的时候就提供了一种解决方案，自动布局Auto Layout ：，如果设计师了解html和css会容易理解一些，我自己也只是了解html的皮毛，设计师在设计界面的时候标注的数据最好不要写固定的多少px,使用绝对定位那是iP4之前的方案，尤其现在出来了ip6和plus，如果现在还用绝对定位，设计师和工程师效率会很低，所以我们和工程师沟通的时候最好使用的是靠左，右多少，居中，及控件在屏中大小及位置是几分之几之类的标注，Auto Layout可以根据不同的设备尺寸自动计算UIView的frame，这样会更有效方便的适配更多的尺寸。Xcode6已经开始支持 FDP/svg 格式的矢量图片了，和我们的工程师沟通说可以直接出一张 PDF 的图片即可，我用 PS 导出pdf到xcode上测试可用了，顺便问一下，大家没有可以批量导出psd图层为pdf格式切图的方法，难道只能一个一个切？------------------------------------------------------------------所有的ip6&plus真机截图放在附件里面供大家下载研究。(压缩包是mac自带压缩的，在windows解压可能会乱码，哪位朋友方便可以重新上传一次分享给大家哦。)转载请保留以下信息，因为我还会针对不严谨的地方及新的发现随时修改。（最后更新于 &09：40）————————————————————————————————————————————本文转载自UI 中国，作者@ youngxkk原文地址 ————————————————————————————————————————————
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
1011人已收藏
Ctrl+Enter
Ctrl+Enter}