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

三、  总结

关于切图命名规范就到这里了，最后还是想和大家说，有什么不懂的、不明白的地方，要多去和开发的同事请教和沟通，这样才能省时省力，事半功倍，更加高效的完成工作。

 

来自于 浆糊之家 

看到 感觉不错分享给大家