ui设计清晰法则图例（UI设计师不知道的切图命名秘籍）

UI的自我修养

APP切图命名

推荐一本书，关于字体设计，也关于设计师。@左佐工作室 的《设计师的自我修养》，他在开篇把设计师按旧时的称谓分为了徒、工、匠、师、家、圣。

来说下我对“徒、工、匠、师、家、圣”理解。

徒——对某行还不是很了解，正处于刚开始学习的阶段，也就是所谓的的菜鸟。

工——巧饰也,象人有规榘也（MLGB，别装逼，说人话）。就是“美工”（你才是美工，你全家都是美工），先别激动。工是指善于某事，可以按照要求或规矩将事情做好的一类人。扪心自问，自己是否达到了美工的要求？

匠——有娴熟的技法，精于某种技术。匠比工更进一步，这个时候你的技法层面已经相当成熟。可以称得上优秀人才。

师——师者，所以传道授业解惑也。师比匠高明不在技法，而在于思想、在于胸襟。因为师不仅具有匠的高超技法，还能够影响身边人或者这个行业。

家——到了家的阶段，就不值得去讨论技法了，因为高超的技法只是他们众多优秀品质的一环而已。这个阶段的设计师，基本可以自成一家，一人顶起一片天了。

圣——自古以来，谁被称为圣人？孔孟知道吧（儒家）？老庄知道吧（道家）？到今天，他们还在影响着我们每一个人。到了这个阶段，就不是人的问题了。是治国平天下，功成身退；是得道成仙、济世救人；是超离三界、普度众生。咳咳...这...扯远了！！！

这是结合自己的认识对境界的一种死板的划分，赞同不赞同，那都很正常，世界这么大，本该百花齐放。（谁反对？站出来，保证不打死你）！

针对命名，基本有两种情况

两倍图：XXX@2x.png

三倍图：XXX@3x.png

不要纠结这么毫无规则的命名。记住，只需要区分下图片是几倍图就行。其他的不需要你管。

一、替换已有切图

这种情况多发生在APP迭代时，以前的版本所有的图片已经都命名好了。前端只需要换个图片就行，并不需要重新命名。这个时候只需要把新设计的图给开发（名称中区分下图片是几倍图就可以），开发自己会复制以前的命名进行图片替换。切忌在不跟开发沟通的情况下盲目切图。因为这种情况本身已经有了图片，设计师只是设计新的图标去替换原来的图标，所以一定要先问清开发这些图标以前的尺寸，然后按照这个尺寸去切图。好了，第一种情况讲完了，结束......

二、新增切图

这种情况多出现在开发一款新的APP时。不管iOS还是Android平台，请记住一个万能的命名公式：模块_类别_功能_状态.png。不管iOS还是Android平台，请记住一个万能的命名公式：模块_类别_功能_状态.png。不管iOS还是Android平台，请记住一个万能的命名公式：模块_类别_功能_状态.png（重要的事要说三遍）。

举个栗子，tab_button_search_normal.png.也可以简写为：tab_but_sea_n.png。（视个人

习惯而定），意思是处于默认状态的标签栏上的搜索按钮。

举个栗子

所有的切图都按照上述的“万能公式”去命名，剩下的就是记几个英文单词的问题了。下面我

把常用的单词都列出来。

注意事项

总结几条命名过程中的注意事项，前方高能预警，请认真学习。

1、Android平台不支持“-”，所以请用“_”作为连接符。

2、按钮一共有四种状态：

normal：正常情况下的状态。

highlighted：突出显示，即用户点击按钮不放时按钮的状态。

selected：选中的状态。

disabled：不可用状态。最典型的栗子就是iPod touch中的拨打电话和发送短信的按钮

其中disabled状态极少出现。在iOS 上开发能在使用者点击按钮时将原图变暗做为点击提示，所以不需要highlight状态下的切图。但Android平台highlight状态下就需要设计并切图。

写在最后

通篇说了这么多，其实就是围绕一个”万能公式“（模块_类别_功能_状态.png）来写，领悟了这个，命名就不会错，不会乱。其它的可以根据自己和团队的习惯去变通。

命名是一个很细小的事情，也许很多人会不屑一顾，但，请记住，每一个伟大的设计都是由无数个细节构成（天下大事，必作于细）。

-----

来源：酷站

作者:追风道长

整理编辑：清水鱼（大鱼怪VS清凝）

【优设投稿：2650232288@qq.com】