咳咳... 升級(jí)打怪啦...
前言：規(guī)范的命名方式可以提高客戶端程序員的開發(fā)效率和團(tuán)隊(duì)協(xié)作厘贼。
標(biāo)識(shí)符號(hào)命名原則：盡可能用最少的字符而又能完整的表達(dá)標(biāo)識(shí)符的含義鸽扁。
此文主要從3方面來叨叨：
一娃胆、切圖的基本認(rèn)識(shí)
二、切圖的文件整理
三、切圖的命名規(guī)則
一捞镰、基本認(rèn)識(shí)
1，切圖是什么浩峡？
在app中切圖可岂，與在web中切圖大致是一樣的。開發(fā)同學(xué)在實(shí)現(xiàn)過程中翰灾，需要計(jì)算好每一個(gè)元素的位置缕粹，然后再調(diào)用我們切好的圖進(jìn)行填充。
2纸淮，切圖的格式要求
一般元素切圖png24平斩，啟動(dòng)或引導(dǎo)頁切圖png8
3，iOS和Android分別需要幾套切圖咽块？
iOS屏幕精度分成Retina和非Retina2種绘面，而Android的屏幕精度主要分為mdpi 360 ,? ?hdpi 480 ,? ? ?xhdpi 720? ?3種
4，iOS和Android切圖分別命名格式侈沪？
在這五套切圖種揭璃，提供一套最大的，可以辛苦開發(fā)同學(xué)通過常用比例自動(dòng)縮小到其余4套亭罪。
通常我們常用的切圖最大精度切圖瘦馍，就是android中的xhdpi=iOS的retain@2x這兩套
不論何種方法，一定要保證設(shè)計(jì)元素的4PX原則
二应役、文件整理
掌握好整理文件和上傳的方法情组，有一份清晰的切圖文檔燥筷，能高效地開展開發(fā)和視覺之間的溝通
如何整理我們的切圖，從兩方面來
1.正確精準(zhǔn)的命名（參照切圖命名 前綴+位置院崇、組件肆氓、用途+后綴）
2.歸納切圖類別
我們完成的頁面有幾十個(gè)，每個(gè)頁面又有零零散散的圖標(biāo)亚脆，把他們一個(gè)個(gè)拿出來做院，必定有很多重復(fù)標(biāo)注。在iOS中要求的icon又大多是44px的濒持，所以很多都是可以在不同頁面里通用的键耕，學(xué)會(huì)歸納也能提升效率。
· 通用文件歸納法：比如類目icon柑营，你可以把這些常用的類目圖標(biāo)屈雄，都整理在一個(gè)文件包中。只要是用到類目的官套，哪怕是不同的頁面酒奶，開發(fā)也能在一個(gè)文件包中找，
· 控件歸納法
像一些常用的控件奶赔，比如navi,toolbar,setting,tab-bar等惋嚎，也可以整理成一個(gè)通用的切圖包
3.一個(gè)頁面一個(gè)包
縱使我們歸納總結(jié)，但零零散散的切圖站刑，不可能完全分類另伍。于是剩下的一些，我們就需要按照一個(gè)頁面也個(gè)文件包的方式绞旅，來整理切圖摆尝，這樣不管是開發(fā)要拿，或是你要更新因悲，都在這個(gè)統(tǒng)一的地方交接就行了
4堕汞，切圖時(shí)注意點(diǎn)擊區(qū)域
切圖時(shí)可以把點(diǎn)擊區(qū)域一起切，并在頁面標(biāo)注上相應(yīng)的標(biāo)明
三晃琳、切圖命名
Android切圖用“_”分割,iOS切圖命名用“-”分割
切圖的命名分為三部分：前綴+（位置讯检、組件、用途）+后綴
下面區(qū)分一下什么是前綴卫旱；什么是位置视哑、組件、用途誊涯；什么是后綴挡毅？
· 前綴：用來快速知道切圖的類別
如：ic——icon? ??
? ? ? bg——background
? ? ? btn——button
? ? ? di——divider
? ? ? img——image
? ? ? cl——color
· 位置，組件暴构，用途
common:公共標(biāo)識(shí) （img_commom_bg共同背景）
tab:選項(xiàng)卡（?ic_tab_setting設(shè)置）
notify：狀態(tài)欄跪呈，通知欄?（btn_notify_download通知欄下載按鈕）
dialog對(duì)話框（bg_dialog_blur模糊化的對(duì)話框背景）
menu菜單（bg_menu_save保存菜單背景）
anim用于動(dòng)畫（img_anim_loading01? ?loading動(dòng)畫第一幀）
pop用于彈出框（img_pop_bg彈出框背景）
mask用于遮罩層（img_dialog_mask對(duì)話框上層遮罩）
circle圓圈（img_circle_avatar圓形頭像）
· 后綴：用奧表示切圖的顏色段磨，透明度，狀態(tài)等? ? 后綴狀態(tài)的命名最好為全拼
normal 默認(rèn)狀態(tài)? ??
例：btn_cancle_normal取消按鈕默認(rèn)狀態(tài)
pressed按下狀態(tài)? ??
例：btn_cancle_pressed取消按鈕按下狀態(tài)
focused獲得焦點(diǎn)? ??
例：btn_cancle_focused取消按鈕獲得焦點(diǎn)耗绿，高亮?xí)r
selected選中狀態(tài)? ?
例：btn_cancle_seleced取消按鈕選中時(shí)
enabled不能點(diǎn)擊? ??
例：btn_cancle_enabled取消按鈕不可用
white白色? ? ? ? ? ? ? ?
例：bg_white白色背景
tra 透明度? ? ? ? ? ? ? ?
例：bg_banner_green_tra30 banner背景綠色透明度30%
level層次苹支，水平? ? ??
例：img_status_level60狀態(tài)為60的時(shí)候
