设计规范+切图命名

南京/UI设计师/7年前/811浏览
设计规范+切图命名
徐臻茵
切图规范
一、  切图命名英文缩写的3个原则
<br>1. 较短的单词可通过去掉“元音”形成缩写<br><br>2. 较长的单词可取单词的头部几个字母形成缩写<br><br>3. 还有一些约定俗成的英文单词缩写<br><br><br><br>二、命名规则<br><br>模块_类别_功能_状态.png<br><br>U妹举个栗子:nav_button_search_default.png<br><br>释义为:导航_按钮_搜索_默认.png<br><br><br><br>启动界面:<br><br>启动图片   default.png<br><br>启动logo   default_logo.png<br><br>如:default.png\defoult@2x.png\defauLt-568@2x.png<br><br><br><br>登录界面(login)<br><br>登录背景    login_bg.png <br><br>登录logo   login_logo.png <br><br>输入框       login_input.png <br><br>输入框选中状态       login_input_pre.png <br><br>登录按钮       Login_btn.png<br><br>登录按钮选中状态  Login_btn_pre.png<br><br><br><br>导航栏按钮 (nav) 命名 <br><br>nav_功能描述.png<br><br>如:nav_menu.png\nav_menu_pre.png(同按钮选中前后两种状态命名 )<br><br><br><br>按钮命名(btn可重复使用按钮)<br><br>一般   normal   btn_xxx_normal.png    <br><br>点击  highlight btn_xxx_highlight.png<br><br>不能点击  disabled  btn_xxx_disable.png<br><br>按下  pressed btn_xxx_pressed.png<br><br>选中  selected btn_xxx_selected.png 做为复数选择出现机会不高<br><br>
一、 切图命名英文缩写的3个原则

1. 较短的单词可通过去掉“元音”形成缩写

2. 较长的单词可取单词的头部几个字母形成缩写

3. 还有一些约定俗成的英文单词缩写



二、命名规则

模块_类别_功能_状态.png

U妹举个栗子:nav_button_search_default.png

释义为:导航_按钮_搜索_默认.png



启动界面:

启动图片 default.png

启动logo default_logo.png

如:default.png\defoult@2x.png\defauLt-568@2x.png



登录界面(login)

登录背景 login_bg.png

登录logo login_logo.png

输入框 login_input.png

输入框选中状态 login_input_pre.png

登录按钮 Login_btn.png

登录按钮选中状态 Login_btn_pre.png



导航栏按钮 (nav) 命名

nav_功能描述.png

如:nav_menu.png\nav_menu_pre.png(同按钮选中前后两种状态命名 )



按钮命名(btn可重复使用按钮)

一般 normal btn_xxx_normal.png

点击 highlight btn_xxx_highlight.png

不能点击 disabled btn_xxx_disable.png

按下 pressed btn_xxx_pressed.png

选中 selected btn_xxx_selected.png 做为复数选择出现机会不高

Collect
3
Report
|
30
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
UI设计
UI设计
UI设计
UI设计
作品收藏夹
规范
规范
规范
规范
作品收藏夹
运营Banner
运营Banner
运营Banner
运营Banner
作品收藏夹
规范
规范
规范
规范
作品收藏夹
设计规范
设计规范
设计规范
设计规范
作品收藏夹
UI
UI
UI
UI
作品收藏夹
大家都在看
Log in