下面我列出了自己做專案時遇到的需求，及解決方案

1,安卓各大應用市場圖示、閃屏頁、應用截圖要求如下：

360：圖示——圓角半徑弧度：70PX，尺寸：512*512PX，圖片格式：PNG

截圖——支援JPG、PNG格式。截圖尺寸要求：480×800，單張圖片不能超過3M。請去除截圖中的頂部通知欄。

應用寶：小圖示－尺寸16×16，大小20K以內，PNG格式

圖示－尺寸512*512，大小200K以內，JPG、PNG格式，建議使用直角圖示

截圖－尺寸推薦480*800畫素，單張圖片不超過1M，JPG、PNG格式。

百度：圖示－尺寸512*512，大小800K以內，PNG格式，圖示需為透明背景截圖－單張圖片不超過2M。

截圖推薦480*800畫素。JPG、PNG格式。

小米：圖示－自動讀取包內

截圖－尺寸720×1280，JPG、PNG格式。

注意圖片中不能存在手機外觀素材非Android裝置或介面非Android系統，不能存在其他裝置品牌標誌、名稱、商標。

華為：圖示——需上傳完整正方形圖示。尺寸：192*192px，圖片格式：PNG（不允許上傳JPG）

截圖——大小：2MB以內，推薦截圖大小為480×800格式：jpg、jpeg、png

 

2,安卓手機解析度及橫向畫素

 

上圖中“1x，1.5x，2x，3x，4x”我們可以理解為相對單位或者倍數關係，我們將mdpi作為一個基礎一個參考物，它為1倍的話，hdpi就為1.5倍，下面依次類推，作為設計師更關注的是橫向解析度

橫向上來看：

螢幕級別           橫向解析度                 螢幕密度（dpi）

  mdpi               360px左右                     160

  hdpi                480px（1.5倍）              240

  xhdpi               720px（2倍）                320

  xxhdpi             1080px（3倍）               480

  xxxhdpi            1440px（4倍）              640

 

3,移動開發給設計師的規範：

安卓

啟動圖（App中使用）：
drawable-land-hdpi-screen.png  800*480
drawable-land-ldpi-screen.png  320*240
drawable-land-mdpi-screen.png  480*320
drawable-land-xhdpi-screen.png 1280*720
drawable-land-xxhdpi-screen.png 1920*1080

drawable-port-hdpi-screen.png  480*800
drawable-port-ldpi-screen.png  240*320
drawable-port-mdpi-screen.png  320*480
drawable-port-xhdpi-screen.png  720*1280
drawable-port-xxhdpi-screen.png 1080*1920

應用程式圖示（AppIcon要求是圓角有弧度1024*1024的弧度是180px，App中使用）:
drawable-hdpi-icon.png 72*72
drawable-ldpi-icon.png 36*36
drawable-mdpi-icon.png 48*48
drawable-xhdpi-icon.png 96*96
drawable-xxhdpi-icon.png 144*144
drawable-xxxhdpi-icon.png 192*192

vivo市場特殊：

drawable-hdpi-icon-vivo.png  192*192

drawable-xhdpi-icon-vivo.png 256*256

drawable-xxhdpi-icon-vivo.png 384*384

drawable-xxxhdpi-icon-vivo.png 512*512

應用市場美化之後的截圖（應用市場使用）：
drawable-port-hdpi-screen.png 480*800
drawable-port-xhdpi-screen.png   720*1280
drawable-port-xxhdpi-screen.png 1080*1920
 

IOS

 

啟動圖（App中使用）
iphone6.png  750*1334  
iphone6plus.png 1242*2208
iphoneSE.png 640*1136

iphone4s.png 640*960
iphoneX.png 1125*2436

iphoneXR.png 828*1792

iphoneXSMAX.png 1242*2688

應用程式圖示（AppIcon方角，App中使用）:
icon-40.png 40*40
icon-40@2x.png 80*80
icon-40@3x.png 120*120
icon-50.png 50*50
icon-50@2x.png 100*100
icon-60.png 60*60
icon-60@2x.png 120*120
icon-60@3x.png 180*180
icon-72.png 72*72
icon-72@2x.png 144*144
icon-76.png 76*76
icon-76@2x.png 152*152
icon-83.5@2x.png 167*167
icon-1024.png 1024*1024
icon-small.png 29*29 
icon-small@2x.png 58*58
icon-small@3x.png 87*87
icon.png 57*57
icon@2x.png 114*114


應用市場美化之後的截圖（應用市場使用）：
iphonex.png 1125 *2436

 

iphone6Plus.png 1242 *2208

 

 

4,蘋果手機尺寸及解析度及點

手機型號	螢幕尺寸	螢幕密度	開發尺寸	畫素尺寸	倍圖
4/4s	3.5英寸	326ppi	320*480pt	640*960px	@2x
5/5s/5c	4英寸	326ppi	320*568pt	640*1136px	@2x
6/6s/7/8	4.7英寸	326ppi	375*667pt	750*1334px	@2x
6p/6sp/7p/8p	5.5英寸	401ppi	414*736pt	1242*2208px	@3x
x/xs	5.8英寸	458ppi	375*812pt	1125*2436px	@3x
xr	6.1英寸	326ppi		828*1792px
xs max	6..5英寸	458ppi		1242*2688px

 

注意：這裡手機的尺寸是對角線的尺寸

 

5，解析度定義

影像解析度與顯示解析度

 

顯示解析度（螢幕解析度）是螢幕影像的精密度，是指顯示器所能顯示的畫素有多少。

 

影像解析度則是單位英寸中所包含的畫素點數，其定義更趨近於解析度本身的定義，就是ppi。

 

6，dpi與ppi區別

首先dpi是dot per inch

每英寸的物理點

 

ppi是pixel per inch

每英寸的畫素點

 

比如iphone6的ppi計算方式為

(iphone6)ppi=√750平方*1334平方￣/4.7=326ppi

 

兩個引數的區別就在於Dot和Pixel的區別，dot指的是顯示器上每一個物理的點，而pixel指的是螢幕解析度中的最小單位。這兩個難道會不一樣麼？會！當一個畫素需要多於一個螢幕上的物理點來顯示的時候dot就跟pixel不一樣了

 

比如一些人的電腦螢幕，看上去總是那麼傻大傻大的。就是因為他們把解析度調的太低導致ppi變低了，讓畫面看上去那麼的不協調。ppi變低了，對角線尺寸不變，那麼顯示畫素就要變小，螢幕的物理點不變，這樣就會導致一個畫素點會佔據多個物理點，自然感覺圖示之類的都變大了。

 

7，png與jpg互轉（能直接改字尾嗎）

不能直接改字尾

     檔案的字尾是系統用來區別該用什麼程式軟體開啟他的，改字尾後就相當於告訴電腦用另一種程式開啟這個檔案，如果改後的程式可以開啟這個檔案，不會有什麼影響，如果更改後的程式打不開這個檔案那會導致檔案表面上不可用，（可以用這個方法隱藏你不想讓人看到的檔案）系統無法開啟他。但是你還原之前的字尾電腦使用原來的程式依然可以開啟他，不會對檔案造成任何影響。

     而專換格式則是更改檔案的構造，讓他從這種格式變成另外一種格式，電腦不會因此識別不了、打不開他，就這樣。

 

8，PNG壓縮圖片，畫素不變（這種需求是要改變圖片的物理大小，所佔儲存空間變小）

修改ppi，ppi變小，圖片會變模糊，這樣圖片的物理大小會變小

 

 

 

9，網大圖片畫素變小（需求比如512*512變為36*36）

這種需求ppi不會變，圖片的畫素大小會變小（發現圖片寬和高變小了），但是直接雙擊開啟是不會模糊不清的（因為圖片寬和高變小了）

 

10，網上找的圖片png或者jpg，要畫素（寬和高）變大

比如轉svg

 

使用Adobe Illustrator編輯後匯出SVG

首先，只要jpg或者png圖片沒有太小，比如寬高都大於200px，並且沒有陰影等亂七八糟的效果，我認為用Illustrator就可以做出比較好的向量SVG。操作流程如下：

（1） 用Illustrator開啟JPG/PNG圖片。

（2）點選圖片，進入選擇狀態，上面的工具欄點選“影像描摹”右側的下拉箭頭，選擇“高保真度圖片”。

這時無敵的illustrator已經把普通jpg/png轉換成了向量圖。但還有一個問題，就是仔細觀察的話，這個圖是有白色背景的。如果你恰好需要這個背景那太好了，否則我們必須把這個背景弄掉。

（3）開啟描摹皮膚。兩種方法，第一種，點選工具欄上的按鈕。第二種，右上角切換工作臺模式。二選一，如圖：

（4）展開高階，方法選擇第一個“臨接（建立木刻路徑）”，選項勾選“忽略白色”，看圖就明白了：

但注意轉換為svg後有可能出現問題，需要修正

 

11，圖片的畫素改變了，如何使圖片不變形

這個應該需要在ai中修改下，需要重新做下

 

12,如何匯出多個尺寸的圖示

ai中選擇檔案匯出所選專案專案即可

 

13，匯出svg，轉成iconfont

登入阿里巴巴iconfont，上傳svg圖片即可一鍵轉換

 

14，圖片圓弧，透明底（網上有線上轉）

推薦網址 http://www.atool.org/roundcorner.php

 

 

15，安卓中sp，dp，px區別

dp和px的關係：px = dp * (dpi / 160)

Density-independent pixel (dp)獨立畫素密度。標準是160dip.即1dp對應1個pixel，，螢幕密度越大，1dp對應 的畫素點越多。 上面的公式中有個dpi，dpi為DPI是Dots Per Inch（每英寸所列印的點數），也就是當裝置的dpi為160的時候1px=1dp；

dp=px*160/dpi

舉例：比如尺寸不變，不同解析度上都用5px，在160dpi時控制元件長度採用5px，然後480dpi上控制元件長度也用5px，會發現480dpi上的5px變短了，因為480dpi上每英寸畫素點多了，5px所佔的英寸自然小了，但是採用dp會發現控制元件的視覺大小沒變因為控制元件所佔的英寸沒變。

比如：我將一個控制元件設定長度為1dp,那麼在160dpi上該控制元件長度為1px，在240dpi的螢幕上該控制元件的長度為1*240/160=1.5個畫素點。（公式px=dp*(dpi/160)）

sp和dp的關係 :

dp只跟螢幕的畫素密度有關； 
sp和dp很類似但唯一的區別是，Android系統允許使用者自定義文字尺寸大小（小、正常、大、超大等等），當文字尺寸是“正常”時1sp=1dp=0.00625英寸，而當文字尺寸是“大”或“超大”時，1sp>1dp=0.00625英寸。類似我們在windows裡調整字型尺寸以後的效果——視窗大小不變，只有文字大小改變。 

 

16，設計師在標註圖上標的字型px轉換成ios和android開發中的大小

對於android

1dp定義為螢幕密度值為160ppi時的1px，即，在mdpi時，1dp = 1px。 以mdpi為標準，這些螢幕的密度值比為：ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3；即，在xhdpi的密度下，1dp=1sp=2px；在hdpi情況下，1dp=1sp=1.5px。其他類推。

 

 

17，設計師在標註圖上標的圖片px轉換成ios和android開發中的大小

設計師一般標註圖都是用的iphone6，而iphone6的畫素是750*1334，對應於開發的點是375*667，比如標註圖片是67*67，那麼我們在xib上的大小是33.5*33.5,這時候我們需要的圖片是@2x為67*67，@3x為100.5*100.5。

原因：

 

1. 在同樣一個尺寸的螢幕下由於使用的螢幕不一樣(retina和非retina),所以造成的螢幕解析度會不同.也就是說,同樣是30*30的畫素,在3.5 inch大小的螢幕上,如果是非retina顯示會大一些,retina螢幕顯示會小一些。
2. 在開發中使用的是點.(比如 30 * 30 ,不是表示30畫素,而是表示30點,這樣的話iOS系統會自動把點轉換為對應的畫素)
   • 非retina螢幕1個點表示1畫素
   • retian螢幕1個點表示2畫素
   • iPhone6 Plus 下1個點表示3畫素
3. 因為程式中是點,iOS系統會自動把點轉換為不同的畫素去找圖片,所以圖片對應的也要準備多份不同的圖片,
   • @2X:視網膜螢幕,在原來點座標的大小上乘以2
   • @3X：在原來的座標的大小上乘以3

 

對應於安卓中xhdpi為67*67

 

 

 

 

18，用ps修改png格式圖示的顏色

點選開啟連結

 

19，使用pixelstick量畫素大小

pixelstick在Mac上是需要購買的

使用方式：如下圖

最左邊的紅色圈圈是固定點，右邊黃色圈圈裡面可以左右拉伸，還可以有角度的變換，，然後看右邊黑色圈圈裡面的值512px，說明白色小塊的寬度為512px