【设计师必备】最全面实用的UI界面切图命名规范,你知道吗??

 

关于UI界面切图命名你真的会吗???...



关于UI界面的切图命名的规范,U妹觉得关键是在于团队能够有一个统一的规则,所以这里只介绍一种通用的命名规则,当然大家也可以根据自己的实际情况去制定,这里只提供一种方法与思路,仅供参考。

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

一、  切图命名英文缩写的3个原则

1. 较短的单词可通过去掉“元音”形成缩写

2. 较长的单词可取单词的头部几个字母形成缩写

3. 还有一些约定俗成的英文单词缩写

二、命名规则

模块_类别_功能_状态.png

U妹举个栗子:nav_button_search_default.png

释义为:导航_按钮_搜索_默认.png

启动界面启动图片default.png启动logodefault_logo.png如:default.pngdefoult@2x.pngdefauLt-568@2x.png

登录界面(login)登录背景login_bg.png 登录logologin_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按下  pressedbtn_xxx_pressed.png选中  selectedbtn_xxx_selected.png做为复数选择出现机会不高btn_功能属性或色彩均可.png

如:btn_blue.pngtn_blue.9.png  蓝色按钮

其他命名图标icon_xxx.png图片pic_xxx.png或是img_xxx.png照片pho_xxx.png左侧导航命名leftbar_功能描述.png如:leftbar_info.pngleftbar_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 三、  总结

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

1. 《设计师进阶必读的设计书目都在这里了》

2.《讲真,史上最全设计师学习指南来啦(快收藏)》

3.《有一个做UI设计的女朋友是一种什么样的体验?》

4.《【超实用】U妹个人私藏设计资源网站分享 | 快收藏》

5.《【UI设计师必备】25个精美的APP UI KIT模板(附PSD下载)》

【提示】:要多多给U妹点zan哟,么么哒


-END-
UI妹儿  |  越努力,越幸运
精选  |  干货  |  经验  |  分享  |  资源

【UI妹儿交流群招募中】
QQ群:325192599


    关注 UI范儿


微信扫一扫关注公众号

0 个评论

要回复文章请先登录注册