UI设计切图规范指南——命名公式
考虑到平常整理Sketch源文件非常繁琐，有效的命名方式可以大大的提高我们的设计工作效率
UI设计切图规范指南——命名公式
01-通用的切图命名格式：控件_类别_功能_状态@倍率
tab_icon_home_def@2x.png —— 标签栏_图标_主页_默认 default @2x.png）
02-页面的切图命名公式：页面_类别_功能_状态@倍率
mail_icon_search_pre_@2x.png —— 邮件_图标_搜索_点击 pressure @2x.png
03-切图的状态·按钮： 3.1 - 默认状态 nor - normal 普通
3.2 - 点击状态 pre - pressure
3.3 - 不点击状态 dis - dispressure
04-切图的状态·按钮：有阴影的按钮欺辱，可以直接切图没有效果的icon,之后描述清楚有哪些效果；当前端开发人员不好直接实现的（例如：Sketch中高斯模糊的效果），我们也可以运用切片（s）工具来注意全部内容，但是需要注意的是阴影一定要全-40分钟）
05-命名规范：
5.1-导航栏：navigation bar
nav_icon_功能描述_状态描述.png
例：nav_icon_menu.png\nav_icon_menu_pre.png
5.2-标签栏：tab bar
tab_icn_功能描述_状态描述.png
例：tab_icon_power.png\nav_icon_power_pre.png
5.3-工具栏：tool bar
tool_icon_功能描述_状态描述.png
例：tool_icon_add.png\nav_icon_add_pre.png
5.4-启动页：splash sceen
启动icon:
例：tab_icon_power.png\nav_icon_power_pre.png
5.5-登录页：login screen
登录页背景：login_bg_png (login_background)
登录页icon：login_logo.png
登录按钮：login_btn_nor.png (login button)
登录按钮选中状态：login_btn.pre.png (login button)
5.6-主页命名：home_slicing
home_icon_功能描述_状态描述.png
例：home_icon_supermarket.png
5.7-缺省状态：default slicing
home_icon_功能描述_状态描述.png
例：home_icon_goods_default.png
5.8-列表状态：list slicing
list_icon_功能描述_状态描述.png
例：list_icon_bookmark.png
06-命名英文缩写的原则：
字母数不超过8个较长单词去头部的那几个字母，遵循约定成俗的缩写方式
07-英文对照—切图：
7.1-控件：status bar 状态栏
navigation bar 导航栏
tab bar 标签栏
search bar 搜索栏
tool bar 工具栏
button 按钮
edit menus 编辑菜单
labels 标签
segmented controls 分段控件
alert view 提醒视图
popup 弹窗
scanning 扫描
page controls 页面控制器
progress lndicators 页面控制器
activity lndicators 进度指示器
refresh content contools 页面刷新指示器
slider 滑动器
steppers 步进器
switches 开关
text filds 文本框
7.2-页面：login 登录页
register 注册
home 主页
find 发现
explore 发现
activity 活动
management 管理
messages 信息
news 新闻
search results 搜索结果
music 音乐
notes 笔记
calendar 日历
video 视频
settings 设置
weather 天气
contact 联系人
personal center 个人中心
7.3-类别：image 图片
scroll 滚动条
progress进度条
line 线条
icon 图标
tab 标签
tree 树
mask 蒙版
label 静态文本框
checkbox 勾选框
animation 动画
sign 标记
edit 编辑框
combo 下拉框
button 按钮
list 列表
radio 单选框
background 背景
play 播放
7.4-功能：ok 确定
add 添加
uninnstall 卸载
install 安装
select 选择
default 默认
view 查看
search 搜索
more 更多
cancel 取消
delete 删除
pause 暂停
refresh 刷新
close 关闭
download 下载
continue 继续
send 发送
min 最小化
max 最大化
waiting 等待
import 导入
forward 向前
restart 重新开始
menu 菜单
back 后退
update 更新
7.5-常见状态：normal 普通
focused 获取焦点
visited 已访问
default 默认
press 按下
highlight 点击
disabled 选中
hover 悬停
error 错误
complete 完成
blank 空白
08-标注原则：
· 标注时可以按照位置、大小、样式分开标注，方便后续的工作开展，如有需要还要特殊备注；
· 页面元素居中可以不标注
· 通栏宽度不标注
总结：源文件、切图的规范是很好来衡量一个设计师是否对她的工作负责任的表现形式之一，不仅仅提高自己的工作效率，也大大减少了与前端工程师对接时的工作难度，规范的好坏是设计师必须要养成的一种习惯，它会慢慢日积月累的体现在自己的设计中甚至生活中，希望这篇文章能够对酷友们有很好的推动力，学习好英文也是很好的一种技巧哦 ~ 希望能够留下大家的宝贵意见，帮助到大家~ 蟹蟹）
备注：本文参考文章已经链接出来啦，喜欢的多多给赞赞赞！！！蟹蟹
—— 💗 嫣然
