⑴ 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