当前位置:新励学网 > 秒知问答 > UI设计中,你们的图层命名规则是怎样的

UI设计中,你们的图层命名规则是怎样的

发表时间:2024-07-09 22:46:55 来源:网友投稿

UI设计中,每一个UI设计师都有自己的独特的图层命名方法。毕竟是给自己的孩儿起名,有自己的专属特色很正常,只要方便自己方便他人就行。

首先明白我们为什么要命名

当然是方便检索啊!如果你突然请假,难道要同事在你铺满图标,让人眼花缭乱的仿佛在走迷宫一样的桌面上找到他想要的文件?那么你可能上班回来的第一天收到的是同事的爆锤!

其次要知道命名的重要性

UI设计师从项目工作一开始的时候,就要对图层、文件夹进行命名,但是我们对接的是开发,还要对切图进行命名,最后就是自我对项目的管理,针对项目的后期迭代更新能够保持设计的高度统一性。到后期图层多到数不清,文件夹多到眼冒金星,没有一套条理清楚、逻辑清晰的命名方法,最后只会原地蒙圈。

而且基本所有互联网公司,项目文件全部云同步,,所以你还以为命名只是一件不足挂齿的小事吗?醒醒!把你的小明小红小张小李的乱七八糟的命名方式收一收啦,别臊皮啦!

最后网上所有的命名规范,都是基于撰写人本人的习惯,每个人的习惯是不同的,所使用的系统是不同的,上传的公用云盘等都是有不同的。只有当你明白这样的命名规范到底是要解决什么样的问题时,是否还有更加简单的解决方式?并不是直接套用别人的规范,这样对我们的工作以及专业技能才会有更好的帮助。

整理了一下命名规范小技巧,同学们可以做个参考~

一、画板命名在UI设计中,每个画板对应一个界面,很多中小项目画板数大概在十个以下,所以我们的命名就比较简单,需要规避错误,让名称更加条例清楚就行。

通用公式:模块(项目名)_一级分类_二级分类_状态

1.该界面层级最高,我们只需要非常简单的命名:

举例:淘宝(项目名)_首页

2.该界面层级不是最高的时候,我们需要再补充一个层级名称:

举例:淘宝_首页_搜索

二、切图命名一定要明白切图的服务对象是开发小哥哥,所以还是要照顾一下他们,意思意思一下嘛,而且一旦他们要切图的时候,麻烦请快准狠,不要拖拖拉拉,不然他们自己上手就给你切了。

通用公式:组件_类别_功能_状态@2x.png

举例:tabbar_icon_home_default@2x.png

这里的还需要知道:

1.英文命名请小写,因为有些开发语音无法识别大小写的文件,开发遇到大写也自动切到小写。

2.切图请用分隔符_”而不是“/”,“/”符号是用来分级的,只适用于我们在软件中管理图标使用,不要命名在切图上

3.不要有空格

4.不要以为自己的英文命名具有普适性!一定要和开发人员及时沟通!

5.命名层级越简单越好!

三、图层命名图层命名特意放到切图命名以后,是因为这个部分是非常杂乱的。我们对图层的命名原则是建立在切图命名以上的,保证导出的时候最好不要对切图文件有额外的更改。

因为图层需要根据它的自身属性来命名,这里需要清楚的掌握基本的英文词汇以及缩写,来加快沟通的效率。

四、组的命名从高效的工作角度来讲,技术在发展嘛,零散的图层命名只要清楚就行,不需要花费我们很多的时间,大部分的图层都形成了组,所以组的命名才是我们需要重点掌握的对象。

公式:一级组/二级组/三级组

这里不在单独列出PS、sketch/AdobeXD的命名,这俩必须得单开写一篇文章呀~

命名对于我们UI来讲,最考验的还是我们的逻辑思维能力,以及大局的部署能力还要有共情思维能力,毕竟是一个团队协作的项目呀,还是一句话——方便自己,方便他人。

注:本文部分内容来自微信公众号“阿多比学院”,首发链接:网页链接,如需转载请务必获得授权并标明出处。

免责声明:本站发布的教育资讯(图片、视频和文字)以本站原创、转载和分享为主,文章观点不代表本网站立场。

如果本文侵犯了您的权益,请联系底部站长邮箱进行举报反馈,一经查实,我们将在第一时间处理,感谢您对本站的关注!