導航:首頁 > APP軟體 > 蘋果app圖標尺寸規范

蘋果app圖標尺寸規范

發布時間:2023-03-17 11:14:49

『壹』 Android和IOS開發圖標、啟動頁尺寸

最近項目在做android和ios的項目,設計師讓我給出圖標的尺寸,於是查了一下尺寸。

第一步:產品經理和UI設計師制定好UI規范,然後開始做圖標做顏色做尺寸等一系列和APP界面強相關的工作,以最常見的「back」按鈕為例,UI設計師從無到有的具體實現步驟:
①在coreldraw或者Sketch中製作好「矢量圖標「—返回,此時的長寬單位是毫米;
②保存輸出為「PNG點陣圖圖片」—返回,此時的長寬單位是px(像素);
③指定好此圖標的內外邊距,此時的邊距單位是px(像素);
④最終此圖標圖片交到開發者手中,做好圖片的放置和內外邊距的實現。開發這在這個過程中會遇到一個問題:內外邊距是由px為單位的距離,但是在實際開發中「dp」做為單位的更加常見,所以就會涉及到「px」「dp」互轉的封裝類,專門用來實現這個過程,同時還要注意不同解析度屏幕的適配。

(1)px,平常我們所說的手機的解析度是1920×1080,這就是像素數量,也就是1920px×1080px,代表手機高度上有1920個像素點,寬度上有1080個像素點,每個像素點的單位是px。
(2)dp,dp是為了開發者便於做不同屏幕的適配而引入的開發單位,具體來說就是為了使得開發者設置的長度能夠根據不同屏幕(解析度/尺寸也就是dpi)獲得不同的像素(px)數量。比如:我將一個控制項設置長度為1dp,那麼在160dpi上該控制項長度為1px,在240dpi的屏幕上該控制項的長度為1 240/160=1.5個px。也就是dp會隨著不同屏幕而改變控制項長度的像素數量。
(3)DPI,用戶實際判別手機屏幕的顯示好壞,除了解析度還要考慮屏幕的寬高(英寸),也就是用dpi,即每英寸多少像素來評價屏幕的顯示效果。(不然假如手機解析度是1920×1080,但是屏幕是幾十寸的,那顯示效果將不會很好,甚至你有可能看到小的像素塊,那將更影響視覺效果。)
三、Android開發中圖標尺寸總結(務必掌握):
(1)dpi、解析度與圖標尺寸的關系L DPI ( 120 DPI )—解析度240 320px,其啟動圖標大小為 36 x 36 pxM DPI (160 DPI )—解析度320 480px,其啟動圖標大小為 48 x 48 pxH DPI ( 240 DPI )—解析度480 800px,其啟動圖標大小為 72 x 72 pxXH DPI ( 320 DPI )—解析度1280 720px,其啟動圖標大小為 96 x 96 pxXXH DPI( 480 DPI )—解析度1920 1080px,其啟動圖標大小為144 x 144 pxXXXH DPI( 640 DPI )—解析度3840*2160px,其啟動圖標大小為192 x 192 px
(2)開發中「px」到「dp」從 px 換算成 dp 要知道它是以什麼 dpi 標准來設計的,換句話說,就是要根據不用解析度的屏幕,根據換算關系表得到相應的 dp 。 例如: 以 xxhdpi 標准設計的 UI,其中一個切圖的解析度是 600 px * 360 px ,根據換算關系表可知,在 xxhdpi 標准下,1 dp = 3 px ,則其對應的 dp 是 200 dp * 120 dp 。換算關系表如下:(兩次標紅 請重點關注)

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

具體的圖標尺寸可以打開xcode ,在項目目錄下找到Assets.xcassets文件,這個文件裡面標識出了所需要的圖標尺寸,下面標識的是基本尺寸,2x就是底部尺寸x2 ,即下面的尺寸為80pt和120pt

看了一下新的蘋果開發文檔和Xcode給的AppIcon坑,發現又新增了一些尺寸的圖標。在這里整理一下最新的最全的icon尺寸。

itunes中使用的icon

1024 * 1024

iphone: iOS7-10桌面圖標

60 * 60

120 * 120 @2x

180 * 180 @3x

iPhone: iOS5-6桌面App圖標

57 * 57

114 * 114 @2x

iPad: iOS7-10桌面圖標

76 * 76

152 * 152 @2x

iPad: iOS5-6桌面圖標

72 * 72

144 * 144 @2x

iPhone: iOS5-6的搜索 iOS5-10的設置

iPad: iOS5-10的設置

29 * 29

58 * 58 @2x

87 * 87 @3x

iPad: iOS5-6系統搜索圖標

50 * 50

100 * 100 @2x

iPhone、iPad: iOS7-10系統搜索圖標

40 * 40

80 * 80 @2x

120 * 120 @3x

iPhone、iPad: iOS7-10通知欄圖標

20 * 20

40 * 40 @2x

80 * 80 @3x

iPad Pro: App桌面圖標

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啟動頁,即LaunchImages,需要五張不同尺寸大小的圖,切記一定要選擇png格式,否則打包時報錯,導致APP適配失敗。
五張圖的大小即:320 480、640 960、640 1136、750 1334、1242 2208 828 1792 1125 2436 1242 2688
分別對應的iphone屏幕尺寸:iphone 3GS、iphone4(s)、iphone5(c、s)、iphone6(s)、iphone 6(s) plus 、iphoneX(S)、iphoneXR、iphoneXs Max.
具體步驟:
第一步:

1.點擊工程目錄中的Images.xcassets,點擊左側邊欄的LaunchImages(如果沒有,在空白處右擊創建一個)
2.然後在xcode最右側的邊欄處選擇你的APP是否要對ipad、橫豎屏、以及低版本的iOS系統做支持。

第二步:

將填好的圖片配置到工程中的啟動頁選項中
點擊項目目錄的工程 -> target -> General -> App Icons And Launch Images
將Launch Images Source的選項設置為LaunchImages,切記當APP不是用LaunchScreen.xib來配置啟動頁時,LaunchScreen File的選擇狀態一定為空!否則編譯無法通過

如果此時還沒有顯示的話,那麼你先刪除app,然後再運行一下項目看看

參考網站
https://blog.csdn.net/weixin_41101173/article/details/79644613
https://blog.csdn.net/it_male/article/details/80434269

『貳』 IOS界面設計尺寸標准規范

很多IOS APP UI設計稿都是以iphone6為基準的,方便向上適配iphone7的尺寸,也方便隱搜向下適配iphone5的尺寸。所以我給大家分享iPhone6的界面設計尺寸有哪些規范。

IOS界面設計尺寸規范(以iPhone6為例)

一、界面尺寸規范

1、界面尺寸大小是:750x1334px。

2、狀態欄(status bar):就是電量條,其高度為:40px;

3、導航欄(navigation):就是頂部條,其高度為:88px;

4、主菜單欄(submenu,tab):就是標簽欄,底部條,其高度為:98px;

5、內容區域(content):就是屏幕中灶穗歷間的區域,其高度為:1334px-40px-88px-98px=1108px

二、圖標尺寸規范

1、導航欄和工具欄尺寸大小44x44px;

2、標簽欄尺寸大小75x75px

3、導航欄的文字大小最大值是34-36px,標簽欄的圖標下方的文字大小為20px。

4、內容區域的文字大小是:20px 24px,26px,28px,30px,32px,34px。

三、設置界面的圖標高度和開關滑動按鈕的高度:58px

四、可點擊高度規范

在iPhone6的原型圖上,統一成88px。在iPhone6設計稿中,88px是一個常用的設計尺寸。

五、搜索欄高度規范

搜索欄的高度,在iPhone6的原型圖上,統一成58px。

六、界面元素之間的距離規范

在iPhone6設計稿中,界面元素之間的常用距離,親密距離:20px;疏遠距離:30p x。

A、疏遠距離:比如,所有元素距離手機屏幕最左邊的距離。

B、親密距離:比如,左邊圖標與右邊文字之間的距離。

七、原型設計中,需要考慮不同屏幕尺寸的蘋果手機,在@1x的情況下的適配情況。

1、iPhone5在@2x屏幕尺寸是,640x1136px;對應的@1x,屏幕尺寸就是320x568px;

2、iPhone6在@2x屏幕尺寸是:750x1334px;對應的@1x,屏幕尺寸就是375x667px;

3、iPhone6Plus在@3x屏幕尺寸是:750x1334px;對應的@1x,屏幕尺寸就414x736px;

八、iPhone6Plus的@3x,iPhone6的@2x, iPhone5的@2x的介紹

1、iPhone6Plus是5.5英寸屏幕,1242x2208px-@3x的像素解析度,邏輯族昌解析度是414x981px-@1x。物理尺寸是1080x1920px。這個物理尺寸,也是安卓機目前最流行的大屏設計稿尺寸。

2、iPhone6是4.7英寸屏幕,750x1334px-@2x的像素解析度,邏輯解析度是375x889px-@1x。

3、iPhone5是4英寸屏幕,640x1135px-@2x的像素解析度,邏輯解析度是320x757px-@1x。

總結:iPhone6的原型規范如下:

1、界面尺寸布局:滿屏尺寸750x1334px;

2、高度電量條高度40px,導航欄高度88px,標簽欄高度98px;

3、各區域圖標大小導航欄圖標44px,標簽欄圖標50px;

4、各區域文字大小電量條文字22px,導航欄-文字32px,標簽欄字20px;

5、常用的文字大小:32px,30px,28px,26px,24px,22px,20px;

6、常用的顏色:背景淺灰色#f2f2f2,文字深黑色#323232,邊框色深灰#CCCCCC;

7、常用可點擊區域的高度:88px;

8、單行文字的背景框的高度:88px,雙行則為:176px,三行則為:264px;

9、常用間距:親密距離:20px;疏遠距離:30px,其它距離:10px,44px等;

10、按鈕和文本框,原型圖做成直角的,圓角半徑是多少,由Ui來設計;

11、這種情況,需要修改原型。單個頁面的邏輯流程圖或用戶學習使用時間,超過其它頁面平均數的3倍以上

『叄』 iphone界面尺寸規范

iphone 6 plus設計版:1242*2208

ppi:401ppi

狀態欄高度:60px

導航欄高度:132px

標簽欄高度:147px

iphone 6 plus放大版:1125*2001

ppi:401ppi

狀態欄高度:54px

導航欄高度:132px

標簽欄高度:147px

iphone 6 plus物理版:1080*1920

ppi:401ppi

狀態欄高度:54px

導航欄高度:132px

標簽欄高度:147px

物理版、放大版、設計版的區別:

物理版就是iphone 6plus實際實際的屏幕像素,而設計版就是我們截屏iphone 6plus的界面在ps中去量,發現的尺寸。很明顯,量出來的解析度也就是設計版要比物理版的解析度要大,這可能由於蘋果採用了縮放顯示的。至於放大版,其實就是iphone 6的尺寸等比放大1.5倍得出的解析度。

iphone 6:750*1334

ppi:326ppi

狀態欄高度:40px

導航欄高度:88px

標簽欄高度:98px

iphone 5-5c-5s:640*1136

ppi:326ppi

狀態欄高度:40px

導航欄高度:88px

標簽欄高度:98px

iphone 4-4s:640*960

ppi:326ppi

狀態欄高度:40px

導航欄高度:88px

標簽欄高度:98px

iphone&ipod Touch第一代、第二代、第三代:320*480

ppi:163ppi

狀態欄高度:20px

導航欄高度:44px

標簽欄高度:49px

圖標尺寸:

iphone 6 plus(@3X)

App store:1024*1024px(180px)

非retina:512*512px(90*90px)

程序應用:180*180px0000

主屏幕:114*114px(20px)

spotlight搜索:87*87px

工具欄和導航欄:66*66px

iphone 4、5、6(@2X)

App store:1024*1024px

程序應用:120*120px

主屏幕:114*114px

spotlight搜索:58*58px(10px)

工具欄和導航欄:44*44px

iphone&ipod touch第一代、第二代、第三代:

App store:1024*1024px

程序應用:120*120px

主屏幕:57*57px(10px)

spotlight搜索:29*29px

測量標注工具為:

MarkMan馬克鰻,Dorado標注,PXcook像素大廚。

iphone6圖標尺寸

導航欄的圖標高度為44px左右,標簽欄的圖標尺寸為50x50px左右,最大為96x64px。

設置界面的圖標高度和開關滑動按鈕的圖標高度:58px。

ip 6 plus的圖標高度和開關滑動按鈕為:87*87px。

iPhone6文字尺寸

導航欄的文字大小最大值是34-36px,標簽欄的圖標下方的文字大小為20px。

內容區域的文字大小是:20px~24px,26px,28px,30px,32px,34px。

文字顏色:

黑白灰顏色常用的數值是:

① 文字黑色#282828

② 文字深灰色#656565

③ 文字淺灰色#98989

④ 邊框淺灰色#C3C3C3

⑤ 背景淡灰色#f2f2f2

⑥ 按鈕背景純白色#ffffff

常用的可點擊高度,在iPhone6的原型圖上,統一成88px。在iPhone6設計稿中,88px是一個常用的設計尺寸。

搜索欄的高度,在iPhone6的原型圖上,統一成58px。

在iPhone6設計稿中,58px 也是一個常用的設計尺寸。

在iPhone6設計稿中,界面元素之間的常用距離,親密距離:20px;疏遠距離:30px。

導航欄的圖標高度為44px(絕大部分功能按鈕)左右,標簽欄的圖標尺寸為50x50px左右,最大為96x64px。

關閉按鈕34px*34px,返回按鈕26px,簡單筆畫圖標40px。

常用的可點擊高度-登陸框、密碼框、功能列表等,統一設成88px。

搜索欄、輸入框、評論框、地址框的高度,在iPhone6的原型圖上,統一設成58px或60px。

在iPhone6設計稿中,界面元素之間的常用距離。

常用間距-親密距離:20px(與邊緣距離);疏遠距離:30px;

其它距離-10px,44px等;

區塊間隔:30-40px。

A、疏遠距離:比如,改圖標距離手機屏幕最左邊的距離;

B、親密距離:比如,左邊圖標與右邊文字之間的距離。

黑白灰顏色常用的數值是:

① 文字黑色#333

② 文字深灰色#666

③ 文字淺灰色#999

④ 邊框淺灰色#e5e5e5

⑤ 背景淡灰色#f2f2f2

⑥ 按鈕背景純白色#ffffff

移動端常規字體

IOS:常選擇華文黑體或者冬青黑體,尤其是冬青黑體效果最好,方正蘭亭黑和方正黑體簡、方正中等線也運用的比較多。

字體的大小

1、導航欄的文字大小是36-38px;

2、標題字型大小:32px ,34px;

3、內容區域的正文文字大小是:28px,30px;

4、輔助性文字:20px , 24px,26px;

5、標簽欄(或主菜單欄)的圖標下方的文字大小為20px;

6、終極原則:不大於所在要件高度的一半*;

7、行間距:字型大小的1.2-1.5倍。

IOS

長文本

可接受下線(80%用戶接受):26px

見小值(50%用戶認為偏小):30px

舒適值(用戶認為最舒適):32~34px

短文本

可接受下線(80%用戶接受):28px

見小值(50%用戶認為偏小):30px

舒適值(用戶認為最舒適):32px

注釋

可接受下線(80%用戶接受):24px

見小值(50%用戶認為偏小):24px

舒適值(用戶認為最舒適):28px

顏色值

IOS顏色值取 RGB各顏色的值比如某個色值,給予IOS開發的色值為 R:12 G:34 B:56 給出的值就是 12,34,56(有時也要根據開發的習慣,有時也用十六進制)

內部設計

1、所有能點擊的圖片不得小於44px(Retina需要88px)

2、單獨存在的部件必須是雙數尺寸

3、兩倍圖以@2x作為命名後綴

4、充分考慮每個控制按鈕在4中狀態下的樣式,如默認、按下、選中、不可點擊。

短文本:

注釋:

邏輯解析度

lPPI(像素密度)

表示沿著對角線,每英寸所擁有的像素(pixel)數目,PPI的數值越高,代表顯示屏能夠以越高的密度顯示圖像,即通常所說的解析度越高,顆粒感越弱,圖像更清晰。

1 inch= 2.54cm = 25.4mm

早期的iPhone3GS的屏幕屏幕解析度是320 * 480,iOS繪制圖形(CGPoint/CGSize/CGRect)均已point為單位。

l點(point)和像素(pixel)換算關系

iPhone3GS

1point = 1pixel

iPone4/4s、iPhone5/iPhone5s、iPhone6/iPhone6s

1point = 2pixel

iPhone6Plus/iPhone6s Plus

1point = 3pixel

iphone手機英寸如何制定?

pt以及倍率之間的換算關系

建立色彩標准卡

ps有沒有標注工具

圖標柵格系統

『肆』 iOS App Store屏幕快照尺寸規范、App Icon尺寸規范

正常情況iPhone的截屏橋裂尺寸只要1242x2688和1242x2208兩個尺寸就可以了

根據發布的平台進行設置

只要UI給你桐廳一張1024x1024的圖標,你就可以使用這個 圖標敏輪閉工場 工具生成各種尺寸的圖標了,方便快捷🤣

『伍』 iOS | 蘋果App應用圖標和LaunchImage啟動頁尺寸的設計規范

蘋果啟察官網規定的設計尺寸塵擾
1. https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

iOS設派旁旦計標准尺寸
2. http://www.360doc.com/content/18/0122/16/67582_724178506.shtml

『陸』 淺談iOS APP設計規范-按照iphone6尺寸

現在iOS app 的尺寸也變多了,要適配到各種尺寸需要選擇一個折中的尺寸來向上向下適配,以前一般用的是iphone5的尺寸,iPhone6 plus出現後,iPhone6尺寸成了大多數設計師的選擇。

一、iPhone6的界面布局是:
屏幕是4.7英寸的,設計稿的大小750x1334px

☆ 狀態欄(status bar):就是電量條,其高度為:40px;
☆ 導航欄(navigation):就是頂部條,其高度為:88px;
☆ 主菜單欄(submenu,tab):就是標簽欄,底部條,其高度為:98px;
☆ 內容區域(content):就是屏幕中間的區域,其高度為:1334px-40px-88px-98px=1108px

二、關於iPhone6的圖標的尺寸是:

☆導航欄的圖標高度為44px(絕大部分功能按鈕)左右,標簽欄的圖標尺寸為50x50px左右,最大為96x64px。
☆關閉按鈕34px*34px,返回按鈕26px,簡單筆畫圖標40px。

三、常用的可點擊高度-登陸框、密碼框、功能列表等,統一設成88px。

四、搜索欄、輸入框、評論框、地址框的高度,在iPhone6的原型圖上,統一設成58px或60px。

五、在iPhone6設計稿中,界面元素之間的常用距離。

常用間距-親密距離:20px(與邊緣距離);疏遠距離:30px;
其它距離-10px,44px等;
區塊間隔:30-40px。
A、疏遠距離:比如,改圖標距離手機屏幕最左邊的距離;
B、親密距離:比如,左邊圖標與右邊文字之間的距離。

六、黑白灰顏色常用的數值是:

① 文字黑色#333
② 文字深灰色#666
③ 文字淺灰色#999
④ 邊框淺灰色#e5e5e5
⑤ 背景淡灰色#f2f2f2
⑥ 按鈕背景純白色#ffffff

一、注意事項

1、在每個項目設計中只使用1-2個字體樣式,而在品牌字有明確的規范的情況下,只需要一種字體貫穿全文,通過對字體放大來強調重點文案。字體用的太多,越顯得不夠專業。
2、不同的樣式的字體,形狀或系列最好相同,保證字體風格的一致性。
3、字體與背景的層次要分明,確保字體樣式與色調氣氛相匹配

二、界面中文字選用的規則

在不同平台的界面設計中規范的字體會有不同,像移動界面的設計就會有固定的字體樣式,網頁中會有常用的幾個字體。
以下是在72像素/英寸下的規范

移動端常規字體
IOS:常選擇華文黑體或者冬青黑體,尤其是冬青黑體效果最好, 方正蘭亭黑和方正黑體簡 、方正中等線也運用的比較多。

三、字體的大小

1、導航欄的文字大小是36-38px;
2、標題字型大小:32px ,34px;
3、內容區域的正文文字大小是:28px,30px;
4、輔助性文字:20px , 24px,26px;
5、標簽欄(或主菜單欄)的圖標下方的文字大小為20px;
6、終極原則:不大於所在要件高度的一半;
7、行間距:字型大小的1.2-1.5倍。
下圖是網路用戶體驗做過的一個小調查,可以看出用戶可接受的文字大小:

『柒』 圖標規范標准(IOS/Android)

IOS篇

本小節中ios圖標標准均以iPhone6為例

1.APP圖標  

         APP圖標指應用圖標,圖標尺寸為120x120,如果是游戲類應用,這個圖標也會被用在Game Center中。由於IOS應用圖標是由於系統統一切圓角,所以設計的時候直接出方形圖標即可。設計時可根據需要作出圓角供展示使用。

尺寸規格:

圖標尺寸:57x57,圓角10;圖標尺寸:114x114, 圓角20;圖標尺寸:120x120,圓角22;圖標尺寸:114x114,圓角20;圖標尺寸:180180,圓角尺寸34;圖標尺寸:512x512,圓角尺寸90;圖標尺寸:1024x1024,圓角180.

2.APP Store圖標

APP Store圖標指上傳至應用商店的應用圖標,尺寸為1024x1024.為了吸引用戶可增加更多的設計細節。不過基於效率考慮,一般與APP圖標的設計保持一致。此時的圖標需要設計圓角,圓角像素為160。

3.標簽欄導航圖標

標簽欄導航圖標指底部標簽欄上的圖標,圖標設計尺寸為50x50。

4.導航欄圖標

導航欄圖標指分布導航欄上的功能圖標,圖標設計尺寸為44x44

5.工具欄圖標

工具欄圖標指底部工具欄上的功能圖標,圖標設計尺寸為44x44

6.設置圖標

設置圖標指在列表式的表格視圖中左側功能圖標,圖標設計尺寸為58x58

7.Web Clip圖標

Web Clip圖標指如果你有Web小程序或者網站,可以制定一個小圖標。用戶可以把它直接放在桌子上,用戶可單擊圖標直接訪問網頁內容。圖標設計尺寸為120x120。

Android篇

為了簡化設計並且兼容更多的手機屏幕,安卓系統平台對屏幕進行了區分。按屏幕像素密度劃分為低密度屏幕(LHDPI)、中低密度屏幕(MHDPI)、高低密度屏幕(XHDPI)、和超超高低密度屏幕(XXHDPI)。

密度之間的關系為3:4:6:8:12.使用這些比例,通過簡單的計算,我們就可以適配出不同版本的點陣圖,以供開發使用。

安卓尺寸標准:

75x75對應LDPI顯示屏;100x100對應MDPI顯示屏;150x150對應HDPI顯示屏;200x200對應XHDPI顯示屏;300x300對應XXHDPI顯示屏。

特別提示:這些尺寸要熟練的運用到工作當中,希望大家多積累。

文章更新的速度確實有些慢了,我會加以改正。還望大家多多關注。

『捌』 iOS 常用Appicon圖標 尺寸大小總結

注意:以下尺寸歸納都是按照1PX的像素單位總結,方便在iOS APP設計中使用。

  在iOS app設計中,我們總是需要去規范地設計所需圖片的大小,下面是本人在學習iOS app製作設計中所總結的一些常用尺寸,整理出來,僅供參考笑毀派,不足之處,會在以後學習工作余碧過程中補全。

總的來說,iOS設計中會使用到如下尺寸:

圖標尺寸輸出列表:

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

啟動圖片尺寸輸出列表:

640x960    640x1136    750x1334    1242x2208(設計版)1080×1920(物理版)

桌面圖標 (app icon)

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

搜索框圖標 (Spotlight )

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

設置圖標 (Settings icon)

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

啟動圖片 (launch image)

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

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

如果使用圖片,則尺寸數值為:

iPhone 7/6(@2x) : 750 x 1334                      iPhone 7/6 plus (@3x) : 1242x2208(設計版)1080×1920(物理版)

根據iOS系統可簡單劃分為以下幾種

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.

//

『玖』 APP切圖詳細規范終極指南2020

我們都知道一套完整的 App 通常會有很多張切圖,不管是 iPhone 需要 1x、2x、3x 圖檔,Android 需要至少 3 種 hdpi、xhdpi、xxhdpi。在龐大的切圖數穗豎舉量下如何讓負責套圖的 RD 快速找到所需圖檔纖卜,檔名的命令方式就需要雙方統一格式方便大家作業。所以,制定一套非常有效而方便的APP切圖命名規范非常有用的。

目前iPhone有10種型號,5種屏幕尺寸,再加上6plus的「降采樣」(Downsampling)(1080-1920),還有iPhone6和6+上的放大模式(1125-2001)和默認模式(1242-2208),是不是感覺好恐怖?但是不用怕,我分享一套超簡單的適配方法,看完你都不信有這么簡單~

UI交付給開發的資料有

開發看到這份標注圖,可以自己用上面的數字,乘以1.5得出3X的數字。

iOS圖標尺寸: https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

iPhone Portrait iOS 8,9-Retina HD 5.5 (1242×2208) @3x
iPhone Portrait iOS 8,9-Retina HD 4.7 (750×1334) @2x
iPhone Portrait iOS 7,9-2x (640×960) @2x
iPhone Portrait iOS 7,9-Retina 4 (640×1136) @2x
iPhone Portrait iOS 5,6-1x (320×480) @1x
iPhone Portrait iOS 5,6-2x (640×960) @2x
iPhone Portrait iOS 5,6-Retina4 (640×1136) @2x

LaunchImage:
android: 720 1280
iOS:( 2020年6月30日後強制全部使用LaunchScreen.storyboard顯示啟動閃屏*)
750x1334 iPhone 8

基本上 App 的切圖可分為下面幾大類:

背景、按鈕、圖示、圖片、照片、TabBar icon 等。

為了讓切圖便於管理,通常會依圖片性質命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。當圖檔要做給 Retina 屏幕使用時,只要在文檔名前加上「@2x」猜碧就可以了。如[email protected][email protected][email protected]。在命名時 bg-xxx.png 中間的 – 可以改為 _ 。

iOS 上寫 Desktop icon 檔案命名使用 -,如果切圖只給 iOS 使用,可以和 iOS 採用相同的命名方式。請注意 Android 不支援 - 的命名方式,如果圖檔要運用在 Android 上,請把所有的 - 改成 _ 底線。最好不要把數字或符號當成檔名的開頭,如 3-icon.png 、+abc.png之類。

前綴是一種簡單記憶、節約成本的純文本標記語言,使用前綴能快速知道切圖是用作那一組件類別,好的前綴也無非就以下幾種:

後綴一般是來表示切圖的顏色、透明度、狀態等信息:

通過上述介紹,一般遇到的情況也就這么一些,只需要按照前綴+位置用途+後綴就差不多了,這里列舉一些比較好的命名:

1、畫布大小定位 720 x 1280 或 1080 x 1920,72 dpi等;
2、只使用偶數單位的尺寸,比如 96 px 的列表項高度,16 px 的邊距,64 px 的圖標邊長;
3、只使用偶數單位 24 pt,28 pt,36 pt等字體大小;
4、設計完成以後,所有尺寸的 px 值除以 2(需要約定的倍數) 作為 dp 數值交給工程師;
5、所有字體的 pt 值除以 2 (需要約定的倍數)作為 sp 數值交給工程師;
6、所有切圖變成三份,分別是原始大小、縮小 1.5 倍,縮小 2 倍,分別作為 xhdpi,hdpi,mdpi 的資源交給工程師;

只需要全局標出共用字體即可,特殊字體特殊標注。

顏色值一般使用十六進製表示,如 #FFFFFF, #90FFFFFF 其中90兩位代表透明度。透明度計算:
225∗透明度百分比轉16進制
FF 代表不透明,7F代表半透明,00代表不透明

https://help.apple.com/app-store-connect/#/devd274dd925

『拾』 APP設設計規范尺寸、切圖詳解——IOS和Android

目前主流的是以iPhone 6為主,設計尺寸是750*1334px,4.7寸。

1、解析度以iPhone 6 設計為主:750*1334px

2、(字體 Helvetica/華文細黑,實際中運用黑體簡或者Hiti-sc 最接近系統中所帶字體)

3、工具欄height:88px    如搜索、選擇、刪除、回復等。

4、頂部標簽欄height:60px  位於狀態欄或者狀態欄下的文字/具有可切換功能的圖標

1、導航欄

所有的字型大小,在750*1334px的設計尺寸下都是偶數,便於程序員操作。

所有可觸發按鈕必須≥44*44

所有可觸發按鈕必須≥22*22

左右內容與邊距的間隔大概在20px

強調確定,填充有彩色。

例如:

搜索框右邊要有一個取消、或者輸入了之後有一個「x」

漸變和底紋效果和程序員商討

設計尺寸:720*1280px

狀態欄48px  導航欄96px  內容區1038px   標簽欄112px

閱讀全文

與蘋果app圖標尺寸規范相關的資料

熱點內容
excel兩個表格怎麼對比相同數據 瀏覽:383
ps4港服文件怎麼弄 瀏覽:560
蘋果6splusnote5s6 瀏覽:426
定向流量30G都包括哪些APP 瀏覽:352
apple和瑤瑤綜藝 瀏覽:351
打開word所在文件夾自動彈出 瀏覽:390
c怎麼編程改名字 瀏覽:146
哪些電視劇app不帶logo的 瀏覽:406
開機後桌面變黑色桌面文件丟失 瀏覽:136
網路電視怎麼用遙控器 瀏覽:953
我的世界json打開失敗 瀏覽:867
易語言56教程視頻 瀏覽:610
linux開機啟動文件 瀏覽:773
給寶寶唱兒歌用什麼app 瀏覽:354
投標文件為什麼要使用cad軟體 瀏覽:522
一季度保險業務數據如何看 瀏覽:398
為什麼行車記錄儀文件大小為0 瀏覽:795
win10筆記本傳輸文件 瀏覽:735
棉花糖小說下載的小說在哪個文件 瀏覽:750
淘寶網頁特效代碼 瀏覽:921

友情鏈接