最为一个UI,我认为PSD源文件图层顺序和命名,也是衡量一个ui专业程度的重要依据,之所以整理这篇,并不是说此类文章在网络上是多么稀缺,只是说我知道自己很需要,特别是针对和我一样英语不好的同学,我认为很合适,当然图层命名本身就是一个很个性化的东西,适合自己的才是最好,同时这里面有些命名同样适合css。
常用图层命名:
APP图层命名:
启动界面:
defoult.png(启动图片)
defoult_logo.png(启动logo)
如:defoult.png\defoult@2x.png为IOS命名
登录页:
login_bg.png(登录背景)
login_logo.png(登录logo)
login_input.png(输入框)
login_input_pre.png(输入框选中状态)
login_btn.png(登录按钮)
login_btn_pre.png(登录按钮选中状态)
PS:android下input、btn、list等图片可以用.9.png格式图片
导航栏:
nav_(功能描述).png
如:nav_menu.png\nav_menu_pre.png(同一按钮选中前后两种状态命名)
PS:同一区域按钮切图大小一致
左导航:
leftbar_(功能描述).png
如tab_set.png\nav_set_pre.png(设置以及选中后状态)
主界面:
home(界面名称)_(功能属性简写+描述).png
如:home_btn_recommended.png(热门推荐)
PS:描述可以凭个人喜好,用英文货拼接开头字母组合等。
部分属性简写:
按钮:btn 按钮文字:btntext 复选框:chb
背景:bg 单选框:rb 下拉:cbb
链入:ip
列表页:
list_(功能属性+描述).png
如:list_menu_collect.png(列表页收藏按钮)
可重复使用的按钮:
btn_(功能属性或色彩均可).png
如:btn_blue.png\btn_blue.9.png(蓝色按钮)
btn_set.png(设置按钮)