web前端介面切圖命名規範方法

命名規範這個是 老生常談 的一個問題，不管是切圖、還是CSS、JS以及建立資料夾都是如此，此次整理了一篇關於切圖命名的文章，除了學習切圖命名之外，更多的是要理解命名的思路方向思維，並非全抄即可

 

我看到過很多小夥伴的切圖命名，大多數人和新手是用拼音命名的

還有部分小夥伴更是要逆天了，是這樣命名的

以漢子命名的，（我和我的小夥伴都驚呆了），U妹很擔心你會被開發同事打拼音的命名方式也是可以用的，但在開發同事眼裡，只會顯得你很Low，很不專業。

 

 

而真正規範的命名是這樣子的

規範的命名方式可以提高開發人員的開發效率和整個開發團隊的友好合作。建議要竟可能用最少的字元而又能完整的表達識別符號的含義。

 

一、  切圖命名英文縮寫的3個原則

1. 較短的單詞可通過去掉“母音”形成縮寫

2. 較長的單詞可取單詞的頭部幾個字母形成縮寫

3. 還有一些約定俗成的英文單詞縮寫

4. 所有拼寫全為小寫英文字母

 

二、命名規則

模組_類別_功能_狀態.png

U妹舉個例子：nav_button_search_default.png

釋義為：導航_按鈕_搜尋_預設.png

啟動介面
啟動圖片	default.png
啟動logo	default_logo.png
如：default.png   defoult@2x.png   defauLt-512@2x.png

 

登入介面（login）
登入背景	login_bg.png
登入logo	login_logo.png
輸入框	login_input.png
輸入框選中狀態	login_input_pre.png
登入按鈕	login_btn.png
登入按鈕選中狀態	login_btn_pre.png

 

導航欄按鈕 (nav)
命名	nav_功能描述.png
如：nav_menu.png   av_menu_pre.png（同按鈕選中前後兩種狀態命名 ）

 

按鈕命名（btn可重複使用按鈕)
一般  normal	btn_xxx_normal.png
點選  highlighted	btn_xxx_highlighted.png
不能點選  disabled	btn_xxx_disable.png
按下  pressed	btn_xxx_pressed.png
選中  selected	btn_xxx_selected.png
做為複數選擇出現機會不高
btn_功能屬性或色彩均可.png   如：btn_blue.png   tn_blue.9.png  藍色按鈕

 

其他命名
圖示	icon_xxx.png
圖片	pic_xxx.png或是img_xxx.png
照片	pho_xxx.png

 

左側導航
命名	leftbar_功能描述.png
如：leftbar_info.png   leftbar_info_pre.png   個人中心

 

底部選項卡按鈕（TabBar）
命名	Tab_功能描述.png
如：tab_set.Png   av_set_pre.png  設定

 

主頁命名
命名	home_功能屬性＋描述.png
如：home_menu_recommended.png  熱門推薦   ps：描述可用英文或拼間開頭字母組合等

 

列表頁命名規則
命名	list_功能屬性＋描述.png
如：list_menu_collect.png  列表頁收藏按鈕

 

UI檔案命名規範常用詞
常用狀態	正常	normal
	按下	pressed
	選中	selected
	禁用	disabled
	已訪問	visited
	懸停	hover
控制元件＆部件   控制元件：較獨立的可 操作介面元素 部件：描述屬於某 控制元件一部分	按鈕（可點）	btn
	圖示	icon不可點、非點選主體、圖案部件
	標記	sign
	列表	list
	選單	menu
	檢視	view
	皮膚	panel
	薄板	sheet 底部彈出選單
	欄	bar
	狀態列	statusBar
	導航欄	naviBar
	標籤欄	tabBar
	工具欄	toolBar
	切換開關	switch
	滑動器	slider
	單選框	radio
	核取方塊	checkBox
	背景	bg
	蒙版、遮罩	mask
	收藏	collect
	評論	comment
	廣告	ad
	時間	time
	音訊	audio
	視訊	viedio
	不喜歡	dislike
	使用者	user
	首頁	home
	排名	ranked
	搜尋	search
	標誌	logo
	進度條	progress bar
	預設圖片	def_
	分隔圖片	seg_
	選擇	sel_
	關閉	close
	返回	back
	編輯	eidt
	內容	content
	左  中  右	left  center   right
	提示資訊	msg
	個人資料	porfile
	彈出	pop
	刪除	delete
	下載	download
	登入	login
	註冊	regsiter
	標題	title
	註釋	note
	連結	link
	圖片	image（img）
	重新整理	refresh
常用補充描述	頂部	top
	中間	middle
	底部	bottom
	第一	first
	第二	second
	最後	last
	頁頭	header
	頁尾	footer

三、  總結

關於切圖命名規範就到這裡了，最後還是想和大家說，有什麼不懂的、不明白的地方，要多去和開發的同事請教和溝通，這樣才能省時省力，事半功倍，更加高效的完成工作。

 

來自於 漿糊之家 

看到 感覺不錯分享給大家