這兩個(gè)一般用在大中尺寸足夠了，應(yīng)該都是給android的，現(xiàn)在又蘋果的就當(dāng)然給蘋果的了，而480寬度對(duì)應(yīng)的是HDPI，一般480*800的。
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供東區(qū)網(wǎng)站建設(shè)、東區(qū)做網(wǎng)站、東區(qū)網(wǎng)站設(shè)計(jì)、東區(qū)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、東區(qū)企業(yè)網(wǎng)站模板建站服務(wù)，10年東區(qū)做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
每個(gè)DPI等級(jí)切一套圖，可以保證這個(gè)像素密度下的圖像顯示清晰，有一些圖片壓縮后會(huì)看著變形，所以還是多干點(diǎn)活吧。
iOS開(kāi)發(fā)中，會(huì)要求導(dǎo)入@1x、@2x和@3x：
使用@1x格式： iPhone3GS
使用@2x格式： iPhone 4，4S，5，5S，5C，SE，6，6S，7，8，XR
使用@3x格式： iPhone 6Plus、6sPlus、7Plus、8Plus、X、XS、XS Max
這樣在開(kāi)發(fā)過(guò)程中，將三種圖片（比如分別為1.png、1@2x.png和1@3x.png）導(dǎo)入到工程圖庫(kù)中的時(shí)候可以自動(dòng)被識(shí)別為1x、2x和3x大小的圖片
可以利用Mac系統(tǒng)中自帶的服務(wù)自己 制作一個(gè)快速生成@1x、@2x和@3x圖片的功能
首先spotlight搜索Automator，然后按Enter打開(kāi)
**新建文稿 **
選取文稿類型為 快速操作
在工作流程收到當(dāng)前的后面選擇圖像文件
在左邊窗口的“操作”下，選擇“資源庫(kù)”中的“文件和文件夾”，將右側(cè)中的“給訪達(dá)項(xiàng)目重新命名”拖入最右側(cè)的大窗口中，（如果警告提示是否要增加一個(gè)“拷貝訪達(dá)項(xiàng)目”操作，選擇“不添加”），選擇“添加文本”，在輸入框中輸入【@3x】
拖入“復(fù)制訪達(dá)項(xiàng)目”
選擇左側(cè)“資源庫(kù)”中的照片，將“縮放圖像”拖入右側(cè)窗口（如果警告提示是否要增加一個(gè)“拷貝訪達(dá)項(xiàng)目”操作，選擇“不添加”），并選擇“按百分比”，輸入【66】
再拖入“文件和文件夾”下的“給訪達(dá)項(xiàng)目重新命名”，并選擇【替換文本】，查找【“】，以【僅基本名稱】；****再拖入“文件和文件夾”下的“給訪達(dá)項(xiàng)目重新命名”，并選擇【替換文本】，查找【@3x”的副本】，以【僅基本名稱】，替換成【@2x】
拖入“復(fù)制訪達(dá)項(xiàng)目”，選擇左側(cè)“資源庫(kù)”中的照片，將“縮放圖像”拖入右側(cè)窗口（如果警告提示是否要增加一個(gè)“拷貝訪達(dá)項(xiàng)目”操作，選擇“不添加”），并選擇“按百分比”，輸入【50】
再拖入“文件和文件夾”下的“給訪達(dá)項(xiàng)目重新命名”，并選擇【替換文本】，查找【“】，以【僅基本名稱】，再拖入“文件和文件夾”下的“給訪達(dá)項(xiàng)目重新命名”，并選擇【替換文本】，查找【@2x”的副本】，以【僅基本名稱】
然后保存，將“快速操作”存儲(chǔ)為“制作@2x@3x圖片”
每次使用的時(shí)候，只需選中圖片，選擇訪達(dá) - 服務(wù) - 制作@2x@3x圖片，****就會(huì)自動(dòng)生成三個(gè)圖片：1.png、1@2x.png和1@3x.png
最終效果～
我個(gè)人設(shè)計(jì)時(shí)按照iOS設(shè)計(jì)尺寸 iPhone6（750px*1334px）來(lái)進(jìn)行頁(yè)面的設(shè)計(jì)。在iOS開(kāi)發(fā)中iPhone4、5、6、7是共用一套字體規(guī)范。在設(shè)計(jì)中按iPhone6設(shè)計(jì)版尺寸（750px*1334px）中適合的字體大小來(lái)定義。（開(kāi)發(fā)過(guò)程中具體的問(wèn)題需再具體分析）
在iOS中默認(rèn)字體分為三類：
第一類： STHeiti-Light.ttc和STHeiti-Medium.ttc代表的是中文字體，常用的方正黑體簡(jiǎn)體（不能商用）和微軟雅黑（不能商用），也可以是冬青黑體簡(jiǎn)體（暫不詳版權(quán)）和思源雅黑（免費(fèi)）。
第二類： _H_Helvetica.ttc和_H_HelveticaNeue.ttc代表的是英文以及數(shù)字字體，常用的字體Helvetica
第三類： LockClock.ttf代表的是鎖屏?xí)r間字體
中文字體： Mac下黑體、微軟雅黑、華文黑體、方正黑體簡(jiǎn)體、思源雅黑、冬青黑體簡(jiǎn)體等（，看個(gè)人習(xí)慣，具體設(shè)計(jì)需求也可以是不常見(jiàn)字體）
英文字體： HelveticaNeue , Arial Bold(Regular)(具體設(shè)計(jì)需求也可以是不常見(jiàn)字體），在選用不常見(jiàn)字體要在后面切圖中：相關(guān)的字體要有圖片形式導(dǎo)出.png圖片，以及如有需要要有文字的字體包，當(dāng)然還有使用版權(quán)的許可。
文件包命名規(guī)則是：項(xiàng)目名字＋切圖＋作者名字＋日期
例如：螞蟻金服基金3.5.8.5版本迭代-H5頁(yè)面設(shè)計(jì)_切圖_李笑_20170321
文件包壓縮一直采用.zip格式
文件包要包括：image，效果圖＋標(biāo)注圖，切圖簡(jiǎn)單說(shuō)明（word等文件）。
打開(kāi)如下圖：
在image中切圖文件和切圖命名中：
···不要出現(xiàn)大寫，
···不要有中文、特殊符號(hào)以及空格，
···字母必須是小寫字母，
···同類切圖大小一致（后續(xù)文章單獨(dú)整理切圖方法和常見(jiàn)問(wèn)題）
···iOS切圖文件要有二倍像素適配（750px*1334px）iphone6，iphone7和三倍像素適配（1242px*2208px）iphone6 plus，iphone7 plus。需要在名字后面分別加 @2x 和 @3x。具體命名方法是：
模塊_類別_功能_狀態(tài)_@2x／@3x.png? （狀態(tài)會(huì)有：點(diǎn)擊狀態(tài)，點(diǎn)擊壓下?tīng)顟B(tài)，禁用狀態(tài)，選中狀態(tài)等）
如：me_bg_nologin@3x.png和me_bg_nologin @2x.png
···iphone4：640X960
···iphone5：640X1136
···iphone6/7：750X1334
···iphone6/7：1242X2208
iPhone圖標(biāo)尺寸及整理如下：
后續(xù)會(huì)不斷的整理和添加修正，歡迎批評(píng)指正
如果有用請(qǐng)分享給需要的朋友們
謝謝~
在移動(dòng)端 UI 設(shè)計(jì)中，經(jīng)常會(huì)用到的單位有 4 種：px、pt、dp 和 sp，很多人分辨不清這幾種單位及其換算關(guān)系，以及 iOS 和 Android 的切圖要求，我在這里做下簡(jiǎn)單的介紹，希望大家讀完后能有所收獲（如有錯(cuò)誤，歡迎糾正）。
px 即 pixel，像素點(diǎn)，電子屏幕上組成圖像的最基本單位，在描述屏幕分辨率時(shí)也會(huì)使用該單位。1px 表示一個(gè)像素，例如 iPhone 8 的尺寸為 750px × 1334px，表示在該手機(jī)屏幕上，水平方向每行有 750 個(gè)像素點(diǎn)，垂直方向每列有 1334 個(gè)像素點(diǎn)。
pt 即 point，有兩個(gè)含義：一是印刷行業(yè)常用單位，是一個(gè)標(biāo)準(zhǔn)長(zhǎng)度單位，絕對(duì)大小，1pt = 1/72 英寸 = 0.35mm；二是 iOS 開(kāi)發(fā)用的基本單位，當(dāng)設(shè)計(jì)師以 1 倍尺寸進(jìn)行設(shè)計(jì) (375pt × 667pt) 并給出標(biāo)注稿時(shí)，開(kāi)發(fā)人員無(wú)需除以 2 便可直接使用。
dp 是安卓開(kāi)發(fā)用的基準(zhǔn)單位，在 dpi (屏幕像素密度，即每英寸包含的像素點(diǎn)) 為 160 的屏幕為上，1dp = 1px。為了簡(jiǎn)單起見(jiàn)，Android 把屏幕密度分為了 5 種：mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi，下文會(huì)詳細(xì)介紹其換算關(guān)系。
在安卓系統(tǒng)里，sp 與 dp 類似，不同的是 sp 可以根據(jù)用戶的字體大小首選項(xiàng)進(jìn)行縮放，而 dp 則不會(huì)。 盡量使用 dp 作為空間大小單位，sp 作為文字相關(guān)大小單位，例如：新聞?lì)惡投绦蓬惖却笃谋?，推薦使用 sp 為單位。
在 iOS 開(kāi)發(fā)中，不同機(jī)型的 iPhone 設(shè)備需要用到不同倍率的切圖，下表格為各 iPhone 機(jī)型顯示屏參數(shù)對(duì)比：
這里再簡(jiǎn)單了解下兩個(gè)概念，ppi 和 dpi。
ppi (iOS)：即 pixel per inch，屏幕像素密度，表示每英寸所包含的像素點(diǎn)，該值越高，屏幕越細(xì)膩。
dpi (iOS) ：開(kāi)發(fā)像素密度，表示每英寸所包含的開(kāi)發(fā)像素點(diǎn)。
在 iOS 開(kāi)發(fā)中，規(guī)定以 ppi = 163，dpi = 163 作為開(kāi)發(fā)基準(zhǔn)，
當(dāng) ppi = 163，dpi = 163 時(shí)，則 1pt = 1px；
當(dāng) ppi = 326，dpi = 163 時(shí)，則 1pt = 2px；
當(dāng) ppi = 401，dpi = 154 時(shí)，則 1pt = 2.6px ≈ 3px。
(為什么 iPhone 8+/7+/6+ 的開(kāi)發(fā)基準(zhǔn)是154？可能要問(wèn)問(wèn)蘋果了...)
依此類推，得出換算公式一：
若有小數(shù)，四舍五入即可。
在 iOS 開(kāi)發(fā)中，目前只需要 @2x 和 @3x 兩種切圖，所以導(dǎo)出 2 倍和 3 倍的 png 圖片即可。導(dǎo)出前注意檢查切圖是否存在半像素、毛邊等情況，保證對(duì)齊像素，這樣才能有效避免上線后頁(yè)面上的 icon 出現(xiàn)虛邊的問(wèn)題，提高細(xì)節(jié)質(zhì)量。
另外補(bǔ)充一點(diǎn)：從整體開(kāi)發(fā)尺寸看，iPhone 8 是 375 × 667 pt (@2x)，而 iPhone X 是 375 × 812 pt (@3x)，同樣的寬度，一個(gè)用 @2x 圖，一個(gè)用 @3x 圖，iPhone X 表現(xiàn)出了更高的清晰度，如圖 2-1 所示。
在 Android 開(kāi)發(fā)中，因?yàn)闄C(jī)型參差不齊，需要用屏幕密度來(lái)區(qū)分設(shè)計(jì)。
注意，這里的 dpi (Android) 和上文的 dpi (iOS) 是不同的概念，dpi (iOS) 是開(kāi)發(fā)像素密度，而 dpi (Android) 即 dot per inch，表示屏幕像素密度 ，類似 iOS 開(kāi)發(fā)里的 ppi。
Android 中，規(guī)定以 dpi = 160 為開(kāi)發(fā)基準(zhǔn)，
當(dāng) dpi = 160，基準(zhǔn)dpi = 160，1dp = 1px；
當(dāng) dpi = 240，基準(zhǔn)dpi = 160，1dp = 1.5px；
當(dāng) dpi = 320，基準(zhǔn)dpi = 160，1dp = 2px。
依此類推，得出換算公式二：
在設(shè)計(jì)圖標(biāo)時(shí)，對(duì)于 5 種主流的屏幕像素密度 (mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi) 應(yīng)按照 2:3:4:6:8 的比例進(jìn)行縮放，如圖 3-1 所示。
例如，一個(gè)啟動(dòng)圖標(biāo)的尺寸為 48 × 48 dp，這表示在 mdpi 的屏幕上其實(shí)際尺寸應(yīng)為 48 × 48 px；在 hdpi 的屏幕上其實(shí)際大小是 mdpi 的 1.5 倍 (72 × 72 px)；在 xhdpi 的屏幕上其實(shí)際大小是 mdpi 的 2 倍 (96 × 96 px)，依此類推。
在某些況行下，還需要提供一種特殊的切圖： 點(diǎn)九圖 (上圖所示)。點(diǎn)九圖是 Android 開(kāi)發(fā)中用到的一種特殊格式的圖片，文件名以 “.9.png” 結(jié)尾。
這種圖片能告訴程序，圖像哪一部分可以被拉升，哪一部分不能被拉升需要保持原有比列。運(yùn)用點(diǎn)九圖可以保證圖片在不模糊變形的前提下做到自適應(yīng)，比如對(duì)話框背景圖片就會(huì)用到點(diǎn)九圖。
--
以上是全部?jī)?nèi)容，感謝你的閱讀！
End
重慶分公司
重慶分公司
