很多UI设计师对于“命名”是没什么概念的,他们都是随随便便地用一些没有特定意思的字母去给页面命名,这是不好的。
因为统一的、规范的命名更易于整理,后期修改文件、图层的时候更加方便快捷,而且规范的命名也显得我们自身比较专业。
SooUI(搜UI)为Ui设计师、UE创意交互和程序员提供高质量UI设计资源,分享UI设计相关的设计规范,同时建议大家每个星期完成一个主题的作品临摹,以提高自己的设计水平。
而且,如果如果命名不统一,团队之间的成员很难达成共识,任务交接时需要很大的学习成本。
而更重要的是,统一的、规范的命名对程序开发来说十分省时,能减少很多不必要的沟通与重复切图的概率。
程序员完全可以直接使用的我们切片而不更改切片的名称,后期我们更换切图,只要切片名称不变,开发看都不用看直接替换就可以了。
1、所有命名全部为小写英文字母
在程序员的代码里只有小写的英文字母,如果你给出的命名全是中文的,那么他们是一定会更改的,所以命名全部用小写的英文字母是最基本的规则。
有些人会觉得写这么多英文太麻烦,但其实为了自己专业能力的提高,这种规范的命名方式是必须要经历的过程,当你习惯了这样的命名方式后,你的成就感会油然而生。
2、命名格式
一个大型项目会分很多模块,每位设计师独立负责其中的一个part,还有人会专门管理公共的组件,如tabbar、navbar等等,这种情况下就会分为两种切图,一种是通用类型的切图,还有一种就是各个模块特有的切图。
通用切片命名格式:
组件_类别_功能_状态@2x.png
举例:tabbar_icon_home_default@2x.png(对应中文:标签栏_图标_主页_默认@2x.png)
模块特有切图命名规则:
模块_类别_功能_状态@2x.png
举例:mail_icon_search_pressed@2x.png(对应的中文为:邮件_图标_搜索_默认@2x.png)
我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称。(要注意,命名中不能含有空格)
3、常用英文单词
如果所有命名都写为全称,名字就会特别长,所以我们可以将一些常用的英文单词进行缩写,减少工作成本与开发代码资源。
至于怎么缩写,只要整个团队能够达成共识并且输出一份缩写清单,任何缩写规则都是可以的。
下面提供一些命名时常用的英文单词列表:
bg(backgrond 背景)
nav(navbar 导航栏)
tab(tabbar 标签栏)
btn(button 按钮)
img(image 图片)
del(delete 删除)
msg(message 提示信息)
pop(pop up 弹出)
icon(图标)
selected(选中)
disabled(不可点击)
default(默认)
pressed(按下)
back(返回)
edit(编辑)
content(内容)
UI设计师应该知道的命名规范
最新推荐文章于 2024-07-29 09:30:51 发布