人生好短,可是活着的时间还长!

UI专业图层命名

减肥中的番茄丸:

最为一个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(设置按钮)


评论
热度(21)
  1. R.X减肥中的番茄丸 转载了此文字
  2. 龙庆玉减肥中的番茄丸 转载了此文字
  3. 郑志强_PM减肥中的番茄丸 转载了此文字

© R.X | Powered by LOFTER