web前端界面切图命名规范方法

时间:2022-01-12 来源:未知网络 作者:996建站网

web前端界面切图命名规范方法插图

Marry men 2018-12-10 11:06:07

web前端界面切图命名规范方法插图

8701

web前端界面切图命名规范方法插图

收藏 21
文章标签: 图标命名

命名规范这个是 老生常谈 的一个问题,不管是切图、还是CSS、JS以及建立文件夹都是如此,此次整理了一篇关于切图命名的文章,除了学习切图命名之外,更多的是要理解命名的思路方向思维,并非全抄即可

我看到过很多小伙伴的切图命名,大多数人和新手是用拼音命名的

web前端界面切图命名规范方法插图1

还有部分小伙伴更是要逆天了,是这样命名的

web前端界面切图命名规范方法插图1

以汉子命名的,(我和我的小伙伴都惊呆了),U妹很担心你会被开发同事打拼音的命名方式也是可以用的,但在开发同事眼里,只会显得你很Low,很不专业。

而真正规范的命名是这样子的

web前端界面切图命名规范方法插图1

规范的命名方式可以提高开发人员的开发效率和整个开发团队的友好合作。建议要竟可能用最少的字符而又能完整的表达标识符的含义。

一、 切图命名英文缩写的3个原则
1. 较短的单词可通过去掉“元音”形成缩写
2. 较长的单词可取单词的头部几个字母形成缩写
3. 还有一些约定俗成的英文单词缩写
4. 所有拼写全为小写英文字母

二、命名规则
模块_类别_功能_状态.png
U妹举个栗子:nav_button_search_default.png
释义为:导航_按钮_搜索_默认.png

启动界面
启动图片 default.png
启动logo default_logo.png
如:default.png [email protected] [email protected]
登录界面(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

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

来自于 浆糊之家
看到 感觉不错分享给大家

web前端界面切图命名规范方法插图2

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序