安卓的切圖規範

Android UI 切圖命名規範、標註規範及單位描述

不少UI設計師作APP切圖都會有兩套，一套是Android的，一套是IOS的。IOS我這邊暫不做講解，由於我本人也不是開發IOS。這裏整理一下我在Android開發中總結的一些有利於本人開發的一些資源圖片命名規則，並將其中有價值傳播給你們。 （PS：本人有時拿到UI切圖，看到名稱確實是不知道這個圖是用來幹嗎和放在哪裏的，還得跑過去問UI。。因此，一個好的命名規則可讓咱們開發節省很多的時間。）

本文參考目錄：

 

• 前綴
• 位置、組件、用途
• 後綴
• 尺寸字體顏色標註
• 注意事項
• dp和px的關係

 

前綴

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

前綴	原始	說明	示例
ic	icon	主要用於佈局和子佈局的圖標	ic_launcher
bg	background	要用於佈局和子佈局的背景	bg_welcome
btn	button	主要用於按鈕的表示，有時會在ic和btn之間猶豫，簡單的區分便是功能視圖，若是一個view執行的時back或者confirm或者cancel的功能，則命名上則應該使用btn	btn_ok
di	divider	主要用於分隔線，包括列表、普通佈局中的線	di_item
img	image	主要用於靜態圖片	img_avatar
cl	color	主要用於顏色	cl_white

位置、組件、用途

通常狀況下，所切的圖片用於哪一個位置、哪一個組件，就須要加上這些來命名（緊跟前綴），這樣一來，就很清楚切圖做用了：

位置標識	說明	示例
common	公共標識	img_common_bg(共同背景)
tab	選項卡	ic_tab_setting (設置)
notify	狀態欄、通知欄	btn_notify_download (通知欄下載按鈕)
dialog	對話框	bg_dialog_blur (模糊化的對話框背景)
menu	菜單	bg_menu_save (保存菜單背景)
anim	用於動畫	img_anim_loading01 (loading幀動畫第一幀)
pop	用於彈出框	img_pop_bg (彈出框背景，區別於dialog)
mask	用於遮罩層	img_dialog_mask (對話框上層遮罩)
circle	圓圈	img_circle_avatar (圓形頭像)

後綴

後綴通常是來表示切圖的顏色、透明度、狀態等信息：

後綴	說明	示例
normal	默認狀態	btn_cancel_normal (取消按鈕默認狀態時)
pressed	按下狀態	btn_cancel_pressed (取消按鈕按下狀態時)
focused	得到焦點	btn_cancel_focused (取消按鈕得到焦點、高亮時)
selected	選中狀態	btn_cancel_selected (取消按鈕選中時)
enabled	不能點擊	btn_cancel_enabled (取消按鈕不可用時)
white	白色	bg_white (白色)
tra	透明度	bg_banner_green_tra30 (banner中綠色背景指定30%透明)
level	層次、水平	img_status_level60 (狀態爲60的時候)
bg	用於後綴背景	當不在前綴命名時，添加到後綴命名

經過上述介紹，通常遇到的狀況也就這麼一些，只須要按照前綴+位置用途+後綴就差很少了，這裏列舉一些比較好的命名：

命名	說明
btn_download_start_green_normal	綠色開始下載按鈕默認狀態
img_setting_bg	設置頁面全背景
ic_menu_save_gray_normal	菜單中灰色保存按鈕默認狀態
img_notify_wlan_level20	狀態欄中wifi信號強度爲20的時候
ic_share_qzone_pressed	QQ空間分享圖標選中時

尺寸字體顏色標註

尺寸：一、畫布大小定位 720 x 1280 或 1080 x 1920，72 dpi等； 

二、只使用偶數單位的尺寸，好比 96 px 的列表項高度，16 px 的邊距，64 px 的圖標邊長； 

三、只使用偶數單位 24 pt，28 pt，36 pt等字體大小； 

四、設計完成之後，全部尺寸的 px 值除以 2（須要約定的倍數） 做爲 dp 數值交給工程師； 

五、全部字體的 pt 值除以 2 （須要約定的倍數）做爲 sp 數值交給工程師； 

六、全部切圖變成三份，分別是原始大小、縮小 1.5 倍，縮小 2 倍，分別做爲 xhdpi，hdpi，mdpi 的資源交給工程師；

字體：只須要全局標出共用字體便可，特殊字體特殊標註。

顏色：顏色值通常使用十六進制表示，如 #FFFFFF, #90FFFFFF 其中90兩位表明透明度。

透明度計算： 

FF 表明不透明，7F表明半透明，00表明不透明

注意事項

不使用特殊符號開頭： 如 — _ @ 等

• 不使用阿拉伯數字開頭
• 不在任何位置使用特殊符號包括中文符號和中劃線
• 命名分隔符統一爲下劃線
• 九宮格圖片文件拓展名爲 .9.png
• 後綴狀態名最好爲全拼，如normal

dp和px的關係

一、android手機有一些初始的分辨率：

密度	ldpi	mdpi	hdpi	xhdpi	xxhdpi	xxxhdpi
密度值	120	160	240	320	480	640
分辨率	240x320	320x480	480x800	720x1280	1080x1920	2160x3840

二、在android中，以320x480分辨率爲基準屏幕，即密度值爲160時，1dp=1px： 

三、切圖包的存放位置（以當前48dp爲例）：

對應dp	48dp	48dp	48dp	48dp	48dp	48dp
對應px	36px	48px	72px	96px	144px	192px
文件夾	ldpi	mdpi	hdpi	xhdpi	xxhdpi	xxxhdpi

四、經常使用設計尺寸分辨率： 

五、多種屏幕分辨率規則： 

六、描述間距或長度時使用dp： 

七、描述字號大小時使用sp： 

自動切圖工具推薦

摹客iDoc

在這裏向UI設計師，前端推薦一款好用的國產自動切圖神器-摹客iDoc，一款更快更簡單的產品協做設計平臺，智能標註、一鍵切圖、多樣批註、交互原型、全貌畫板、團隊管理，從產品到開發，只要一個文檔。

特點點：

UI設計師

①完成設計一鍵上傳

②支持Sketch、PS、XD的設計原稿和設計圖

③標註和切圖自動生成，再不用手工作

產品經理

①多種批註樣式，更好的表達想法和意見

②快速製做交互原型，支持多種動畫特效

③支持多種的原型（Axure、Justinmind、Mockplus）和各種文檔，直接在線預覽

前端工程師

①輕鬆查看智能標註。還可顯示百分比標註，一次選擇多個圖層並智能標註

②自動獲取切圖，可下載多個或所有切圖

③各類平臺適配自動呈現

④一鍵查看頁面中的重複元素

⑤樣式代碼自動導出

文末福利

設計師雙11福利，智能標註和一鍵切圖工具，免費升級前往：

https://idoc.mockplus.cn/get-idoc

憑免費體驗碼 thomas 便可得到，強烈推薦給用PS，Sketch和Adobe XD的夥伴。

原文連接：https://blog.csdn.net/myLoverIsYou_web/article/details/80486357