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

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

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

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

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

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

二、命名规则

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

U妹举个例子：nav_button_search_default.png

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

启动界面

启动图片 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_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

您可以选择一种方式赞助本站支付宝转账赞助

分享到各大网站