还在给开发欧巴们追着要切图吗?
还在因为切图命名的问题被吐槽吗?
切图切了一大堆之后要用又找不到吗?
这次标叔给各位总监搜罗了一份切图命名大全
妈妈再也不用担心我的切图手艺了
首先为啥要有切图规范这回事呢?
一方面是为了和开发欧巴们更好的协作
我们切出来的图放进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
领取专属 10元无门槛券
私享最新 技术干货