移动端切图命名规范整合

切图命名以模块为前缀，如：模块类别功能_状态.png

• 模块：

登陆页面（login） 公共（common） 需求a（need）需求b(demand)
发现（discover） 消息（message） 我（me）

• 类别：

导航栏（nav） 菜单栏（tab）按钮（btn） 图标（icon）
背景图片（bg） 默认图片(def)

• 状态：

selected(选中) disabled(不可点) pressed(按下) normal（一般）

• 命名示列

启动 (default):
default.png启动图片
default_logo.png 启动logo

登陆（login）：
login_bg.png 登陆背景图片
login_logo.png登陆logo
login_input_n.png输入框
login_input_s.png输入框选中状态
login_btn_n.png登录按钮
login_btn_s.png登录按钮选中状态

注册（register）：
login_register_rb_n.png单选框按钮
login_register_rb_s.png单选框按钮选中状态

导航栏（nav）：
common_nav_btn_menu_n.png 菜单按钮
common_nav_btn_menu_s.png菜单按钮选中状态
common_nav_btn_back_n.png 返回按钮
common_nav_btn_back_s.png返回按钮选中状态
common_nav_btn_close_n.png关闭按钮
common_nav_btn_close_s.png关闭按钮选中状态
common_nav_btn_eidt_n.png编辑按钮
common_nav_btn_eidt_s.png 编辑按钮选中状态
common_nav_btn_delete_n.png删除按钮
common_nav_btn_delete_s.png删除按钮选中状态
common_nav_btn_message_n.png 消息按钮
common_nav_btn_message_s.png 消息按钮选中状态
common_nav_btn_search_n.png 搜索按钮
common_nav_btn_search_s.png 搜索按钮选中状态

列表（list）：
hpcollege_list_collect.png 列表页收藏按钮

左侧导航栏（leftbar）
leftbar_info.png个人中心

菜单（tab）：
common_tab_need_n.png 需求a按钮
common_tab_need_s.png 需求a按钮选中状态
common_tab_find_n.png 发现按钮
common_tab_find_s.png 发现按钮选中状态
common_tab_demand_n.png 需求b按钮
common_tab_demand_s.png 需求b按钮选中状态
common_tab_me_n.png 我的按钮
common_tab_me_s.png 我的按钮选中状态

首页（home）：
home_bg.png 首页背景
home_banner.png 首页广告图
点9图（.9）
Rounded rectangle.9.png 圆角矩形

• 常用词语

selected：选中/s
pressed：按下/pre
disabled：不可点/d
normal：正常/n
common：公共
default：登录页
discover：发现
message：消息
me：我
navigation bar：导航栏/nav
tab：菜单栏
button：按钮/btn
icon：图标
background-image：背景图片/bg
default-image：默认图片/def
cut-off rule：分割线/cor
login：登陆
register：注册
list：列表
home：首页
banner：广告
browse：浏览
details：详情
like：喜欢
dislike：不喜欢
search：搜索
content：内容
collect：收藏
eidt：编辑
comment：评论
message：提示信息/msg
ranked：排名
location：定位
tags：标签
left：左
right：右
center：中
popup：弹出/pop
image：图片/img
viedio：视频/vd
audio：音频/ad
title：标题/tit
address：地址/add
number：人数
time：时间
sustem：系统
refresh：刷新
user：用户
more：更多
border：边框
next：下一步
sign：签到
code：密码
clear：清除
scroll：滚动条
hover：鼠标停留
common：公共
hot：热点
zoomin：放大
zoomout：缩小
service：服务
presonal data：个人资料/Pdata
male：男性
female：女性
report：举报
input：输入/ip
dropdown menu：下拉菜单/ddm
radio button：单选框/rb
check box：复选框/cb
progressbar：进度条/pbar
download：下载
arrow：箭头
share：分享
upload：上传
release：发布
tabbar：标签栏
autonym：实名

在实际切图和命名中，要与工程师协调好，哪些需要切，哪些不需要，切单个，还是切整体，以什么样的方式去处理，比较符合双方的习惯，才能提高工作效率，如果你习惯用中文命名，对工程师不会有太大影响那也是可以的。

下面就举个例子

• IOS:
  　　以750*1334为基稿设计，按实际项目开发为标准，需切@2x和@3两套图，把在公共页面里的导航栏中有一个按钮（40x60px）的选中状态切图，直接输出的切图为@2x图，@2x的1.5倍图为@3x。则输出成果为[email protected]（40x60）和[email protected]（80x120）。

• Android：
  　　以720*1280为基稿设计，由于尺寸不同且多样，需要切多套图适配不同机器，分别为mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi，直接输出的切图为xhdpi;它们分别对应的倍数关系为1、1.5、2、3、4。沿用上文例子，则输出成果为common_nav_btn_back_s_mdpi.png(20x30)、common_nav_btn_back_s_hdpi.png(30x45)、common_nav_btn_back_s_xhdpi.png(40x60)、common_nav_btn_back_s_xxhdpi.png(60x90)、common_nav_btn_back_s_xxxhdpi.png(80x120)。