UI设计师应该知道的命名规范

很多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(内容)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

awayaya1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值