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

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

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

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

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

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

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

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

我们切出来的图放进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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180117G05B2H00?refer=cp_1026

同媒体快讯

相关快讯

扫码关注云+社区