纯干货——移动UI规范 切片命名总结

切片命名总结

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

或

类别_功能_状态.png

例如： 导航_按钮_搜索_默认.png

          nav_button_search_default.png

通用切片命名格式：

组件_类别_功能_状态@2x.png

举例：tabbar_icon_home_default@2x.png

（对应中文：标签栏_图标_主页_默认@2x.png）

模块特有切图命名规则：

模块_类别_功能_状态@2x.png

举例：mail_icon_search_pressed@2x.png

（对应的中文为：邮件_图标_搜索_ 默认@2x.png）

当然这两个例子都是比较基本的情况，有很多时候可能一个单词并不能清楚的描述功能，比如有两个名字相同的搜索图标，大小不一，那这种情况你就可以这样命 名：mail_icon_search_big_default@2x.png，我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称，希望大家 能够活学活用。（大家要注意，命名中不能含有空格！）

---

UI文件命名规范常用字：

常用状态

_normal正常 _pressed按下 _selected选中 _disabled(_inactive)禁用(不活跃) _visited已访问 _hover悬停

控件&部位（控件：较独立的可操作界面元素）

（部件：描述属于某控件一部分）

statusbar  状态栏

navibar 导航栏 nav

tabbar 标签栏 tab

toolbar 工具栏 tool

切换开关：switch

滑动器：slider

单选框：radio

复选框：checkbox

蒙版/遮罩：mask

列表：list

菜单：ment

过滤：filter

筛选：filtrate

视图：view

面板：panel

薄板：sheet

栏：bar

搜索：search

按钮：button btn

导航栏：nav

菜单栏：tab

图标：icon ico

背景：bg

个人资料：profile

用户：user

头像：avatar

退回：back

刷新：refresh

删除：delete

编辑：edit

图片：image/picture

照片：photo

下载：download

内容：content

广告：banner

主页：home

bg（backgrond 背景）

nav（navbar 导航栏）

tab（tabbar 标签栏）

btn（button 按钮）

img（image 图片）

del（delete 删除）

msg（message 提示信息）

pop（pop up 消息弹出对话框）

refresh（刷新）

icon（图标）

selected（选中）

disabled（不可点击）

default（默认）

pressed（按下）

back（返回）

edit（编辑）

content（内容）

left/center/right（左/中/右）

logo（标识）

login（登录）

banner（广告）

link（链接）

user（用户）

download（下载）

note（注释）

stretch（伸）

shrink（缩）

fold（折叠）

unfold/open（展开）

---

启动界面：

default.png(启动图片)

default_logo.png(启动logo)

登录界面(login)：

login_bg.png(登录背景)

login_logo.png(登录logo)

login_input.png(输入框)

login_input_pre.png(输入框选中状态)

login_btn.png(登录按钮)

login_btn_pre.png(登录按钮选中状态)

导航栏按钮(nav)：

nav_(功能描述).png

如：nav_ment.png\nav_menu_pre.png

按钮命名(btn)：

_normal 正常

_pressed 按下

_selected 选中

_disabled(_inactive) 禁用(不活跃)

_visited 已访问

_hover 悬停

btn_(功能属性或色彩均可).png

如：btn_blue.png/btn_blue.9.png(蓝色按钮)

其它命名：

图示：icon_xxx.png

图片：pic_xxx.png\img_xxx.png

照片：pho_xxx.png

左侧导航：

leftbar_(功能描述).png

如：tab_set.png\nav_set_pre.png(设置)

TabBar(底部选项卡按钮)

tab_(功能描述).png

如：tab_set.png\nav_set_pre.png(设置)

主页命名：

home_(功能属性+描述).png

如：home_menu_recommended.png(热门推荐)

PS：描述可用英文活拼间开头字母组合等。

列表页命名规则：

list_(功能属性+描述).png

如：list_ment_collect.png(页表页收藏按钮)

常用补充描述：

             top(顶)

left(左)  middle(中)  right(右)

           bottom(底)

次数排序：first second…last

位置排序：header(页头) footer(页脚)

（部分内容转自网络文章，后自己归总）