提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
自己网络上搜罗总结了一套移动端IOS,Android设计的切片命名总结,大家做实际项目可以直接参照着使用,献给UI设计师新手(老手请飘过~)
切片命名总结
模块_类别_功能_状态.png
或
类别_功能_状态.png
例如: 导航_按钮_搜索_默认.png
nav_button_search_default.png
通用切片命名格式:
组件_类别_功能_状态@2x.png
举例:tabbar_icon_home_default@2x.png
(对应中文:标签栏_图标_主页_默认@2x.png)
模块特有切图命名规则:
模块_类别_功能_状态@2x.png
举例:mail_icon_search_pressed@2x.png
(对应的中文为:邮件_图标_搜索_ 默认@2x.png)
当然这两个例子都是比较基本的情况,有很多时候可能一个单词并不能清楚的描述功能,比如有两个名字相同的搜索图标,大小不一,那这种情况你就可以这样命 名:mail_icon_search_big_default@2x.png,我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称,希望大家 能够活学活用。(大家要注意,命名中不能含有空格!)
UI文件命名规范常用字:
常用状态
_normal正常 _pressed按下 _selected选中 _disabled(_inactive)禁用(不活跃) _visited已访问 _hover悬停
控件&部位(控件:较独立的可操作界面元素)
(部件:描述属于某控件一部分)
statusbar 状态栏
navibar 导航栏 nav
tabbar 标签栏 tab
toolbar 工具栏 tool
切换开关:switch
滑动器:slider
单选框:radio
复选框:checkbox
蒙版/遮罩:mask
列表:list
菜单:ment
过滤:filter
筛选:filtrate
视图:view
面板:panel
薄板:sheet
栏:bar
搜索:search
按钮:button btn
导航栏:nav
菜单栏:tab
图标:icon ico
背景:bg
个人资料:profile
用户:user
头像:avatar
退回:back
刷新:refresh
删除:delete
编辑:edit
图片:image/picture
照片:photo
下载:download
内容:content
广告:banner
主页:home
bg(backgrond 背景)
nav(navbar 导航栏)
tab(tabbar 标签栏)
btn(button 按钮)
img(image 图片)
del(delete 删除)
msg(message 提示信息)
pop(pop up 消息弹出对话框)
refresh(刷新)
icon(图标)
selected(选中)
disabled(不可点击)
default(默认)
pressed(按下)
back(返回)
edit(编辑)
content(内容)
left/center/right(左/中/右)
logo(标识)
login(登录)
banner(广告)
link(链接)
user(用户)
download(下载)
note(注释)
stretch(伸)
shrink(缩)
fold(折叠)
unfold/open(展开)
启动界面:
default.png(启动图片)
default_logo.png(启动logo)
登录界面(login):
login_bg.png(登录背景)
login_logo.png(登录logo)
login_input.png(输入框)
login_input_pre.png(输入框选中状态)
login_btn.png(登录按钮)
login_btn_pre.png(登录按钮选中状态)
导航栏按钮(nav):
nav_(功能描述).png
如:nav_ment.png\nav_menu_pre.png
按钮命名(btn):
_normal 正常
_pressed 按下
_selected 选中
_disabled(_inactive) 禁用(不活跃)
_visited 已访问
_hover 悬停
btn_(功能属性或色彩均可).png
如:btn_blue.png/btn_blue.9.png(蓝色按钮)
其它命名:
图示:icon_xxx.png
图片:pic_xxx.png\img_xxx.png
照片:pho_xxx.png
左侧导航:
leftbar_(功能描述).png
如:tab_set.png\nav_set_pre.png(设置)
TabBar(底部选项卡按钮)
tab_(功能描述).png
如:tab_set.png\nav_set_pre.png(设置)
主页命名:
home_(功能属性+描述).png
如:home_menu_recommended.png(热门推荐)
PS:描述可用英文活拼间开头字母组合等。
列表页命名规则:
list_(功能属性+描述).png
如:list_ment_collect.png(页表页收藏按钮)
常用补充描述:
top(顶)
left(左) middle(中) right(右)
bottom(底)
次数排序:first second…last
位置排序:header(页头) footer(页脚)
(部分内容转自网络文章,后自己归总)
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册