这份切图命名指南，让我和开发们成为了好盆友

还在给开发欧巴们追着要切图吗？

还在因为切图命名的问题被吐槽吗？

切图切了一大堆之后要用又找不到吗？

这次标叔给各位总监搜罗了一份切图命名大全

妈妈再也不用担心我的切图手艺了

首先为啥要有切图规范这回事呢？

一方面是为了和开发欧巴们更好的协作

我们切出来的图放进APP里边去

是要用英文命名的

如果命名不规范

开发们就要自己把一大堆切图重新改名

自然就给对方添麻烦了

另一方面是为了更好的管理自己的设计资源

包括设计的源文件和切图输出

有规则可循的命名

能让我们更快速的找到自己的设计文件

下面进入正题

怎样的切图命名才能和开发成为好盆友

https://dribbble.com/crisssamson

我们在完成设计稿后，在切图输出的环节，就会涉及到切图命名的问题，切图命名通常以模块为前缀，如：模块_类别_功能_状态.png

模块：

登录页面 (login) 公共 (common) 发现 (discover) 消息 (message) 我 (me)

类型：

导航栏 (nav) 菜单栏 (tab) 按钮 (btn) 图标 (icon)

背景图片 (bg) 默认图片 (def)

状态：

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

https://dribbble.com/almigor

命名示例

启动 (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 单选框按钮选中状态

https://dribbble.com/Frannnk

导航栏 (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_find_n.png 发现按钮

common_tab_find_s.png 发现按钮选中状态

common_tab_me_n.png 我的按钮

common_tab_me_s.png 我的按钮选中状态

首页 (home) :

home_bg.png 首页背景

home_banner.png 首页广告图

https://dribbble.com/Ramotion

常用词语

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：背景图片/bg

cut-off rule：分割线/cor

login：登录

register：注册

list：列表

home：首页

banner：广告

browse：浏览

details：详情

like：喜欢

dislike：不喜欢

search：搜索

content：内容

collect：收藏

eidt：编辑

comment：评论

https://dribbble.com/shots/4033660-Student-Date

message：提示信息/msg

ranked：排名

location：定位

tags：标签

left：左

right：右

center：中

popup：弹出/pop

image：图片/img

viedio：视频/vd

audio：音频/ad

title：标题/tit

address：地址/add

number：人数

time：时间

system：系统

refresh：刷新

user：用户

more：更多

border：边框

next：下一步

https://dribbble.com/shots/4036859-Segmented-control-AR-VR

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：标签栏

text：文本

https://dribbble.com/shots/4021735-Marketing-world

切图的工作虽然繁琐，但是对于项目之间的协作起到不容小觑的作用

工作上每个小节点的优化，都是效率的提升

高的效率，自然降低了时间成本

加班少了，皮肤好了，腰也不疼了

简直美滋滋

这里推荐一下Sketch加Zeplin的软件组合

用上Sketch，之后切图什么的就可以放心交给开发同学了

关于Sketch和Zeplin的软件介绍，各位总监们可以看下面的文章链接

或者查看我们的历史文章

- End -

你也许还想看

本文由波普先生原创，如需转载请回复“转载”并取得授权

KEYWORDS