ui切图命名 (ui设计为什么要切图)

关于UI界面的切图命名的规范,严哥觉得关键是在于团队能够有一个统一的规则,所以这里只介绍一种通用的命名规则,当然大家也可以根据自己的实际情况去制定,这里只提供一种方法与思路,分享给各位小伙伴。

我看到过很多小伙伴的切图命名,大多数人和新手是用拼音命名的。

ui界面布局与设计规范,ui设计为什么要切图

还有部分小伙伴更是要逆天了,是这样命名的

ui界面布局与设计规范,ui设计为什么要切图

以汉字命名的,(我和我的小伙伴都惊呆了),严哥很担心你会被开发同事打

拼音的命名方式也是可以用的,但在开发同事眼里,只会显得你很Low,很不专业。

而真正规范的命名是这样子的

ui界面布局与设计规范,ui设计为什么要切图

ui界面布局与设计规范,ui设计为什么要切图

规范的命名方式可以提高开发人员的开发效率和整个开发团队的友好合作。严哥建议要尽可能用最少的字符而又能完整的表达标识符的含义。

一、切图命名英文缩写的3个原则

1. 较短的单词可通过去掉“元音”形成缩写2. 较长的单词可取单词的头部几个字母形成缩写3. 还有一些约定俗成的英文单词缩写4. 所有拼写全为小写英文字母

二、命名规则

ui界面布局与设计规范,ui设计为什么要切图

三、关于切图和切图中问题总结

我还是拿图举例来说明:

ui界面布局与设计规范,ui设计为什么要切图

icon_alipay.png→iPhone 1-3代的手机(已经不考虑了)

icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7对应尺寸,这就是我们通常所说的2倍图

icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸,这就是3倍图

可以简单的理解为倍数关系,如果你使用750x1334px(iPhone 6/6S/7)尺寸做设计稿,那么切片输出就是@2x,缩小2倍就是@1x,扩大1.5倍就是@3x了。

我总结了一些切图中常常遇到的问题:

1、到底哪些资源需要切图,哪些不需要切图?

① 只要是无法用代码来实现和表达出来的,就需要切图② 如果实在不清楚要不要切图,多和开发沟通,他会告诉你哪些是需要你切图的

2、切图需要切几套?① 理论上,我们需要切3套图,是为了更好的适配。② 在实际工作中,iOS只需要切2套图就可以,分别为:@2x和@3x

ui界面布局与设计规范,ui设计为什么要切图

注意:切图是需要注意几点:

① 切图输出格式必须为png24位、png8位、jpg格3种格式

② 同一模块内,切图大小应保持一致

③ 切图输出大小必须保持为偶数

④ 为了减小包的大小,所有切图尽量压缩后在给开发

关于图片压缩的文章我也写过了,你还不知道,请戳下面:

《图片压缩不求人,3个亲测实用高效的图片压缩神器》

四、总结

关于切图命名规范就到这里了,最后还是想和大家说,有什么不懂的、不明白的地方,要多去和开发的同事请教和沟通,这样才能省时省力,事半功倍,更加高效的完成工作。

请私信我回复“666”,为严哥打Call~,还有更多惊喜哦~

.............................................................

UI严选—越努力,越幸运