我們都知道一套完整的 App 通常會有很多張切圖掂榔，不管是 iPhone 需要 1x、2x芹枷、3x 圖檔衅疙，Android 需要至少 3 種 hdpi、xhdpi鸳慈、xxhdpi。在龐大的切圖數(shù)量下如何讓負(fù)責(zé)套圖的 RD 快速找到所需圖檔喧伞，檔名的命令方式就需要雙方統(tǒng)一格式方便大家作業(yè)走芋。所以，制定一套非常有效而方便的APP切圖命名規(guī)范非常有用的潘鲫。
1翁逞、切圖尺寸規(guī)則
1.1 iOS切圖尺寸規(guī)則
目前iPhone有10種型號，5種屏幕尺寸溉仑，再加上6plus的“降采樣”（Downsampling）（1080-1920）挖函，還有iPhone6和6+上的放大模式（1125-2001）和默認(rèn)模式（1242-2208），是不是感覺好恐怖浊竟？但是不用怕怨喘，我分享一套超簡單的適配方法，看完你都不信有這么簡單~
UI交付給開發(fā)的資料有
- 標(biāo)注圖（以640為寬度尺寸為基準(zhǔn)標(biāo)注）
- 2x切圖（以640為寬度尺寸為基準(zhǔn)切圖）
- 3x切圖（以1280為寬度尺寸為基準(zhǔn)切圖）
開發(fā)看到這份標(biāo)注圖振定，可以自己用上面的數(shù)字必怜，乘以1.5得出3X的數(shù)字。
- 為什么3x切圖要以1280來為寬度后频？
其實(shí)iPhone6+的尺寸1242*2208作為3x梳庆，怎么算都又難記又不能整除暖途，我們直接640*2得到1280跟1242相差也沒幾十個像素，最重要的是不虛邊啊膏执，放在真機(jī)上看（處女座除外）看不出差別的驻售。 - 為什么只設(shè)寬度？
為了保持長寬比例更米。iPhone的這幾個尺寸不是正好的芋浮，寬度放大后高度總差那么幾個像素，這不要緊壳快，千萬別去改高度纸巷，手機(jī)屏幕是可以上下滑動的嘛。不可以滑動必須保證一屏顯示的除外眶痰，手動去調(diào)整好了瘤旨。 - 為什么開發(fā)不是乘以2而是乘以1.5來算尺寸和字號？因?yàn)榇笃潦謾C(jī)就是要顯示更多內(nèi)容而存在的竖伯。純等比放大界面看起來傻大傻大的存哲，實(shí)驗(yàn)證明1.5倍是正好的。
iOS圖標(biāo)尺寸：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: 7201280
iOS:(2020年6月30日后強(qiáng)制全部使用LaunchScreen.storyboard顯示啟動閃屏*)
750x1334 iPhone 8
1.2 Android切圖尺寸規(guī)則
- px（像素）是我們UI設(shè)計(jì)師在PS里使用的（不解釋），同時也是手機(jī)屏幕上所顯示的（也不解釋）
- dp 是開發(fā)寫layout的時候使用的尺寸單位打厘，sp是開發(fā)寫layout時關(guān)于字體的字號單位修肠，且dp與sp總為1：1關(guān)系。
1.2.1 android手機(jī)有一些初始的分辨率：
| 密度 | ldpi | mdpi | hdpi | xhdpi | xxhdpi | xxxhdpi |
|---|---|---|---|---|---|---|
| 密度值 | 120 | 160 | 240 | 320 | 480 | 640 |
| 分辨率 | 240x320 | 320x480 | 480x800 | 720x1280 | 1080x1920 | 2160x3840 |
1.2.2 在android中户盯，以320x480分辨率為基準(zhǔn)屏幕嵌施，即密度值為160時，1dp=1px：
1.2.3 切圖包的存放位置（以當(dāng)前48dp為例）：
| 對應(yīng)dp | 48dp | 48dp | 48dp | 48dp | 48dp | 48dp |
|---|---|---|---|---|---|---|
| 對應(yīng)px | 36px | 48px | 72p | 96px | 144px | 192px |
| 文件夾 | ldpi | mdpi | hdpi | xhdpi | xxhdpi | xxxhdpi |
1.2.4 常用設(shè)計(jì)尺寸分辨率：
1.2.5 多種屏幕分辨率規(guī)則：
1.2.6 描述間距或長度時使用dp：
1.2.7 描述字號大小時使用sp：
2莽鸭、 APP切圖命名規(guī)則
基本上 App 的切圖可分為下面幾大類：
背景吗伤、按鈕、圖示硫眨、圖片足淆、照片、TabBar icon 等礁阁。
為了讓切圖便于管理巧号，通常會依圖片性質(zhì)命名。例如 bg-xxx.png氮兵、btn-xxx.png裂逐、img-xxx.png、tab-xxx.png泣栈。當(dāng)圖檔要做給 Retina 屏幕使用時卜高，只要在文檔名前加上「@2x」就可以了弥姻。如bg-xxx@2x.png、btn-xxx@2x.png 掺涛、icon-xxx@2x.png庭敦。在命名時 bg-xxx.png 中間的 – 可以改為 _ 。
iOS 上寫 Desktop icon 檔案命名使用 -薪缆，如果切圖只給 iOS 使用秧廉，可以和 iOS 采用相同的命名方式。請注意 Android 不支援 - 的命名方式拣帽，如果圖檔要運(yùn)用在 Android 上疼电，請把所有的 - 改成 _ 底線。最好不要把數(shù)字或符號當(dāng)成檔名的開頭减拭，如 3-icon.png 蔽豺、+abc.png之類。
2.1 前綴
前綴是一種簡單記憶拧粪、節(jié)約成本的純文本標(biāo)記語言修陡，使用前綴能快速知道切圖是用作那一組件類別，好的前綴也無非就以下幾種：
| 前綴 | 原始 | 說明 | 示例 |
|---|---|---|---|
| icon | icon | 主要用于布局和子布局的圖標(biāo) | icon_bank |
| bg | background | 要用于布局和子布局的背景 | bg_welcome |
| btn | button | 主要用于按鈕的表示可霎，有時會在ic和btn之間猶豫魄鸦，簡單的區(qū)分即是功能視圖，如果一個view執(zhí)行的時back或者confirm或者cancel的功能癣朗，則命名上則應(yīng)該使用btn | btn_ok |
| img | image | 主要用于靜態(tài)圖片 | img_avatar |
| cl | color | 主要用于顏色 | cl_white |
2.2 位置拾因、組件、用途
| 位置標(biāo)識 | 說明 | 示例 |
|---|---|---|
| common | 公共標(biāo)識 | img_common_bg(共同背景) |
| tab | 選項(xiàng)卡 | icon_tab_setting (設(shè)置) |
| nav | 導(dǎo)航條 | nav_return (返回) |
| notify | 狀態(tài)欄斯棒、通知欄 | btn_notify_download (通知欄下載按鈕) |
| dialog | 對話框 | bg_dialog_blur (模糊化的對話框背景) |
| menu | 菜單 | bg_menu_save (保存菜單背景) |
| anim | 用于動畫 | img_anim_loading01 (loading幀動畫第一幀) |
| pop | 用于彈出框 | img_pop_bg (彈出框背景盾致，區(qū)別于dialog) |
| mask | 用于遮罩層 | img_dialog_mask (對話框上層遮罩) |
| circle | 圓圈 | img_circle_avatar (圓形頭像) |
2.3 后綴
后綴一般是來表示切圖的顏色、透明度荣暮、狀態(tài)等信息：
| 后綴 | 說明 | 示例 |
|---|---|---|
| normal | 默認(rèn)狀態(tài) | btn_cancel_normal (取消按鈕默認(rèn)狀態(tài)時) |
| selected | 選中狀態(tài) | btn_cancel_selected (取消按鈕選中時) |
| enabled | 可以點(diǎn)擊 | btn_cancel_enabled (取消按鈕可用時) |
| tra | 透明度 | bg_banner_green_tra30 (banner中綠色背景指定30%透明) |
| white | 白色 | bg_white (白色) |
| level | 層次、水平 | img_status_level60 (狀態(tài)為60的時候) |
| bg | 用于后綴背景 | 當(dāng)不在前綴命名時罩驻，添加到后綴命名 |
通過上述介紹穗酥，一般遇到的情況也就這么一些，只需要按照前綴+位置用途+后綴就差不多了惠遏，這里列舉一些比較好的命名：
| 命名 | 說明 |
|---|---|
| btn_download_start_green_normal | 綠色開始下載按鈕默認(rèn)狀態(tài) |
| img_setting_bg | 設(shè)置頁面全背景 |
| ic_menu_save_gray_normal | 菜單中灰色保存按鈕默認(rèn)狀態(tài) |
| img_notify_wlan_level20 | 狀態(tài)欄中wifi信號強(qiáng)度為20的時候 |
| ic_share_qzone_pressed | QQ空間分享圖標(biāo)選中時 |
2.4 注意事項(xiàng)
- 不使用特殊符號開頭： 如 — _ @ 等
- 不使用阿拉伯?dāng)?shù)字開頭
- 不在任何位置使用特殊符號包括中文符號和中劃線
- 命名分隔符統(tǒng)一為下劃線
- 九宮格圖片文件拓展名為 .9.png
- 后綴狀態(tài)名最好為全拼砾跃，如normal
3、尺寸字體顏色標(biāo)注
3.1 尺寸：
1节吮、畫布大小定位 720 x 1280 或 1080 x 1920抽高，72 dpi等；
2透绩、只使用偶數(shù)單位的尺寸翘骂，比如 96 px 的列表項(xiàng)高度壁熄，16 px 的邊距，64 px 的圖標(biāo)邊長碳竟；
3草丧、只使用偶數(shù)單位 24 pt，28 pt莹桅，36 pt等字體大胁础；
4诈泼、設(shè)計(jì)完成以后懂拾，所有尺寸的 px 值除以 2（需要約定的倍數(shù)） 作為 dp 數(shù)值交給工程師；
5铐达、所有字體的 pt 值除以 2 （需要約定的倍數(shù)）作為 sp 數(shù)值交給工程師岖赋；
6、所有切圖變成三份娶桦，分別是原始大小贾节、縮小 1.5 倍，縮小 2 倍衷畦，分別作為 xhdpi栗涂，hdpi，mdpi 的資源交給工程師祈争；
3.2 字體：
只需要全局標(biāo)出共用字體即可斤程，特殊字體特殊標(biāo)注。
3.3 顏色：
顏色值一般使用十六進(jìn)制表示菩混，如 #FFFFFF, #90FFFFFF 其中90兩位代表透明度忿墅。透明度計(jì)算：
225?透明度百分比轉(zhuǎn)16進(jìn)制
FF 代表不透明，7F代表半透明沮峡，00代表不透明
屏幕快照尺寸規(guī)格
