To B UI界面切图命名规范

B端产品服务于企业、产品、研发，目的是要帮助B端企业解决一些问题的。我们在工作中对于图标的命名规范有良好习惯，是非常重要的！规范的命名方式可以提高设计与开发人员的的开发效率和整个开发团队的友好合作。这样子既方便设计又方便开发人员，凭借多年工作经验编写一份命名规范给大家，供大家使用！！！设计师、开发工程师，包括H5前端开发人员都可以记住的文件命名规范。一、  切图命名英文缩写的3个原则 较短的单词可以通过去掉“元音”形成缩写较长的单词可以以单词的头部几个字母形成缩写还有一些约定成俗的英文单词缩写二、 命名规则通用切图命名：组件_类别_功能_状态@2x.png举例：tabbar_icon_home_default@2x.png（对应中文：标签栏_图标_主页_默认@2x.png）模块特有切图命名：模块_类别_功能_状态@2x.png举例：bill_icon_search_pressed@2x.png（对应的中文为：账单_图标_搜索_ 默认@2x.png）三、 名词解释【控件/组件】：比较独立的可以操作界面元素。如 状态栏、搜索栏、弹出时窗口等。【模块】：一般指页面中的部分区块，也有指背景图。如背景、按钮、icon都是模块。【功能】：一般指的是页面或者模块中，需要操作或点击的某个点，如上图，发现页中的搜索icon。【状态】：一般指当前切图的状态区分，像按钮的话，有默认状态、点击时状态、按下状态、不可点击状态等，网页上按钮还有悬停状态。注意：所有命名只能为小写英文字母，不要为了好看或者像平时打英语一样，首字母是大写之类的，也不可以为中文，不然对于开发来说，是没有意义的，因为他们还是得自己再改一遍。注意：ios切图需要在命名后加上@2x、@3x后缀名，安卓的切图不需要加，不过有些安卓开发需要切图后缀加上尺寸。四、 UI文件命名规范常用词组件（系统控件库）

状态栏	status bar	搜索栏	search bar
导航栏	nav/navigation bar	表格视图	table view
标签栏	tab bar	分段控制	Segmented control
工具栏	tool bar	活动视图	activity view
左侧导航	leftnav	扫描	scanning
提醒视图	alert view	弹出视图	popovers
编辑菜单	edit menu	开关	switch
选择器	pickers	弹窗	popup
滑杆	sliders

资源类型

图片	img /image	滚动条	scroll
图标	lcon	标签	tab
静态文本框	label	勾选框	checkbox
编辑框	edit	下拉框	combo
列表	list	单选框	radio
进度条	progress	线条	line
树	tree	蒙版	mask
动画	animation	标记	sign
按钮	btn / button	动画	animation
背景	bg /backgroud	播放	play

功能命名

确定	ok	添加	add
默认	default	查看	view
取消	cancel	删除	del / delete
关闭	close	下载	download
最小化	min	等待	waiting
最大化	max	加载	loading
菜单	menu	安装	install
卸载	uninstall	选择	select
搜索	search	更多	more
暂停	pause	刷新	refresh
继续	continue	发送	send
导入	import	前进	forward
导出	export	重新开始	restart
后退	back	更新	update

常见状态

普通/正常	normal	不能点击	dis
选中	selected	已访问	visited
禁用	disabled	获取焦点	focused
完成	complete	空白	blank
按下	pre	弱化	weaken
点击	highlight	默认	default
悬停	hover	错误	error
滑动	slide	弱化	weaken
按下	pre

界面命名

整个主程序	app	搜索结果	search results
首页	home	应用详情	app detail
软件	software	日历	calendar
游戏	game	相机	camera
管理	management	照片	photo
发现	find	视频	video
个人中心	personal center	设置	settings
小技巧	tips	热点	hot
排名	ranked	个人资料	profile
活动	activity	信息	msg / messages
探索	explore	音乐	music
联系人	contacts	新闻	news
控制中心	control center	注释	notes
健康	health	天气	weather
邮件	mail	手表	watch
地图	maps	锁屏	lock screen
服务	service

位置排序

顶部	top	底部	bottom
中间	middle	第一	first
左	left	中	center
第二	second	页眉	header
最后	last	页脚	footer
右	right

注：所有命名全部为小写英文字母我们的目标是让开发直接拿我们的切图进行使用，不能够随意修改名称，但是我们要知道，开发小哥哥的代码里只有小写的英文字母，如果你给出的命名全是中文的，那么他们是一定会更改的。所以命名全部用小写的英文字母是最基本的规则。五、常用界面命名启动界面启动图片：default.png启动：logo default.png如：default.png\defoult@2x.png\default-568@2x.png登录界面登录背景：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\nav_menu_pre.png（同按钮选中前后两种状态命名 ）按钮命名（btn可重复使用按钮)一般：normal   btn_xxx_nor.png点击：highlight btn_xxx_hig.png不能点击：disabled  btn_xxx_disa.png按下：pressed btn_xxx_pre.png选中：selected btn_xxx_sel.png  复数选择出现机会不高btn_功能属性或色彩均可.png如：btn_blue.png\btn_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\nav_set_pre.png  设置主页命名命名 home_功能属性＋描述.png如：home_menu_recommended.png  热门推荐ps：描述可用英文或拼音开头字母组合等列表页命名规则命名 List_功能属性＋描述.png如：list_menu_collect.png  列表页收藏按钮总结以上是总结了切图的命名规范，之后再详谈切图规范。其实管理文件也是门学问，它能让你省下没必要耗费的时间与精力。沟通也是能够帮助你更好地与团队，不同部门更高效地推进项目的开展。每个公司都有自己的命名和输出模式的，以上是和大家交流下自己工作中的方法和心得，希望对于大家有所帮助。如果觉得以上有什么补充的，欢迎大家留言告知，不胜感激。