iOS APP圖標(biāo)尺寸、啟動(dòng)頁(yè)尺寸及iPhone手機(jī)尺寸

640 x 960

創(chuàng)新互聯(lián)成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)網(wǎng)站開(kāi)發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計(jì),自適應(yīng)網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:13518219792

640 x 1136

750 x 1334

1242 x 2208

1125?×?2436 （iPhone X）

2688×1242? ? (iPhone XS Max)

1792×828? ? ? (iPhone XR)

40x40px

58x58px

60x60px

80x80px

87x87px

120x120px

180x180px

1024x1024px

iPhone6.5 英寸顯示屏? ? ?1242 x 2688 像素（豎屏）

iPhone5.8 英寸顯示屏? ? ?1125 x 2436 像素（豎屏）

iPhone5.5 英寸顯示屏? ? ?1242 x 2208 像素（豎屏

iPad Pro?12.9 英寸顯示屏??2048 x 2732 像素（豎屏）

iPad（第 8 代、第 7 代）10.5 英寸顯示屏??1668 x 2224 像素（豎屏）

750 x 1334

- iPhone4

開(kāi)發(fā)尺寸：320x480 pt，像素尺寸：640x960?px

- iPhone5

開(kāi)發(fā)尺寸：320x568?pt，像素尺寸：640x1136?px

- iPhone6/7/8

開(kāi)發(fā)尺寸：375x667?pt，像素尺寸：750x1334?px

- iPhone6/7/8Plus

開(kāi)發(fā)尺寸：414x736?pt，像素尺寸：1242x2208?px

- iPhone X/iPhone XS

開(kāi)發(fā)尺寸：375×812?pt，像素尺寸：1125×2436?px

- iPhone XS Max

開(kāi)發(fā)尺寸：414x896?pt，像素尺寸：2688×1242?px

- iPhone XR

開(kāi)發(fā)尺寸：414x896?pt，像素尺寸：1792×828?px

Android和IOS開(kāi)發(fā)圖標(biāo)、啟動(dòng)頁(yè)尺寸

最近項(xiàng)目在做android和ios的項(xiàng)目，設(shè)計(jì)師讓我給出圖標(biāo)的尺寸，于是查了一下尺寸。

第一步：產(chǎn)品經(jīng)理和UI設(shè)計(jì)師制定好UI規(guī)范，然后開(kāi)始做圖標(biāo)做顏色做尺寸等一系列和APP界面強(qiáng)相關(guān)的工作，以最常見(jiàn)的“back”按鈕為例，UI設(shè)計(jì)師從無(wú)到有的具體實(shí)現(xiàn)步驟：

①在coreldraw或者Sketch中制作好“矢量圖標(biāo)“—返回，此時(shí)的長(zhǎng)寬單位是毫米；

②保存輸出為“PNG位圖圖片”—返回，此時(shí)的長(zhǎng)寬單位是px（像素）；

③指定好此圖標(biāo)的內(nèi)外邊距，此時(shí)的邊距單位是px（像素）；

④最終此圖標(biāo)圖片交到開(kāi)發(fā)者手中，做好圖片的放置和內(nèi)外邊距的實(shí)現(xiàn)。開(kāi)發(fā)這在這個(gè)過(guò)程中會(huì)遇到一個(gè)問(wèn)題：內(nèi)外邊距是由px為單位的距離，但是在實(shí)際開(kāi)發(fā)中“dp”做為單位的更加常見(jiàn)，所以就會(huì)涉及到“px”“dp”互轉(zhuǎn)的封裝類，專門用來(lái)實(shí)現(xiàn)這個(gè)過(guò)程，同時(shí)還要注意不同分辨率屏幕的適配。

（1）px，平常我們所說(shuō)的手機(jī)的分辨率是1920×1080，這就是像素?cái)?shù)量，也就是1920px×1080px，代表手機(jī)高度上有1920個(gè)像素點(diǎn)，寬度上有1080個(gè)像素點(diǎn)，每個(gè)像素點(diǎn)的單位是px。

（2）dp，dp是為了開(kāi)發(fā)者便于做不同屏幕的適配而引入的開(kāi)發(fā)單位，具體來(lái)說(shuō)就是為了使得開(kāi)發(fā)者設(shè)置的長(zhǎng)度能夠根據(jù)不同屏幕(分辨率/尺寸也就是dpi)獲得不同的像素(px)數(shù)量。比如：我將一個(gè)控件設(shè)置長(zhǎng)度為1dp，那么在160dpi上該控件長(zhǎng)度為1px，在240dpi的屏幕上該控件的長(zhǎng)度為1 240/160=1.5個(gè)px。也就是dp會(huì)隨著不同屏幕而改變控件長(zhǎng)度的像素?cái)?shù)量。

（3）DPI，用戶實(shí)際判別手機(jī)屏幕的顯示好壞，除了分辨率還要考慮屏幕的寬高(英寸)，也就是用dpi，即每英寸多少像素來(lái)評(píng)價(jià)屏幕的顯示效果。（不然假如手機(jī)分辨率是1920×1080，但是屏幕是幾十寸的，那顯示效果將不會(huì)很好，甚至你有可能看到小的像素塊，那將更影響視覺(jué)效果。）

三、Android開(kāi)發(fā)中圖標(biāo)尺寸總結(jié)（務(wù)必掌握）：

（1）dpi、分辨率與圖標(biāo)尺寸的關(guān)系L DPI ( 120 DPI )—分辨率240 320px，其啟動(dòng)圖標(biāo)大小為 36 x 36 pxM DPI (160 DPI )—分辨率320 480px，其啟動(dòng)圖標(biāo)大小為 48 x 48 pxH DPI ( 240 DPI )—分辨率480 800px，其啟動(dòng)圖標(biāo)大小為 72 x 72 pxXH DPI ( 320 DPI )—分辨率1280 720px，其啟動(dòng)圖標(biāo)大小為 96 x 96 pxXXH DPI( 480 DPI )—分辨率1920 1080px，其啟動(dòng)圖標(biāo)大小為144 x 144 pxXXXH DPI( 640 DPI )—分辨率3840*2160px，其啟動(dòng)圖標(biāo)大小為192 x 192 px

（2）開(kāi)發(fā)中“px”到“dp”從 px 換算成 dp 要知道它是以什么 dpi 標(biāo)準(zhǔn)來(lái)設(shè)計(jì)的，換句話說(shuō)，就是要根據(jù)不用分辨率的屏幕，根據(jù)換算關(guān)系表得到相應(yīng)的 dp 。 例如： 以 xxhdpi 標(biāo)準(zhǔn)設(shè)計(jì)的 UI，其中一個(gè)切圖的分辨率是 600 px * 360 px ，根據(jù)換算關(guān)系表可知，在 xxhdpi 標(biāo)準(zhǔn)下，1 dp = 3 px ,則其對(duì)應(yīng)的 dp 是 200 dp * 120 dp 。換算關(guān)系表如下：（兩次標(biāo)紅 請(qǐng)重點(diǎn)關(guān)注）

36 x 36 48 x 48 64 x 64 72 x 72 96 x 96 144 x 144 192 x 192

具體的圖標(biāo)尺寸可以打開(kāi)xcode ，在項(xiàng)目目錄下找到Assets.xcassets文件，這個(gè)文件里面標(biāo)識(shí)出了所需要的圖標(biāo)尺寸，下面標(biāo)識(shí)的是基本尺寸，2x就是底部尺寸x2 ，即下面的尺寸為80pt和120pt

看了一下新的蘋果開(kāi)發(fā)文檔和Xcode給的AppIcon坑，發(fā)現(xiàn)又新增了一些尺寸的圖標(biāo)。在這里整理一下最新的最全的icon尺寸。

itunes中使用的icon

1024 * 1024

iPhone: iOS7-10桌面圖標(biāo)

60 * 60

120 * 120 @2x

180 * 180 @3x

iPhone: iOS5-6桌面App圖標(biāo)

57 * 57

114 * 114 @2x

iPad: iOS7-10桌面圖標(biāo)

76 * 76

152 * 152 @2x

iPad: iOS5-6桌面圖標(biāo)

72 * 72

144 * 144 @2x

iPhone: iOS5-6的搜索 iOS5-10的設(shè)置

iPad: iOS5-10的設(shè)置

29 * 29

58 * 58 @2x

87 * 87 @3x

iPad: iOS5-6系統(tǒng)搜索圖標(biāo)

50 * 50

100 * 100 @2x

iPhone、iPad: iOS7-10系統(tǒng)搜索圖標(biāo)

40 * 40

80 * 80 @2x

120 * 120 @3x

iPhone、iPad: iOS7-10通知欄圖標(biāo)

20 * 20

40 * 40 @2x

80 * 80 @3x

iPad Pro: App桌面圖標(biāo)

167 * 167 @2x

iPhone匯總：

1024 * 1024

120 * 120

180 * 180

20 * 20

40 * 40

80 * 80

29 * 29

58 * 58

87 * 87

57 * 57 (iOS5-6)

114 * 114 (iOS5-6)

iPad匯總：

1024 * 1024

76 * 76

152 * 152

20 * 20

40 * 40

80 * 80

120 * 120

29 * 29

58 * 58

72 * 72 (iOS5-6)

144 * 144 (iOS5-6)

50 * 50 (iOS5-6)

100 * 100 (iOS5-6)

167 * 167 (iPad Pro)

APP啟動(dòng)頁(yè)，即LaunchImages，需要五張不同尺寸大小的圖，切記一定要選擇png格式，否則打包時(shí)報(bào)錯(cuò)，導(dǎo)致APP適配失敗。

五張圖的大小即：320 480、640 960、640 1136、750 1334、1242 2208 828 1792 1125 2436 1242 2688

分別對(duì)應(yīng)的iphone屏幕尺寸：iphone 3GS、iphone4(s)、iphone5(c、s)、iphone6(s)、iphone 6(s) plus 、iphoneX(S)、iphoneXR、iphoneXs Max.

具體步驟：

第一步：

1.點(diǎn)擊工程目錄中的Images.xcassets，點(diǎn)擊左側(cè)邊欄的LaunchImages(如果沒(méi)有，在空白處右擊創(chuàng)建一個(gè))

2.然后在xcode最右側(cè)的邊欄處選擇你的APP是否要對(duì)ipad、橫豎屏、以及低版本的iOS系統(tǒng)做支持。

第二步：

將填好的圖片配置到工程中的啟動(dòng)頁(yè)選項(xiàng)中

點(diǎn)擊項(xiàng)目目錄的工程 - target - General - App Icons And Launch Images

將Launch Images Source的選項(xiàng)設(shè)置為L(zhǎng)aunchImages，切記當(dāng)APP不是用LaunchScreen.xib來(lái)配置啟動(dòng)頁(yè)時(shí)，LaunchScreen File的選擇狀態(tài)一定為空！否則編譯無(wú)法通過(guò)

如果此時(shí)還沒(méi)有顯示的話，那么你先刪除app，然后再運(yùn)行一下項(xiàng)目看看

參考網(wǎng)站：

iOS 常用Appicon圖標(biāo) 尺寸大小總結(jié)

注意：以下尺寸歸納都是按照1PX的像素單位總結(jié)，方便在iOS APP設(shè)計(jì)中使用。

在iOS app設(shè)計(jì)中，我們總是需要去規(guī)范地設(shè)計(jì)所需圖片的大小，下面是本人在學(xué)習(xí)iOS app制作設(shè)計(jì)中所總結(jié)的一些常用尺寸，整理出來(lái)，僅供參考，不足之處，會(huì)在以后學(xué)習(xí)工作過(guò)程中補(bǔ)全。

總的來(lái)說(shuō)，iOS設(shè)計(jì)中會(huì)使用到如下尺寸：

圖標(biāo)尺寸輸出列表：

180x180 ? ? 120x120 ? ? 87x87 ? ? 80x80 ? ? 58x58 ? ? 57x57 ? ??29x29

啟動(dòng)圖片尺寸輸出列表：

640x960? ? 640x1136? ? 750x1334? ? 1242x2208(設(shè)計(jì)版）1080×1920（物理版）

桌面圖標(biāo) (app icon)

iPhone7/6 plus(@3x) : 180 x 180 ? ? ? ? ? ? ? ? ? ? ??iPhone 7/6/5s/5/4s/4(@2x) : 120 x 120

搜索框圖標(biāo) (Spotlight )

iPhone7/6 plus(@3x) : 120 x 120 ? ? ? ? ? ? ? ? ? ? ? iPhone7/6/5s/5/4s/4(@2x) : 80 x 80

設(shè)置圖標(biāo) (Settings icon)

iPhone7/6 plus(@3x) : 87 x 87 ? ? ? ? ? ? ? ? ? ? ? ? ??iPhone7/6//5s/5/4s/4(@2x) : 58 x 58

啟動(dòng)圖片 (launch image)

iPhoen5s/5(@2x) : 640 x 1136 ? ? ? ? ? ? ? ? ? ? ? ? ??iPhoen4s/4(@2x) : 640 x 960

如果是iPhone7/6 或者iPhone7/6 plus 還是建議使用 launch file 或 故事板文件storyboard?

如果使用圖片，則尺寸數(shù)值為：

iPhone 7/6(@2x) : 750 x 1334 ? ? ? ? ? ? ? ? ? ? ?iPhone 7/6 plus (@3x) : 1242x2208(設(shè)計(jì)版）1080×1920（物理版）

根據(jù)iOS系統(tǒng)可簡(jiǎn)單劃分為以下幾種

Spotlight

iOS 5,6

base: 29pt, @2x, @3x，get： 58 x 58, 87 x 87

iOS 7,8

base: 40pt, @2x, @3x，get：80 x 80, 120 x 120

Settings

iOS 5,6,7,8

base: 29pt, @1x,@2x,@3x，get：29 x 29, 58x58, 87x87

iPhone App

iOS 7,8

base: 60pt， @2x, @3x，get：120 x 120, 180 x 180

//

//Created by weil on 16/12/2.

//Copyright ? 2016年 weil. All rights reserved.

//