UI 切圖命名規(guī)范、標(biāo)注規(guī)范及單位描述
很多UI設(shè)計(jì)師做APP切圖都會有兩套，一套是的，一套是IOS的。IOS我這邊暫不作講解，因?yàn)槲冶救艘膊皇情_發(fā)IOS。這里整理一下我在開發(fā)中總結(jié)的一些有利于本人開發(fā)的一些資源圖片命名規(guī)則，并將其中有價(jià)值傳播給大家。 （PS：本人有時(shí)拿到UI切圖，看到名稱確實(shí)是不知道這個(gè)圖是用來干嘛和放在哪里的，還得跑過去問UI。。所以ui切圖英文命名規(guī)范，一個(gè)好的命名規(guī)則可以讓我們開發(fā)節(jié)省不少的時(shí)間。）
本文參考目錄：
前綴
位置、組件、用途
后綴
尺寸字體顏色標(biāo)注
注意事項(xiàng)
dp和px的關(guān)系
前綴
前綴是一種簡單記憶、節(jié)約成本的純文本標(biāo)記語言，使用前綴能快速知道切圖是用作那一組件類別，好的前綴也無非就以下幾種：
位置、組件、用途
一般情況下，所切的圖片用于哪個(gè)位置、哪個(gè)組件，就需要加上這些來命名（緊跟前綴），這樣一來，就很清楚切圖作用了：
后綴
后綴一般是來表示切圖的顏色、透明度、狀態(tài)等信息：
通過上述介紹，一般遇到的情況也就這么一些ui切圖英文命名規(guī)范，只需要按照前綴+位置用途+后綴就差不多了，這里列舉一些比較好的命名：
尺寸字體顏色標(biāo)注
尺寸：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 的資源交給工程師；
字體：只需要全局標(biāo)出共用字體即可，特殊字體特殊標(biāo)注。
顏色：顏色值一般使用十六進(jìn)制表示，如 #, # 其中90兩位代表透明度。透明度計(jì)算：
FF 代表不透明，7F代表半透明，00代表不透明
注意事項(xiàng)
不使用特殊符號開頭： 如 — _ @ 等
不使用阿拉伯?dāng)?shù)字開頭
不在任何位置使用特殊符號包括中文符號和中劃線
命名分隔符統(tǒng)一為下劃線
九宮格圖片文件拓展名為 .9.png
后綴狀態(tài)名最好為全拼，如
dp和px的關(guān)系
1、手機(jī)有一些初始的分辨率：
2、在中，以分辨率為基準(zhǔn)屏幕，即密度值為160時(shí)，1dp=1px：
3、切圖包的存放位置（以當(dāng)前48dp為例）：
4、常用設(shè)計(jì)尺寸分辨率：
5、多種屏幕分辨率規(guī)則：
6、描述間距或長度時(shí)使用dp：
7、描述字號大小時(shí)使用sp：
自動切圖工具推薦
摹客iDoc
在這里向UI設(shè)計(jì)師，前端推薦一款好用的國產(chǎn)自動切圖神器-摹客iDoc，一款更快更簡單的產(chǎn)品協(xié)作設(shè)計(jì)平臺，智能標(biāo)注、一鍵切圖、多樣批注、交互原型、全貌畫板、團(tuán)隊(duì)管理，從產(chǎn)品到開發(fā)，只要一個(gè)文檔。
特色點(diǎn)：
UI設(shè)計(jì)師
①完成設(shè)計(jì)一鍵上傳
②支持、PS、XD的設(shè)計(jì)原稿和設(shè)計(jì)圖
③標(biāo)注和切圖自動生成，再不用手工做
產(chǎn)品經(jīng)理
①多種批注樣式，更好的表達(dá)想法和意見
②快速制作交互原型，支持多種動畫特效
③支持多種的原型（Axure、、）和各類文檔，直接在線預(yù)覽
前端工程師
①輕松查看智能標(biāo)注。還可顯示百分比標(biāo)注，一次選擇多個(gè)圖層并智能標(biāo)注
②自動獲取切圖，可下載多個(gè)或全部切圖
③各種平臺適配自動呈現(xiàn)
④一鍵查看頁面中的重復(fù)元素
⑤樣式代碼自動導(dǎo)出
文末福利
設(shè)計(jì)師雙11福利，智能標(biāo)注和一鍵切圖工具，免費(fèi)升級前往：
憑免費(fèi)體驗(yàn)碼即可獲得，強(qiáng)烈推薦給用PS，和Adobe XD的伙伴。
原文鏈接：