登录界面的滑动_一份最详尽全面的UI界面切图命名规范

这里只介绍一种通用的命名规则，当然大家也可以根据自己的实际情况去制定，这里只提供一种方法与思路，仅供参考。规范的命名方式可以提高开发人员的开发效率和整个开发团队的友好合作。

一、为什么要制定规范的命名规则

1. 自身层面

对我们自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷，而且规范的命名也显得我们自身比较专业。

2. 团队层面

如果命名不统一，大家就很难达成共识，任务交接时需要很大的学习成本，所以规范的命名对于团队协同也有极大的推动作用。

3. 开发层面

这一点是最重要的，可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率，因为只要我们的命名足够规范，并且和开发达成共识，他们完全可以直接使用的我们切片而不更改切片的名称，后期我们更换切图，只要切片名称不变，开发看都不用看直接替换就可以了。

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

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

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

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

三、命名规则

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

严哥举个栗子：nav_button_search_default.png

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

四、所有命名全部为小写英文字母

这一点的理由很简单，我们的目标是让开发直接拿我们的切图进行使用，不能够随意修改名称，但是我们要知道，开发哥哥的代码里只有小写的英文字母，如果你给出的命名全是中文的，那么他们是一定会更改的。所以命名全部用小写的英文字母是最基本的规则。

启动界面:

启动图片   default.png

启动logo   default_logo.png

如：default.png\defoult@2x.png\defauLt-568@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\nav_menu_pre.png(同按钮选中前后两种状态命名 )

按钮命名(btn可重复使用按钮)

一般   normal   btn_xxx_normal.png    

点击  highlight btn_xxx_highlight.png

不能点击  disabled  btn_xxx_disable.png

按下  pressed btn_xxx_pressed.png

选中  selected btn_xxx_selected.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  列表页收藏按钮 

UI文件命名规范常用词

常用状态 正常 normat 

按下 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

不喜欢 dilike

用户 user

首页 hone

排名 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 

有些人会觉得写这么多英文太麻烦，但其实为了自己专业能力的提高，这种规范的命名方式是必须要经历的过程，当你习惯了这样的命名方式后，你的成就感会油然而生。

五、总结

今天要分享的内容就这么多，最后还是想和大家说，有什么不懂得地方，真的要多去咨询开发的同事，去思考问题的本质原因是什么，每一个小问题都需要我们去透彻的理解，反之积攒多了，最后吃亏的还是你自己。

任何别人给出的规范，都不要直接拿来就用，要去思考为什么用这样的规范，解决什么样的问题？你有没有更好的解决方案？试问一下，苹果和安卓开发的切图文件管理机制是怎样的？有什么区别？如果这么基础的问题你都不知道，而是拿着别人的规范直接套用，那结果就是被别人牵着走。

所以去了解所有表层背后的思考与逻辑，也许下一个规范就是你制定的！